/* Gemeinsames Stylesheet fuer index.html und fotos.html.
   Aus index.html ausgelagert, damit beide Seiten identisch aussehen. */

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #0CC4C4;
    --primary-rgb: 12,196,196;
    --primary-deep: #0E7490;
    --primary-dark: #0A9E9E;
    --dark: #1d1d1f;
    --gray-900: #1d1d1f;
    --gray-800: #2d2d2f;
    --gray-600: #6e6e73;
    --gray-400: #a1a1a6;
    --gray-200: #d2d2d7;
    --gray-100: #f5f5f7;
    --white: #ffffff;
    --gold: #d4a843;
    --accent-red: #ff3b30;
    --accent-green: #34c759;
    --accent-blue: #0CC4C4;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 4px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

body {
    /* Zuerst die Apple-Systemschrift (San Francisco) - auf Mac, iPhone und
       iPad genau die Schrift, die Apple selbst verwendet. Inter ist der
       Ersatz auf Windows/Android: praktisch dieselben Formen, damit die
       Seite ueberall gleich aussieht. */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--dark);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: var(--transition);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--dark);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-logo .logo-icon {
    width: 28px;
    height: 28px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 900;
}

.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--gray-600);
    font-size: 0.82rem;
    font-weight: 500;
    transition: var(--transition);
    letter-spacing: -0.01em;
}

.nav-links a:hover { color: var(--dark); }

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

.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.nav-dropdown > a::after {
    content: '';
    width: 4px;
    height: 4px;
    border-right: 1.5px solid var(--gray-600);
    border-bottom: 1.5px solid var(--gray-600);
    transform: rotate(45deg);
    transition: var(--transition);
    margin-top: -2px;
}

.nav-dropdown:hover > a::after {
    border-color: var(--dark);
    transform: rotate(-135deg);
    margin-top: 2px;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-menu-inner {
    background: rgba(255,255,255,0.99);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 8px;
    min-width: 180px;
}

.nav-dropdown-menu-inner a {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-800);
    transition: var(--transition);
}

.nav-dropdown-menu-inner a:hover {
    background: var(--gray-100);
    color: var(--dark);
}

.nav-cta {
    background: var(--primary);
    color: white !important;
    padding: 7px 18px;
    border-radius: 980px;
    font-size: 0.82rem !important;
    font-weight: 500;
    transition: var(--transition);
}

.nav-cta:hover { background: var(--primary-dark); }

/* Ganz oben ueber dem Hero-Foto: Leiste transparent, Schrift weiss.
   Standard bleibt die weisse Leiste – faellt JS aus, ist alles lesbar. */
.nav.at-top {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

.nav.at-top .nav-logo { color: #fff; }
/* nur die obersten Menuepunkte - nicht die Eintraege im Klappmenue,
   die stehen auf hellem Grund und muessen dunkel bleiben */
.nav.at-top .nav-links > li > a { color: rgba(255,255,255,0.9); }
.nav.at-top .nav-links > li > a:hover { color: #fff; }
.nav.at-top .nav-cta { color: #06212a !important; }
.nav.at-top .hamburger span { background: #fff; }

/* Pfeil des Klappmenues ueber dem Foto */
.nav.at-top .nav-dropdown > a::after { border-color: rgba(255,255,255,0.9); }
.nav.at-top .nav-dropdown:hover > a::after { border-color: #fff; }

/* Eintraege im Klappmenue immer dunkel auf hellem Grund */
.nav.at-top .nav-dropdown-menu-inner a { color: var(--gray-600); }
.nav.at-top .nav-dropdown-menu-inner a:hover { color: var(--dark); }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: var(--transition);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    z-index: 999;
    padding: 40px 24px;
}

.mobile-menu.active { display: flex; flex-direction: column; gap: 8px; }

.mobile-menu a {
    text-decoration: none;
    color: var(--dark);
    font-size: 1.4rem;
    font-weight: 600;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
    display: block;
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
    position: relative;
    overflow: hidden;
    background: #0b2226;
}

/* Vollflaechiges Hintergrundfoto */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    animation: heroZoom 24s ease-out forwards;
}

/* Langsames Heranfahren beim Laden */
@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

/* Abdunkelung, damit die Schrift lesbar bleibt */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 50% 45%, rgba(6,26,30,0.5) 0%, transparent 100%),
        linear-gradient(180deg, rgba(6,26,30,0.6) 0%, rgba(6,26,30,0.3) 40%, rgba(6,26,30,0.78) 100%);
}

.hero-content { max-width: 900px; position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primary-rgb),0.08);
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 980px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 28px;
    letter-spacing: 0.02em;
}

.hero-badge .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--dark);
    margin-bottom: 20px;
}

.hero h1 .gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.5;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 980px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    letter-spacing: -0.01em;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb),0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--gray-200);
}

.btn-secondary:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--gray-200);
}

.hero-stat {
    text-align: center;
    padding: 0 20px;
    border-right: 1px solid var(--gray-200);
}

.hero-stat:last-child { border-right: none; }

.hero-stat .number {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.03em;
    line-height: 1;
}

.hero-stat .label {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin-top: 8px;
    font-weight: 500;
}

/* --- Hero auf dunklem Foto: Schrift und Linien aufhellen --- */
.hero h1 {
    color: #fff;
    text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}

/* nur background-image – ein background-Shorthand wuerde
   background-clip: text der Basisregel zuruecksetzen */
.hero h1 .gradient {
    background-image: linear-gradient(135deg, #4ff0f0 0%, var(--primary) 100%);
}

/* --- Vereinslogo als Ueberschrift --- */
/* Das h1 traegt kein Textkind mehr; der Name steht im alt-Text des Bildes.
   line-height: 0 nimmt den Zeilenkasten weg, sonst sitzt unter dem Logo
   noch der Durchschuss der geerbten Schriftgroesse. */
.hero-wordmark {
    margin: 0 0 34px;
    line-height: 0;
    text-shadow: none;
}

.hero-wordmark img {
    display: block;
    margin: 0 auto;
    /* Der vw-Anteil greift nur unterhalb von ~780px Fensterbreite, darueber
       deckelt der Hoechstwert. Die Untergrenze ist so gewaehlt, dass auch
       auf einem 320px-Bildschirm links und rechts Luft bleibt. */
    width: clamp(240px, 72vw, 560px);
    height: auto;
    /* Zwei Schatten: ein enger zeichnet die Kontur der Pinselstriche nach,
       ein weiter setzt das Logo vom Foto ab. Die Striche sind duenner als
       die fruehere fette Schrift und brauchen ueber der hellen Wiese
       etwas mehr Halt. */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.34))
            drop-shadow(0 4px 30px rgba(0,0,0,0.5));
}

.hero p {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

.hero .btn-primary { color: #06212a; }

.hero .btn-secondary {
    color: #fff;
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero .btn-secondary:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.16);
}

.hero-stats { border-top-color: rgba(255,255,255,0.25); }
.hero-stat { border-right-color: rgba(255,255,255,0.25); }
.hero-stat .number { color: #fff; }
.hero-stat .label { color: rgba(255,255,255,0.78); }

/* Scroll-Hinweis am unteren Bildrand */
.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.hero-scroll .arrow {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
    animation: scrollHint 2.2s ease-in-out infinite;
}

@keyframes scrollHint {
    0%, 100% { opacity: 0.25; transform: translateY(-4px); }
    50%      { opacity: 1;    transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg img { animation: none; }
    .hero-scroll .arrow { animation: none; }
}

@media (max-width: 768px) {
    /* Der Hero ist hier hoeher als der Bildschirm – der Hinweis
       wuerde sonst ueber den Zahlen liegen. */
    .hero-scroll { display: none; }

    /* Unten liegt die Sandgrube: staerker abdunkeln, sonst
       sind die Kennzahlen nicht lesbar. */
    .hero-bg::after {
        background:
            radial-gradient(ellipse 85% 40% at 50% 28%, rgba(6,26,30,0.5) 0%, transparent 100%),
            linear-gradient(180deg, rgba(6,26,30,0.62) 0%, rgba(6,26,30,0.35) 26%, rgba(6,26,30,0.88) 62%, rgba(6,26,30,0.93) 100%);
    }
}

/* ===== SECTIONS ===== */
section { padding: 120px 24px; }

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.section-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 16px;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--gray-600);
    line-height: 1.6;
}

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

/* ===== ABOUT / PHILOSOPHIE ===== */
.about { background: var(--white); }

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-visual {
    position: relative;
}

.about-photo {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 62% center;
}

/* Kleine Karte, die halb ueber dem Foto sitzt */
.about-float-card {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-sm);
    padding: 14px 22px;
    box-shadow: var(--shadow-lg);
    text-align: right;
}

.about-float-card strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--primary-deep);
}

.about-float-card span {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gray-600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    /* sonst sitzt die Karte genau auf der Bildschirmkante */
    .about-float-card { right: 0; bottom: -16px; }
}

.about-text h2 {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    line-height: 1.15;
}

.about-text p {
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}

.about-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    transition: var(--transition);
}

.about-feature:hover {
    border-color: rgba(var(--primary-rgb),0.5);
    box-shadow: 0 6px 24px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* Strichgrafik statt Emoji – Farbe kommt ueber currentColor.
   primary-deep statt primary, weil duenne Linien in Tuerkis
   auf Weiss zu schwach waeren. */
.about-feature .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--primary-deep);
    margin-top: 1px;
}

.about-feature .icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-feature h4 {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}

.about-feature p {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.45;
}

/* ===== ERFOLGE / ACHIEVEMENTS ===== */
.achievements {
    background: var(--gray-900);
    color: white;
}

.achievements .section-label { color: var(--gold); }
.achievements .section-title { color: white; }
.achievements .section-desc { color: var(--gray-400); }

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.achievement-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 40px 32px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.achievement-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.15);
}

.achievement-card .number {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold) 0%, #f0d78c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}

.achievement-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.achievement-card p {
    color: var(--gray-400);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ===== ATHLETEN ===== */
.athletes { background: var(--gray-100); }

.athlete-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.athlete-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid transparent;
}

.athlete-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-200);
}

.athlete-avatar {
    width: 100%;
    height: 240px;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

.athlete-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(255,255,255,0.8));
    pointer-events: none;
}

/* Foto in der Karte */
.athlete-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.athlete-card:hover .athlete-avatar img { transform: scale(1.05); }

/* Platzhalter: Initialen, solange kein Foto hinterlegt ist */
.athlete-avatar--leer {
    background: linear-gradient(150deg, rgba(var(--primary-rgb),0.16) 0%, rgba(14,116,144,0.2) 100%);
}

.athlete-initialen {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary-deep);
    opacity: 0.75;
}

.athlete-card { cursor: pointer; }

.athlete-info {
    padding: 24px;
}

.athlete-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.athlete-info .discipline {
    font-size: 0.82rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.athlete-info .highlight {
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.athlete-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--primary-rgb),0.08);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 8px;
}

/* ===== TRAINER ===== */
.trainers { background: white; }

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

/* Trainerkarten sind bewusst als Datenblatt gestaltet - eckiges Foto,
   Haarlinien, Werte in Beschriftung/Wert-Paaren. Dadurch klar von den
   Athletenkarten (grosses Foto, rund, farbig) zu unterscheiden. */
.trainer-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 26px 26px 22px;
    transition: var(--transition);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.trainer-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 26px;
    right: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-deep);
    opacity: 0;
    transition: var(--transition);
}

.trainer-card:hover {
    border-color: var(--gray-400);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.trainer-card:hover::before { opacity: 1; }

.trainer-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

/* eckiges Portrait statt rundem Athletenfoto */
.trainer-avatar {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: linear-gradient(150deg, var(--gray-100) 0%, rgba(14,116,144,0.14) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-deep);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
}

.trainer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.trainer-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.trainer-role {
    font-size: 0.82rem;
    color: var(--primary-deep);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 5px;
}

/* Datenblatt */
.trainer-daten {
    border-top: 1px solid var(--gray-200);
    margin-top: auto;
    padding-top: 4px;
}

.trainer-datenzeile {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 10px 0;
    align-items: baseline;
}

.trainer-datenzeile + .trainer-datenzeile { border-top: 1px solid rgba(0,0,0,0.05); }

.trainer-datenzeile dt {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    line-height: 1.5;
}

.trainer-datenzeile dd {
    font-size: 0.83rem;
    color: var(--gray-800);
    line-height: 1.45;
    margin: 0;
}

.trainer-desc {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: 18px;
}

.trainer-leer {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gray-600);
    padding: 50px 20px;
}

.trainer-cta { text-align: center; margin-top: 40px; }

/* ===== KINDER ZEHNKAMPF ===== */
.kinder {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.kinder::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.kinder .section-label { color: rgba(255,255,255,0.7); }
.kinder .section-title { color: white; }
.kinder .section-desc { color: rgba(255,255,255,0.8); }

.kinder-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.kinder-disciplines {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.discipline-item {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
}

.discipline-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateX(4px);
}

.discipline-item .emoji { font-size: 1.4rem; }
.discipline-item span { font-size: 0.88rem; font-weight: 500; }

.kinder-text h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.kinder-text p {
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin-bottom: 16px;
}

.kinder-highlight {
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    margin-top: 24px;
    border-left: 3px solid var(--gold);
}

.kinder-highlight strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.kinder-highlight span {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
}

/* ===== TIMELINE / GESCHICHTE ===== */
.history { background: var(--gray-100); }

.timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    position: relative;
}

.timeline-dot {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: white;
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--primary);
    flex-shrink: 0;
    z-index: 1;
}

.timeline-content {
    background: white;
    border-radius: var(--radius-sm);
    padding: 24px;
    flex: 1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.timeline-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.timeline-content p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* Letzter Knoten: die Zeitleiste endet nicht, sie fuehrt zur
   Vereinsgeschichte weiter. Deshalb ein Pfeil statt einer Jahreszahl
   und eine Karte, die sich beim Ueberfahren anhebt. */
.timeline-item--weiter {
    text-decoration: none;
    color: inherit;
    margin-bottom: 0;
}

.timeline-item--weiter .timeline-dot {
    border-color: var(--primary);
    background: var(--primary);
    transition: var(--transition);
}

.timeline-item--weiter .timeline-dot svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: var(--transition);
}

.timeline-item--weiter .timeline-content {
    border: 1px solid transparent;
    transition: var(--transition);
}

.timeline-item--weiter:hover .timeline-content {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.09);
    border-color: rgba(var(--primary-rgb),0.35);
}

.timeline-item--weiter:hover .timeline-dot {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
}

.timeline-item--weiter:hover .timeline-dot svg { transform: translateX(2px); }

.timeline-weiter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--primary-deep);
}

.timeline-weiter::after {
    content: '→';
    transition: var(--transition);
}

.timeline-item--weiter:hover .timeline-weiter::after { transform: translateX(3px); }

/* ===== NEWS ===== */
.news { background: white; }

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

.news-card {
    background: var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

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

.news-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.news-body {
    padding: 24px;
}

.news-date {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.news-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.news-body p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 12px;
    transition: var(--transition);
}

.news-link:hover { gap: 10px; }

/* ===== SPONSOREN ===== */
/* Weiss statt Grau: Der Geschichte-Abschnitt darueber ist grau, beide
   wuerden sonst ineinanderlaufen. Der Innenabstand entspricht jetzt dem
   der uebrigen Abschnitte (120 px) statt der frueheren 80 px, damit der
   Rhythmus der Startseite stimmt. Die Haarlinie unten trennt vom
   ebenfalls weissen Kontaktbereich. */
.sponsors {
    background: var(--white);
    padding: 120px 24px;
    border-bottom: 1px solid var(--gray-200);
}

.sponsor-vorspann {
    max-width: 56ch;
    margin: -4px auto 44px;
    text-align: center;
}

.sponsor-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Weisse Kachel mit Haarlinie: Zwei der Logos bringen einen weissen
   Hintergrund mit. Auf einer weissen Kachel verschwindet der, auf einer
   grauen stuende ein sichtbares Rechteck um das Logo. */
.sponsor-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    height: 124px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.sponsor-item:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.09);
}

