/* SEV VPT Sektion Südostbahn – helles Corporate Design */

:root {
    --sev-red: #e2001a;
    --sev-red-hover: #c40016;
    --sev-red-soft: rgba(226, 0, 26, 0.08);
    --ink: #1a1a1a;
    --ink-soft: #4a4a4a;
    --muted: #6b6b6b;
    --line: #e6e6e6;
    --line-strong: #cfcfcf;
    --bg: #ffffff;
    --bg-soft: #f6f6f6;
    --bg-warm: #faf8f7;
    --header-h: 72px;
    --wrap: 1120px;
    --radius: 2px;
    --font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, sans-serif;
    --shadow: 0 8px 24px rgba(26, 26, 26, 0.06);
    --shadow-lift: 0 18px 40px rgba(26, 26, 26, 0.18);
    --ease: 160ms ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    min-height: 100vh;
    /* für die randlosen Bänder (Hero, Seitenkopf); clip statt hidden, damit
       der Sticky-Header weiter funktioniert */
    overflow-x: clip;
}

body.nav-open {
    overflow: hidden;
}

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

a {
    color: var(--sev-red);
    text-decoration: none;
}

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

svg {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

:focus-visible {
    outline: 2px solid var(--sev-red);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wrap {
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.site-header__bar {
    height: 4px;
    background: var(--sev-red);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: var(--header-h);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink);
    min-width: 0;
}

.site-logo:hover {
    color: var(--ink);
}

.site-logo__img {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    flex: none;
}

@media (max-width: 540px) {
    .site-logo__img {
        height: 32px;
        max-width: 110px;
    }
}

.site-logo__mark {
    background: var(--sev-red);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.55rem;
    font-size: 0.95rem;
    line-height: 1;
}

.site-logo__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-logo__name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
}

.site-logo__tag {
    display: none;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.2;
    white-space: nowrap;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
}

.nav-toggle__close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
}

.site-nav {
    display: none;
}

.site-nav__links,
.site-nav__account {
    display: flex;
    flex-direction: column;
}

.site-nav__link,
.site-nav__login,
.site-nav__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.7rem 0;
}

.site-nav__link:hover,
.site-nav__login:hover {
    color: var(--sev-red);
}

.site-nav__link.is-active {
    color: var(--sev-red);
}

.site-nav__icon {
    display: inline-flex;
    color: var(--muted);
}

.site-nav__link.is-active .site-nav__icon {
    color: var(--sev-red);
}

.site-nav__account {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.site-nav__user {
    color: var(--muted);
    font-weight: 500;
}

.site-nav__login {
    color: var(--sev-red);
}

@media (max-width: 979px) {
    .site-nav.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(4px + var(--header-h));
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        padding: 0.5rem 1rem 1.25rem;
        box-shadow: var(--shadow);
        max-height: calc(100vh - var(--header-h) - 4px);
        overflow: auto;
    }
}