.sponsor-logo {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Die Hoehen sind einzeln gesetzt, nicht einheitlich: ein breites
   Wortbild und ein runder Kreis wirken bei gleicher Hoehe unterschiedlich
   gross. Diese Werte gleichen das optisch aus. */
.sponsor-logo--tgw        { max-height: 54px; }
.sponsor-logo--sportunion { max-height: 46px; }
.sponsor-logo--ooe        { max-height: 68px; }
.sponsor-logo--oelv       { max-height: 52px; }

/* ===== KONTAKT ===== */
.contact { background: white; }

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

.contact-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.contact-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: var(--gray-100);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-item strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.contact-item span, .contact-item a {
    font-size: 0.88rem;
    color: var(--gray-600);
    text-decoration: none;
}

.contact-item a:hover { color: var(--primary); }

.contact-persons {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--gray-200);
}

.contact-persons h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.person-card {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.person-card .name {
    font-weight: 600;
    font-size: 0.92rem;
}

.person-card .role {
    font-size: 0.78rem;
    color: var(--gray-600);
}

.person-card .phone {
    font-size: 0.82rem;
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

/* Contact Form */
.contact-form {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 40px;
}

.contact-form h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.2;          /* fuer alle drei gleich - sonst wird das
                                  Auswahlfeld zwei Pixel hoeher als ein Feld */
    color: var(--dark);
    background: white;
    transition: var(--transition);
    outline: none;
}

/* Auswahlfelder sehen sonst wie Systemelemente aus: eigene Hoehe, eigener
   Pfeil, eigene Schrift. Hier bekommen sie exakt die Huelle der Textfelder
   und einen schlichten Haken als Pfeil. */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* Solange nichts gewaehlt ist, liest sich der Eintrag wie ein Platzhalter
   im Textfeld daneben - gesetzt von assets/kontakt.js. */
.form-group select.ist-leer { color: var(--gray-400); }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.1);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--gray-900);
    color: white;
    padding: 60px 24px 30px;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.footer-brand p {
    color: var(--gray-400);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 300px;
}

.footer-col h4 {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    color: var(--gray-400);
}

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

.footer-col ul li { margin-bottom: 10px; }

.footer-col ul a {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.88rem;
    transition: var(--transition);
}

.footer-col ul a:hover { color: white; }

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p {
    color: var(--gray-400);
    font-size: 0.78rem;
}

/* Rechtszeile und Urheberzeile stehen untereinander, damit die Fusszeile
   auch auf dem Handy nicht in eine lange Wurst zerfaellt. */
.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Der Hinweis auf die Agentur soll da sein, aber der Verein bleibt vorne:
   eine Spur kleiner und dunkler als die Rechtszeile darueber. */
.footer-bottom .footer-credit {
    font-size: 0.74rem;
    color: #7d7d84;
    letter-spacing: 0.01em;
}

.footer-credit span {
    color: var(--gray-400);
    font-weight: 500;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary);
    color: white;
}

/* Das Symbol ist ein SVG und erbt die Farbe des Links (currentColor),
   faerbt sich beim Ueberfahren also von selbst mit um. */
.footer-social svg { display: block; }

/* ===== FOTOS ===== */
.fotos { background: var(--gray-100); }

.foto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.foto-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
    cursor: pointer;
    transition: var(--transition);
}

.foto-card.tall { grid-row: span 2; aspect-ratio: auto; }

.foto-card:hover {
    box-shadow: var(--shadow-lg);
}

.foto-card {
    display: block;
    text-decoration: none;
}

.foto-card picture,
.foto-card img {
    width: 100%;
    height: 100%;
    display: block;
}

.foto-card img {
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.foto-card:hover img { transform: scale(1.05); }

.foto-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    opacity: 0;
    transition: var(--transition);
}

.foto-card:hover .foto-overlay { opacity: 1; }

.foto-overlay h4 { font-size: 0.92rem; font-weight: 600; }
.foto-overlay span { font-size: 0.78rem; opacity: 0.8; }

.foto-cta {
    text-align: center;
    margin-top: 32px;
}

.foto-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.foto-cta a:hover { gap: 12px; }

/* ===== TRAINING ===== */
.training { background: white; }

.training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.training-card {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 32px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.training-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.training-card:hover::before { transform: scaleX(1); }

.training-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.training-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb),0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.training-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.training-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
}

.training-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.training-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--gray-600);
}

.training-detail .label {
    font-weight: 600;
    color: var(--dark);
    min-width: 40px;
}

/* ===== STATISTIK ===== */
.statistik {
    background: var(--dark);
    color: white;
    position: relative;
    overflow: hidden;
}

.statistik::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(var(--primary-rgb),0.15) 0%, transparent 70%);
    pointer-events: none;
}

.statistik .section-label { color: rgba(255,255,255,0.5); }
.statistik .section-title { color: white; }
.statistik .section-desc { color: rgba(255,255,255,0.7); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}

.stat-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
}

.stat-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.stat-sublabel {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

.statistik-cta {
    text-align: center;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.statistik-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 28px;
    border-radius: 980px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.statistik-cta a:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

/* ===== ANIMATIONS ===== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Counter animation */
.count-up { transition: all 0.3s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .achievement-grid { grid-template-columns: repeat(2, 1fr); }
    .athlete-grid { grid-template-columns: repeat(2, 1fr); }
    .trainer-grid { grid-template-columns: repeat(2, 1fr); }
    .kinder-content { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .foto-grid { grid-template-columns: repeat(2, 1fr); }
    .training-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }

    .hero h1 { font-size: 2.6rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .hero-stat { border-right: none; padding: 12px 0; }
    .hero-stat .number { font-size: 2rem; }

    section { padding: 80px 20px; }

    .achievement-grid { grid-template-columns: 1fr; }
    /* zweispaltig statt einspaltig: bei acht Athleten sonst zu viel Scrollen */
    .athlete-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .athlete-grid .athlete-info { padding: 16px; }
    .athlete-grid .athlete-avatar { height: 180px; }
    .trainer-grid { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .about-features { grid-template-columns: 1fr; }
    .kinder-disciplines { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 24px; }
    .foto-grid { grid-template-columns: 1fr; }
    .foto-card.tall { grid-row: span 1; aspect-ratio: 4/3; }
    .training-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }

    .sponsors { padding: 80px 16px; }
    .sponsor-vorspann { margin-bottom: 32px; }
    .sponsor-logos { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sponsor-item { height: 104px; padding: 18px 20px; }
    .sponsor-logo--tgw        { max-height: 44px; }
    .sponsor-logo--sportunion { max-height: 38px; }
    .sponsor-logo--ooe        { max-height: 56px; }
    .sponsor-logo--oelv       { max-height: 42px; }
}

@media (max-width: 480px) {
    .hero { padding: 100px 16px 60px; }
    .hero h1 { font-size: 2.2rem; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .btn { width: 100%; justify-content: center; }
}

/* ===== SCROLL TO TOP ===== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
    z-index: 100;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb),0.3);
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--primary-dark);
    transform: translateY(-4px);
}

/* ===== COOKIE NOTICE (just visual placeholder) ===== */
.cookie-notice {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 480px;
    background: white;
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    display: none;
    border: 1px solid var(--gray-200);
}

.cookie-notice.active { display: flex; gap: 16px; align-items: center; }

.cookie-notice p { font-size: 0.82rem; color: var(--gray-600); flex: 1; }

.cookie-btn {
    padding: 8px 20px;
    border-radius: 980px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary);
    color: white;
    white-space: nowrap;
    font-family: inherit;
}

/* ===== GALERIE-SEITE (fotos.html) ===== */
.galerie-page { padding: 140px 24px 100px; }

.galerie-head {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.galerie-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 16px;
}

.galerie-head p {
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.55;
}

.galerie-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    gap: 14px;
}

.galerie-item {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--gray-100);
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    border: none;
    padding: 0;
    display: block;
    width: 100%;
}

/* Kachelgroesse nach Bildqualitaet: je hoeher die Aufloesung,
   desto groesser darf ein Foto dargestellt werden. Schwache
   Vorlagen bleiben klein und werden nie hochskaliert. */
.galerie-item--feature { grid-column: span 2; grid-row: span 2; }
.galerie-item--wide    { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Fotos mit schwacher Aufloesung: kleiner dargestellt, mit Passepartout
   statt formatfuellend. So werden sie nie ueber ihre native Groesse
   hinaus aufgeblasen. */
.galerie-item--small {
    background: var(--gray-100);
    padding: 17%;
}

.galerie-item--small img {
    object-fit: contain;
    border-radius: 4px;
}

.galerie-item--small figcaption { padding: 24px 12px 10px; }

.galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.galerie-item:hover img,
.galerie-item:focus-visible img { transform: scale(1.04); }

.galerie-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    letter-spacing: -0.01em;
    opacity: 0;
    transition: var(--transition);
}

.galerie-item:hover figcaption,
.galerie-item:focus-visible figcaption { opacity: 1; }

.galerie-item:focus-visible {
    outline: 2px solid var(--primary-deep);
    outline-offset: 3px;
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6,26,30,0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 72px 24px 88px;
}

.lightbox.active { display: flex; }

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.lightbox-caption {
    position: absolute;
    bottom: 34px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,0.82);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 24px;
}

.lightbox-btn {
    position: absolute;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.lightbox-btn:hover { background: rgba(255,255,255,0.22); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 980px) {
    .galerie-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .galerie-page { padding: 110px 16px 72px; }
    .galerie-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .galerie-item--feature { grid-column: span 2; grid-row: span 2; }
    .galerie-item--wide { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; }
    .galerie-item--small { padding: 12%; }
    .galerie-item { border-radius: 12px; }
    .galerie-item figcaption { font-size: 0.72rem; padding: 22px 10px 10px; }
    .lightbox { padding: 64px 12px 76px; }
    .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .galerie-item img { transition: none; }
    .galerie-item:hover img { transform: none; }
}

/* Aktueller Menuepunkt (nur auf Unterseiten gesetzt) */
.nav-links a.aktiv { color: var(--dark); font-weight: 600; }
.nav.at-top .nav-links a.aktiv { color: #fff; }

/* ===== DYNAMISCHE NEWS (Startseite) ===== */
.news-image { position: relative; overflow: hidden; }

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Platzhalter, wenn eine Meldung kein Bild hat */
.news-image--leer {
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.14) 0%, rgba(14,116,144,0.18) 100%);
}

.news-image--leer::after {
    content: '';
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb),0.35);
}

.news-card { cursor: pointer; }

/* ===== ARTIKEL-ANSICHT (Modal auf der Startseite) ===== */
.artikel-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6,26,30,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none;
    overflow-y: auto;
    padding: 48px 16px;
}

.artikel-modal.active { display: block; }

.artikel-box {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    position: relative;
}

.artikel-schliessen {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(29,29,31,0.55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
}

.artikel-schliessen:hover { background: rgba(29,29,31,0.8); }

.artikel-cover img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
}

.artikel-body { padding: 36px 40px 44px; }

.artikel-body .artikel-datum {
    font-size: 0.78rem;
    color: var(--primary-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.artikel-body h1 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 18px;
}

.artikel-text { color: var(--gray-800); line-height: 1.65; font-size: 0.98rem; }
.artikel-text p { margin-bottom: 14px; }
.artikel-text h2 { font-size: 1.3rem; font-weight: 700; margin: 24px 0 10px; letter-spacing: -0.01em; }
.artikel-text h3 { font-size: 1.08rem; font-weight: 700; margin: 20px 0 8px; }
.artikel-text ul, .artikel-text ol { margin: 0 0 14px 22px; }
.artikel-text li { margin-bottom: 4px; }
.artikel-text a { color: var(--primary-dark); }
.artikel-text img { max-width: 100%; border-radius: var(--radius-sm); margin: 10px 0; }

@media (max-width: 640px) {
    .artikel-modal { padding: 0; }
    .artikel-box { border-radius: 0; min-height: 100vh; }
    .artikel-body { padding: 28px 20px 40px; }
}

/* ===== ADMIN-DASHBOARD ===== */
.admin-body {
    background: var(--gray-100);
    min-height: 100vh;
}

.admin-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.admin-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-nav-titel { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; }
.admin-nav-titel span { color: var(--primary-dark); }

.admin-nav-aktionen { display: flex; align-items: center; gap: 18px; }

.admin-nav-aktionen a,
.admin-nav-aktionen button {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-600);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    font-family: inherit;
}

.admin-nav-aktionen a:hover,
.admin-nav-aktionen button:hover { color: var(--dark); }

.admin-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* Fusszeile der Admin-Seite: dieselbe Angabe wie oeffentlich, aber ohne
   das Menue - hinter dem Login ist die Seitennavigation fehl am Platz. */
.admin-footer {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-footer p {
    color: var(--gray-600);
    font-size: 0.78rem;
}

.admin-footer .footer-credit {
    font-size: 0.74rem;
    color: var(--gray-400);
}

.admin-footer .footer-credit span {
    color: var(--gray-600);
    font-weight: 500;
}

/* --- Login --- */
.admin-login {
    max-width: 400px;
    margin: 10vh auto 0;
    background: var(--white);
    border-radius: var(--radius);
    padding: 44px 40px;
    box-shadow: var(--shadow);
}

.admin-login h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.admin-login .untertitel {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 28px;
}

.admin-feld { margin-bottom: 16px; }

.admin-feld label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.admin-feld input[type="email"],
.admin-feld input[type="password"],
.admin-feld input[type="text"],
.admin-feld input[type="date"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--white);
    transition: var(--transition);
}

.admin-feld input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 980px;
    border: none;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.admin-btn--primaer { background: var(--primary-dark); color: #fff; }
.admin-btn--primaer:hover { background: var(--primary-deep); transform: translateY(-1px); }
.admin-btn--sekundaer {
    background: var(--white);
    color: var(--dark);
    border: 1px solid var(--gray-200);
}
.admin-btn--sekundaer:hover { border-color: var(--gray-400); }
.admin-btn--gefahr { background: none; color: var(--accent-red); }
.admin-btn--gefahr:hover { background: rgba(255,59,48,0.08); }
.admin-btn--breit { width: 100%; }
.admin-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.admin-fehler {
    background: rgba(255,59,48,0.08);
    color: #c0392b;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.83rem;
    margin-bottom: 16px;
    display: none;
}

.admin-fehler.active { display: block; }

.admin-hinweis {
    background: rgba(var(--primary-rgb),0.08);
    color: var(--primary-deep);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- Liste --- */
.admin-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-kopf h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }

.admin-liste { display: flex; flex-direction: column; gap: 10px; }

.admin-zeile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
}