@media (min-width: 980px) {
    .nav-toggle {
        display: none;
    }

    .site-nav {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .site-nav__links {
        flex-direction: row;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
    }

    .site-nav__account {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        padding: 0 0 0 0.85rem;
        border-top: 0;
        border-left: 1px solid var(--line);
        flex-shrink: 0;
    }

    .site-nav__link,
    .site-nav__login,
    .site-nav__user {
        padding: 0.35rem 0.45rem;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    .site-nav__icon {
        display: none;
    }

    .site-nav__link.is-active {
        box-shadow: inset 0 -2px 0 var(--sev-red);
    }
}

@media (min-width: 1180px) {
    .site-logo__tag {
        display: block;
    }
}

/* Vakante Positionen im Vorstand */
.vacancies {
    margin-top: 3rem;
}

.vacancies__intro {
    color: var(--ink-soft);
    max-width: 42rem;
    margin-bottom: 1.25rem;
}

/* gleiches Raster wie die Mitglieder darüber, damit die Spalten fluchten */
.vacancy-grid {
    display: grid;
    column-gap: 2rem;
}

@media (min-width: 640px) {
    .vacancy-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    .vacancy-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.vacancy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.9rem 0;
    /* gestrichelt, damit offene Stellen sich von den besetzten abheben */
    border-top: 1px dashed var(--line-strong);
}

.vacancy__badge {
    color: var(--sev-red);
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1rem 0.5rem;
}

.vacancy__role {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.vacancy__text {
    grid-column: 2;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.vacancies__actions {
    margin-top: 1.5rem;
}

/* Sticky «Mitglied werden» */
.join-fab {
    position: fixed;
    z-index: 150;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sev-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    transition: background var(--ease);
}

.join-fab:hover,
.join-fab:focus-visible {
    background: var(--ink);
    color: #fff;
}

/* Mobil: Leiste am unteren Rand, gut mit dem Daumen erreichbar */
@media (max-width: 899px) {
    .join-fab {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.85rem 1rem;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
    }

    /* damit die Leiste den Footer nicht überdeckt */
    body {
        padding-bottom: 3.4rem;
    }
}

/* Desktop: gedrehter Reiter am rechten Rand */
@media (min-width: 900px) {
    .join-fab {
        top: 50%;
        right: 0;
        writing-mode: vertical-rl;
        transform: translateY(-50%) rotate(180deg);
        padding: 1.2rem 0.6rem;
    }
}

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

/* Main */
.site-main {
    padding: 2rem 0 4rem;
    min-height: calc(100vh - 220px);
}

/* Randloses Band: Aussenabstand zieht es auf Fensterbreite, der Innenabstand
   holt den Inhalt zurück in die Flucht von .wrap */
.bleed,
.page-intro {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

.page-intro {
    margin-top: -2rem;
    margin-bottom: 2.5rem;
    padding-top: 2.4rem;
    padding-bottom: 2.2rem;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--line);
}

.page-intro__title {
    max-width: 46rem;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-wrap: balance;
}

.page-intro__title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: 0.9rem;
    background: var(--sev-red);
}

.page-intro__lead {
    max-width: 42rem;
    margin-top: 0.9rem;
    color: var(--ink-soft);
    font-size: 1.15rem;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.breadcrumbs a {
    color: var(--muted);
}

.breadcrumbs a:hover {
    color: var(--sev-red);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.btn--primary {
    background: var(--sev-red);
    color: #fff;
}

.btn--primary:hover {
    background: var(--sev-red-hover);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn--ghost:hover {
    background: var(--ink);
    color: #fff;
}

.btn--small {
    min-height: 38px;
    padding: 0.35rem 0.8rem;
    font-size: 0.9rem;
}

.btn svg {
    transition: transform var(--ease);
}

.btn:hover svg {
    transform: translateX(2px);
}

/* für farbige Flächen (Hero) */
.btn--light {
    background: #fff;
    color: var(--sev-red);
}

.btn--light:hover {
    background: var(--ink);
    color: #fff;
}

.btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.btn--outline-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--sev-red);
}

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    margin: -2rem calc(50% - 50vw) 3.5rem;
    padding: 3rem calc(50vw - 50%) 3.5rem;
    background: var(--sev-red);
    color: #fff;
    overflow: hidden;
}

/* Zwei geschwungene Gleise als stilles Motiv */
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -6rem;
    bottom: -4rem;
    width: min(62rem, 110vw);
    aspect-ratio: 2 / 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M0 390 C 260 380, 470 300, 800 40'/%3E%3Cpath d='M0 350 C 250 340, 440 262, 760 0'/%3E%3Cg stroke-width='2' stroke-dasharray='2 22'%3E%3Cpath d='M0 370 C 255 360, 455 281, 780 20' stroke-width='38'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain;
    opacity: 0.14;
    pointer-events: none;
}

.hero__inner {
    display: grid;
    gap: 2.25rem;
}

.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.76rem;
    margin-bottom: 1rem;
}

.hero__kicker::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: currentColor;
}

.hero__title {
    font-size: clamp(2.3rem, 6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 700;
    max-width: 14ch;
    text-wrap: balance;
}

.hero__lead {
    margin-top: 1.1rem;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 36rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.9rem;
}

@media (min-width: 860px) {
    .hero {
        padding-block: 4.5rem 4.75rem;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) 23rem;
        align-items: center;
        gap: 3.5rem;
    }
}

/* Nächste Versammlung als Billett: Datumsabschnitt, Perforation, Details */
.ticket {
    --notch: 0.85rem;
    position: relative;
    display: grid;
    grid-template-columns: 5.6rem 1fr;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-lift);
    transition: transform var(--ease), box-shadow var(--ease);
}

.ticket:hover {
    color: var(--ink);
    transform: translateY(-3px) rotate(-0.4deg);
}

.ticket__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem 0.5rem;
    background: var(--ink);
    color: #fff;
    text-align: center;
}

.ticket__day {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ticket__month {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.ticket__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 1.25rem 1.35rem 1.3rem;
    border-left: 2px dashed var(--line-strong);
}

/* Einkerbungen oben und unten an der Perforation */
.ticket__body::before,
.ticket__body::after {
    content: "";
    position: absolute;
    left: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border-radius: 50%;
    background: var(--sev-red);
}

.ticket__body::before {
    top: calc(var(--notch) / -2);
}

.ticket__body::after {
    bottom: calc(var(--notch) / -2);
}

.ticket__label {
    color: var(--sev-red);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ticket__title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.ticket__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.ticket__meta svg {
    color: var(--muted);
}

.ticket__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    color: var(--sev-red);
    font-weight: 700;
    font-size: 0.92rem;
}

.ticket__cta svg {
    transition: transform var(--ease);
}

.ticket:hover .ticket__cta svg {
    transform: translateX(3px);
}

/* Sections */
.section {
    margin-bottom: 3.5rem;
}

.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--ink);
}