.admin-zeile:hover {
    border-color: rgba(var(--primary-rgb),0.4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.admin-zeile-bild {
    width: 64px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--gray-100);
    flex-shrink: 0;
}

.admin-zeile-text { flex: 1; min-width: 0; }

.admin-zeile-titel {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-zeile-datum { font-size: 0.78rem; color: var(--gray-600); margin-top: 2px; }

.admin-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 980px;
    flex-shrink: 0;
}

.admin-status--live { background: rgba(52,199,89,0.12); color: #1e8e3e; }
.admin-status--entwurf { background: var(--gray-100); color: var(--gray-600); }

.admin-leer {
    text-align: center;
    color: var(--gray-600);
    padding: 60px 20px;
    font-size: 0.92rem;
}

/* --- Editor --- */
.admin-editor {
    background: var(--white);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
}

.admin-editor-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.admin-editor-kopf .zurueck {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
}

.admin-editor-kopf .zurueck:hover { color: var(--dark); }

.admin-editor-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

.admin-titel-input {
    width: 100%;
    border: none;
    font-family: inherit;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.admin-titel-input:focus { outline: none; border-bottom-color: var(--primary); }
.admin-titel-input::placeholder { color: var(--gray-400); }

.admin-meta-zeile {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Titelbild */
.admin-cover {
    border: 1.5px dashed var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    transition: var(--transition);
}

.admin-cover.hat-bild { border-style: solid; }
.admin-cover img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; display: none; }
.admin-cover.hat-bild img { display: block; }
.admin-cover-text { font-size: 0.83rem; color: var(--gray-600); flex: 1; }
.admin-cover-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Werkzeugleiste */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: var(--gray-100);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border: 1px solid var(--gray-200);
    border-bottom: none;
    position: sticky;
    top: 60px;
    z-index: 10;
}

.admin-toolbar .tb {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-800);
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-toolbar .tb:hover { background: rgba(0,0,0,0.06); }

.admin-toolbar .tb svg {
    width: 17px;
    height: 17px;
    display: block;
    margin: 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ausgegraut, solange es nichts rueckgaengig zu machen gibt */
.admin-toolbar .tb:disabled { opacity: 0.28; cursor: default; }
.admin-toolbar .tb:disabled:hover { background: none; }
.admin-toolbar .tb.aktiv { background: rgba(var(--primary-rgb),0.15); color: var(--primary-deep); }
.admin-toolbar .tb-trenner { width: 1px; background: var(--gray-200); margin: 4px 6px; }

.admin-toolbar .tb--fett { font-weight: 800; }
.admin-toolbar .tb--kursiv { font-style: italic; }
.admin-toolbar .tb--unterstrichen { text-decoration: underline; }

.admin-farbe {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--gray-200);
    cursor: pointer;
    padding: 0;
    align-self: center;
    transition: transform 0.15s ease;
}

.admin-farbe:hover { transform: scale(1.15); }

/* Schreibflaeche */
.admin-inhalt {
    min-height: 320px;
    border: 1px solid var(--gray-200);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 20px 22px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--gray-800);
}

.admin-inhalt:focus { outline: none; border-color: var(--primary); }
.admin-inhalt:empty::before { content: attr(data-platzhalter); color: var(--gray-400); }
.admin-inhalt h2 { font-size: 1.3rem; font-weight: 700; margin: 20px 0 8px; }
.admin-inhalt h3 { font-size: 1.08rem; font-weight: 700; margin: 16px 0 6px; }
.admin-inhalt p { margin-bottom: 12px; }
.admin-inhalt ul, .admin-inhalt ol { margin: 0 0 12px 22px; }
.admin-inhalt img { max-width: 100%; border-radius: var(--radius-sm); margin: 8px 0; }
.admin-inhalt a { color: var(--primary-dark); }

.admin-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-speicherstatus { font-size: 0.8rem; color: var(--gray-600); }

@media (max-width: 640px) {
    .admin-editor { padding: 20px 16px; }
    .admin-main { padding: 24px 14px 60px; }
    .admin-titel-input { font-size: 1.3rem; }
}


/* ===== ATHLETEN-SEITE (athleten.html) ===== */
.athleten-page { padding: 140px 24px 100px; }

.athleten-head {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.athleten-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 16px;
}

.athleten-head p {
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Filter nach Disziplin */
.athleten-filter {
    max-width: 1200px;
    margin: 0 auto 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.athleten-filter button {
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    border-radius: 980px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.athleten-filter button:hover { border-color: var(--gray-400); color: var(--dark); }

.athleten-filter button.aktiv {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
    color: #fff;
}

.athleten-raster {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.athleten-leer {
    text-align: center;
    color: var(--gray-600);
    padding: 60px 20px;
}

/* Knopf unter den vier Athleten der Startseite */
.athleten-cta { text-align: center; margin-top: 40px; }

/* ===== ATHLETEN-PORTRAIT (Modal) ===== */
.portraet-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6,26,30,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none;
    overflow-y: auto;
    padding: 48px 16px;
}

.portraet-modal.active { display: block; }

.portraet-box {
    max-width: 860px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.portraet-schliessen {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(29,29,31,0.55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
}

.portraet-schliessen:hover { background: rgba(29,29,31,0.8); }

.portraet-bild {
    background: linear-gradient(150deg, rgba(var(--primary-rgb),0.16) 0%, rgba(14,116,144,0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}

.portraet-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portraet-bild .athlete-initialen { font-size: 4rem; }

.portraet-text { padding: 44px 40px; }

.portraet-text .disziplin {
    font-size: 0.8rem;
    color: var(--primary-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.portraet-text h2 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 14px;
}

.portraet-text .kurztext {
    font-size: 0.94rem;
    color: var(--gray-800);
    line-height: 1.6;
    margin-bottom: 22px;
}

.portraet-erfolge h3 {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.portraet-erfolge ul { list-style: none; }

.portraet-erfolge li {
    position: relative;
    padding-left: 20px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.portraet-erfolge li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

@media (max-width: 780px) {
    .portraet-box { grid-template-columns: 1fr; }
    .portraet-bild { min-height: 300px; }
    .portraet-text { padding: 30px 24px 38px; }
}

@media (max-width: 980px) {
    .athleten-raster { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .athleten-page { padding: 110px 16px 72px; }
    .athleten-raster { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .athlete-info { padding: 16px; }
    .portraet-modal { padding: 0; }
    .portraet-box { border-radius: 0; min-height: 100vh; }
}

/* ===== ADMIN: Bereichswechsel News / Athleten ===== */
.admin-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-200);
    padding: 3px;
    border-radius: 980px;
}

.admin-tabs button {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
    padding: 6px 16px;
    border-radius: 980px;
    cursor: pointer;
    transition: var(--transition);
}

.admin-tabs button.aktiv {
    background: var(--white);
    color: var(--dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ===== ADMIN: Athleten ===== */
.admin-suche {
    width: 100%;
    max-width: 280px;
    padding: 9px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 980px;
    font-family: inherit;
    font-size: 0.86rem;
    background: var(--white);
    transition: var(--transition);
}

.admin-suche:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
}

.admin-zeile-foto {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--gray-100);
}

.admin-zeile-foto--leer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-deep);
    background: rgba(var(--primary-rgb),0.12);
}

.admin-stern {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 6px;
    border-radius: 8px;
    color: var(--gray-400);
    flex-shrink: 0;
    transition: var(--transition);
}

.admin-stern:hover { background: rgba(0,0,0,0.05); }
.admin-stern.aktiv { color: var(--gold); }

.admin-zaehler {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.admin-zaehler strong { color: var(--dark); font-weight: 600; }

.admin-raster-zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.admin-feld textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    background: var(--white);
    transition: var(--transition);
}

.admin-feld textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
}

.admin-feld .hilfe {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 5px;
    line-height: 1.45;
}

/* Schalter */
.admin-schalter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    cursor: pointer;
}

.admin-schalter input { width: 18px; height: 18px; accent-color: var(--primary-dark); cursor: pointer; }
.admin-schalter .beschriftung { font-size: 0.88rem; font-weight: 600; }
.admin-schalter .erklaerung { font-size: 0.76rem; color: var(--gray-600); margin-top: 2px; }

/* Rundes Portraitfoto im Editor */
.admin-portraet {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1.5px dashed var(--gray-200);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.admin-portraet.hat-bild { border-style: solid; }

.admin-portraet-vorschau {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--primary-rgb),0.12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-deep);
    overflow: hidden;
}

.admin-portraet-vorschau img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
    .admin-raster-zwei { grid-template-columns: 1fr; }
    .admin-kopf { flex-direction: column; align-items: stretch; }
    .admin-suche { max-width: none; }
}

/* ===== ADMIN: Reihenfolge der Startseite ===== */
.startseite-tafel {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px 26px 20px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
}

.startseite-tafel-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.startseite-tafel-kopf h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.startseite-tafel-kopf .anzahl {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 500;
}

.startseite-tafel .erklaerung {
    font-size: 0.8rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 18px;
}

.startseite-plaetze {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.startseite-platz {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--gray-100);
    transition: var(--transition);
}

.startseite-platz:hover { border-color: var(--gray-200); background: var(--white); }

.startseite-platz.wird-gezogen { opacity: 0.35; }

.startseite-platz.ziel {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
}

/* Platznummer */
.platz-nummer {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-deep);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platz-griff {
    color: var(--gray-400);
    cursor: grab;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 2px;
    user-select: none;
    flex-shrink: 0;
}

.platz-griff:active { cursor: grabbing; }

.platz-foto {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(var(--primary-rgb),0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-deep);
}

.platz-text { flex: 1; min-width: 0; }
.platz-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platz-disziplin { font-size: 0.76rem; color: var(--gray-600); margin-top: 1px; }

.platz-knoepfe { display: flex; gap: 2px; flex-shrink: 0; }

.platz-knopf {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--gray-600);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.platz-knopf:hover:not(:disabled) { background: rgba(0,0,0,0.07); color: var(--dark); }
.platz-knopf:disabled { opacity: 0.25; cursor: default; }
.platz-knopf--weg:hover { background: rgba(255,59,48,0.1); color: var(--accent-red); }

.platz-knopf svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Freier Platz */
.startseite-platz--frei {
    background: none;
    border: 1.5px dashed var(--gray-200);
    color: var(--gray-400);
    font-size: 0.82rem;
}

.startseite-platz--frei .platz-nummer {
    background: none;
    border: 1.5px solid var(--gray-200);
    color: var(--gray-400);
}

/* Positionsauswahl im Editor */
.position-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.position-wahl button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.position-wahl button:hover { border-color: var(--primary); color: var(--dark); }

.position-wahl button.aktiv {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
    color: #fff;
}

.position-wahl.gesperrt { opacity: 0.4; pointer-events: none; }

@media (max-width: 640px) {
    .startseite-tafel { padding: 18px 16px 16px; }
    .platz-disziplin { display: none; }
}


/* ===== TRAINER-SEITE (trainer.html) ===== */
.trainer-page { padding: 140px 24px 100px; }

.trainer-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.trainer-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 16px;
}

.trainer-head p { color: var(--gray-600); font-size: 1.05rem; line-height: 1.55; }

.trainer-filter {
    max-width: 1200px;
    margin: 0 auto 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.trainer-filter button {
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    border-radius: 980px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.trainer-filter button:hover { border-color: var(--gray-400); color: var(--dark); }

.trainer-filter button.aktiv {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
    color: #fff;
}

.trainer-raster {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ===== TRAINER-DOSSIER (Modal) ===== */
.dossier-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6,26,30,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none;
    overflow-y: auto;
    padding: 48px 16px;
}

.dossier-modal.active { display: block; }

.dossier-box {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}

.dossier-schliessen {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.dossier-schliessen:hover { background: var(--gray-200); color: var(--dark); }

.dossier-kopf {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 38px 40px 26px;
    border-bottom: 1px solid var(--gray-200);
}

.dossier-portraet {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    background: linear-gradient(150deg, var(--gray-100) 0%, rgba(14,116,144,0.16) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-deep);
    font-size: 1.6rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.dossier-portraet img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dossier-kopf h2 {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.dossier-funktion {
    font-size: 0.92rem;
    color: var(--primary-deep);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 7px;
}

.dossier-inhalt { padding: 28px 40px 38px; }

.dossier-text {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--gray-800);
    margin-bottom: 26px;
}

.dossier-tabelle { display: grid; grid-template-columns: 150px 1fr; }

.dossier-tabelle dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    padding: 13px 0;
    border-top: 1px solid var(--gray-200);
    line-height: 1.5;
}

.dossier-tabelle dd {
    font-size: 0.9rem;
    color: var(--gray-800);
    line-height: 1.5;
    padding: 13px 0;
    border-top: 1px solid var(--gray-200);
    margin: 0;
}

.dossier-tabelle a { color: var(--primary-dark); text-decoration: none; }
.dossier-tabelle a:hover { text-decoration: underline; }

@media (max-width: 980px) {
    .trainer-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .trainer-page { padding: 110px 16px 72px; }
    .trainer-raster { grid-template-columns: 1fr; }
    .dossier-modal { padding: 0; }
    .dossier-box { border-radius: 0; min-height: 100vh; }
    .dossier-kopf { padding: 30px 22px 22px; gap: 16px; }
    .dossier-portraet { width: 72px; height: 72px; }
    .dossier-inhalt { padding: 22px 22px 34px; }
    .dossier-tabelle { grid-template-columns: 1fr; }
    .dossier-tabelle dd { border-top: none; padding-top: 0; padding-bottom: 14px; }
    .dossier-tabelle dt { padding-bottom: 4px; }
}

/* Trainer im Dashboard: eckige Portraits statt runder Athletenfotos */
.admin-zeile-foto--eckig { border-radius: 14px; }
.platz-foto--eckig { border-radius: 12px; }
.admin-portraet-vorschau--eckig { border-radius: 26px; }

/* ===== PORTRAIT ZUSCHNEIDEN ===== */
.zuschnitt-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(6,26,30,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.zuschnitt-modal.active { display: flex; }

.zuschnitt-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: 30px 32px 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.zuschnitt-box h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.zuschnitt-hilfe {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Buehne: das ganze Bild, davon ist nur das Quadrat scharf */
.zuschnitt-rahmen {
    position: relative;
    width: min(360px, 74vw);
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.zuschnitt-rahmen.zieht { cursor: grabbing; }

.zuschnitt-rahmen img {
    position: absolute;
    transform-origin: 0 0;
    max-width: none;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Der gewaehlte Ausschnitt - alles ausserhalb wird aufgehellt */
.zuschnitt-ausschnitt {
    position: absolute;
    top: 8.33%;
    left: 8.33%;
    width: 83.33%;
    height: 83.33%;
    border-radius: 22px;
    box-shadow: 0 0 0 9999px rgba(255,255,255,0.78);
    border: 2px solid rgba(255,255,255,0.95);
    pointer-events: none;
}

.zuschnitt-regler {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 4px 22px;
    color: var(--gray-600);
    font-size: 1rem;
}

.zuschnitt-regler input[type="range"] {
    flex: 1;
    accent-color: var(--primary-dark);
    cursor: pointer;
}

.zuschnitt-aktionen {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 520px) {
    .zuschnitt-box { padding: 24px 18px 20px; }
    .zuschnitt-aktionen .admin-btn { flex: 1; padding: 12px 14px; }
}

/* ===== BESTÄTIGUNG NACH DEM SPEICHERN ===== */
.hinweis-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -14px);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 980px;
    padding: 11px 24px 11px 15px;
    box-shadow: 0 14px 44px rgba(0,0,0,0.16);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dark);
    opacity: 0;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    transition: opacity 0.28s ease,
                transform 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hinweis-toast.active { opacity: 1; transform: translate(-50%, 0); }

.hinweis-toast .haken {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hinweis-toast .haken svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Die gerade gespeicherte Zeile kurz hervorheben */
.admin-zeile.eben-gespeichert {
    animation: ebenGespeichert 2.4s ease-out;
}

@keyframes ebenGespeichert {
    0%, 15% {
        background: rgba(var(--primary-rgb), 0.16);
        border-color: rgba(var(--primary-rgb), 0.45);
    }
    100% {
        background: var(--white);
        border-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hinweis-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
    .admin-zeile.eben-gespeichert { animation: none; }
}

/* ===== NEWS-SEITE (news.html) ===== */
.news-page { padding: 140px 24px 100px; }

.news-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.news-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 16px;
}

.news-head p { color: var(--gray-600); font-size: 1.05rem; line-height: 1.55; }

.news-filter {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.news-filter button {
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    border-radius: 980px;
    padding: 7px 18px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.news-filter button:hover { border-color: var(--gray-400); color: var(--dark); }

.news-filter button.aktiv {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
    color: #fff;
}

.news-anzahl {
    max-width: 1200px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* Grosse Karte fuer die neueste Meldung */
.news-aufmacher { max-width: 1200px; margin: 0 auto 24px; }

.news-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}

.news-feature:hover { box-shadow: var(--shadow-lg); }
.news-feature:hover .news-feature-bild img { transform: scale(1.03); }

.news-feature-bild {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    background: var(--gray-100);
}

.news-feature-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.news-feature-text {
    padding: 46px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-feature-etikett {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-deep);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 980px;
    margin-bottom: 16px;
}

.news-feature-text h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 12px;
}

.news-feature-text p {
    font-size: 0.94rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 6px;
}

.news-raster {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-leer {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gray-600);
    padding: 50px 20px;
}

/* Knopf unter den News der Startseite */
.news-cta { text-align: center; margin-top: 40px; }

@media (max-width: 900px) {
    .news-feature { grid-template-columns: 1fr; }
    .news-feature-bild { min-height: 240px; }
    .news-feature-text { padding: 30px 26px 34px; }
}

@media (max-width: 700px) {
    .news-page { padding: 110px 16px 72px; }
    .news-raster { grid-template-columns: 1fr; }
}

/* ===== LA-CUP: PODEST JE JAHR ===== */
/* Waagrechte Balken = Punkte. Der eigene Verein farbig, die anderen
   zurueckgenommen (Hervorhebung statt Buntheit). Werte stehen an jedem
   Balken, damit die hellen Balken nicht allein die Farbe tragen muessen. */
.cup-jahr {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius);
    padding: 22px 26px 18px;
}

.cup-jahr-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.cup-jahr-zahl {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cup-zwischenstand {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 980px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
}

.cup-zeile {
    display: grid;
    grid-template-columns: 22px minmax(96px, 168px) 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.cup-rang {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    font-variant-numeric: tabular-nums;
}

.cup-name {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cup-zeile--unser .cup-name { color: #fff; font-weight: 600; }
.cup-zeile--unser .cup-rang { color: rgba(255,255,255,0.75); }

.cup-spur {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
}

.cup-balken {
    display: block;
    height: 100%;
    border-radius: 0 6px 6px 0;
    background: #55555a;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cup-zeile--unser .cup-balken { background: var(--primary); }

.cup-punkte {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    font-variant-numeric: tabular-nums;
    min-width: 52px;
    text-align: right;
}

.cup-zeile--unser .cup-punkte { color: #fff; }

.cup-aktuell { margin-bottom: 28px; position: relative; z-index: 1; }

/* Auf hellem Grund (Statistikseite).
   Hier traegt die Vereinsfarbe die Tabellen: der eigene Balken voll im
   Tuerkis-Verlauf, die uebrigen als heller Tuerkiston. Dadurch ist die
   ganze Tabelle in der Hausfarbe, die Rangfolge bleibt trotzdem auf den
   ersten Blick lesbar. */
.cup-hell .cup-jahr {
    background: var(--white);
    border-color: var(--gray-200);
}
.cup-hell .cup-jahr-zahl { color: var(--primary-deep); }

.cup-hell .cup-zwischenstand {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary-deep);
}

.cup-hell .cup-rang { color: var(--gray-400); }
.cup-hell .cup-name { color: var(--gray-600); }
.cup-hell .cup-punkte { color: var(--gray-600); }

/* Die eigene Zeile bekommt einen leichten Tuerkisgrund - damit findet
   man den Verein in jedem Jahresblock sofort. Das negative Aussenmass
   gleicht die Innenabstaende aus, damit die Spalten in einer Flucht
   bleiben. */
.cup-hell .cup-zeile--unser {
    background: rgba(var(--primary-rgb),0.06);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
}

.cup-hell .cup-zeile--unser .cup-name { color: var(--dark); }
.cup-hell .cup-zeile--unser .cup-rang { color: var(--primary-deep); }
.cup-hell .cup-zeile--unser .cup-punkte { color: var(--primary-deep); }

.cup-hell .cup-spur { background: rgba(var(--primary-rgb),0.08); }
.cup-hell .cup-balken { background: rgba(var(--primary-rgb),0.32); }

.cup-hell .cup-zeile--unser .cup-balken {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-deep) 100%);
}
.cup-hell .cup-punkte { color: var(--gray-600); }
.cup-hell .cup-zeile--unser .cup-punkte { color: var(--dark); }

/* ===== STATISTIK-SEITE ===== */
.statistik-page { padding: 140px 24px 100px; }

.statistik-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.statistik-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 16px;
}

.statistik-head p { color: var(--gray-600); font-size: 1.05rem; line-height: 1.55; }

/* padding: 0 hebt die globale Regel "section { padding: 120px 24px }" auf -
   sonst summieren sich Aussenabstand und Innenabstand zu riesigen Luecken. */
.statistik-block {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 0;
}

.statistik-block:last-child { margin-bottom: 0; }

.statistik-block h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.statistik-block .unterzeile {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 20px;
}

.statistik-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.statistik-kennzahlen .stat-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
}

/* Die Grundregel malt die Zahl ueber einen Verlauf mit
   -webkit-text-fill-color: transparent. Auf hellem Grund liefe der
   Verlauf von Weiss nach hellem Tuerkis - praktisch unlesbar. Deshalb
   Verlauf abschalten und volle Deckfarbe setzen (Kontrast 5,4:1). */
.statistik-kennzahlen .stat-number {
    background: none;
    -webkit-text-fill-color: var(--primary-deep);
    color: var(--primary-deep);
}

.statistik-kennzahlen .stat-card { padding: 26px 20px; }
.statistik-kennzahlen .stat-label { color: var(--dark); }
.statistik-kennzahlen .stat-sublabel { color: var(--gray-600); }

.statistik-kennzahlen .stat-card:hover {
    background: var(--white);
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(var(--primary-rgb),0.14);
}

.cup-verlauf { display: flex; flex-direction: column; gap: 14px; }

/* ===== SÄULENDIAGRAMM ===== */
.statistik-diagramm {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px 30px 22px;
}

.saeulen-flaeche {
    position: relative;
    height: 260px;
    padding-left: 52px;
}

.saeulen-achse { position: absolute; inset: 0 0 26px 0; }

.saeulen-strich {
    position: absolute;
    left: 52px;
    right: 0;
    border-top: 1px solid var(--gray-200);
}

.saeulen-strich span {
    position: absolute;
    left: -52px;
    top: -0.6em;
    width: 44px;
    text-align: right;
    font-size: 0.7rem;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}

.saeulen-reihe {
    position: absolute;
    inset: 0 0 26px 52px;
    display: flex;
    align-items: flex-end;
    gap: 2px;              /* Flaechenluecke zwischen benachbarten Saeulen */
}

.saeulen-spalte {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.saeule {
    width: 100%;
    max-width: 24px;
    border-radius: 4px 4px 0 0;    /* rundes Datenende, eckig an der Grundlinie */
    /* Verlauf in der Vereinsfarbe: oben das helle Tuerkis, unten der
       dunklere Ton - so hat auch das Diagramm die Hausfarbe. */
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 100%);
    transition: opacity 0.2s ease;
}

/* Jahr ohne Sieg: gleiche Farbe (Farbe folgt dem Verein, nicht dem Rang),
   der Rang steht im Hinweisfeld */
.saeule--zweiter { opacity: 0.55; }

.saeulen-spalte:hover .saeule { opacity: 0.75; }

.saeule-wert {
    position: absolute;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.saeule-leer {
    position: absolute;
    bottom: 0;
    color: var(--gray-400);
    font-size: 0.85rem;
}

.saeulen-jahr {
    position: absolute;
    bottom: -22px;
    font-size: 0.68rem;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}

/* Hinweisfeld beim Überfahren */
.saeulen-spalte[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(29,29,31,0.94);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 7px 11px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.saeulen-fuss {
    font-size: 0.75rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-200);
}

@media (max-width: 780px) {
    .statistik-kennzahlen { grid-template-columns: repeat(2, 1fr); }
    .cup-zeile { grid-template-columns: 20px 1fr auto; gap: 8px; }
    .cup-spur { display: none; }      /* auf schmalen Geräten zaehlen die Zahlen */
    .saeulen-flaeche { height: 200px; }
    .statistik-diagramm { padding: 20px 16px 18px; }
    .statistik-page { padding: 110px 16px 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .cup-balken { transition: none; }
}

/* ===== TRAININGSSEITE (training.html) =====
   Jede Trainingsgruppe traegt eine Farbe, die im Dashboard gewaehlt wird.
   Die Klasse setzt drei Variablen, die alle Bausteine (Punkt, Marke,
   Rahmen, Balken) gemeinsam nutzen - so bekommt auch eine neu angelegte
   Gruppe sofort ein stimmiges Aussehen. */

.farbe-blau    { --g: #0A84FF; --g-tief: #0B5FB0; --g-flaeche: rgba(10,132,255,0.10); }
.farbe-tuerkis { --g: #0CC4C4; --g-tief: #0E7490; --g-flaeche: rgba(12,196,196,0.12); }
.farbe-orange  { --g: #FF9500; --g-tief: #925608; --g-flaeche: rgba(255,149,0,0.14); }
.farbe-gruen   { --g: #34C759; --g-tief: #1B7A35; --g-flaeche: rgba(52,199,89,0.14); }
.farbe-violett { --g: #AF52DE; --g-tief: #6B2C90; --g-flaeche: rgba(175,82,222,0.12); }

.wp-punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g, var(--primary));
    flex-shrink: 0;
}

.training-page { padding: 140px 24px 100px; }

/* ----- Kopf ----- */
.training-head {
    max-width: 820px;
    margin: 0 auto 52px;
    text-align: center;
}

.training-head h1 {
    font-size: clamp(2.3rem, 5.4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin-bottom: 18px;
}

.training-head p {
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.65;
}

.training-head-marken {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.training-marke {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.training-marke-hell {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary-deep);
    border-color: rgba(var(--primary-rgb),0.25);
}

/* ----- Bloecke ----- */
/* padding: 0 hebt die globale Regel "section { padding: 120px 24px }" auf. */
.training-block {
    max-width: 1100px;
    margin: 0 auto 76px;
    padding: 0;
}

.training-block-kopf {
    max-width: 740px;
    margin-bottom: 28px;
}

.training-block h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.training-block .unterzeile {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.65;
}

/* ----- Schnellzugriff ----- */
.training-schnell {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 76px;
}

.schnell-karte {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--gray-100);
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.schnell-karte:hover {
    background: var(--white);
    border-color: var(--gray-200);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.schnell-nummer {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-deep);
    line-height: 1;
    flex-shrink: 0;
}

.schnell-text {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.schnell-text strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -0.01em;
}

.schnell-karte-cta { background: var(--dark); border-color: var(--dark); }
.schnell-karte-cta:hover { background: var(--gray-800); border-color: var(--gray-800); }
.schnell-karte-cta .schnell-nummer { color: var(--primary); }
.schnell-karte-cta .schnell-text { color: var(--gray-400); }
.schnell-karte-cta .schnell-text strong { color: var(--white); }

/* ----- Gruppenkarten ----- */
.gruppen-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gruppe-karte {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 30px 28px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.gruppe-karte::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--g);
}

.gruppe-karte:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(0,0,0,0.08);
    border-color: var(--gray-100);
}

.gruppe-marke {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g-tief);
    background: var(--g-flaeche);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.gruppe-karte h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.gruppe-alter {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--g-tief);
    margin: 4px 0 14px;
}

.gruppe-karte p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.65;
    flex: 1;
}

.gruppe-fuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.8rem;
}

.gruppe-anzahl { font-weight: 600; color: var(--dark); }
.gruppe-tage { color: var(--gray-600); }

/* ----- Aeltere Jahrgaenge / Leistungsgruppe ----- */
.gruppe-extra {
    --g: var(--primary);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    margin-top: 20px;
    padding: 38px;
    background: var(--dark);
    color: var(--white);
    border-radius: var(--radius);
}

.gruppe-extra h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}

.gruppe-extra p {
    font-size: 0.92rem;
    color: var(--gray-400);
    line-height: 1.7;
    max-width: 64ch;
}

.gruppe-extra p + p { margin-top: 12px; }

.gruppe-marke-dunkel {
    background: rgba(var(--primary-rgb),0.14);
    color: var(--primary);
}

.gruppe-extra-aktion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gruppe-extra-aktion .btn-secondary {
    color: var(--white);
    border-color: rgba(255,255,255,0.25);
}

.gruppe-extra-aktion .btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ----- Filter (Segmented Control) ----- */
.wp-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--gray-100);
    border-radius: 14px;
    margin-bottom: 24px;
}

.wp-filter-knopf {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--gray-600);
    padding: 9px 17px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.wp-filter-knopf:hover { color: var(--dark); }

.wp-filter-knopf.aktiv {
    background: var(--white);
    color: var(--dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* ----- Wochenplan ----- */
.wochenplan {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.wp-tag {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    align-items: start;
    padding: 22px 24px;
}

.wp-tag + .wp-tag { border-top: 1px solid var(--gray-200); }

.wp-tag-name {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding-top: 8px;
}

.wp-tag-kurz { display: none; }

.wp-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 14px;
}

.wp-karte {
    background: var(--gray-100);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 18px 20px;
    transition: var(--transition);
}

.wp-karte:hover {
    background: var(--white);
    border-color: var(--g);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.07);
}

.wp-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.wp-marke {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--g-tief);
    background: var(--g-flaeche);
    padding: 5px 10px;
    border-radius: 999px;
}

.wp-dauer {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wp-zeit {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 14px;
}

.wp-bis { color: var(--gray-400); font-weight: 400; margin: 0 3px; }

.wp-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 13px;
    border-top: 1px solid var(--gray-200);
}

.wp-zeile { display: flex; gap: 10px; font-size: 0.8rem; line-height: 1.45; }
.wp-zeile dt { color: var(--gray-600); min-width: 54px; flex-shrink: 0; }
.wp-zeile dd { color: var(--dark); font-weight: 500; }

.wp-leer {
    padding: 44px 24px;
    text-align: center;
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* ----- Orte ----- */
.ort-raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ort-karte {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 32px;
    transition: var(--transition);
}

.ort-karte:hover {
    background: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.07);
}

.ort-tag {
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-deep);
    margin-bottom: 10px;
}

.ort-karte h3 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}

.ort-karte p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.65;
}

.ort-fuss {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark);
}

/* ----- Erste Schritte ----- */
.schritt-liste {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.schritt {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 30px 28px;
    transition: var(--transition);
}

.schritt:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.07);
    border-color: var(--gray-100);
}

.schritt-nummer {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.schritt h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.schritt p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.65;
}

/* ----- Haeufige Fragen ----- */
.faq-liste { border-top: 1px solid var(--gray-200); }
.faq { border-bottom: 1px solid var(--gray-200); }

.faq summary {
    display: block;
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 20px 46px 20px 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: color 0.2s;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary-deep); }

.faq summary::after {
    content: '+';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    color: var(--gray-400);
    transition: var(--transition);
}

.faq[open] summary { color: var(--dark); }
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--primary); }

.faq p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.7;
    padding: 0 46px 24px 0;
    margin-top: -4px;
    max-width: 80ch;
}

/* Bei mehreren Absaetzen wuerde der Abstand der Antwort sonst zwischen
   den Absaetzen genauso gross wie am Ende der Antwort - nur der letzte
   Absatz haelt den vollen Abstand zur naechsten Frage. */
.faq p:not(:last-of-type) { padding-bottom: 14px; }

/* ----- Abschluss ----- */
.training-abschluss {
    max-width: 1100px;
    margin: 0 auto;
    padding: 58px 40px;
    text-align: center;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: var(--white);
}

.training-abschluss h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.training-abschluss p {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 56ch;
    margin: 0 auto 28px;
    color: rgba(255,255,255,0.88);
}

.training-abschluss-aktion {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.training-abschluss .btn-primary { background: var(--white); color: var(--primary-deep); }
.training-abschluss .btn-primary:hover { background: var(--white); box-shadow: 0 10px 34px rgba(0,0,0,0.18); }
.training-abschluss .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.4); }
.training-abschluss .btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.10); }