.section__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.section__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
}

.section__link::after {
    content: "→";
    transition: transform var(--ease);
}

.section__link:hover::after {
    transform: translateX(3px);
}

.home-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 860px) {
    .home-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

/* Cards */
.card-grid,
.card-list {
    display: grid;
    gap: 1rem;
}

/* Karten richten sich nach der Breite ihrer Spalte, nicht nach dem Fenster.
   Auf der Startseite steht die News-Liste in einer schmalen Spalte. */
.card-list {
    container-type: inline-size;
}

@media (min-width: 700px) {
    .card-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 1.25rem 1.3rem;
    color: var(--ink);
    transition: border-color var(--ease), box-shadow var(--ease);
}

a.card:hover {
    color: var(--ink);
    border-color: var(--sev-red);
    box-shadow: var(--shadow);
}

/* News als redaktionelle Liste: keine Kästen, nur Trennlinien */
.card-list {
    gap: 0;
}

.card--horizontal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 1.4rem 0;
    background: transparent;
}

a.card--horizontal:hover {
    border-color: var(--line);
    box-shadow: none;
}

.card--horizontal .card__image {
    overflow: hidden;
}

.card--horizontal .card__image img {
    height: 180px;
    transition: transform 400ms ease;
}

a.card--horizontal:hover .card__image img {
    transform: scale(1.04);
}

.card--horizontal .card__title {
    font-size: 1.35rem;
    letter-spacing: -0.025em;
}

/* Zweispaltig nur, wenn es tatsächlich ein Bild gibt – sonst landete der Text
   in der schmalen Bildspalte und brach nach jedem Wort um. */
@container (min-width: 460px) {
    .card--horizontal.card--media {
        grid-template-columns: 200px 1fr;
        gap: 1.6rem;
        align-items: center;
    }

    .card--horizontal .card__image img {
        height: 140px;
    }
}

@container (min-width: 760px) {
    .card--horizontal.card--media {
        grid-template-columns: 300px 1fr;
        gap: 2rem;
    }

    .card--horizontal .card__image img {
        height: 190px;
    }
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.card__image img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--bg-soft);
}

.card__badge {
    align-self: flex-start;
    background: var(--sev-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
}

.card__badge--2 {
    background: var(--ink);
}

.card__title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
    transition: color var(--ease);
}

a.card:hover .card__title {
    color: var(--sev-red);
}

.card__text,
.card__meta {
    color: var(--ink-soft);
    font-size: 0.98rem;
}

/* Gleich hohe Karten: lange Anrisstexte werden nach drei Zeilen gekürzt */
.card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.card__date {
    color: var(--sev-red);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.card__cta {
    margin-top: 0.35rem;
    color: var(--sev-red);
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.card__cta svg {
    transition: transform var(--ease);
}

a.card:hover .card__cta svg {
    transform: translateX(3px);
}

/* Events */
[hidden] {
    display: none !important;
}

/* Termine wie ein Fahrplan: Datum links, Trennlinien, keine Kästen */
.event-list {
    display: grid;
    gap: 0;
}

.event-item {
    position: relative;
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    gap: 1.1rem;
    align-items: center;
    padding: 1rem 2rem 1rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: background var(--ease), padding var(--ease);
}

/* Pfeil rechts, der beim Überfahren einfährt */
a.event-item::after {
    content: "→";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    translate: 0 -50%;
    color: var(--line-strong);
    font-weight: 700;
    transition: color var(--ease), right var(--ease);
}

a.event-item:hover {
    color: var(--ink);
    background: var(--bg-warm);
}

a.event-item:hover::after {
    right: 0.1rem;
    color: var(--sev-red);
}

a.event-item:hover .event-item__title {
    color: var(--sev-red);
}

.event-item--large {
    grid-template-columns: 4.6rem 1fr;
    padding-block: 1.25rem;
    align-items: start;
}

.event-item__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: var(--ink);
    padding-left: 0.2rem;
}

.event-item__day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.event-item--large .event-item__day {
    font-size: 2.3rem;
}

.event-item__month,
.event-item__year,
.event-item__span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.event-item__month {
    margin-top: 0.2rem;
    color: var(--cat, var(--sev-red));
}

.event-item__year,
.event-item__span {
    color: var(--muted);
}

.event-item__body {
    min-width: 0;
}

.event-item__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0.3rem;
    transition: color var(--ease);
}