/* ===== TRAININGS-KURZUEBERSICHT (Startseite) ===== */
.tw-legende {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.tw-legende-teil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.79rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--g-flaeche);
    color: var(--g-tief);
}

.tw-legende-teil strong { font-weight: 600; }
.tw-legende-teil span:last-child { opacity: 0.72; }

.tw-woche {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.tw-tag {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--gray-100);
    border-radius: 18px;
    padding: 16px 14px;
}

.tw-tag-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: 2px;
}

.tw-einheit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--white);
    border-left: 3px solid var(--g);
    border-radius: 12px;
    padding: 12px 12px 12px 13px;
    transition: var(--transition);
}

.tw-einheit .wp-punkt { display: none; }
.tw-tag:hover .tw-einheit { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

.tw-zeit {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tw-gruppe { font-size: 0.72rem; color: var(--gray-600); line-height: 1.35; }

.tw-ort {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--g-tief);
    background: var(--g-flaeche);
    padding: 3px 7px;
    border-radius: 6px;
}

.tw-hinweis {
    max-width: 68ch;
    margin: 24px auto 0;
    text-align: center;
    font-size: 0.86rem;
    color: var(--gray-600);
    line-height: 1.65;
}

.tw-hinweis strong { color: var(--dark); font-weight: 600; }

.training-cta { text-align: center; margin-top: 34px; }

/* ----- Anpassung an kleinere Geraete ----- */
@media (max-width: 1000px) {
    .training-schnell { grid-template-columns: repeat(2, 1fr); }
    .gruppen-raster,
    .schritt-liste { grid-template-columns: repeat(2, 1fr); }
    .gruppe-extra { grid-template-columns: 1fr; }
    .gruppe-extra-aktion { flex-direction: row; flex-wrap: wrap; }
    .tw-woche { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .training-page { padding: 110px 16px 72px; }
    .training-block { margin-bottom: 56px; }
    .training-schnell { grid-template-columns: 1fr; margin-bottom: 56px; }
    .gruppen-raster,
    .schritt-liste,
    .ort-raster { grid-template-columns: 1fr; }
    .gruppe-extra { padding: 28px 22px; }
    .wp-tag { grid-template-columns: 1fr; gap: 12px; padding: 20px 16px; }
    .wp-tag-name { padding-top: 0; }
    .wp-karten { grid-template-columns: 1fr; }
    .tw-woche { grid-template-columns: repeat(2, 1fr); }
    .training-abschluss { padding: 42px 22px; }
    .wp-filter { display: flex; }
}

@media (max-width: 440px) {
    .tw-woche { grid-template-columns: 1fr; }
}

/* ===== DASHBOARD: TRAININGSPLAN ===== */

/* Eigene Eingabefelder fuer Uhrzeit und Auswahl - die Grundregeln
   weiter oben decken nur text/email/password/date ab. */
.admin-feld input[type="time"],
.admin-feld select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--dark);
    background: var(--white);
    transition: border-color 0.2s;
}