.event-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    margin-top: 0.3rem;
}

.event-item__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.event-item__time,
.event-item__location,
.event-item__summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin-top: 0.2rem;
}

.event-item__summary {
    display: block;
    margin-top: 0.4rem;
}

/* Terminkategorien */
.cat--versammlung { --cat: #00707a; }
.cat--sektion { --cat: #e2001a; }
.cat--unterverband { --cat: #14508c; }
.cat--sev { --cat: #1a1a1a; }
.cat--frauen { --cat: #9c1a63; }
.cat--jugend { --cat: #1f7a3f; }
.cat--migration { --cat: #b35c00; }

/* abgerundet wie ein Liniensignet im Fahrplan */
.cat-badge {
    display: inline-block;
    background: var(--cat, var(--sev-red));
    color: #fff;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.16rem 0.5rem;
    line-height: 1.35;
}

/* Agenda */
.agenda__filters {
    border: 1px solid var(--line);
    background: var(--bg-warm);
    margin-bottom: 1.25rem;
}

.agenda__filters-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.agenda__filters-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
}

.agenda__filters-state {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda__filters-state.is-filtered {
    color: var(--sev-red);
}

.agenda__filters-chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform var(--ease);
}

.agenda__filters[open] .agenda__filters-chevron {
    transform: rotate(180deg);
}

.agenda__filters-summary:hover .agenda__filters-title,
.agenda__filters-summary:hover .agenda__filters-chevron {
    color: var(--sev-red);
}

.agenda__filters-body {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.agenda__filters-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.agenda__reset {
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sev-red);
    cursor: pointer;
    padding: 0;
}

.chip-group {
    margin-top: 0.85rem;
}

.chip-group__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.chip:hover {
    border-color: var(--cat, var(--ink));
}

.chip__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--cat, var(--sev-red));
    flex-shrink: 0;
}

.chip__count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    min-width: 1.5rem;
    text-align: center;
}

.chip.is-active {
    background: var(--cat, var(--ink));
    border-color: var(--cat, var(--ink));
    color: #fff;
}

.chip.is-active .chip__dot {
    background: #fff;
}

.chip.is-active .chip__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.chip--all {
    --cat: var(--ink);
}

.agenda__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ink);
}

.view-switch {
    display: inline-flex;
    border: 1px solid var(--line-strong);
}

.view-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: 0;
    background: var(--bg);
    color: var(--ink-soft);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}

.view-switch__btn + .view-switch__btn {
    border-left: 1px solid var(--line-strong);
}

.view-switch__btn.is-active {
    background: var(--ink);
    color: #fff;
}

.agenda__ics {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.agenda-month {
    margin-bottom: 2rem;
}

.agenda-month__title {
    position: sticky;
    top: calc(var(--header-h) + 4px);
    z-index: 5;
    background: var(--bg);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.5rem 0;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid var(--line);
}

.agenda-past {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.agenda-past__summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink-soft);
    padding: 0.5rem 0;
    list-style: none;
}

.agenda-past__summary::-webkit-details-marker {
    display: none;
}

.agenda-past__summary::before {
    content: '+ ';
    color: var(--sev-red);
}

.agenda-past[open] .agenda-past__summary::before {
    content: '– ';
}

.agenda-past .event-list {
    margin-top: 1rem;
    opacity: 0.75;
}

/* Kalender */
.cal {
    border: 1px solid var(--line);
}

.cal__head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-warm);
}

.cal__title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cal__nav,
.cal__today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.cal__today {
    padding: 0 0.7rem;
}

.cal__nav:hover,
.cal__today:hover {
    border-color: var(--sev-red);
    color: var(--sev-red);
}

.cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
}

.cal__weekdays span {
    padding: 0.4rem 0.2rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.cal__weekdays abbr {
    text-decoration: none;
    border: 0;
}

.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.cal__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 3rem;
    padding: 0.3rem 0.2rem;
    background: var(--bg);
    border: 0;
    font: inherit;
    color: var(--ink);
    cursor: default;
    position: relative;
}

.cal__day.has-events {
    cursor: pointer;
}

.cal__day.is-outside {
    background: var(--bg-soft);
    color: var(--line-strong);
}

.cal__num {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.6;
}

.cal__day.is-today .cal__num {
    background: var(--sev-red);
    color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cal__day.is-selected {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.cal__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
}

.cal__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--cat, var(--sev-red));
}

.cal__labels {
    display: none;
}

.cal__panel {
    padding: 1rem 1.1rem 1.2rem;
    background: var(--bg-warm);
}