.admin-feld select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 11px;
    padding-right: 36px;
    cursor: pointer;
}

.admin-feld input[type="time"]:focus,
.admin-feld select:focus { outline: none; border-color: var(--primary); }

.admin-tafel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 26px;
    margin-bottom: 20px;
}

.admin-tafel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.admin-tafel-kopf h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.admin-tafel-kopf .anzahl {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 500;
}

.admin-tafel > .erklaerung {
    font-size: 0.83rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 74ch;
}

.admin-tafel .admin-fuss { margin-top: 4px; }

/* Farbpunkt vor Gruppen- und Einheitenzeilen */
.gruppe-punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Uhrzeit in der Einheitenzeile */
.plan-zeit {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    min-width: 104px;
    flex-shrink: 0;
}

/* Ein Wochentag im Dashboard-Plan */
.plan-tag { margin-bottom: 22px; }
.plan-tag:last-child { margin-bottom: 0; }

.plan-tag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--gray-200);
}

.plan-tag-kopf h3 {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.plan-neu {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-deep);
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition);
}

.plan-tag:hover .plan-neu,
.plan-tag--leer .plan-neu,
.plan-neu:focus-visible { opacity: 1; }

.plan-neu:hover { background: rgba(var(--primary-rgb),0.10); }

.plan-leer {
    font-size: 0.83rem;
    color: var(--gray-400);
    padding: 10px 2px;
}

/* Farbwahl im Gruppen-Editor */
.farbwahl { display: flex; flex-wrap: wrap; gap: 8px; }

.farbknopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--gray-600);
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}

.farbknopf span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.farbknopf:hover { border-color: var(--gray-400); }

.farbknopf.aktiv {
    border-color: var(--dark);
    color: var(--dark);
    font-weight: 600;
}

@media (max-width: 640px) {
    .admin-tafel { padding: 20px 16px; }
    .plan-zeit { min-width: 88px; font-size: 0.86rem; }
    .plan-neu { opacity: 1; }
}

/* ===== STARTSEITE: FOTOPAAR IM KINDER-ZEHNKAMPF ===== */
/* Ersetzt die fruehere Emoji-Liste. Das grosse Foto traegt den
   Abschnitt, das kleinere ueberlappt es leicht nach rechts unten -
   dadurch wirken die beiden als Paar statt als zwei Kacheln. */

.kinder-fotos { position: relative; }

.kinder-foto {
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255,255,255,0.12);
}

/* picture ist von Haus aus inline - ohne display:block bezieht sich
   das height:100% des Bildes auf nichts und der Zuschnitt greift nicht. */
.kinder-foto picture {
    display: block;
    width: 100%;
    height: 100%;
}

.kinder-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kinder-foto--gross {
    aspect-ratio: 3 / 2;
    box-shadow: 0 22px 60px rgba(0,0,0,0.28);
}

.kinder-foto--klein {
    position: relative;
    z-index: 2;
    width: 56%;
    aspect-ratio: 4 / 3;
    margin: -68px 0 0 auto;
    border-radius: 18px;
    /* Der helle Ring trennt das Foto vom Bild dahinter, ohne wie ein
       Rahmen zu wirken - und kostet keinen Platz im Layout. */
    box-shadow: 0 0 0 6px rgba(255,255,255,0.95),
                0 20px 46px rgba(0,0,0,0.32);
}

.kinder-cta { margin-top: 28px; }

.kinder-cta .btn {
    background: var(--white);
    color: var(--primary-deep);
}

.kinder-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.22);
}

/* ===== KINDER-ZEHNKAMPF-SEITE =====
   Die Geruestklassen (.training-page, .training-head, .training-block,
   .training-abschluss) teilt sich die Seite mit training.html, damit
   beide Unterseiten denselben Rhythmus haben. */

.kz-fakten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.kz-fakt {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--gray-100);
    border-radius: var(--radius);
}

.kz-fakt-zahl {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-deep);
    line-height: 1;
    flex-shrink: 0;
}

.kz-fakt-text {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.kz-fakt-text strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -0.01em;
}

/* Text neben Bild bzw. neben Kasten */
.kz-split {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 44px;
    align-items: center;
}

.kz-split-text h2 { margin-bottom: 16px; }

.kz-split-text p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 14px;
}

.kz-split-text p:last-of-type { margin-bottom: 0; }

.kz-split-foto {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--gray-100);
    aspect-ratio: 1 / 1;
}

.kz-split-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kz-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* Kasten "Auf einen Blick" */
.kz-kasten {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 28px 30px;
}

.kz-kasten h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.kz-kasten dl { display: flex; flex-direction: column; }

.kz-kasten dl > div {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    border-top: 1px solid var(--gray-200);
}

.kz-kasten dl > div:first-child { border-top: none; padding-top: 0; }
.kz-kasten dl > div:last-child { padding-bottom: 0; }
.kz-kasten dt { color: var(--gray-600); min-width: 108px; flex-shrink: 0; }
.kz-kasten dd { color: var(--dark); font-weight: 500; }

/* Die zehn Disziplinen */
/* Trennlinien ueber Rahmen statt ueber Luecken auf grauem Untergrund:
   bei ungerader Anzahl bliebe sonst eine leere graue Zelle stehen.
   Derzeit sind es zehn Disziplinen, aber die elfte soll die Tabelle
   nicht zerlegen. */
.kz-disziplinen {
    list-style: none;
    counter-reset: disziplin;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.kz-disziplinen li {
    counter-increment: disziplin;
    position: relative;
    background: var(--white);
    padding: 24px 26px 24px 62px;
    transition: var(--transition);
    border-top: 1px solid var(--gray-200);
    border-left: 1px solid var(--gray-200);
}

.kz-disziplinen li:nth-child(1),
.kz-disziplinen li:nth-child(2) { border-top: none; }
.kz-disziplinen li:nth-child(odd) { border-left: none; }

/* Wie bei den Grundsaetzen: eine ungerade Anzahl laesst keine halbe
   Zeile offen, der letzte Eintrag geht dann ueber beide Spalten. */
.kz-disziplinen li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
    align-items: start;
}

.kz-disziplinen li::before {
    content: counter(disziplin);
    position: absolute;
    left: 26px;
    top: 24px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-deep);
    font-variant-numeric: tabular-nums;
}

.kz-disziplinen li:hover { background: var(--gray-100); }

.kz-disziplinen h3 {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.kz-disziplinen p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* Bildergalerie - Spaltensatz, damit jedes Foto sein eigenes
   Seitenverhaeltnis behaelt und nichts beschnitten wird. */
.kz-galerie {
    columns: 3;
    column-gap: 16px;
}

.kz-galerie figure {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--gray-100);
}

.kz-galerie img {
    display: block;
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.kz-galerie figure:hover img { transform: scale(1.03); }

/* Entstehungsgeschichte */
.kz-verlauf { display: flex; flex-direction: column; }

.kz-schritt {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--gray-200);
}

.kz-schritt:first-child { border-top: none; padding-top: 0; }

.kz-jahr {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-deep);
}

.kz-schritt h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.kz-schritt p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.7;
}

@media (max-width: 1000px) {
    .kz-fakten { grid-template-columns: repeat(2, 1fr); }
    .kz-disziplinen { grid-template-columns: 1fr; }
    .kz-disziplinen li { border-left: none; border-top: 1px solid var(--gray-200); }
    .kz-disziplinen li:nth-child(1) { border-top: none; }
    .kz-disziplinen li:nth-child(2) { border-top: 1px solid var(--gray-200); }
    .kz-disziplinen li:last-child:nth-child(odd) { display: block; }
    .kz-galerie { columns: 2; }
}

@media (max-width: 900px) {
    .kinder-foto--klein { width: 52%; margin-top: -52px; }
}

@media (max-width: 700px) {
    .kz-fakten { grid-template-columns: 1fr; }
    .kz-split { grid-template-columns: 1fr; gap: 28px; }
    .kz-split-foto { aspect-ratio: 4 / 3; }
    .kz-galerie { columns: 1; }
    .kz-schritt { grid-template-columns: 1fr; gap: 6px; }
    .kz-kasten { padding: 22px 20px; }
    .kz-kasten dt { min-width: 92px; }
    .kinder-foto--klein { width: 60%; margin-top: -40px; }
}

/* ===== VEREINSSEITE (verein.html) =====
   Die Seite erzaehlt eine Geschichte: Kapitel wechseln die Seite,
   Zahlen zaehlen hoch, Abschnitte tauchen beim Scrollen auf. */

/* Leseanzeige ganz oben */
.vs-fortschritt {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1200;
    pointer-events: none;
}

.vs-fortschritt span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-deep) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* Abschnitte tauchen auf.
   Nur mit der Klasse .vs-js am <html> - ohne JavaScript steht alles
   sofort da, statt unsichtbar zu bleiben. */
.vs-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
                transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}

.vs-js [data-reveal].vs-sichtbar { opacity: 1; transform: none; }

.vs-seite { padding-bottom: 100px; }

/* ----- Auftakt ----- */
.vs-auftakt {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    padding: 160px 24px 64px;
    overflow: hidden;
    background: var(--dark);
}

.vs-auftakt-bild {
    position: absolute;
    inset: 0;
}

.vs-auftakt-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Das Bild traegt die Stimmung, der Text muss lesbar bleiben. */
    opacity: 0.42;
}

.vs-auftakt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29,29,31,0.55) 0%, rgba(29,29,31,0.15) 45%, rgba(29,29,31,0.9) 100%);
}

.vs-auftakt-inhalt {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    color: var(--white);
}

.vs-auftakt .section-label { color: var(--primary); }

.vs-auftakt h1 {
    font-size: clamp(3rem, 9vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    margin-bottom: 22px;
}

.vs-auftakt p {
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.6;
    max-width: 56ch;
    color: rgba(255,255,255,0.85);
}

.vs-weiter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.vs-weiter-strich {
    width: 60px;
    height: 1px;
    background: rgba(255,255,255,0.35);
    position: relative;
    overflow: hidden;
}

.vs-weiter-strich::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform-origin: 0 50%;
    animation: vs-lauf 2.6s cubic-bezier(0.65,0,0.35,1) infinite;
}

@keyframes vs-lauf {
    0%   { transform: scaleX(0); transform-origin: 0 50%; }
    45%  { transform: scaleX(1); transform-origin: 0 50%; }
    55%  { transform: scaleX(1); transform-origin: 100% 50%; }
    100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ----- Kapitel ----- */
.vs-kapitel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.vs-kapitel--gedreht .vs-kapitel-text { order: 2; }

.vs-jahr {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-deep);
    margin-bottom: 14px;
}

.vs-jahr--hell { color: var(--primary); }

.vs-kapitel h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.12;
    margin-bottom: 18px;
}

.vs-kapitel p {
    font-size: 0.98rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 14px;
}

.vs-kapitel p strong { color: var(--dark); font-weight: 600; }

.vs-kapitel-bild {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--gray-100);
    aspect-ratio: 4 / 3;
}

.vs-kapitel-bild img,
.vs-hervorhebung-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kommt beim Auftauchen ganz leicht zur Ruhe. Nur mit .vs-js - sonst
   bliebe das Bild ohne JavaScript dauerhaft vergroessert und damit
   beschnitten (beim Plakat wuerden die Raender fehlen). */
.vs-js .vs-kapitel-bild img,
.vs-js .vs-hervorhebung-bild img {
    transform: scale(1.06);
    transition: transform 1.1s cubic-bezier(0.25,0.46,0.45,0.94);
}

.vs-js .vs-sichtbar .vs-kapitel-bild img,
.vs-js .vs-sichtbar .vs-hervorhebung-bild img { transform: scale(1); }

.vs-kapitel-bild picture,
.vs-hervorhebung-bild picture { display: block; width: 100%; height: 100%; }

/* Hervorgehobene Zahl in einem Kapitel */
.vs-marke {
    margin-top: 24px;
    padding-left: 18px;
    border-left: 3px solid var(--primary);
}

.vs-marke-zahl {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--primary-deep);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.vs-marke-text {
    display: block;
    font-size: 0.86rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-top: 4px;
}

/* ----- Hervorgehobenes Kapitel (Kinder-Zehnkampf) ----- */
.vs-hervorhebung {
    background: var(--dark);
    color: var(--white);
    padding: 88px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1400px;
    margin: 40px auto;
    border-radius: 28px;
}

.vs-hervorhebung-inhalt { max-width: 560px; margin-left: auto; }

.vs-hervorhebung h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.12;
    margin-bottom: 18px;
}

.vs-hervorhebung > .vs-hervorhebung-inhalt > p {
    font-size: 0.98rem;
    color: var(--gray-400);
    line-height: 1.75;
}

.vs-schritte {
    list-style: none;
    margin: 26px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.vs-schritte li {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-size: 0.89rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
}

.vs-schritt-jahr {
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.vs-namen-vorspann {
    font-size: 0.86rem !important;
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 12px;
}

.vs-namen { display: flex; flex-wrap: wrap; gap: 8px; }

.vs-namen span {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb),0.14);
    color: var(--primary);
}