.cal__panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.cal__panel-list {
    display: grid;
    gap: 0.6rem;
}

.cal-event {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
    padding: 0.75rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-left: 4px solid var(--cat, var(--sev-red));
    color: var(--ink);
}

.cal-event:hover {
    color: var(--ink);
    box-shadow: var(--shadow);
}

.cal-event.is-past {
    opacity: 0.7;
}

.cal-event__title {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
}

.cal-event__meta {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.cal__empty {
    color: var(--muted);
}

@media (min-width: 780px) {
    .cal__day {
        min-height: 6.5rem;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.35rem 0.35rem 0.4rem;
    }

    .cal__num {
        align-self: flex-start;
    }

    .cal__day.is-today .cal__num {
        align-self: flex-start;
    }

    .cal__dots {
        display: none;
    }

    .cal__labels {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        width: 100%;
        text-align: left;
    }

    .cal__label {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.25;
        padding: 0.12rem 0.3rem;
        background: var(--cat, var(--sev-red));
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cal__more {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--muted);
        text-align: left;
    }
}

@media (max-width: 540px) {
    .agenda__filters-summary {
        padding: 0.6rem 0.9rem;
    }

    .agenda__filters-title {
        font-size: 0.75rem;
        letter-spacing: 0.04em;
    }

    .agenda__filters-body {
        padding: 0.9rem 0.9rem 1rem;
    }

    .chip {
        font-size: 0.84rem;
        padding: 0.3rem 0.55rem;
    }

    .agenda__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .view-switch {
        width: 100%;
    }

    .view-switch__btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .event-item,
    .event-item--large {
        grid-template-columns: 3.2rem 1fr;
        gap: 0.75rem;
        padding: 0.9rem 1.6rem 0.9rem 0;
    }

    .event-item__day,
    .event-item--large .event-item__day {
        font-size: 1.7rem;
    }

    .event-item__span,
    .event-item__year {
        font-size: 0.65rem;
    }

    .cal__head {
        flex-wrap: wrap;
    }

    .cal__title {
        order: -1;
        flex-basis: 100%;
        margin-bottom: 0.35rem;
    }

    .cal__today {
        margin-left: auto;
    }

    .cal__day {
        min-height: 2.9rem;
    }

    .cal__num {
        font-size: 0.85rem;
    }
}

/* Startseite: Beitritt und Kurzlinks */
.join-band {
    display: grid;
    gap: 2rem;
    margin: 1rem calc(50% - 50vw) -4rem;
    padding: 3.25rem calc(50vw - 50%) 3.5rem;
    background: var(--bg-warm);
    border-top: 1px solid var(--line);
}

.join-band__title {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.join-band__lead {
    max-width: 34rem;
    margin: 0.75rem 0 1.4rem;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.quicklinks {
    display: flex;
    flex-direction: column;
    align-self: center;
    border-top: 1px solid var(--ink);
}

.quicklinks__link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color var(--ease), padding var(--ease);
}

.quicklinks__link span {
    flex: 1 1 auto;
}

.quicklinks__link svg {
    color: var(--sev-red);
}

.quicklinks__link svg:last-child {
    color: var(--line-strong);
    transition: color var(--ease), transform var(--ease);
}

.quicklinks__link:hover {
    color: var(--sev-red);
    padding-left: 0.6rem;
}

.quicklinks__link:hover svg:last-child {
    color: var(--sev-red);
    transform: translateX(3px);
}

@media (min-width: 800px) {
    .join-band {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 4rem;
    }
}

/* Board */
.board-grid {
    display: grid;
    column-gap: 2rem;
}

@media (min-width: 640px) {
    .board-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    .board-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.person {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
    background: var(--bg);
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.person__photo,
.person__photo--placeholder {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-warm);
    color: var(--sev-red);
    box-shadow: inset 0 0 0 1px var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.35rem;
}

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

.person__body {
    min-width: 0;
}

.person__name {
    font-size: 1.05rem;
    font-weight: 700;
}

.person__role {
    color: var(--muted);
    font-size: 0.92rem;
}

.person__bio {
    margin-top: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.person__contact {
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

.person__contact a {
    overflow-wrap: anywhere;
}

.person:target {
    border-top: 2px solid var(--sev-red);
    background: linear-gradient(var(--sev-red-soft), transparent);
}

.person__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Documents */
.doc-list {
    display: grid;
    gap: 0;
}

.doc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line);
}

.doc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--sev-red-soft);
    color: var(--sev-red);
}

.doc__title {
    font-size: 1.02rem;
    font-weight: 700;
}

.doc__meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin-top: 0.15rem;
}

.doc__lock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sev-red);
    font-weight: 700;
    font-size: 0.8rem;
    margin-left: 0.4rem;
}

@media (max-width: 639px) {
    .doc {
        grid-template-columns: auto 1fr;
    }

    .doc .btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Contact */
/* Kontaktseite: Text links, Kontaktkarte rechts – wie bei den Versammlungen */
.contact-layout {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.contact-card {
    order: -1;
}

@media (min-width: 800px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 2.5rem;
        align-items: start;
    }

    .contact-card {
        order: 0;
    }
}

.contact-main {
    min-width: 0;
}

.contact-card .fact dd a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-card .fact dd a:hover {
    color: var(--sev-red);
}

/* Ansprechpersonen */
.contact-people {
    display: grid;
    column-gap: 2rem;
}

/* Die Spaltenzahl kommt aus dem Template und richtet sich nach der Zahl der
   ausgewählten Personen. minmax(0, …), sonst machen lange E-Mail-Adressen die
   Spalten ungleich breit. */
@media (min-width: 640px) {
    .contact-people {
        grid-template-columns: repeat(var(--spalten-tablet, 2), minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .contact-people {
        grid-template-columns: repeat(var(--spalten-desktop, 4), minmax(0, 1fr));
    }
}

/* Foto neben Name/Funktion, die E-Mail darunter über die volle Kartenbreite –
   sonst bricht sie in schmalen Spalten mitten im Wort um. */
.contact-person {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem 0.85rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: border-color var(--ease);
}

a.contact-person:hover {
    color: var(--ink);
    border-bottom-color: var(--sev-red);
}

a.contact-person:hover .contact-person__name {
    color: var(--sev-red);
}

.contact-person__photo {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-warm);
}

.contact-person__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--sev-red);
}

.contact-person__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.contact-person__name {
    font-weight: 700;
    line-height: 1.25;
}