.vs-hervorhebung-knopf {
    margin-top: 28px;
    color: var(--white);
    border-color: rgba(255,255,255,0.28);
}

.vs-hervorhebung-knopf:hover { border-color: var(--primary); color: var(--primary); }

.vs-hervorhebung-bild {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    max-width: 560px;
}

/* Historische Aufnahmen: klein, in ihrem eigenen Seitenverhaeltnis und
   auf einer ruhigen Flaeche - lieber ein scharfes kleines Bild als ein
   grosses unscharfes. */
.vs-kapitel-bild--archiv {
    aspect-ratio: auto;
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.vs-kapitel-bild--archiv img {
    width: auto;
    /* Nie ueber die Originalbreite hinaus (243 px) - sonst wird die
       alte Aufnahme unscharf. */
    max-width: 240px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}

.vs-kapitel-bild--archiv figcaption {
    font-size: 0.78rem;
    color: var(--gray-600);
    text-align: center;
    line-height: 1.5;
}

/* ----- Zahlenband ----- */
.vs-zahlen {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vs-zahl {
    padding: 28px 24px;
    background: var(--gray-100);
    border-radius: var(--radius);
}

.vs-zahl-wert {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--primary-deep);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 10px;
}

.vs-zahl-text {
    display: block;
    font-size: 0.84rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* ----- Zitat ----- */
.vs-zitat {
    max-width: 900px;
    margin: 90px auto;
    padding: 0 24px;
    text-align: center;
}

.vs-zitat p {
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.45;
    color: var(--dark);
}

.vs-zitat footer {
    margin-top: 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-deep);
}

/* ----- Textblöcke ----- */
.vs-block {
    max-width: 1100px;
    margin: 0 auto 90px;
    padding: 0 24px;
}

.vs-block-kopf { max-width: 720px; margin-bottom: 32px; }

.vs-block-kopf h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
}

.vs-block-kopf .unterzeile {
    font-size: 0.93rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* Grundsätze */
/* Die Trennlinien entstehen ueber Rahmen an den Kacheln, NICHT ueber
   Luecken auf grauem Untergrund. Sonst leuchtet bei ungerader Anzahl
   (aktuell 11 Grundsaetze) die leere letzte Zelle grau auf. */
.vs-grundsaetze {
    list-style: none;
    counter-reset: grundsatz;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.vs-grundsaetze li {
    counter-increment: grundsatz;
    background: var(--white);
    padding: 28px 30px 28px 66px;
    position: relative;
    transition: var(--transition);
    border-top: 1px solid var(--gray-200);
    border-left: 1px solid var(--gray-200);
}

/* Oberste Reihe ohne Deckel, linke Spalte ohne Seitenlinie -
   dort sitzt schon der Rahmen des Containers. */
.vs-grundsaetze li:nth-child(1),
.vs-grundsaetze li:nth-child(2) { border-top: none; }
.vs-grundsaetze li:nth-child(odd) { border-left: none; }

/* Ungerade Anzahl (aktuell 11): Der letzte Eintrag nimmt die ganze
   Breite ein, statt eine halbe Zeile leer zu lassen. Titel links,
   Text rechts - so ist die Zeile gefuellt und wirkt wie ein bewusster
   Schlusspunkt statt wie eine fehlende Kachel. Gilt fuer jede ungerade
   Anzahl, es kann also gefahrlos ein Grundsatz dazukommen. */
.vs-grundsaetze li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
    align-items: start;
}

.vs-grundsaetze li::before {
    content: counter(grundsatz, decimal-leading-zero);
    position: absolute;
    left: 28px;
    top: 29px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-deep);
    font-variant-numeric: tabular-nums;
}

.vs-grundsaetze li:hover { background: var(--gray-100); }

.vs-grundsaetze h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 7px;
}

.vs-grundsaetze p {
    font-size: 0.87rem;
    color: var(--gray-600);
    line-height: 1.65;
}

/* ----- Vision ----- */
.vs-vision {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: var(--white);
    padding: 96px 24px;
    margin-bottom: 90px;
}

.vs-vision-inhalt { max-width: 780px; margin: 0 auto; }
.vs-vision .section-label { color: rgba(255,255,255,0.72); }

.vs-vision h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 22px;
}

.vs-vision p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.88);
    margin-bottom: 18px;
}

.vs-vision-schluss {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.25);
    font-size: 1.12rem !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--white) !important;
}

/* ----- Knopf auf der Startseite ----- */
.about-cta { margin-top: 28px; }

@media (max-width: 900px) {
    .vs-kapitel,
    .vs-hervorhebung { grid-template-columns: 1fr; gap: 34px; }
    .vs-kapitel--gedreht .vs-kapitel-text { order: 0; }
    .vs-hervorhebung-inhalt { margin-left: 0; }
    .vs-hervorhebung-bild { aspect-ratio: 4 / 3; max-width: none; }
    .vs-zahlen { grid-template-columns: repeat(2, 1fr); }
    /* Einspaltig: keine senkrechte Linie mehr, dafuer jede Kachel ausser
       der ersten mit Trennlinie nach oben. */
    .vs-grundsaetze { grid-template-columns: 1fr; }
    .vs-grundsaetze li { border-left: none; border-top: 1px solid var(--gray-200); }
    .vs-grundsaetze li:nth-child(1) { border-top: none; }
    .vs-grundsaetze li:nth-child(2) { border-top: 1px solid var(--gray-200); }
    /* Einspaltig gibt es keine halbe Zeile - die Abschlusszeile ist
       hier eine Kachel wie jede andere. */
    .vs-grundsaetze li:last-child:nth-child(odd) { display: block; }
}

@media (max-width: 700px) {
    .vs-auftakt { min-height: 70vh; padding: 130px 16px 48px; }
    .vs-kapitel { padding: 64px 16px; }
    .vs-hervorhebung { padding: 56px 20px; margin: 20px 12px; border-radius: 22px; }
    .vs-zahlen { grid-template-columns: 1fr; margin: 40px auto; padding: 0 16px; }
    .vs-zitat { margin: 64px auto; padding: 0 16px; }
    .vs-block { padding: 0 16px; margin-bottom: 64px; }
    .vs-grundsaetze li { padding: 24px 20px 24px 56px; }
    .vs-grundsaetze li::before { left: 20px; top: 25px; }
    .vs-vision { padding: 64px 20px; margin-bottom: 64px; }
    .vs-schritte li { grid-template-columns: 60px 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .vs-js .vs-kapitel-bild img,
    .vs-js .vs-hervorhebung-bild img { transform: none; transition: none; }
    .vs-weiter-strich::after { animation: none; transform: scaleX(1); }
}

/* ===== ADMIN: STATISTIK (CUP-SAISONEN) ===== */
/* Der Reiter „Statistik" im Dashboard. Leitgedanke: man traegt nur die
   Vereine mit ihren Punkten ein - Rang, Kennzahlen und die Saetze auf der
   Startseite rechnet die Seite selbst. Damit das nicht geraten werden
   muss, steht die Rechnung als Vorschau daneben. */

/* Kleiner Zusatz neben der Jahreszahl, z. B. „Stand nach 6 von 9 Wettkaempfen" */
.cup-stand-hinweis {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
}

.cup-hell .cup-stand-hinweis { color: var(--gray-600); }

/* --- Vorschau: was die Webseite daraus macht --- */
.vorschau-kennzahlen { margin-bottom: 20px; }

/* Die Karten sind hier reine Anzeige - also auch kein Anfass-Gefuehl. */
.vorschau-kennzahlen .stat-card:hover {
    transform: none;
    border-color: var(--gray-200);
    box-shadow: none;
}

.vorschau-saetze {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.vorschau-satz {
    display: grid;
    grid-template-columns: 132px 1fr;
    align-items: baseline;
    gap: 14px;
    background: var(--white);
    padding: 12px 16px;
}

.vorschau-marke {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-deep);
}

.vorschau-text { font-size: 0.88rem; color: var(--dark); line-height: 1.5; }

/* --- Zeile je Saison in der Uebersicht --- */
.saison-jahr {
    flex-shrink: 0;
    min-width: 66px;
    text-align: center;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb),0.09);
    color: var(--primary-deep);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.saison-sieg::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 8px;
    vertical-align: 1px;
}

.saison-ohne { color: var(--gray-600); font-weight: 500; }

.admin-status--laufend { background: rgba(255,149,0,0.14); color: #a35c00; }

/* --- Endstand / Zwischenstand --- */
.segment {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--gray-100);
    border-radius: 12px;
    width: 100%;
}

.segment button {
    flex: 1;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-600);
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: var(--transition);
}

.segment button:hover { color: var(--dark); }

.segment button.aktiv {
    background: var(--white);
    color: var(--dark);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- Die Wertung: eine Zeile je Verein --- */
.wertung { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.wertung-zeile {
    display: grid;
    grid-template-columns: 30px 1fr 112px 38px 34px;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 7px 8px 7px 4px;
    transition: var(--transition);
}

.wertung-zeile--unser {
    border-color: rgba(var(--primary-rgb),0.45);
    background: rgba(var(--primary-rgb),0.04);
}

/* Der Rang wird nicht eingetragen, er ergibt sich aus den Punkten und
   laeuft beim Tippen mit. */
.wertung-rang {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}

.wertung-zeile--unser .wertung-rang { color: var(--primary-deep); }

.wertung-zeile input[type="text"] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 0.92rem;
    font-family: inherit;
    background: var(--gray-100);
    transition: var(--transition);
}

.wertung-zeile input[type="text"]:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
}

.wertung-punkte { text-align: right; font-variant-numeric: tabular-nums; }

.wertung-stern,
.wertung-weg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 9px;
    padding: 0;
    height: 34px;
    transition: var(--transition);
}

.wertung-stern svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--gray-400);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.wertung-stern:hover svg { stroke: var(--primary-deep); }

.wertung-stern.aktiv svg { fill: var(--primary); stroke: var(--primary-deep); }

.wertung-weg {
    font-size: 1.3rem;
    line-height: 1;
    color: var(--gray-400);
}

.wertung-weg:hover { color: var(--accent-red); background: rgba(255,59,48,0.08); }

.wertung-plus { padding: 9px 18px; font-size: 0.86rem; margin-bottom: 8px; }

/* --- Vorschau des Podests im Editor --- */
.vorschau-podest {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    padding: 18px;
    margin-bottom: 20px;
}

.vorschau-titel {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.vorschau-wirkung {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--gray-600);
}

@media (max-width: 640px) {
    .vorschau-satz { grid-template-columns: 1fr; gap: 3px; }
    .wertung-zeile { grid-template-columns: 26px 1fr 88px 34px 30px; gap: 6px; }
    .saison-jahr { min-width: 56px; padding: 8px 6px; font-size: 0.92rem; }
}

/* ===== KONTAKT: ANSPRECHPARTNER ===== */
/* Acht gleich aussehende Kaesteln haben allen dieselbe Wichtigkeit gegeben -
   der Obmann stand gleichwertig neben "Kaernten". Gesucht wird aber anders:
   "mein Kind ist neun" oder "ich wohne im Muehlviertel". Deshalb jetzt eine
   gruppierte Liste mit Haarlinien: der Obmann als allgemeiner Weg oben,
   darunter zwei Gruppen. Ausserdem ruhiger als ein Raster aus Fuellflaechen,
   was neben dem grauen Formularfeld darunter wichtig ist. */

/* Etwas knapper als in den anderen Abschnitten: hier zaehlt jeder Pixel,
   damit die Ansprechpersonen ohne Scrollen im Bild sind. */
.contact .section-header { margin-bottom: 44px; }

.ansprech {
    margin-bottom: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--gray-200);
}

/* --- Gemeinsame Bausteine --- */
.ap-rolle {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary-deep);
    margin-bottom: 3px;
}

.ap-name {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dark);
}

/* Telefon und E-Mail stehen rechts und rechtsbuendig - dadurch entsteht
   eine ruhige Kante, an der das Auge die Nummern abfaehrt. */
.ap-wege {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.ap-wege a {
    font-size: 0.83rem;
    color: var(--gray-600);
    text-decoration: none;
    transition: var(--transition);
    overflow-wrap: anywhere;
}

.ap-wege a:hover { color: var(--primary-deep); }

/* --- Die drei Gruppen --- */
/* Kein align-items: start - die drei Karten sollen unten auf einer Linie
   abschliessen, auch wenn die erste nur zwei Zeilen hat. */
.ap-gruppen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ap-gruppe {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 6px 20px 8px;
}

/* Ein einziger Akzent, damit das Auge beim allgemeinen Weg anfaengt -
   der Obmann ist die Anlaufstelle, wenn man nicht weiss, wen man fragen soll. */
.ap-gruppe--verein {
    background: rgba(var(--primary-rgb),0.05);
    border-color: rgba(var(--primary-rgb),0.22);
}

.ap-gruppe--verein .ap-zeile { border-top-color: rgba(var(--primary-rgb),0.18); }
.ap-gruppe--verein .ap-gruppe-titel { color: var(--primary-deep); padding-bottom: 4px; }

.ap-gruppe-hinweis {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--gray-600);
    padding-bottom: 12px;
}

.ap-gruppe-titel {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    padding: 14px 0 12px;
}

/* Haarlinie zwischen den Zeilen, aber nicht ueber der ersten - so wirkt
   die Gruppe als ein Block und nicht als Stapel einzelner Kaesten. */
.ap-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 13px 0;
    border-top: 1px solid var(--gray-200);
    transition: var(--transition);
}

.ap-zeile:hover .ap-name { color: var(--primary-deep); }

.ap-zeile-text { min-width: 0; }

@media (max-width: 1000px) {
    .ap-gruppen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .ap-gruppen { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .ansprech { margin-bottom: 40px; padding-bottom: 40px; }
    /* Schmal wirken zwei Spalten gequetscht: Kontaktwege unter den Namen,
       links ausgerichtet. */
    .ap-zeile { flex-direction: column; align-items: flex-start; }
    .ap-wege { align-items: flex-start; text-align: left; }
    .ap-gruppe { padding: 6px 18px 8px; }
}

/* ===== KONTAKTFORMULAR ===== */
.feld-optional {
    font-weight: 500;
    color: var(--gray-400);
    text-transform: none;
    letter-spacing: 0;
}

/* Der Honigtopf darf nicht per display:none versteckt werden - manche
   Programme erkennen das. Deshalb aus dem Sichtfeld geschoben. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-zustimmung {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 18px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--gray-600);
    cursor: pointer;
}

.form-zustimmung input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
}

.form-zustimmung a { color: var(--primary-deep); }

.form-fehler {
    display: none;
    background: rgba(255,59,48,0.08);
    color: #c0392b;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.83rem;
    line-height: 1.45;
    margin-bottom: 14px;
}

.form-fehler.active { display: block; }

.feld-fehler,
.form-group .feld-fehler {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 0 3px rgba(255,59,48,0.1) !important;
}

.btn-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Bestaetigung statt Formular - klarer als eine kurz aufblitzende Meldung */
.form-danke { display: none; text-align: center; padding: 24px 8px 8px; }
.form-danke.active { display: block; }

.form-danke-haken {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb),0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-danke-haken svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--primary-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.form-danke h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.form-danke p { color: var(--gray-600); font-size: 0.9rem; line-height: 1.55; margin-bottom: 20px; }

.btn-noch-eine {
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: 980px;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: var(--transition);
}

.btn-noch-eine:hover { border-color: var(--gray-400); }

/* ===== ADMIN: POSTFACH ===== */
/* Aufbau wie ein Mailprogramm: ungelesen faellt durch Punkt und
   Schriftstaerke auf, der Rest bleibt ruhig. */

.tab-punkt {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-red);
    margin-left: 7px;
    vertical-align: 2px;
}

.segment--schmal { width: auto; }
.segment--schmal button { padding: 8px 16px; font-size: 0.84rem; }

.postfach-erklaerung {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--gray-600);
    max-width: 640px;
    margin-bottom: 20px;
}

.nachricht-zeile { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }

.nachricht-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    margin-top: 15px;
}

.nachricht-zeile--neu .nachricht-punkt { background: var(--primary); }
.nachricht-zeile--neu .admin-zeile-titel { font-weight: 700; }

.nachricht-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb),0.1);
    color: var(--primary-deep);
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.nachricht-avatar--klein { width: 38px; height: 38px; font-size: 0.82rem; }

/* Zwei Zeilen Vorschau, danach abgeschnitten - so bleiben die Zeilen
   gleich hoch, egal wie lang die Anfrage ist. */
.nachricht-auszug {
    font-size: 0.83rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nachricht-zeitpunkt {
    font-size: 0.76rem;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 3px;
}

/* --- Einzelne Nachricht --- */
.nachricht-kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.nachricht-kopf h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.nachricht-kopf .admin-status { margin-left: auto; }

.nachricht-zeit { font-size: 0.8rem; color: var(--gray-600); margin-top: 3px; }

.nachricht-daten {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.nachricht-datenzeile {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    gap: 14px;
    background: var(--white);
    padding: 11px 16px;
}

.nachricht-marke {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
}

.nachricht-wert { font-size: 0.9rem; color: var(--dark); overflow-wrap: anywhere; }
a.nachricht-wert { color: var(--primary-deep); text-decoration: none; }
a.nachricht-wert:hover { text-decoration: underline; }

/* Der eigentliche Text: Zeilenumbrueche so, wie sie geschrieben wurden. */
.nachricht-text {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    padding: 22px;
    font-size: 0.95rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .nachricht-zeitpunkt { display: none; }
    .nachricht-datenzeile { grid-template-columns: 1fr; gap: 3px; }
    .admin-kopf .segment--schmal { width: 100%; }
}

/* ===== RECHTSSEITEN: DATENSCHUTZ & IMPRESSUM ===== */
/* Ein Rechtstext wird nur gelesen, wenn er nicht wie einer aussieht.
   Deshalb: schmale Textspalte (rund 68 Zeichen), viel Luft zwischen den
   Abschnitten, und links ein mitlaufendes Inhaltsverzeichnis, damit man
   jederzeit weiss, wo man ist und was noch kommt. */

.recht { padding: 140px 24px 100px; max-width: 1120px; margin: 0 auto; }

.recht-kopf {
    max-width: 720px;
    margin: 0 auto 64px;
    text-align: center;
}

.recht-kopf h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.recht-vorspann {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--gray-600);
}

.recht-stand {
    margin-top: 20px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
}

.recht-raster {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 64px;
    align-items: start;
}

/* --- Mitlaufendes Inhaltsverzeichnis --- */
.recht-inhalt {
    position: sticky;
    top: 100px;
}

.recht-inhalt-titel {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gray-400);
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--gray-200);
}

.recht-inhalt ol {
    list-style: none;
    counter-reset: punkt;
}

.recht-inhalt a {
    display: block;
    counter-increment: punkt;
    padding: 7px 0 7px 26px;
    position: relative;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--gray-600);
    text-decoration: none;
    transition: var(--transition);
}

.recht-inhalt a::before {
    content: counter(punkt) ".";
    position: absolute;
    left: 0;
    font-variant-numeric: tabular-nums;
    color: var(--gray-400);
}

.recht-inhalt a:hover { color: var(--dark); }

/* Der Punkt, in dem man gerade steht - gesetzt von assets/recht.js */
.recht-inhalt a.aktiv { color: var(--primary-deep); font-weight: 600; }
.recht-inhalt a.aktiv::before { color: var(--primary-deep); }

/* --- Der eigentliche Text --- */
.recht-text { max-width: 680px; }

.recht-block {
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--gray-200);
    /* Damit die Ueberschrift beim Ankersprung nicht unter der Leiste liegt */
    scroll-margin-top: 96px;
}

.recht-block:last-of-type { border-bottom: none; }

.recht-block h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.recht-block p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.recht-block p:last-child { margin-bottom: 0; }
.recht-block strong { color: var(--dark); font-weight: 600; }

.recht-block a {
    color: var(--primary-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(var(--primary-rgb),0.4);
    transition: var(--transition);
}

.recht-block a:hover { text-decoration-color: var(--primary-deep); }

.recht-punkte {
    list-style: none;
    margin-bottom: 16px;
}

.recht-punkte li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.recht-punkte li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
}

/* --- Beschriftung/Wert-Blöcke für Adressen und Fristen --- */
.recht-karte {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    padding: 4px 22px;
    margin: 20px 0;
}

/* Breit genug fuer die laengste Beschriftung ("Vertretungsbefugt") */
.recht-daten { display: grid; grid-template-columns: 178px 1fr; }

.recht-daten dt,
.recht-daten dd {
    padding: 13px 0;
    border-top: 1px solid var(--gray-200);
    font-size: 0.92rem;
    line-height: 1.55;
}

.recht-daten dt:first-of-type,
.recht-daten dt:first-of-type + dd { border-top: none; }

.recht-daten dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    padding-top: 16px;
    padding-right: 14px;
}

.recht-daten dd { color: var(--dark); overflow-wrap: anywhere; }

/* --- Hervorhebungen --- */
.recht-hervorhebung {
    background: rgba(var(--primary-rgb),0.07);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    font-size: 1.05rem !important;
    font-weight: 600;
    color: var(--primary-deep) !important;
    margin-bottom: 20px !important;
}

/* Offener Punkt, der vor dem Veröffentlichen ausgefüllt werden muss */
.recht-hinweis {
    border-left: 3px solid var(--gray-400);
    padding: 4px 0 4px 18px;
    margin: 20px 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.recht-luecke {
    background: rgba(255,149,0,0.16);
    color: #8a4b00;
    border-radius: 5px;
    padding: 1px 7px;
    font-weight: 600;
}

.recht-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding-top: 12px;
}

.recht-fuss a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--primary-deep);
    text-decoration: none;
    transition: var(--transition);
}

.recht-fuss a:hover { opacity: 0.7; }

@media (max-width: 900px) {
    .recht { padding: 120px 20px 80px; }
    .recht-raster { grid-template-columns: 1fr; gap: 36px; }
    /* Ohne Spalte daneben gehoert das Verzeichnis nach oben - und nicht
       mitlaufend, sonst klebt es beim Scrollen im Weg. */
    .recht-inhalt {
        position: static;
        background: var(--gray-100);
        border-radius: var(--radius-sm);
        padding: 18px 22px;
    }
    .recht-inhalt-titel { border-bottom-color: var(--gray-200); }
    .recht-inhalt ol { columns: 2; column-gap: 24px; }
    .recht-kopf { margin-bottom: 44px; }
}

@media (max-width: 560px) {
    .recht-inhalt ol { columns: 1; }
    .recht-daten { grid-template-columns: 1fr; }
    .recht-daten dt { padding-bottom: 0; border-top: 1px solid var(--gray-200); }
    .recht-daten dd { padding-top: 4px; border-top: none; }
    .recht-daten dt:first-of-type + dd { border-top: none; }
    .recht-karte { padding: 4px 18px; }
}

/* ===== BILDER IM MELDUNGSTEXT ===== */
/* Dieselben Regeln gelten im Editor (.admin-inhalt) und in der fertigen
   Meldung (.artikel-text) - was man beim Schreiben sieht, steht spaeter
   genauso auf der Seite. */

.admin-inhalt img,
.artikel-text img { border-radius: var(--radius-sm); }

.admin-inhalt .bild-block,
.artikel-text .bild-block { display: block; margin: 16px 0; }

.admin-inhalt .bild-mitte,
.artikel-text .bild-mitte { display: block; margin: 16px auto; }

/* Umflossene Bilder: der Text laeuft daneben weiter */
.admin-inhalt .bild-links,
.artikel-text .bild-links { float: left; margin: 6px 22px 14px 0; }

.admin-inhalt .bild-rechts,
.artikel-text .bild-rechts { float: right; margin: 6px 0 14px 22px; }

/* Damit der Textblock die umflossenen Bilder wieder einholt */
.admin-inhalt::after,
.artikel-text::after { content: ''; display: block; clear: both; }

.admin-inhalt figure.bild-figur,
.artikel-text figure.bild-figur { margin: 16px 0; }

.admin-inhalt figure.bild-figur img,
.artikel-text figure.bild-figur img { width: 100%; display: block; }

.admin-inhalt figcaption,
.artikel-text figcaption {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--gray-600);
    padding: 8px 2px 0;
}

/* clear: sonst rutscht ein Zitat neben ein umflossenes Bild und der
   Zitatstrich steht mitten in der Zeile. */
.admin-inhalt blockquote,
.artikel-text blockquote {
    clear: both;
    margin: 20px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--primary);
    font-size: 1.06em;
    line-height: 1.6;
    color: var(--dark);
}

.admin-inhalt hr,
.artikel-text hr {
    clear: both;
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 26px 0;
}

/* Am Handy ist fuer umflossene Bilder kein Platz */
@media (max-width: 640px) {
    .admin-inhalt .bild-links, .artikel-text .bild-links,
    .admin-inhalt .bild-rechts, .artikel-text .bild-rechts {
        float: none;
        display: block;
        width: 100% !important;
        margin: 16px 0;
    }
}

/* ===== ADMIN: ERWEITERTE WERKZEUGLEISTE ===== */
.tb--symbol { padding: 0 9px; }

.tb--symbol svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.tb-groesse { display: inline-flex; }

.tb-groesse select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--gray-200);
    background: var(--white);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--dark);
    padding: 6px 26px 6px 10px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 7px;
}

.tb-groesse select:focus { outline: none; border-color: var(--primary); }

/* Farbknopf mit dem Strich in der aktuellen Farbe - wie in Textprogrammen */
.tb-farbknopf {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: inherit;
    transition: var(--transition);
}

.tb-farbknopf:hover { background: var(--gray-100); }
.tb-farbknopf-a { font-size: 0.9rem; font-weight: 700; line-height: 1; color: var(--dark); }

.tb-farbknopf-strich {
    display: block;
    width: 17px;
    height: 4px;
    border-radius: 2px;
    background: #1d1d1f;
}

.schreib-zaehler {
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}

/* ===== ADMIN: FARBMENÜ ===== */
.farb-menue {
    display: none;
    position: fixed;
    z-index: 1300;   /* ueber der Bildleiste */
    width: 268px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.16);
    padding: 16px;
}

.farb-menue.active { display: block; }

.farb-abschnitt { margin-bottom: 14px; }

.farb-titel {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-400);
    margin-bottom: 8px;
}

.farb-gitter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.farb-punkt {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

.farb-punkt:hover { transform: scale(1.14); }

.farb-eigen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.farb-eigen-wahl {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--gray-600);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.farb-eigen-wahl input[type="color"] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.farb-uebernehmen {
    border: none;
    background: var(--primary-dark);
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.farb-uebernehmen:hover { background: var(--primary-deep); }

.farb-zuruecksetzen {
    width: 100%;
    margin-top: 10px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--gray-600);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.farb-zuruecksetzen:hover { background: var(--gray-100); color: var(--dark); }

/* ===== ADMIN: BILDLEISTE ===== */
.bild-gewaehlt {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.bild-leiste {
    display: none;
    position: fixed;
    z-index: 1200;
    align-items: center;
    gap: 4px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.16);
    padding: 5px;
}

.bild-leiste.active { display: flex; }

.bild-leiste-gruppe { display: flex; gap: 2px; }

.bild-leiste-trenner {
    width: 1px;
    height: 22px;
    background: var(--gray-200);
    margin: 0 3px;
}

.bild-leiste button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 9px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
}

.bild-leiste button:hover { background: var(--gray-100); color: var(--dark); }

.bild-leiste button.aktiv {
    background: rgba(var(--primary-rgb),0.14);
    color: var(--primary-deep);
}

.bild-leiste button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bild-leiste-weg:hover { background: rgba(255,59,48,0.1); color: var(--accent-red); }

/* Griff an der Ecke - wie in Textprogrammen zum Aufziehen */
.bild-griff {
    display: none;
    position: fixed;
    z-index: 1201;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: nwse-resize;
    touch-action: none;
}

.bild-griff.active { display: block; }

body.zieht-bild { cursor: nwse-resize; user-select: none; }

@media (max-width: 640px) {
    .bild-leiste { flex-wrap: wrap; max-width: calc(100vw - 32px); }
}

/* ===== ADMIN: EINHEITLICHES ANFASSGEFÜHL ===== */
/* Vorher hob sich nur der blaue Hauptknopf beim Überfahren, alle anderen
   reagierten gar nicht oder nur mit einem Farbwechsel - das wirkte
   uneinheitlich. Jetzt gilt überall dieselbe Regel:

   Überfahren  -> hebt sich einen Hauch an
   Drücken     -> geht kurz nach unten und wird minimal kleiner

   Das Drücken ist bewusst deutlich schneller (90 ms) als das Zurückfedern.
   Genau das lässt einen Knopf "fest" wirken statt schwammig. */

.admin-btn,
.admin-toolbar .tb,
.tb-farbknopf,
.bild-leiste button,
.farb-punkt,
.farb-uebernehmen,
.farb-zuruecksetzen,
.admin-stern,
.platz-knopf,
.plan-neu,
.farbknopf,
.wertung-stern,
.wertung-weg,
.wertung-plus,
.segment button,
.btn-noch-eine {
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Große Knöpfe: anheben und beim Druck einsinken --- */
.admin-btn:hover:not(:disabled) { transform: translateY(-1px); }

.admin-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 90ms;
}

.admin-btn--sekundaer:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.admin-btn--primaer:hover { box-shadow: 0 6px 18px rgba(var(--primary-rgb),0.28); }

/* --- Kleine Knöpfe: kein Anheben, nur der Druck --- */
.admin-toolbar .tb:active:not(:disabled),
.tb-farbknopf:active,
.bild-leiste button:active,
.farb-uebernehmen:active,
.farb-zuruecksetzen:active,
.admin-stern:active,
.platz-knopf:active:not(:disabled),
.plan-neu:active,
.farbknopf:active,
.wertung-stern:active,
.wertung-weg:active,
.segment button:active,
.btn-noch-eine:active {
    transform: scale(0.92);
    transition-duration: 90ms;
}

/* Farbpunkte wachsen beim Überfahren schon - beim Druck zurück auf normal */
.farb-punkt:active { transform: scale(0.96); transition-duration: 90ms; }

/* Zeilen in Listen: beim Druck ein Hauch kleiner, damit der Klick sitzt */
.admin-zeile { transition: var(--transition), transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94); }
.admin-zeile:active { transform: scale(0.995); transition-duration: 90ms; }

/* Auf der Webseite dieselbe Sprache */
.btn:active,
.btn-submit:active:not(:disabled),
.nav-cta:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
    .admin-btn,
    .admin-btn:hover:not(:disabled),
    .admin-btn:active:not(:disabled),
    .admin-zeile,
    .admin-zeile:active,
    .btn:active,
    .btn-submit:active:not(:disabled) { transform: none; }
}

/* ===== ADMIN: POSTFACH MIT RAHMEN ===== */
/* Ohne Rahmen schwebten die Zeilen frei im Weiß und die Seite wirkte leer,
   sobald nichts offen war. Jetzt gibt es immer einen sichtbaren Ort, an dem
   Nachrichten ankommen - plus drei Zahlen, die auch bei null etwas sagen. */

.postfach-zahlen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.postfach-zahl {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}

.postfach-zahl .wert {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.postfach-zahl .marke {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-400);
}

/* Nur die offenen Nachrichten bekommen Farbe - sie sind das, was zu tun ist */
.postfach-zahl--offen {
    background: rgba(var(--primary-rgb),0.06);
    border-color: rgba(var(--primary-rgb),0.22);
}
.postfach-zahl--offen .wert { color: var(--primary-deep); }
.postfach-zahl--offen .marke { color: var(--primary-deep); }