.contact-person__role {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.contact-person__mail {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--sev-red);
    /* lieber umbrechen als abschneiden – die Adresse ist der Zweck der Karte */
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-person__mail svg {
    width: 14px;
    height: 14px;
    flex: none;
}

/* Article */
.article {
    max-width: 42rem;
}

.article__date {
    display: inline-block;
    color: var(--sev-red);
    font-weight: 700;
    margin-bottom: 1rem;
}

.article__figure {
    margin: 0 0 1.4rem;
}

.article__figure img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.article__lead {
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}

.article__actions,
.assembly-actions,
.article-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.event-detail > .cat-badge {
    margin-bottom: 0.9rem;
}

.event-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.event-detail__date-block {
    background: var(--cat, var(--sev-red));
    color: #fff;
    min-width: 5.5rem;
    text-align: center;
    padding: 0.7rem 0.5rem;
}

.event-detail__note {
    display: inline-block;
    background: var(--bg-soft);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1.25rem;
}

.event-detail__day {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.event-detail__month {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.event-detail__info p {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
}

/* Versammlung: Detailseite mit Infospalte */
.assembly-layout {
    display: grid;
    gap: 1.75rem;
}

.assembly-side {
    order: -1;
}

@media (min-width: 900px) {
    .assembly-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 2.5rem;
        align-items: start;
    }

    .assembly-side {
        order: 0;
        position: sticky;
        top: 5.5rem;
    }
}

/* Infokarte – wird auf Detail- und Übersichtsseite verwendet */
.fact-card {
    background: var(--bg-warm);
    border-top: 4px solid var(--sev-red);
    padding: 1.4rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.fact-card--2 {
    border-top-color: var(--ink);
}

.fact-card__badge {
    background: var(--sev-red);
    color: #fff;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    align-self: flex-start;
}

.fact-card--2 .fact-card__badge,
.assembly-hero--2 .fact-card__badge,
.assembly-card--2 .fact-card__badge {
    background: var(--ink);
}

.fact-card__note {
    color: var(--muted);
    font-size: 0.9rem;
}

.fact-card__facts {
    display: grid;
    gap: 0.9rem;
    width: 100%;
}

.fact dt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.fact dt svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.fact dd {
    margin-top: 0.2rem;
    font-weight: 600;
    line-height: 1.35;
}

.fact-card__actions {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.fact-card__actions .btn {
    justify-content: center;
    width: 100%;
}

/* Versammlungsübersicht: hervorgehobene nächste Versammlung */
.assembly-hero {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (min-width: 820px) {
    .assembly-hero {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 1.25rem 2rem;
    }
}

.assembly-hero__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.assembly-hero__title {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.assembly-hero__title a {
    color: var(--ink);
    transition: color var(--ease);
}

.assembly-hero__title a:hover {
    color: var(--sev-red);
}

.assembly-hero__lead {
    color: var(--ink-soft);
    font-size: 1.05rem;
}

/* Kompakte Karten für weitere und frühere Versammlungen */
.assembly-grid {
    display: grid;
    gap: 0.5rem 2rem;
    margin-top: 1.1rem;
}

@media (min-width: 700px) {
    .assembly-grid {
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    }
}

/* Spalten mit farbiger Oberkante statt umrandeter Karten */
.assembly-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1rem 0 1.25rem;
    border-top: 3px solid var(--sev-red);
    color: var(--ink);
    transition: border-color var(--ease);
}

.assembly-card--2 {
    border-top-color: var(--ink);
}

a.assembly-card:hover {
    color: var(--ink);
}

.assembly-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    transition: color var(--ease);
}

a.assembly-card:hover .assembly-card__title {
    color: var(--sev-red);
}

.assembly-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.assembly-card__meta svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.assembly-grid--past .assembly-card {
    border-top-color: var(--line-strong);
}

.assembly-grid--past .fact-card__badge {
    background: var(--muted);
}

.assembly-grid--past .assembly-card__title {
    font-size: 1.02rem;
}

/* Traktanden */
.topics {
    margin-top: 2rem;
}

.topics__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--ink);
}

.topic-list {
    list-style: none;
    counter-reset: topic;
    display: grid;
    padding: 0;
}

.topic {
    counter-increment: topic;
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.topic::before {
    content: counter(topic, decimal-leading-zero);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--sev-red);
    font-variant-numeric: tabular-nums;
}

.topic__body {
    min-width: 0;
}

.topic__name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.topic__text {
    margin-top: 0.3rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

@media (max-width: 540px) {
    .topic {
        grid-template-columns: 2.1rem 1fr;
        gap: 0.7rem;
        padding: 0.85rem 0;
    }

    .topic::before {
        font-size: 1.25rem;
    }

    .topic__name {
        font-size: 1rem;
    }
}

.prose {
    font-size: 1.05rem;
}

.prose p,
.prose ul,
.prose ol {
    margin-bottom: 1rem;
}

.prose ul,
.prose ol {
    padding-left: 1.2rem;
}

.prose li + li {
    margin-top: 0.25rem;
}

/* Alles, was im Editor erzeugt werden kann, braucht hier eine Entsprechung */
.prose h2,
.prose h3 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 1.8rem 0 0.6rem;
}

.prose h2 {
    font-size: 1.3rem;
}

.prose h3 {
    font-size: 1.1rem;
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose blockquote {
    margin: 1.4rem 0;
    padding: 0.6rem 0 0.6rem 1.1rem;
    border-left: 4px solid var(--sev-red);
    color: var(--ink-soft);
}

.prose hr {
    margin: 1.8rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.prose img {
    max-width: 100%;
    height: auto;
}

/* Tabellen bleiben auf dem Handy scrollbar statt das Layout zu sprengen */
.prose table {
    width: 100%;
    margin-bottom: 1.2rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.prose table :is(th, td) {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.prose table th {
    background: var(--bg-soft);
    font-weight: 700;
}

@media (max-width: 640px) {
    .prose table {
        display: block;
        overflow-x: auto;
    }
}

.prose--intro {
    margin-bottom: 1.5rem;
    max-width: 42rem;
    color: var(--ink-soft);
}

.empty {
    color: var(--muted);
    padding: 1.2rem 0;
}

/* Forms */
.form {
    max-width: 26rem;
    display: grid;
    gap: 1rem;
}

.form__banner {
    padding: 0.8rem 1rem;
    background: var(--sev-red-soft);
    color: var(--sev-red-hover);
    font-weight: 600;
}

.form__banner--ok {
    background: #eef7ee;
    color: #1c6b2c;
}

.form__label {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.form__input {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line-strong);
    font: inherit;
    background: var(--bg);
}

.form__input:focus {
    border-color: var(--sev-red);
    outline: none;
    box-shadow: 0 0 0 3px var(--sev-red-soft);
}

.form__help {
    color: var(--muted);
    font-size: 0.92rem;
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.login-panel {
    max-width: 28rem;
}

.login-panel h1 {
    font-size: 2rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.login-panel > p {
    color: var(--ink-soft);
    margin-bottom: 1.4rem;
}

/* Footer */
.site-footer {
    background: var(--ink);
    border-top: 4px solid var(--sev-red);
    padding: 3rem 0 2.5rem;
    color: rgba(255, 255, 255, 0.68);
}

.site-footer__inner {
    display: grid;
    gap: 1.75rem;
}

.site-footer__title {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
}

.site-footer__nav a,
.site-footer__meta a {
    color: rgba(255, 255, 255, 0.85);
}

.site-footer__nav a:hover,
.site-footer__meta a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.92rem;
}

@media (min-width: 800px) {
    .site-footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}

/* Sitzungen (nur für Superuser) ------------------------------------------- */

.meeting-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.meeting-toolbar .prose--intro {
    max-width: 40rem;
}

.meeting-notes {
    margin-bottom: 2rem;
}

.meeting-block {
    margin-bottom: 2.5rem;
    scroll-margin-top: 5.5rem;
}

.meeting-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--ink);
}

.meeting-block__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.meeting-block__meta {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.meeting-alert {
    background: var(--sev-red-soft);
    border-left: 4px solid var(--sev-red);
    padding: 0.7rem 0.9rem;
    margin: 0.75rem 0;
    font-size: 0.95rem;
}

.text-alert {
    color: var(--sev-red);
}

/* Traktanden mit Zeitplan */
.agenda-plan {
    list-style: none;
}

.agenda-plan__item {
    display: grid;
    grid-template-columns: 3.2rem 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.agenda-plan__time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding-top: 0.2rem;
}

.agenda-plan__num {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sev-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.agenda-plan__title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    padding-top: 0.2rem;
}

.agenda-plan__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1rem;
    margin-top: 0.3rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.agenda-plan__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.agenda-plan__notes {
    margin-top: 0.45rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
    background: var(--bg-soft);
    padding: 0.5rem 0.7rem;
}

@media (max-width: 540px) {
    .agenda-plan__item {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .agenda-plan__time {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        font-size: 0.85rem;
    }

    .agenda-plan__num {
        grid-row: 1 / span 2;
    }

    .agenda-plan__body {
        grid-column: 2;
    }
}

.kind {
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    background: var(--bg-soft);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
}

.kind--diskussion {
    border-color: var(--ink);
    color: var(--ink);
}

.kind--beschluss {
    background: var(--sev-red);
    border-color: var(--sev-red);
    color: #fff;
}

/* Fortschritt */
.progress {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.4rem 0 0.75rem;
}

.progress span {
    display: block;
    height: 100%;
    background: var(--sev-red);
    transition: width var(--ease);
}

/* Pendenzen */
.task-list {
    list-style: none;
}

.task {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.task__check {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.05rem;
    border: 2px solid var(--line-strong);
    border-radius: 4px;
    background: var(--bg);
    color: transparent;
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease), color var(--ease);
}

.task__check svg {
    width: 1rem;
    height: 1rem;
}

.task__check:hover {
    border-color: var(--sev-red);
    color: var(--line-strong);
}

.task.is-done .task__check {
    background: var(--sev-red);
    border-color: var(--sev-red);
    color: #fff;
}

.task__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.task__title {
    font-weight: 600;
}

.task.is-done .task__title {
    color: var(--muted);
    text-decoration: line-through;
}

.task__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.9rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.task.is-overdue .task__due {
    color: var(--sev-red);
    font-weight: 700;
}

.task-add {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (min-width: 700px) {
    .task-add {
        grid-template-columns: minmax(0, 1fr) 11rem 10rem auto;
    }
}

/* Teilnehmende */
.attendee-list {
    list-style: none;
}

.attendee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
}

.attendee--2 {
    border-left-color: #1f8a4c;
}

.attendee--3 {
    border-left-color: var(--sev-red);
}

.attendee--3 .attendee__name {
    color: var(--muted);
}

.attendee__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attendee__name {
    font-weight: 700;
}

.attendee__role {
    color: var(--muted);
    font-size: 0.88rem;
}

.segmented {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    overflow: hidden;
}

.segmented__btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    min-height: 36px;
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}

.segmented__btn:first-of-type {
    border-left: 0;
}

.segmented__btn:hover {
    background: var(--bg-soft);
}

.segmented__btn.is-active {
    background: var(--ink-soft);
    color: #fff;
}

.segmented__btn--2.is-active {
    background: #1f8a4c;
}

.segmented__btn--3.is-active {
    background: var(--sev-red);
}

/* Übersichtskarte */
.meeting-card__progress {
    width: 100%;
    color: var(--muted);
    font-size: 0.88rem;
}

.meeting-card__progress .progress {
    margin: 0.2rem 0 0.3rem;
}

/* Tools ------------------------------------------------------------------- */

.tool-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .tool-grid {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.4rem;
    background: var(--bg-warm);
    border-top: 4px solid var(--sev-red);
    color: var(--ink);
    transition: box-shadow var(--ease);
}

.tool-card:hover {
    color: var(--ink);
    box-shadow: var(--shadow);
}

.tool-card__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--sev-red);
    color: #fff;
}

.tool-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tool-card__text {
    color: var(--ink-soft);
}

.tool-notes {
    margin-top: 2.5rem;
}