.postfach-rahmen {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.postfach-rahmen-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.postfach-rahmen-titel {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-600);
}

.postfach-rahmen-anzahl {
    font-size: 0.78rem;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}

/* Zeilen sitzen jetzt im Rahmen: keine Abstände, dafür Haarlinien -
   das liest sich wie ein Postfach statt wie lose Karten. */
.postfach-liste .admin-zeile {
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--gray-200);
    background: none;
    box-shadow: none;
}

.postfach-liste .admin-zeile:first-child { border-top: none; }
.postfach-liste .admin-zeile:hover { background: var(--gray-100); transform: none; }
.postfach-liste .admin-zeile:active { transform: none; background: var(--gray-200); }

.postfach-liste .admin-leer { padding: 40px 22px; }

/* --- Leerer Zustand --- */
.postfach-leer { text-align: center; padding: 56px 28px 60px; }

.postfach-leer-symbol {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb),0.09);
    display: flex;
    align-items: center;
    justify-content: center;
}

.postfach-leer-symbol svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--primary-deep);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.postfach-leer h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 7px;
}

.postfach-leer p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--gray-600);
    max-width: 42ch;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .postfach-zahlen { gap: 8px; }
    .postfach-zahl { padding: 13px 12px; }
    .postfach-zahl .wert { font-size: 1.35rem; }
    .postfach-zahl .marke { font-size: 0.62rem; letter-spacing: 0.05em; }
    .postfach-leer { padding: 40px 20px 44px; }
}

/* ===== ADMIN: KONTAKT ===== */
/* Die Gruppenköpfe zeigen ihre Marken direkt neben dem Titel, damit man
   auf einen Blick sieht, welche Gruppe hervorgehoben oder versteckt ist. */
.kg-marke { margin-left: 10px; vertical-align: 2px; }

.kg-werkzeuge { display: flex; gap: 6px; }

/* Im Trainingsplan tauchen diese Knöpfe erst beim Überfahren auf. Hier sind
   sie die einzige Möglichkeit, eine Gruppe zu ändern - also immer sichtbar. */
.kg-werkzeuge .plan-neu { opacity: 1; }

/* Vorschau der Person: heller Grund, damit die türkise Rolle wirkt wie
   auf der Startseite. */
.ap-vorschau .ap-gruppe {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 4px 20px;
}

.ap-vorschau .ap-zeile { border-top: none; }

@media (max-width: 640px) {
    .kg-werkzeuge { flex-wrap: wrap; }
    .kg-marke { margin-left: 0; display: inline-block; margin-top: 4px; }
}

/* ===== VEREINSLOGO IN DER NAVIGATIONSLEISTE ===== */
/* Ersetzt den Schriftzug "Zehnkampf-Union". Die Leiste selbst bleibt
   unangetastet: .nav-inner hat weiterhin 52px Höhe, das Logo ist mit 34px
   so bemessen, dass oben und unten je 9px Luft bleiben.

   Das Bild ist freigestellt (Alphakanal), weil die Leiste durchscheinend
   ist - ein weißer Kasten würde über dem Hero-Foto als heller Block
   auffallen. */

.nav-logo picture { display: block; line-height: 0; }

.nav-logo img {
    display: block;
    height: 34px;
    width: auto;          /* Seitenverhältnis kommt aus width/height im Markup */
    transition: opacity 0.25s ease, transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94);
}

.nav-logo:hover img { opacity: 0.72; }
.nav-logo:active img { transform: scale(0.97); transition-duration: 90ms; }

/* Schmale Geräte: etwas kleiner, damit neben dem Menüknopf genug Platz
   bleibt - die Höhe der Leiste ändert sich dadurch nicht. */
@media (max-width: 420px) {
    .nav-logo img { height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-logo:active img { transform: none; }
}

/* --- Logo ueber dem Hero-Foto ---
   Ganz oben auf der Startseite (.nav.at-top) ist die Leiste durchsichtig und
   die Schrift weiss. Statt das dunkle Logo mit einem hellen Grund zu
   hinterlegen, wird dort die helle Fassung des Logos eingeblendet. Beide
   Bilder liegen deckungsgleich uebereinander und werden gekreuzt geblendet.

   Die helle Fassung gibt es nur in der Startseite; auf allen anderen Seiten
   steht sie nicht im Markup und die Regeln greifen ins Leere. */

.nav-logo { position: relative; }

.nav-logo .nav-logo-hell {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.nav.at-top .nav-logo .nav-logo-hell { opacity: 1; }
.nav.at-top .nav-logo picture { opacity: 0; }

.nav-logo picture { transition: opacity 0.4s ease; }

/* dieselbe Rueckmeldung wie beim dunklen Logo - die allgemeinen Regeln
   fuer .nav-logo img greifen hier nicht, weil sie unspezifischer sind
   und das Bild ausserdem mittig gesetzt werden muss */
.nav.at-top .nav-logo:hover .nav-logo-hell { opacity: 0.72; }
.nav-logo:active .nav-logo-hell { transform: translateY(-50%) scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    .nav-logo .nav-logo-hell,
    .nav-logo picture { transition: none; }
}

/* Schmale Geraete: Die Leiste ist nur noch gut 350px breit, der lange
   Auslauf wuerde fast die ganze Breite einnehmen. Hier beginnt das Weiss
   deshalb direkt am linken Rand und laeuft kurz hinter dem Logo aus. */
@media (max-width: 560px) {
    .nav-logo::before {
        inset: -9px -110px -9px -40px;
        background: linear-gradient(to right,
            rgba(255,255,255,0.94) 0,
            rgba(255,255,255,0.94) calc(100% - 110px),
            rgba(255,255,255,0.5) calc(100% - 65px),
            rgba(255,255,255,0) 100%);
    }
}

/* =====================================================================
   MOBIL-FEINSCHLIFF
   Alles hier drin gilt nur fuer schmale Bildschirme und steht bewusst
   am Dateiende: bei gleicher Spezifitaet gewinnt die spaetere Regel,
   die Desktop-Ansicht bleibt dadurch garantiert unveraendert.
   Leitgedanke: gleiche Inhalte, dichter gesetzt - am Handy soll man
   wischen wie in einer App, nicht eine halbe Stunde scrollen.
   ===================================================================== */

@media (max-width: 768px) {

    /* --- Grundrhythmus: 64 statt 80 Pixel je Abschnitt. Ueber die
       ganze Startseite summiert sich das auf mehrere Bildschirme. --- */
    section { padding: 64px 20px; }
    .section-header { margin-bottom: 40px; }
    .section-desc { font-size: 1rem; }

    /* --- Menue: Solange es offen ist, steht die Seite dahinter still. --- */
    body.menu-offen { overflow: hidden; }

    /* Das Menue selbst: mehr Luft, feinere Linien, und die Eintraege
       gleiten nacheinander herein - eine Bewegung wie beim Aufklappen
       von iOS-Listen, kurz genug, um nie zu nerven. */
    .mobile-menu { padding: 34px 28px 40px; overflow-y: auto; }
    .mobile-menu a {
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        padding: 14px 0;
        border-bottom: 1px solid var(--gray-100);
        opacity: 0;
        transform: translateY(14px);
    }
    .mobile-menu.active a { animation: menue-eintrag 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    .mobile-menu a:nth-child(1)  { animation-delay: 0.02s; }
    .mobile-menu a:nth-child(2)  { animation-delay: 0.05s; }
    .mobile-menu a:nth-child(3)  { animation-delay: 0.08s; }
    .mobile-menu a:nth-child(4)  { animation-delay: 0.11s; }
    .mobile-menu a:nth-child(5)  { animation-delay: 0.14s; }
    .mobile-menu a:nth-child(6)  { animation-delay: 0.17s; }
    .mobile-menu a:nth-child(7)  { animation-delay: 0.20s; }
    .mobile-menu a:nth-child(8)  { animation-delay: 0.23s; }
    .mobile-menu a:nth-child(9)  { animation-delay: 0.26s; }
    .mobile-menu a:nth-child(10) { animation-delay: 0.29s; }
    .mobile-menu a:nth-child(11) { animation-delay: 0.32s; }
    .mobile-menu a:nth-child(12) { animation-delay: 0.35s; }

    /* Die aktuelle Seite ist im Menue markiert - man weiss, wo man ist. */
    .mobile-menu a.aktiv { color: var(--primary); }

    /* Der letzte Eintrag ist Kontakt - als Knopf abgesetzt, wie der
       Kontakt-Knopf oben in der Desktop-Leiste. */
    .mobile-menu a:last-child {
        margin-top: 22px;
        background: var(--primary);
        color: var(--white);
        border-bottom: none;
        border-radius: 980px;
        text-align: center;
        padding: 14px 20px;
        font-size: 1.05rem;
    }

    @keyframes menue-eintrag {
        to { opacity: 1; transform: translateY(0); }
    }

    /* Der Hamburger wird zum X - Rueckmeldung, dass das Menue offen
       ist und derselbe Knopf es wieder schliesst. Versatz = Balkenhoehe
       (2px) + Luecke (5px). */
    .hamburger span { transition: transform 0.3s ease, opacity 0.2s ease; }
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* --- Erfolge: zwei kompakte Spalten statt sechs Wandtafeln.
       Die grosse Zahl bleibt der Held, der Text rueckt ins Kleingedruckte. --- */
    .achievement-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .achievement-card { padding: 20px 16px; }
    .achievement-card .number { font-size: 2.1rem; }
    .achievement-card h3 { font-size: 0.9rem; margin-bottom: 6px; }
    .achievement-card p { font-size: 0.74rem; line-height: 1.45; }

    /* --- Trainer: zwei Spalten. Die Karte zeigt nur Gesicht, Name und
       die drei Kennwerte - der Fliesstext steckt im Dossier, das sich
       beim Antippen ohnehin oeffnet. Es geht also nichts verloren. --- */
    .trainer-grid, .trainer-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .trainer-card { padding: 16px 14px 12px; }
    .trainer-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
    .trainer-avatar { width: 54px; height: 54px; border-radius: 16px; font-size: 0.9rem; }
    .trainer-name { font-size: 0.92rem; }
    .trainer-role { font-size: 0.75rem; }
    .trainer-desc { display: none; }
    .trainer-datenzeile { grid-template-columns: 1fr; gap: 1px; padding: 8px 0; }
    .trainer-datenzeile dd { font-size: 0.78rem; }

    /* --- Athleten auf der Startseite: Fotos flacher, Text enger. --- */
    .athlete-grid .athlete-avatar { height: 150px; }
    .athlete-grid .athlete-info { padding: 12px 14px; }

    /* --- Fotos auf der Startseite: zwei Spalten statt Einzelstapel.
       Bei ungerader Anzahl laeuft das letzte Bild ueber die volle
       Breite - ein bewusster Schlusspunkt statt einer leeren Kachel. --- */
    .foto-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .foto-grid .foto-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }

    /* --- Zeitleiste: kleinere Jahresknoepfe, engere Abstaende -
       auf 375 Pixeln zaehlt jede Spalte fuer den Text. --- */
    .timeline::before { left: 21px; }
    .timeline-dot { width: 42px; height: 42px; border-radius: 12px; font-size: 0.68rem; }
    .timeline-item { gap: 14px; margin-bottom: 20px; }
    .timeline-content { padding: 16px 18px; }

    /* --- News-Karten: flacheres Bild, mehr Meldung pro Bildschirm. --- */
    .news-image { height: 160px; }

    /* --- "Zahlen & Fakten" auf der Startseite: zwei Spalten -
       vier Kennzahlen untereinander sind eine Treppe, nebeneinander
       sind sie ein Blick. --- */
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-card { padding: 20px 14px; }
    .stat-number { font-size: 1.8rem; margin-bottom: 4px; }
    .stat-label { font-size: 0.8rem; }
    .stat-sublabel { font-size: 0.68rem; }

    /* --- Kontakt: gleiche Angaben, halbe Luft. Telefon und Mail
       nebeneinander in einer Zeile - beides bleibt antippbar,
       aber jede Person kostet zwei Zeilen weniger. --- */
    .ansprech { margin-bottom: 32px; padding-bottom: 32px; }
    .ap-zeile { padding: 10px 0; gap: 4px; }
    .ap-gruppen { gap: 10px; }
    .ap-wege { flex-direction: row; flex-wrap: wrap; gap: 2px 16px; }
    .ap-wege a { padding: 2px 0; }

    /* --- Kinder-Zehnkampf: die Disziplinen zurueck in zwei Spalten -
       zehn Zeilen untereinander sind laenger als jedes Kind Geduld hat. --- */
    .kinder-disciplines { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .discipline-item { padding: 11px 12px; gap: 9px; }

    /* Filterknoepfe (Athleten/Trainer): etwas hoeher, damit sie
       verlaesslich unter den Daumen passen. */
    .athleten-filter button, .trainer-filter button { padding: 9px 16px; }

    /* Dossier und Portraet: lange Namen ("Dr. Roland Werthner") muessen
       neben Foto und Schliessknopf Platz finden. */
    .dossier-kopf h2 { font-size: 1.25rem; }
    .portraet-text { padding: 28px 22px; }
}

/* Seiten mit eigenem 700er-Umbruch (Athleten- und Trainer-Uebersicht):
   dieselbe Verdichtung, eigener Haltepunkt, damit zwischen 700 und 768
   nichts durchrutscht. */
@media (max-width: 700px) {
    .athleten-raster { gap: 12px; }
    .athleten-raster .athlete-avatar { height: 165px; }
    .athleten-raster .athlete-info { padding: 12px 14px; }
    .athleten-raster .athlete-info h3 { font-size: 0.95rem; }

    /* Trainingsseite: engere Karten, kompaktere Kennzahlen. */
    .training-head p { font-size: 1rem; }
    .gruppe-karte { padding: 22px 18px; }

    /* Wochenplan: die Einheit bleibt vollstaendig (Marke, Zeit, Alter,
       Leitung, Ort), nur der Rahmen drumherum wird schlanker. Bei
       vierzehn Einheiten summiert sich jeder gesparte Zentimeter. */
    .wp-tag { padding: 16px 14px; gap: 10px; }
    .wp-karte { padding: 13px 15px; }
    .wp-kopf { margin-bottom: 8px; }
    .wp-zeit { font-size: 1.15rem; margin-bottom: 9px; }
    .wp-meta { padding-top: 9px; gap: 5px; }

    /* Vereinsseite: Fliesstext eine Spur kleiner - die Seite ist
       bewusst lang, aber sie muss nicht breiter klingen als sie ist. */
    .vs-kapitel p, .vs-vision-inhalt > p, .vs-hervorhebung-inhalt > p { font-size: 0.98rem; }

    /* Vereinsseite: die vier Kennzahlen als 2x2-Feld statt Treppe. */
    .vs-zahlen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .vs-zahl { padding: 18px 16px; }

    /* Trainingsseite: der Schnellzugriff ebenso als 2x2-Feld.
       Zahl oben, Text darunter - in halber Spaltenbreite ist das
       nebeneinander zu eng. */
    .training-schnell { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .schnell-karte { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; }

    /* Kinder-Zehnkampf: gleiches Muster fuer die vier Fakten. */
    .kz-fakten { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kz-fakt { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; }

    /* Die zehn Disziplinen: etwas dichter, die Nummern ruecken mit. */
    .kz-disziplinen li { padding: 18px 16px 18px 50px; }
    .kz-disziplinen li::before { left: 16px; top: 19px; }

    /* Vereinsseite: Grundsaetze und Kapitel dichter gesetzt. */
    .vs-grundsaetze li { padding: 20px 18px 20px 54px; }
    .vs-grundsaetze li:last-child:nth-child(odd) {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
    .vs-kapitel h2 { font-size: 1.5rem; }
}