/* ORGAHELP – Gestaltung
   Systemschriften, keine externen Ressourcen, helles und dunkles Farbschema. */

:root {
    --bg: #ffffff;
    --bg-alt: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fafafc;
    --text: #1d1d1f;
    --text-2: #515154;
    --text-3: #86868b;
    --line: rgba(0, 0, 0, .08);
    --line-strong: rgba(0, 0, 0, .16);

    --accent: #6257e3;
    --accent-hover: #5147d2;
    --accent-press: #443bb8;
    --accent-soft: rgba(98, 87, 227, .1);
    --accent-ring: rgba(98, 87, 227, .32);
    --on-accent: #ffffff;
    --navy: #2a3266;
    --grad: linear-gradient(100deg, #6257e3 0%, #a04fd0 50%, #e8527a 100%);

    --success: #1b7f46;
    --success-soft: rgba(27, 127, 70, .1);
    --warn: #a35f00;
    --warn-soft: rgba(196, 122, 0, .13);
    --danger: #c9142b;
    --danger-soft: rgba(201, 20, 43, .09);
    --info: #0a63c9;
    --info-soft: rgba(10, 99, 201, .09);

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --pill: 980px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
    --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .07);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, .06), 0 28px 64px rgba(0, 0, 0, .12);

    --header-h: 56px;
    --max: 1120px;
    --ease: cubic-bezier(.25, .1, .25, 1);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --bg-alt: #0d0d0f;
        --surface: #161618;
        --surface-2: #1c1c1e;
        --text: #f5f5f7;
        --text-2: #b9b9be;
        --text-3: #86868b;
        --line: rgba(255, 255, 255, .1);
        --line-strong: rgba(255, 255, 255, .2);

        --accent: #8f86ff;
        --accent-hover: #a39bff;
        --accent-press: #b7b0ff;
        --accent-soft: rgba(143, 134, 255, .16);
        --accent-ring: rgba(143, 134, 255, .4);
        --on-accent: #0b0a1f;
        --navy: #c9cdf5;
        --grad: linear-gradient(100deg, #9a92ff 0%, #c98bf0 50%, #ff8aa6 100%);

        --success: #4cd483;
        --success-soft: rgba(76, 212, 131, .14);
        --warn: #ffb648;
        --warn-soft: rgba(255, 182, 72, .14);
        --danger: #ff6b7d;
        --danger-soft: rgba(255, 107, 125, .14);
        --info: #6cb2ff;
        --info-soft: rgba(108, 178, 255, .14);

        --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .06);
        --shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px rgba(0, 0, 0, .5);
        --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .08), 0 28px 64px rgba(0, 0, 0, .6);
    }
}

/* ------------------------------------------------------------------ Grundlagen */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--accent-soft); }

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

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    padding: 10px 18px; border-radius: var(--pill);
    background: var(--accent); color: var(--on-accent); font-weight: 600;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.icon { width: 1.2em; height: 1.2em; flex: none; }

/* ------------------------------------------------------------------ Layout */

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.container-narrow { max-width: 760px; }
.container-tight { max-width: 520px; }

.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head .lead { margin-top: 16px; }

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.stack-sm > * + * { margin-top: 8px; }

.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cluster-center { justify-content: center; }
.cluster-between { justify-content: space-between; }
.cluster-end { justify-content: flex-end; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* ------------------------------------------------------------------ Typografie */

.eyebrow {
    display: inline-block; margin-bottom: 12px;
    font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--accent);
}
.display { font-size: clamp(2.5rem, 5.6vw, 4.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.headline { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.subtitle { font-size: 1.24rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.lead { font-size: clamp(1.12rem, 2vw, 1.32rem); line-height: 1.42; color: var(--text-2); letter-spacing: -.014em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 14px; line-height: 1.43; letter-spacing: -.006em; }
.tiny { font-size: 12.5px; line-height: 1.4; letter-spacing: 0; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }

.gradient-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.prose { font-size: 17px; line-height: 1.6; color: var(--text); overflow-wrap: break-word; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.55rem; margin-top: 2em; }
.prose h3 { font-size: 1.22rem; margin-top: 1.7em; }
.prose h4 { font-size: 1.05rem; margin-top: 1.5em; }
.prose h5 { font-size: .98rem; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose p { text-wrap: pretty; }

/* ------------------------------------------------------------------ Schaltflaechen */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 22px;
    border: 1px solid transparent; border-radius: var(--pill);
    background: var(--accent); color: var(--on-accent);
    font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; text-align: center;
    transition: background-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { background: var(--accent-press); transform: scale(.98); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.btn-secondary { background: var(--accent-soft); color: var(--accent); }
.btn-secondary:hover { background: rgba(98, 87, 227, .17); }
.btn-secondary:active { background: rgba(98, 87, 227, .24); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-ghost:active { background: var(--line); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #ae0f24; }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); }
/* Spenden: fuehrt zur Spendenseite der Organisation, in einem warmen Ton */
.btn-donate { background: rgba(225, 29, 72, .1); color: #be123c; }
.btn-donate:hover { background: rgba(225, 29, 72, .17); }
.btn-donate > .icon { fill: currentColor; fill-opacity: .18; }
.donate-row { margin-top: 10px; }
@media (prefers-color-scheme: dark) {
    .btn-donate { background: rgba(251, 113, 133, .16); color: #fda4af; }
    .btn-donate:hover { background: rgba(251, 113, 133, .24); }
}
.btn-danger-soft:hover { background: rgba(201, 20, 43, .16); }

.btn-sm { min-height: 36px; padding: 6px 15px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 14px 30px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0; width: 40px; min-height: 40px; }

.link-arrow { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; }
.link-arrow .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .icon { transform: translateX(3px); }

.link-button {
    padding: 0; border: 0; background: none; color: var(--accent);
    font-size: inherit; text-align: left;
}
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-button.danger { color: var(--danger); }

/* ------------------------------------------------------------------ Kopfzeile */

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
    .site-header { background: rgba(10, 10, 12, .72); }
}
.nav { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

.brand {
    display: inline-flex; align-items: baseline; gap: 0;
    font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand-a { color: var(--accent); }
.brand-b { color: var(--navy); }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; }
.nav-links a {
    display: block; padding: 8px 13px; border-radius: var(--pill);
    color: var(--text); font-size: 14.5px; letter-spacing: -.008em; opacity: .84;
    transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover { opacity: 1; background: var(--bg-alt); text-decoration: none; }
.nav-links a[aria-current="page"] { opacity: 1; font-weight: 600; }

/* Menuepunkt mit Unterpunkten: klappt per Klick auf, am Desktop auch beim Ueberfahren */
.nav-group { position: relative; }
.nav-group-toggle {
    display: flex; align-items: center; gap: 4px; padding: 8px 13px; border: 0; border-radius: var(--pill);
    background: transparent; color: var(--text); font: inherit; font-size: 14.5px; letter-spacing: -.008em; opacity: .84; cursor: pointer;
    transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.nav-group-toggle .icon:last-child { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav-group-toggle:hover, .nav-group.is-open .nav-group-toggle { opacity: 1; background: var(--bg-alt); }
.nav-group.is-open .nav-group-toggle .icon:last-child { transform: rotate(180deg); }
.nav-sub { display: none; }
.nav-group.is-open .nav-sub { display: block; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.lang-switch { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--bg-alt); border: 1px solid var(--line); }
.lang-switch a, .lang-switch span {
    padding: 4px 10px; border-radius: var(--pill);
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-2); line-height: 1.3;
}
.lang-switch a:hover { color: var(--text); text-decoration: none; }
.lang-switch [aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -8px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--text);
}
.nav-toggle:hover { background: var(--bg-alt); }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-open { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .nav { gap: 12px; }
    .nav-actions { margin-left: auto; }
    .nav-actions .lang-switch { display: none; }
    .nav-links {
        position: absolute; left: 0; right: 0; top: 100%;
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        margin: 0; padding: 10px 22px 22px;
        background: var(--bg); border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px rgba(0, 0, 0, .1);
        max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    }
    .nav-open .nav-links { display: flex; }
    .nav-links a { padding: 14px 4px; border-radius: 0; font-size: 19px; font-weight: 600; opacity: 1; border-bottom: 1px solid var(--line); }
    .nav-links a:hover { background: transparent; }
    .nav-links .nav-mobile-only { display: block; }
    .nav-links .lang-switch { margin-top: 18px; align-self: flex-start; }
    .nav-links .lang-switch a, .nav-links .lang-switch span { padding: 6px 14px; font-size: 13px; border-bottom: 0; font-weight: 600; }
    .nav-group-toggle {
        width: 100%; justify-content: flex-start; gap: 10px; padding: 14px 4px; border-radius: 0;
        font-size: 19px; font-weight: 600; opacity: 1; border-bottom: 1px solid var(--line); text-align: left;
    }
    .nav-group-toggle:hover, .nav-group.is-open .nav-group-toggle { background: transparent; }
    .nav-group-toggle .icon:last-child { width: 20px; height: 20px; margin-left: auto; }
    .nav-sub { padding-left: 18px; }
    .nav-links .nav-sub a { font-size: 17px; font-weight: 500; }
}
@media (min-width: 861px) {
    .nav-links .nav-mobile-only { display: none; }
    .nav-links a { white-space: nowrap; }
    .nav-sub {
        position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; min-width: 100%; padding: 6px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
    }
    /* Bruecke zwischen Punkt und Unterpunkten, damit das Ueberfahren nicht abreisst */
    .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
    .nav-links .nav-sub a { padding: 9px 12px; border-radius: var(--radius-xs); font-size: 14.5px; }
}
@media (hover: hover) and (min-width: 861px) {
    .nav-group:hover .nav-sub { display: block; }
    .nav-group:hover .nav-group-toggle { opacity: 1; background: var(--bg-alt); }
    .nav-group:hover .nav-group-toggle .icon:last-child { transform: rotate(180deg); }
}
/* Schmale Fenster: Menue enger setzen, damit alle Punkte in einer Zeile bleiben */
@media (min-width: 861px) and (max-width: 1080px) {
    .nav { gap: 10px; }
    .nav-links { gap: 0; }
    .nav-links a, .nav-group-toggle { padding: 8px 6px; font-size: 13.5px; }
    .nav-actions { gap: 6px; }
}

/* Symbole vor den Menuepunkten. In den Einstellungen der Plattform abschaltbar. */
.nav-links a { display: flex; align-items: center; gap: 6px; }
.nav-icon { flex: none; width: 16px; height: 16px; }
.nav-links .nav-icon { color: var(--text-2); }
.nav-links a[aria-current="page"] .nav-icon { color: var(--accent); }
.nav-group-toggle { gap: 6px; }
.nav-group-toggle .icon:last-child { margin-left: -2px; }
@media (max-width: 860px) {
    .nav-links a { gap: 10px; }
    .nav-links .nav-icon { width: 20px; height: 20px; }
    .nav-group-toggle .icon:last-child { margin-left: auto; }
}
/* Am Desktop in schmaleren Fenstern ohne Symbole, damit das Menue in einer Zeile bleibt */
@media (min-width: 861px) and (max-width: 1240px) {
    .site-header .nav-icon { display: none; }
}

/* ------------------------------------------------------------------ Fusszeile */

.site-footer { margin-top: auto; background: var(--bg-alt); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; padding: 52px 0 36px; }
.footer-grid h3 { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.footer-grid ul { list-style: none; }
.footer-grid li + li { margin-top: 9px; }
.footer-grid a { color: var(--text-2); }
.footer-grid a:hover { color: var(--text); }
.footer-brand p { margin-top: 12px; max-width: 34ch; line-height: 1.5; }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3);
}
.footer-bottom a { color: var(--text-2); }

@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding-top: 40px; }
    .footer-brand { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Hinweise */

.flash-stack { padding-top: 20px; }
.flash-stack .alert + .alert { margin-top: 10px; }

.alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-radius: var(--radius-sm);
    background: var(--info-soft); color: var(--text);
    font-size: 15px; line-height: 1.45;
}
.alert .icon { margin-top: 2px; color: var(--info); width: 20px; height: 20px; }
.alert-success { background: var(--success-soft); }
.alert-success .icon { color: var(--success); }
.alert-error { background: var(--danger-soft); }
.alert-error .icon { color: var(--danger); }
.alert-warn { background: var(--warn-soft); }
.alert-warn .icon { color: var(--warn); }

/* ------------------------------------------------------------------ Karten */

.card {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.card-pad { padding: 30px; }
.card-pad-lg { padding: 40px; }
.card-flat { box-shadow: none; }
.section-alt .card { border-color: transparent; }

.card-hover { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }

.feature { padding: 34px 30px; }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 22px;
    border-radius: 15px; background: var(--accent-soft); color: var(--accent);
}
.feature-icon .icon { width: 26px; height: 26px; }
.feature h3 { font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.2; }
.feature p { margin-top: 10px; color: var(--text-2); font-size: 16px; line-height: 1.5; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: var(--pill);
    background: var(--bg-alt); color: var(--text-2);
    font-size: 12.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0; white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-info { background: var(--info-soft); color: var(--info); }

.verified { display: inline-flex; color: #1d8cf0; vertical-align: -.16em; margin-left: .22em; }
.verified .icon { width: 1.02em; height: 1.02em; }

/* ------------------------------------------------------------------ Hero */

.hero { position: relative; overflow: hidden; padding: 76px 0 84px; }
.hero::before {
    content: ""; position: absolute; inset: -30% -10% auto; height: 120%; z-index: -1;
    background:
        radial-gradient(46% 50% at 22% 28%, rgba(98, 87, 227, .15), transparent 70%),
        radial-gradient(40% 46% at 82% 22%, rgba(232, 82, 122, .12), transparent 70%);
    pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 40px; align-items: center; }
.hero-copy .lead { margin-top: 22px; max-width: 34em; }
.hero-actions { margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--text-3); }
.hero-figure { margin: 0 auto; max-width: 560px; }
.hero-art img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
    .hero { padding: 44px 0 56px; text-align: center; }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-copy .lead { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-art { order: -1; }
    .hero-figure { max-width: 360px; }
}

.page-hero { padding: 64px 0 40px; text-align: center; }
.page-hero .lead { max-width: 640px; margin: 16px auto 0; }
.page-hero.left { text-align: left; }
.page-hero.left .lead { margin-left: 0; }

/* ------------------------------------------------------------------ Events */

.event-card {
    display: flex; gap: 18px; padding: 22px; height: 100%;
    color: var(--text);
}
.event-date {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 66px; height: 72px; border-radius: 16px;
    background: var(--accent-soft); color: var(--accent); line-height: 1;
}
.event-date .d { font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.event-date .m { margin-top: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.event-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.event-body h3 { font-size: 1.12rem; letter-spacing: -.018em; line-height: 1.25; }
.event-body .excerpt { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.event-meta { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text-2); }
.event-meta li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.event-meta .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--text-3); }
.event-meta span { min-width: 0; overflow-wrap: anywhere; }
.event-foot { margin-top: auto; padding-top: 14px; }
.event-card.is-cancelled .event-date { background: var(--danger-soft); color: var(--danger); }

.meta-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.meta-list li { display: flex; gap: 14px; align-items: flex-start; }
.meta-list .icon-wrap {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; background: var(--bg-alt); color: var(--text-2);
}
.meta-list .icon-wrap .icon { width: 19px; height: 19px; }
.meta-list .k { font-size: 13px; color: var(--text-3); line-height: 1.3; }
.meta-list .v { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }

/* Event-Seite: Details und Anmeldung teilen sich die Breite je zur Haelfte */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.detail-aside { position: sticky; top: calc(var(--header-h) + 22px); }
@media (max-width: 960px) {
    .detail-grid { grid-template-columns: 1fr; gap: 28px; }
    .detail-aside { position: static; }
}

progress.capacity {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; height: 8px; border: 0; border-radius: var(--pill);
    background: var(--bg-alt); overflow: hidden;
}
progress.capacity::-webkit-progress-bar { background: var(--bg-alt); border-radius: var(--pill); }
progress.capacity::-webkit-progress-value { background: var(--accent); border-radius: var(--pill); }
progress.capacity::-moz-progress-bar { background: var(--accent); border-radius: var(--pill); }
progress.capacity.is-full::-webkit-progress-value { background: var(--warn); }
progress.capacity.is-full::-moz-progress-bar { background: var(--warn); }

.orga-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.orga-chip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--text); }
.orga-logo {
    flex: none; width: 48px; height: 48px; border-radius: 13px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-alt); color: var(--text-3); font-weight: 700; font-size: 18px;
    border: 1px solid var(--line);
}
.orga-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.orga-logo.lg { width: 84px; height: 84px; border-radius: 22px; font-size: 30px; }
.orga-chip .name, .orga-chip .sub { display: block; }
.orga-chip .name { font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.014em; }
.orga-chip .sub { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }

.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 64px; }
.stat { text-align: center; }
.stat .n { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.stat .l { margin-top: 8px; font-size: 17px; color: var(--text-2); }

.cta-band { border-radius: var(--radius-lg); padding: 56px 34px; text-align: center; background: var(--grad); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 12px; opacity: .92; font-size: 1.12rem; }
.cta-band .btn { margin-top: 26px; background: #fff; color: #2a2560; }
.cta-band .btn:hover { background: rgba(255, 255, 255, .9); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; font-size: 15px; color: var(--text-2); }

.share { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-box { display: inline-block; padding: 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); line-height: 0; }
.qr-box img { width: 180px; height: 180px; image-rendering: pixelated; }

.empty { padding: 48px 24px; text-align: center; color: var(--text-2); }
.empty > .icon { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 14px; }
.empty h3 { font-size: 1.2rem; color: var(--text); }
.empty p { margin-top: 8px; }
.empty .btn { margin-top: 20px; }

.debug {
    margin-top: 48px; padding: 18px; border-radius: var(--radius-sm); background: var(--bg-alt);
    font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ FAQ */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 22px 2px; cursor: pointer; list-style: none;
    font-size: 1.16rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--text-3); transition: transform .3s var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-body { padding: 0 2px 24px; color: var(--text-2); max-width: 64ch; }
.faq-body > * + * { margin-top: .8em; }

/* ------------------------------------------------------------------ Formulare */

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) {
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .form-row.keep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.label { font-size: 14px; font-weight: 600; letter-spacing: -.006em; color: var(--text); }
.label .opt { font-weight: 400; color: var(--text-3); }
.hint { font-size: 13px; color: var(--text-3); line-height: 1.4; }

.input, .textarea, .select {
    width: 100%; min-height: 48px; padding: 12px 15px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font-size: 17px; line-height: 1.3;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
    border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft);
}
.select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.500l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
}
.input-sm, .select-sm { min-height: 38px; padding: 7px 12px; font-size: 15px; border-radius: 10px; }
.select-sm { padding-right: 36px; background-position: right 10px center; background-size: 16px; }

input[type="date"].input, input[type="time"].input { min-width: 0; }

.field-error { font-size: 13.5px; color: var(--danger); line-height: 1.35; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--text-2); cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] {
    flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer;
}
.check strong { color: var(--text); font-weight: 600; }
.check a { text-decoration: underline; text-underline-offset: 2px; }

.choice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .choice-cards { grid-template-columns: 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-body {
    display: block; height: 100%; padding: 15px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--surface);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.choice-body .t { display: block; font-weight: 600; font-size: 15.5px; letter-spacing: -.012em; }
.choice-body .s { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.choice input:hover + .choice-body { border-color: var(--text-3); }
.choice input:checked + .choice-body { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.choice input:focus-visible + .choice-body { outline: 3px solid var(--accent-ring); outline-offset: 2px; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.form-section { padding-top: 26px; margin-top: 6px; border-top: 1px solid var(--line); }
.form-section > h2, .form-section > h3 { font-size: 1.22rem; letter-spacing: -.02em; margin-bottom: 4px; }
.form-section > .muted { margin-bottom: 18px; font-size: 15px; }

.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.input-group { position: relative; }
.input-group .input { padding-right: 52px; }
.input-group .toggle-pw {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--text-3);
    display: inline-flex; align-items: center; justify-content: center;
}
.input-group .toggle-pw:hover { color: var(--text); background: var(--bg-alt); }
.input-group .toggle-pw .icon-hide { display: none; }
.input-group.is-visible .toggle-pw .icon-show { display: none; }
.input-group.is-visible .toggle-pw .icon-hide { display: block; }

.auth-wrap { padding: 64px 0 88px; }
.auth-card { padding: 38px 34px; }
.auth-card h1 { font-size: 1.9rem; letter-spacing: -.028em; }
.auth-card .lead { font-size: 1.05rem; margin-top: 8px; }
.auth-alt { margin-top: 22px; text-align: center; font-size: 15px; color: var(--text-2); }
@media (max-width: 520px) {
    .auth-wrap { padding: 32px 0 56px; }
    .auth-card { padding: 28px 22px; border-radius: var(--radius); }
}

.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.steps li { counter-increment: step; display: flex; gap: 16px; align-items: flex-start; }
.steps li::before {
    content: counter(step); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 15px;
}
.steps li > div { padding-top: 5px; }

/* ------------------------------------------------------------------ Cockpit */

.cockpit { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 88px; }
.cockpit-side { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100dvh - var(--header-h) - 48px); overflow-y: auto; padding-right: 4px; }
/* Rollbalken des Menues: hell und schmal statt dunkelgrau */
.cockpit-side { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .14) transparent; }
.cockpit-side::-webkit-scrollbar { width: 8px; }
.cockpit-side::-webkit-scrollbar-track { background: transparent; }
.cockpit-side::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.cockpit-side::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .24); background-clip: padding-box; }
@media (prefers-color-scheme: dark) { .cockpit-side { scrollbar-color: rgba(255, 255, 255, .18) transparent; } .cockpit-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); background-clip: padding-box; } }
.cockpit-main { min-width: 0; }

.side-toggle { display: none; }
.side-group + .side-group { margin-top: 22px; }
.side-group h2 {
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); line-height: 1.4;
}
.side-group h2 .verified { margin-left: 0; }
.side-group ul { list-style: none; }
.side-link {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 12px; border: 0; border-radius: 11px; background: transparent;
    color: var(--text); font-size: 15px; letter-spacing: -.01em; line-height: 1.3; text-align: left;
    transition: background-color .15s var(--ease);
}
.side-link .icon { width: 19px; height: 19px; color: var(--text-3); }
.side-link:hover { background: var(--bg-alt); text-decoration: none; }
.side-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-link.is-active .icon { color: var(--accent); }
.side-user { padding: 10px 12px 0; }
.side-link .count { margin-left: auto; font-size: 12.5px; color: var(--text-3); font-weight: 500; }

@media (max-width: 960px) {
    .cockpit { grid-template-columns: 1fr; gap: 20px; padding-top: 18px; }
    .cockpit-side { position: static; max-height: none; overflow: visible; padding-right: 0; }
    .side-nav { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .side-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
        padding: 14px 18px; border: 0; background: transparent; color: var(--text);
        font-weight: 600; font-size: 16px; text-align: left;
    }
    .side-toggle .icon { color: var(--text-3); transition: transform .3s var(--ease); }
    .side-nav.is-open .side-toggle .icon { transform: rotate(180deg); }
    .side-nav-body { display: none; padding: 16px 10px; border-top: 1px solid var(--line); }
    .side-nav.is-open .side-nav-body { display: block; }
    .no-js .side-nav-body { display: block; }
    .no-js .side-toggle { display: none; }
    .side-link { padding: 12px 12px; font-size: 16px; }
}

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.page-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); letter-spacing: -.028em; }
.page-head .sub { margin-top: 6px; color: var(--text-2); font-size: 16px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 10px; font-size: 14px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.crumbs .icon { width: 13px; height: 13px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.kpi { padding: 22px; }
.kpi .n { font-size: 2.1rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.kpi .l { margin-top: 8px; font-size: 14px; color: var(--text-2); }

.panel + .panel { margin-top: 24px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 26px 0; }
.panel-head h2 { font-size: 1.22rem; letter-spacing: -.02em; }
.panel-body { padding: 22px 26px 26px; }
.panel-body.flush { padding: 8px 0 0; }
@media (max-width: 620px) {
    .panel-head { padding: 20px 20px 0; }
    .panel-body { padding: 18px 20px 22px; }
    .card-pad { padding: 22px; }
}

.tabs { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--bg-alt); border: 1px solid var(--line); }
.tab { padding: 7px 18px; border-radius: var(--pill); font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

.list { list-style: none; }
.list-row {
    display: flex; align-items: center; gap: 16px; padding: 16px 26px;
    border-top: 1px solid var(--line);
}
.list-row:first-child { border-top: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { font-weight: 600; font-size: 16px; letter-spacing: -.014em; line-height: 1.3; overflow-wrap: anywhere; }
.list-row .t a { color: var(--text); }
.list-row .s { margin-top: 3px; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.list-row .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
@media (max-width: 620px) {
    .list-row { flex-wrap: wrap; padding: 16px 20px; gap: 12px; }
    .list-row .actions { width: 100%; justify-content: flex-start; }
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table th { border-top: 0; font-size: 12.5px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 26px; }
.table th:last-child, .table td:last-child { padding-right: 26px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td .s { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }

@media (max-width: 760px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: 14px 20px; border-top: 1px solid var(--line); }
    .table-stack tr:first-child { border-top: 0; }
    .table-stack td { padding: 3px 0 !important; border: 0; }
    .table-stack td[data-label]::before {
        content: attr(data-label); display: block;
        font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; text-transform: uppercase; margin-top: 8px;
    }
    .table-stack .num { text-align: left; }
}

.dl { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 10px 20px; font-size: 15.5px; }
.dl dt { color: var(--text-3); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: 10px; } }

.answers { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.answers .q { color: var(--text-3); }
.answers .a { color: var(--text); overflow-wrap: anywhere; }

details.confirm { display: inline-block; position: relative; }
details.confirm > summary { list-style: none; cursor: pointer; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] { display: block; width: 100%; }
details.confirm .confirm-body {
    margin-top: 12px; padding: 18px; border-radius: var(--radius-sm);
    background: var(--bg-alt); border: 1px solid var(--line); font-size: 15px;
}
details.confirm .confirm-body p { color: var(--text-2); }

.question-list { display: flex; flex-direction: column; gap: 14px; }
.question-row { padding: 18px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface-2); }
.question-row .q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.question-row .q-num { font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: .03em; text-transform: uppercase; }
.question-row .q-tools { display: flex; gap: 4px; }
.question-row .q-tools button {
    width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--text-3);
    display: inline-flex; align-items: center; justify-content: center;
}
.question-row .q-tools button:hover { background: var(--line); color: var(--text); }
.question-row .q-tools .icon { width: 18px; height: 18px; }
.question-row .q-tools .up .icon { transform: rotate(180deg); }
.js .question-row.is-empty { display: none; }
.question-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; }
@media (max-width: 620px) { .question-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Bewegung */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Bei "weniger Bewegung" im System: kein sanftes Scrollen, kein Einblenden beim Scrollen.
   Die einzelnen Animationen regeln ihren Ruhezustand selbst, siehe die Bloecke weiter unten.
   Eine pauschale Dauer von 0,01 ms liess alles, was laufen darf, nur noch flackern. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ Kleine Bildschirme */

@media (max-width: 860px) {
    body { font-size: 16.5px; }
    .section { padding: 60px 0; }
    .section-sm { padding: 40px 0; }
    .section-head { margin-bottom: 36px; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .grid { gap: 16px; }
    .feature { padding: 28px 24px; }
    .cta-band { padding: 44px 24px; }
    .page-hero { padding: 40px 0 28px; }
}
@media (min-width: 621px) and (max-width: 860px) {
    .grid-3.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .container { padding: 0 18px; }
    .event-card { padding: 18px; gap: 14px; }
    .event-date { width: 56px; height: 64px; border-radius: 14px; }
    .event-date .d { font-size: 23px; }
}

/* ------------------------------------------------------------------ Druck */

.print-only { display: none; }

@media print {
    :root {
        --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #fff;
        --text: #000; --text-2: #222; --text-3: #444; --line: #bbb; --line-strong: #888;
        color-scheme: light;
    }
    @page { margin: 14mm; }
    body { font-size: 11pt; background: #fff; color: #000; display: block; }
    .site-header, .site-footer, .cockpit-side, .no-print, .flash-stack, .skip-link { display: none !important; }
    .print-only { display: block; }
    .cockpit { display: block; padding: 0; }
    .container { max-width: none; padding: 0; }
    .card { border: 0; box-shadow: none; border-radius: 0; }
    .table th, .table td { padding: 6pt 6pt; border-top: .5pt solid #999; font-size: 10pt; }
    .table th:first-child, .table td:first-child { padding-left: 0; }
    .table thead { display: table-header-group; }
    .table tr { break-inside: avoid; }
    .table-stack thead { display: table-header-group !important; }
    .table-stack { display: table !important; }
    .table-stack tbody { display: table-row-group !important; }
    .table-stack tr { display: table-row !important; padding: 0 !important; }
    .table-stack td { display: table-cell !important; padding: 6pt !important; border-top: .5pt solid #999 !important; width: auto !important; }
    .table-stack td[data-label]::before { display: none !important; }
    .sign-col { width: 34mm; }
    a { color: #000; text-decoration: none; }
    .badge { border: .5pt solid #999; background: #fff; color: #000; }
}

/* ------------------------------------------------------------------ Ergaenzungen */

.register-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .register-grid { grid-template-columns: 1fr; gap: 32px; } }
.register-grid img { border-radius: var(--radius-lg); }

.choice-cards.tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .choice-cards.tri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .choice-cards.tri .choice-body { padding: 12px 8px; text-align: center; } }

.textarea.mono { font: 14.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.grow { flex: 1 1 0; min-width: 0; }
.cluster > .grow { min-width: 180px; }
code { font: .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.feature-icon.mt-0 { margin-bottom: 0; }
.list-row .feature-icon { width: 44px; height: 44px; border-radius: 13px; }
.list-row .feature-icon .icon { width: 21px; height: 21px; }
.center .feature-icon { margin-left: auto; margin-right: auto; }
.auth-card .feature-icon { margin-bottom: 18px; }
.faq-page > p { color: var(--text-2); margin-bottom: 24px; }
.kpi .n .faint { font-weight: 500; font-size: .6em; letter-spacing: -.01em; }
a.kpi { color: var(--text); display: block; }
a.kpi:hover { text-decoration: none; }
.panel > .subtitle { margin-bottom: 4px; }
.list-row .event-date { width: 58px; height: 62px; border-radius: 14px; }
.list-row .event-date .d { font-size: 22px; }
.list-row .event-date .m { font-size: 11px; margin-top: 4px; }
input[type="file"].input { padding: 10px 12px; font-size: 15px; }
.page-head .cluster .orga-logo { flex: none; }

/* Feinschliff nach Sichtpruefung */
.page-hero.left { padding-bottom: 12px; }
a.card, a.card:hover { color: var(--text); }
.event-meta .verified .icon, .verified .icon { color: #1d8cf0; width: 1.02em; height: 1.02em; margin-top: 0; }
fieldset > legend { float: left; width: 100%; margin-bottom: 8px; }
fieldset > legend + * { clear: both; }
.crumbs + .headline { margin-top: 4px; }

.debug { max-height: 420px; overflow: auto; }
.mobile-cta { display: none; }
@media (max-width: 960px) {
    .mobile-cta {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--line);
        transition: transform .3s var(--ease), opacity .3s var(--ease);
    }
    .mobile-cta.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
    .detail-aside { scroll-margin-top: calc(var(--header-h) + 12px); }
}
@media (max-width: 960px) and (prefers-color-scheme: dark) {
    .mobile-cta { background: rgba(10, 10, 12, .8); }
}

/* ------------------------------------------------------------------ Schaltflaechen: Symbole und Sperre */

/* Symbole in Schaltflaechen richten sich immer nach der Schaltflaeche, nie nach dem Umfeld */
.btn > .icon,
.empty .btn .icon,
.alert .btn .icon,
.list-row .btn .icon,
.event-meta .btn .icon {
    width: 1.15em; height: 1.15em; margin: 0; flex: none;
    color: currentColor; stroke-width: 2;
}
.btn-lg > .icon { width: 1.1em; height: 1.1em; }

/* Gesperrt nach dem Absenden */
button[disabled], input[type="submit"][disabled] { cursor: default; }
.side-link[disabled], .link-button[disabled] { opacity: .45; pointer-events: none; }
.select[disabled], .input[disabled] { opacity: .55; }
form[aria-busy="true"] { cursor: progress; }

.btn.is-busy[disabled] { opacity: .78; }
.btn.is-busy > .icon { display: none; }
.btn.is-busy::before,
.side-link.is-busy::before,
.link-button.is-busy::before {
    content: ""; flex: none; display: inline-block;
    width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: oh-spin .7s linear infinite;
}
.link-button.is-busy::before { margin-right: 6px; vertical-align: -.12em; }
@keyframes oh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn.is-busy::before, .side-link.is-busy::before, .link-button.is-busy::before {
        animation: none !important; border-right-color: currentColor; opacity: .45;
    }
}

/* ------------------------------------------------------------------ Hero-Ueberschrift */

/* Die erste Zeile bleibt immer in einer Zeile. Die Schriftgroesse richtet sich nach dem Platz. */
.hero-title { font-size: clamp(1.6rem, 8.4vw, 3.4rem); }
.hero-title .hero-line { display: block; white-space: nowrap; }
.hero-title .hero-line-2 { display: block; padding-bottom: .08em; }
@media (min-width: 861px) {
    .hero-title { font-size: clamp(2.1rem, 4.25vw, 3.4rem); }
    .hero-grid { grid-template-columns: 1.25fr .75fr; }
}

/* ------------------------------------------------------------------ Hero: Mindesthoehe */

/* Mindestens 65 Prozent der Fensterhoehe, Inhalt bleibt senkrecht mittig */
.hero { min-height: 65vh; display: grid; align-content: center; }

/* ------------------------------------------------------------------ Organisationen folgen */

.follow-form { display: inline-flex; }

/* "Gefolgt" wechselt beim Ueberfahren zu "Entfolgen". Beide Texte liegen uebereinander, die Breite bleibt gleich. */
.btn-following { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-following:hover { background: var(--bg-alt); }
.btn-following:active { background: var(--line); }
.btn-following > .icon { color: var(--success); }
.btn-following .swap { display: inline-grid; justify-items: center; }
.btn-following .swap > span { grid-area: 1 / 1; }
.btn-following .swap .when-hover { visibility: hidden; }
@media (hover: hover) {
    .btn-following:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
    .btn-following:hover > .icon { color: currentColor; }
    .btn-following:hover .swap .when-idle { visibility: hidden; }
    .btn-following:hover .swap .when-hover { visibility: visible; }
}

/* Orga-Feed: vergangene Events ausgegraut */
.list-row.is-past > .event-date,
.list-row.is-past > .grow { opacity: .5; filter: grayscale(1); transition: opacity .2s var(--ease); }
.list-row.is-past .event-date { background: var(--bg-alt); color: var(--text-2); }
.list-row.is-past:hover > .event-date,
.list-row.is-past:hover > .grow,
.list-row.is-past:focus-within > .grow { opacity: .8; }
.list-row .orga-logo { flex: none; }

/* ------------------------------------------------------------------ Abmelden im Menue */

.nav-logout { display: inline-flex; margin: 0; }
.nav-logout-link {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
    color: var(--text); font-size: 19px; font-weight: 600; text-align: left;
}
.nav-logout-link .icon { width: 20px; height: 20px; color: var(--text-2); }
.nav-links .nav-logout { display: flex; }

/* "Abmelden" als Unterpunkt von "Cockpit": klappt beim Ueberfahren und mit der Tastatur auf */
.nav-user { position: relative; display: flex; align-items: center; }
.nav-user > .btn > .icon:last-child { width: 14px; height: 14px; margin-right: -4px; transition: transform .2s var(--ease); }
.nav-user-sub {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 100%; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
/* Bruecke zwischen Knopf und Unterpunkt, damit das Ueberfahren nicht abreisst */
.nav-user-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.nav-user-sub .nav-logout { display: flex; }
.nav-user-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-xs);
    background: none; color: var(--text); font: inherit; font-size: 14.5px; white-space: nowrap; text-align: left; cursor: pointer;
}
.nav-user-item:hover, .nav-user-item:focus-visible { background: var(--bg-alt); }
.nav-user-item .icon { width: 17px; height: 17px; color: var(--text-2); }
.nav-user:focus-within .nav-user-sub { display: block; }
.nav-user:focus-within > .btn > .icon:last-child { transform: rotate(180deg); }
@media (hover: hover) {
    .nav-user:hover .nav-user-sub { display: block; }
    .nav-user:hover > .btn > .icon:last-child { transform: rotate(180deg); }
}
/* Breite Geraete ohne Maus, etwa ein Tablet quer: "Abmelden" steht wie bisher neben "Cockpit" */
@media (hover: none) and (min-width: 861px) {
    .nav-user { gap: 6px; }
    .nav-user > .btn > .icon:last-child { display: none; }
    .nav-user-sub, .nav-user:focus-within .nav-user-sub { display: block; position: static; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    .nav-user-sub::before { content: none; }
}
/* Am Handy steht "Abmelden" im aufgeklappten Menue */
@media (max-width: 860px) {
    .nav-user > .btn > .icon:last-child, .nav-user-sub, .nav-user:hover .nav-user-sub, .nav-user:focus-within .nav-user-sub { display: none; }
}

/* Kleine Ueberschrift auf dem Farbverlauf: hell statt in der Akzentfarbe */
.cta-band .eyebrow { color: rgba(255, 255, 255, .86); }

/* ------------------------------------------------------------------ Seite einer Organisation */

/* Logo auf der oeffentlichen Seite: zweimal um 60 Prozent vergroessert, von 84 ueber 134 auf 214 Pixel */
.orga-logo.xl { width: 214px; height: 214px; border-radius: 56px; font-size: 77px; }

/* Karten immer mittig, auch wenn es nur eine oder zwei sind.
   Die Spaltenzahl bleibt wie im normalen Raster: drei, zwei oder eine. Nur unvollstaendige Reihen ruecken in die Mitte. */
.grid-auto.grid-center {
    --cols: 3; --gap: 22px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
.grid-auto.grid-center > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    min-width: 0;
    height: auto;   /* damit alle Karten einer Reihe gleich hoch werden */
}
@media (max-width: 987px) { .grid-auto.grid-center { --cols: 2; } }
@media (max-width: 860px) { .grid-auto.grid-center { --gap: 16px; } }
@media (max-width: 665px) { .grid-auto.grid-center { --cols: 1; } }

/* ------------------------------------------------------------------ Listen zum Hinzufuegen (eigene Ausstattung) */

.repeater-list { display: grid; gap: 10px; margin-top: 12px; }
.repeater-row { display: flex; align-items: center; gap: 8px; }
.repeater-row .input { flex: 1; min-width: 0; }
.repeater-row .btn-icon { flex: none; width: 44px; min-height: 44px; border-radius: 50%; }
.repeater-foot { margin-top: 14px; }
.js .repeater-row.is-empty { display: none; }
/* Ohne JavaScript stehen alle Zeilen offen, die Schaltflaechen haetten dann keine Wirkung */
.no-js [data-repeater-add], .no-js [data-repeater-remove], .no-js [data-repeater-count] { display: none; }

/* ------------------------------------------------------------------ Titelbild eines Events */

/* Karte mit Bild: das Bild liegt oben ueber die ganze Breite, darunter folgen Datum und Text wie gewohnt */
/* Raster statt umbrechender Zeile: Das Bild behaelt in jeder Karte dieselbe Hoehe, der Text nimmt den Rest und haelt die Marke unten */
.event-card.has-cover { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; padding-top: 0; overflow: hidden; }
.event-cover {
    grid-column: 1 / -1; display: block; width: calc(100% + 44px); margin: 0 -22px 4px;
    aspect-ratio: 16 / 9; background: var(--bg-alt); overflow: hidden;
}
.event-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card-hover:hover .event-cover img { transform: scale(1.03); }
.event-card.has-cover .event-body { flex: 1 1 0; }
/* Die Karte hat erst unter 421 Pixel den schmaleren Innenabstand, das Bild folgt derselben Grenze */
@media (max-width: 420px) {
    .event-cover { width: calc(100% + 36px); margin: 0 -18px 2px; }
}

.event-hero-image { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); aspect-ratio: 16 / 9; box-shadow: var(--shadow-sm); }
.event-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cover-preview { margin: 0 0 8px; max-width: 420px; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-alt); border: 1px solid var(--line); }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.input-file { padding: 10px 12px; height: auto; }
.input-file::file-selector-button {
    margin-right: 14px; padding: 8px 16px; border: 0; border-radius: var(--pill);
    background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 500; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .event-cover img { transition: none; } }

/* Drei Auswahlkarten nebeneinander, auf schmalen Bildschirmen untereinander */
.choice-cards.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .choice-cards.trio { grid-template-columns: 1fr; } }

/* Seite einer Organisation: Titelbild oder Video fuellt die Flaeche ueber dem Namen, das Logo liegt darauf */
.page-hero.has-orga-cover { padding-top: 10px; }
.orga-cover {
    position: relative; display: grid; place-items: center; margin: 0; padding: 28px 16px;
    min-height: clamp(210px, 34vw, 376px); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt);
}
.orga-cover-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orga-cover .orga-logo { position: relative; z-index: 1; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); }
@media (max-width: 640px) {
    .orga-cover { border-radius: var(--radius); padding: 22px 12px; }
    .orga-cover .orga-logo.xl { width: 150px; height: 150px; border-radius: 40px; font-size: 54px; }
}
.cover-preview video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

/* Schalter mit eigenem Adressfeld, etwa "E-Mail bei jeder An- und Abmeldung": Das Feld erscheint mit dem Haken.
   Aeltere Browser ohne :has() zeigen es immer. */
.notify-box { display: grid; gap: 12px; }
.notify-box .notify-email { margin-left: 34px; }
@supports selector(:has(*)) {
    .notify-box:has(> .check input:not(:checked)) .notify-email { display: none; }
}

/* Schichten im Eventformular: Die Zeilen erscheinen mit dem Haken. Aeltere Browser ohne :has() zeigen sie immer. */
.shift-editor { display: grid; gap: 16px; }
@supports selector(:has(*)) {
    .shift-box:has(> .check input:not(:checked)) .shift-editor { display: none; }
}
.shift-list { display: grid; gap: 12px; }
.shift-row {
    display: grid; grid-template-columns: minmax(150px, 2fr) minmax(140px, 1fr) minmax(104px, .8fr) minmax(104px, .8fr) minmax(90px, .7fr) 40px;
    gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt);
}
.shift-row .field { margin: 0; min-width: 0; }
.shift-row .input { background: var(--surface); }
.shift-remove {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 0;
    border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-2); cursor: pointer;
}
.shift-remove:hover { background: var(--danger-soft); color: var(--danger); }
.shift-remove .icon { width: 18px; height: 18px; }
@media (max-width: 900px) {
    /* Schmal: Name und Datum je in einer Zeile, darunter von und bis, dann die Plaetze. Der Papierkorb sitzt oben rechts. */
    .shift-row { position: relative; grid-template-columns: 1fr 1fr; }
    .shift-row .shift-name { grid-column: 1 / -1; padding-right: 48px; }
    .shift-row > .field:nth-of-type(2) { grid-column: 1 / -1; }
    .shift-row .shift-remove { position: absolute; top: 34px; right: 8px; }
}

/* Schichten auf der Eventseite: Uebersicht in den Details, Auswahl im Anmeldeformular, Ergebnis je Schicht */
.shift-overview { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.shift-overview li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.shift-overview .grow { flex: 1; min-width: 0; display: grid; }
.shift-overview .t { font-weight: 600; font-size: 15px; }
.shift-overview .s { font-size: 13.5px; color: var(--text-2); }
.shift-overview .badge { flex: none; }
.shift-results { width: 100%; }
.shift-options { display: grid; gap: 8px; }
.shift-option {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.shift-option input { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.shift-option-body { flex: 1; min-width: 0; display: grid; }
.shift-option-body .t { font-weight: 600; }
.shift-option-body .s { font-size: 13.5px; color: var(--text-2); }
.shift-option .badge { flex: none; }
.shift-option:hover { border-color: var(--accent); }
.shift-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.shift-option.is-disabled { cursor: default; opacity: .62; }
.shift-option.is-disabled:hover { border-color: var(--line-strong); }
@media (max-width: 420px) {
    .shift-option, .shift-overview li { flex-wrap: wrap; }
}

/* Hinweis auf einem Bild, etwa "KI-generiert" */
.has-image-note { position: relative; }
.image-note {
    position: absolute; right: 10px; bottom: 10px; z-index: 1;
    padding: 3px 10px; border-radius: var(--pill);
    background: rgba(0, 0, 0, .62); color: #fff;
    font-size: 11.5px; font-weight: 500; line-height: 1.55; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    pointer-events: none;
}

/* Bild oben in einer Karte mit Innenabstand, etwa bei den Locations einer Organisation */
.card-pad.has-cover { padding-top: 0; overflow: hidden; }
.card-cover {
    display: block; margin: 0 -30px 24px; aspect-ratio: 16 / 9;
    background: var(--bg-alt); overflow: hidden;
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card-hover:hover .card-cover img { transform: scale(1.03); }
@media (max-width: 620px) { .card-cover { margin: 0 -22px 20px; } }
@media (prefers-reduced-motion: reduce) { .card-cover img { transition: none; } }

/* Zeile eines Events im Backend: der Text behaelt seine Breite, die Schaltflaechen rutschen bei Bedarf darunter */
.list-row.event-row { flex-wrap: wrap; }
.list-row.event-row > .grow { flex: 1 1 320px; }
.list-row.event-row > .actions { margin-left: auto; }
.list-row.event-row .actions form { display: inline-flex; }

/* Bilanz auf der Seite Meine Events */
.kpis-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
.kpi-accent { background: var(--accent-soft); border-color: transparent; }
.kpi-accent .n { color: var(--accent); }
@media (max-width: 520px) { .kpis-two { grid-template-columns: 1fr; } }

/* Leichtes Pulsieren fuer den wichtigsten Knopf einer Seite, etwa "Jetzt anmelden".
   Ein Ring in der Akzentfarbe breitet sich aus und verblasst. Beim Zeigen, Druecken und Senden ruht er. */
.btn-pulse { animation: btn-pulse 2.6s var(--ease) infinite; }
.btn-pulse:hover, .btn-pulse:focus-visible, .btn-pulse:active,
.btn-pulse[disabled], .btn-pulse.is-busy { animation: none; }
@keyframes btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(98, 87, 227, .38); transform: scale(1); }
    12%  { transform: scale(1.012); }
    24%  { transform: scale(1); }
    60%  { box-shadow: 0 0 0 12px rgba(98, 87, 227, 0); }
    100% { box-shadow: 0 0 0 0 rgba(98, 87, 227, 0); transform: scale(1); }
}
/* Das leichte Pulsieren laeuft auch bei "weniger Bewegung", so gewuenscht: Es ist nur ein weicher Schatten, keine Bewegung im Bild. */

/* ------------------------------------------------------------------ Einstellungen fuer Suchmaschinen */

/* Die Vorschau steht unter den Feldern und ist so breit wie ein Treffer in der Suchmaschine. So kuerzt sie wie das Original. */
.serp-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.serp-block:first-of-type { border-top: 0; padding-top: 0; }
.serp-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.serp-fields > .badge { justify-self: start; }
.serp-preview { min-width: 0; max-width: 640px; }
.serp-label { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
/* Der Treffer sieht aus wie in der Suchmaschine, deshalb feste Farben und eine eigene Schrift */
.serp-result { background: #fff; color: #4d5156; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.serp-site { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; min-width: 0; }
.serp-site > span:last-child { display: grid; min-width: 0; }
.serp-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #eef0f3; color: #6257e3; font-weight: 700; font-size: 14px; }
.serp-name { font-size: 14px; line-height: 1.3; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-url { font-size: 12px; line-height: 1.35; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-title { font-size: 20px; line-height: 1.3; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-description { margin-top: 4px; font-size: 14px; line-height: 1.58; color: #4d5156; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
[data-serp-title-count], [data-serp-description-count] { font-variant-numeric: tabular-nums; font-weight: 500; }
[data-serp-title-count].is-over, [data-serp-description-count].is-over { color: var(--warn); }
.no-js [data-serp-reset] { display: none; }

/* Innenabstand am Logo: das Bild reicht nicht bis an den Rand des Rahmens */
.orga-logo img { box-sizing: border-box; padding: 3px; }
.orga-logo.lg img, .orga-logo.xl img { padding: 5px; }
/* Seite mit den Feedbacks einer Organisation: Logo 60 Prozent groesser als sonst in dieser Stufe */
.orga-logo.lg.lg-plus { width: 134px; height: 134px; border-radius: 35px; font-size: 48px; }
.orga-logo.lg.lg-plus img { padding: 8px; }

/* ------------------------------------------------------------------ Dateien zum Event */

.file-list { list-style: none; display: grid; gap: 10px; }
.file-item {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
a.file-item { transition: border-color .2s var(--ease), background-color .2s var(--ease); }
a.file-item:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.file-item .icon-wrap {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; background: var(--bg-alt); color: var(--text-2);
}
.file-item .grow { flex: 1; min-width: 0; display: grid; }
.file-item .t { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.file-item .s { font-size: 13px; color: var(--text-2); }
.file-get { flex: none; display: inline-flex; color: var(--accent); }
.file-get .icon { width: 22px; height: 22px; }
.check-inline { flex: none; margin: 0; }
@media (max-width: 520px) {
    li.file-item { flex-wrap: wrap; }
    li.file-item .check-inline { width: 100%; padding-left: 52px; }
}

/* Zahl der Aufrufe: klein und zurueckhaltend unter den Schaltflaechen */
.views-line { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.views-line .icon { width: 15px; height: 15px; }
.page-hero:not(.left) .views-line { justify-content: center; }

/* Kopf der Eventseite: mittig wie bei Location und Organisation */
.page-hero-event { padding-bottom: 12px; }
.page-hero:not(.left) .crumbs { justify-content: center; }

/* Karte mit Symbol und Ueberschrift in einer Zeile, der Text steht darunter ueber die ganze Breite */
.feature.feature-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; align-content: start; }
.feature.feature-inline .feature-icon { margin-bottom: 0; }
.feature.feature-inline h3 { margin: 0; }
.feature.feature-inline p { grid-column: 1 / -1; margin-top: 18px; }

/* ------------------------------------------------------------------ Aufklappbare Bereiche */

.fold-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
.no-js .fold-tools { display: none; }
.fold { overflow: hidden; }
.fold > summary { list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-head {
    display: flex; align-items: center; gap: 16px; padding: 20px 26px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; user-select: none;
    transition: background-color .2s var(--ease);
}
.fold-head:hover { background: var(--bg-alt); }
.fold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }
.fold-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent);
}
.fold-icon .icon { width: 22px; height: 22px; }
.fold-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fold-title .t { font-size: 1.12rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.fold-title .s { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.fold-mark { flex: none; display: inline-flex; color: var(--text-3); transition: transform .25s var(--ease); }
.fold-mark .icon { width: 20px; height: 20px; }
.fold[open] > summary .fold-mark { transform: rotate(180deg); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > .panel-body { padding-top: 24px; }
.fold.has-error { border-color: var(--danger); }
@media (max-width: 620px) {
    .fold-head { padding: 16px 18px; gap: 12px; }
    .fold-icon { width: 38px; height: 38px; border-radius: 11px; }
    .fold-title .s { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fold-mark { transition: none; } }

/* Aufklappbare Bereiche stehen dichter als gewoehnliche Abschnitte */
.form > .fold + .fold { margin-top: -6px; }

/* ------------------------------------------------------------------ Neueste Anmeldungen wie Nachrichten im Messenger */

.live-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin-left: auto; margin-right: auto; text-align: left; }
.live-feed:has(> .live-slot:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
.live-feed:has(> .live-slot:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
/* Alle Eintraege einer Kachel liegen in derselben Zelle. So ist die Kachel so hoch wie ihr laengster Eintrag. */
.live-slot { display: grid; }
/* Am Desktop kippen die aeusseren Kacheln leicht nach aussen, links 5 Grad gegen und rechts 5 Grad mit dem Uhrzeigersinn: ein leichter Bogen */
@media (min-width: 861px) {
    .live-slot:first-child { transform: translateY(15px) rotate(-5deg); transform-origin: 50% 100%; }
    .live-slot:last-child { transform: translateY(15px) rotate(5deg); transform-origin: 50% 100%; }
    .live-slot:only-child { transform: none; }
}
.live-item {
    grid-area: 1 / 1; display: flex; align-items: flex-end; gap: 10px; min-width: 0;
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.985);
    transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s linear .9s;
}
.live-item.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s; }
.live-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 15px;
}
/* Meldungen der Plattform auf der Startseite: das O aus dem Logo, in dessen Schrift und Groesse */
.live-avatar-brand { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.live-bubble {
    flex: 1; min-width: 0; padding: 12px 16px 9px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: 18px 18px 18px 5px;
}
.live-text { font-size: 15px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.live-text a { color: var(--text); font-weight: 600; }
.live-text a:hover { color: var(--accent); }
.live-time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.live-time .icon { width: 14px; height: 14px; color: var(--accent); }
@media (max-width: 860px) {
    .live-feed, .live-feed:has(> .live-slot:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .live-item { transition: none; transform: none; } }

/* Protokoll der neuesten Anmeldungen im Dashboard einer Organisation */
.log-intro { margin-top: 4px; max-width: 72ch; }
.signup-log td { font-size: 14.5px; }
.signup-log td:first-child .badge { margin-top: 4px; }
/* Feste Spaltenbreiten: Lange Adressen und Namen brechen erst um, wenn die Spalte voll ist */
@media (min-width: 761px) {
    .signup-log { table-layout: fixed; }
    .signup-log th, .signup-log td { padding-left: 10px; padding-right: 10px; }
    .signup-log th:nth-child(1) { width: 17%; }
    .signup-log th:nth-child(2) { width: 19%; }
    .signup-log th:nth-child(3) { width: 27%; }
    .signup-log th:nth-child(4) { width: 20%; }
    .signup-log th:nth-child(5) { width: 17%; }
}
.log-past > summary { cursor: pointer; color: var(--accent); font-weight: 600; white-space: nowrap; }
.log-past > summary:hover { text-decoration: underline; }
.log-past ul { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.35; }
.log-past li a { color: var(--text); hyphens: auto; }
.log-past li a:hover { color: var(--accent); }

/* Suche ueber alle Volunteers einer Organisation */
.volunteer-filter { display: flex; flex-direction: column; gap: 18px; }
.volunteer-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .volunteer-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .volunteer-filter-grid { grid-template-columns: minmax(0, 1fr); } }
.volunteer-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.volunteer-signups { margin-top: 10px; }
.volunteer-signups > summary { font-size: 14.5px; }
.volunteer-signups[open] > summary { margin-bottom: 8px; }
.volunteer-signups .table-wrap { border: 1px solid var(--line); border-radius: 14px; }
.volunteer-signups .table { font-size: 14px; }
.volunteer-signups .table th, .volunteer-signups .table td { padding: 10px 14px; }
.volunteer-signups .table th:first-child, .volunteer-signups .table td:first-child { padding-left: 16px; }
.volunteer-signups .table th:last-child, .volunteer-signups .table td:last-child { padding-right: 16px; }
.volunteer-signups .table td .badge { vertical-align: middle; }

/* Abschnitt rueckt naeher an den davor: Der Abstand nach den Kacheln der Newsletter-Seite ist 30 Prozent kleiner */
.section.section-close { padding-top: 45px; }
@media (max-width: 860px) { .section.section-close { padding-top: 30px; } }

/* ------------------------------------------------------------------ Feedbacks: Sterne und Chat-Blasen */
.stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; color: #f2a60d; line-height: 0; }
.stars .icon { width: 17px; height: 17px; }
.stars .star-on { fill: currentColor; }
.stars .star-off { color: var(--line-strong); }
.fb-list { display: grid; gap: 18px; }
.fb-item { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.fb-bubble {
    flex: 1; min-width: 0; padding: 13px 16px 9px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: 18px 18px 18px 5px;
}
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fb-name { font-size: 15px; font-weight: 600; color: var(--text); }
.fb-text { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.fb-meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2px 12px; margin-top: 7px; }
.fb-event { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.fb-event a { color: var(--text-2); font-weight: 600; }
.fb-event a:hover { color: var(--accent); }
.fb-meta .live-time { margin-top: 0; margin-left: auto; }
.fb-item.is-hidden .fb-bubble { opacity: .55; }
.fb-row { display: grid; gap: 6px; }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.rating-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.rating-number { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.rating-summary .stars .icon, .rating-card .stars .icon { width: 23px; height: 23px; }
.rating-card { display: flex; align-items: center; gap: 18px; }
.rating-card p { margin-top: 4px; }
.views-line .sep { opacity: .5; }
.feedback-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; }
.feedback-link:hover { color: var(--accent); text-decoration: none; }
.feedback-link .stars .icon { width: 15px; height: 15px; }
/* "Bewerten" hinter den Aufrufen: ein Knopf, der nur aus Text besteht */
.rate-link { font-weight: 600; color: var(--accent); }
.rate-link:hover { text-decoration: underline; }
.views-line { flex-wrap: wrap; row-gap: 4px; }

/* Sterne zum Anklicken. Die Reihenfolge im Dokument ist 1 bis 5, damit die Pfeiltasten wie erwartet laufen. */
.star-input { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.star-input-row { display: inline-flex; gap: 4px; position: relative; align-self: flex-start; }
.star-input-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.star-input-row label { cursor: pointer; color: var(--line-strong); padding: 2px; border-radius: 10px; line-height: 0; transition: transform .15s var(--ease), color .15s var(--ease); }
.star-input-row label .icon { width: 42px; height: 42px; }
.star-input-row label:has(~ input:checked), .star-input-row input:checked + label { color: #f2a60d; }
.star-input-row label:has(~ input:checked) .icon, .star-input-row input:checked + label .icon { fill: currentColor; }
.star-input-row:has(label:hover) label { color: var(--line-strong); }
.star-input-row:has(label:hover) label .icon { fill: none; }
.star-input .star-input-row label:hover, .star-input .star-input-row label:has(~ label:hover) { color: #f2a60d; }
.star-input .star-input-row label:hover .icon, .star-input .star-input-row label:has(~ label:hover) .icon { fill: currentColor; }
.star-input-row label:hover { transform: scale(1.08); }
.star-input-row input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .star-input-row label .icon { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .star-input-row label { transition: none; } .star-input-row label:hover { transform: none; } }

/* ------------------------------------------------------------------ Glocke: Mail bei neuen Events einer Organisation */
.btn-bell { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--text-2); border-color: var(--line-strong); }
.btn-bell:hover { background: var(--bg-alt); color: var(--text); }
.btn-bell:active { background: var(--line); }
.btn-bell .icon { width: 21px; height: 21px; }
.btn-bell.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.btn-bell.is-on:hover { background: rgba(98, 87, 227, .17); color: var(--accent); }
.btn-bell.is-on .icon { fill: currentColor; }
.btn-bell.btn-sm { width: 36px; min-height: 36px; }
.btn-bell.btn-sm .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ Erfolg nach der Anmeldung
   Das Symbol springt herein, ein Ring loest sich, Ueberschrift, Text und Knoepfe folgen nacheinander.
   Bei einer sofort bestaetigten Anmeldung zeichnet sich der Haken und Konfetti fliegt aus dem Symbol.
   Alles laeuft einmal beim Laden der Karte, rund eine Sekunde, ohne Skript. */
.signup-done { position: relative; }
.signup-done:not(.signup-done-failed) .feature-icon { position: relative; animation: oh-pop .55s cubic-bezier(.2, .9, .3, 1.3) both; }
.signup-done:not(.signup-done-failed) .feature-icon::after {
    content: ""; position: absolute; inset: -4px; border-radius: 19px; border: 2px solid var(--accent); opacity: 0; pointer-events: none;
    animation: oh-halo .9s ease-out .25s both;
}
.signup-done-confirmed .feature-icon .icon circle { stroke-dasharray: 60; stroke-dashoffset: 60; animation: oh-draw .5s ease-out .2s forwards; }
.signup-done-confirmed .feature-icon .icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: oh-draw .35s ease-out .6s forwards; }
.signup-done:not(.signup-done-failed) > .title { animation: oh-rise .5s ease-out .7s both; }
.signup-done:not(.signup-done-failed) > .muted { animation: oh-rise .5s ease-out .85s both; }
.signup-done:not(.signup-done-failed) > p:not(.muted) { animation: oh-rise .5s ease-out 1s both; }
.confetti {
    position: absolute; left: 50%; top: 22px; width: 7px; height: 11px; margin-left: -3px; border-radius: 2px; opacity: 0; pointer-events: none;
    animation: oh-fly 1.1s cubic-bezier(.2, .7, .4, 1) .45s both;
}
.confetti:nth-child(1)  { --dx: -90px;  --dy: -70px;  --rot: 200deg;  background: #7f77dd; }
.confetti:nth-child(2)  { --dx: -55px;  --dy: -110px; --rot: -160deg; background: #5dcaa5; }
.confetti:nth-child(3)  { --dx: -20px;  --dy: -125px; --rot: 120deg;  background: #ef9f27; }
.confetti:nth-child(4)  { --dx: 25px;   --dy: -120px; --rot: -220deg; background: #ed93b1; }
.confetti:nth-child(5)  { --dx: 60px;   --dy: -100px; --rot: 180deg;  background: #7f77dd; }
.confetti:nth-child(6)  { --dx: 95px;   --dy: -60px;  --rot: -140deg; background: #5dcaa5; }
.confetti:nth-child(7)  { --dx: -110px; --dy: -20px;  --rot: 90deg;   background: #ef9f27; }
.confetti:nth-child(8)  { --dx: 110px;  --dy: -15px;  --rot: -90deg;  background: #ed93b1; }
.confetti:nth-child(9)  { --dx: -70px;  --dy: 40px;   --rot: 260deg;  background: #7f77dd; }
.confetti:nth-child(10) { --dx: 75px;   --dy: 45px;   --rot: -250deg; background: #5dcaa5; }
@keyframes oh-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes oh-halo { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes oh-draw { to { stroke-dashoffset: 0; } }
@keyframes oh-rise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes oh-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes oh-fly { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) {
    .signup-done .feature-icon, .signup-done .feature-icon::after, .signup-done > .title, .signup-done > .muted, .signup-done > p { animation: none !important; }
    .signup-done:not(.signup-done-failed) { animation: oh-fade .7s ease-out both; }
    .signup-done .feature-icon .icon circle, .signup-done .feature-icon .icon path { animation: none !important; stroke-dashoffset: 0; }
    .signup-done .feature-icon::after { display: none; }
    .confetti { display: none; }
}

/* ------------------------------------------------------------------ Startseite: Zahl im Knopf zaehlt hoch */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }
.count-up.is-tick { animation: oh-tick .32s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes oh-tick { 0% { transform: translateY(6px) scale(.9); opacity: .5; } 100% { transform: none; opacity: 1; } }
/* Freie Plaetze in den Eventkarten der Startseite: derselbe Ring wie am Knopf, in Gruen */
.badge-pulse { animation: badge-pulse 2.6s var(--ease) infinite; }
@keyframes badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(27, 127, 70, .34); transform: scale(1); }
    12%  { transform: scale(1.03); }
    24%  { transform: scale(1); }
    60%  { box-shadow: 0 0 0 8px rgba(27, 127, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(27, 127, 70, 0); transform: scale(1); }
}
@media (prefers-color-scheme: dark) {
    @keyframes badge-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(76, 212, 131, .36); transform: scale(1); }
        12%  { transform: scale(1.03); }
        24%  { transform: scale(1); }
        60%  { box-shadow: 0 0 0 8px rgba(76, 212, 131, 0); }
        100% { box-shadow: 0 0 0 0 rgba(76, 212, 131, 0); transform: scale(1); }
    }
}
@media (prefers-reduced-motion: reduce) { .badge-pulse { animation: none; } }

/* ------------------------------------------------------------------ Startseite: Events, die gerade laufen */
.live-now { max-width: 1040px; margin-left: auto; margin-right: auto; }
.live-now-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.012em; }
.live-dot { position: relative; flex: none; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #e0245e; animation: live-fade 2s ease-in-out infinite; }
.live-dot.small { width: 8px; height: 8px; }
/* Der Punkt blendet sanft aus und wieder ein: eine Sekunde hin, eine Sekunde zurueck */
@keyframes live-fade { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-now-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; text-align: left; }
.live-now-list:has(> .live-card:only-child) { max-width: 420px; margin-left: auto; margin-right: auto; }
.live-now-list:has(> .live-card:nth-child(2):last-child) { max-width: 700px; margin-left: auto; margin-right: auto; }
.live-card {
    position: relative; overflow: hidden; display: block; padding: 14px 16px 16px; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.live-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.live-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), #e0245e, transparent); background-size: 200% 100%; animation: live-sweep 2.6s linear infinite; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c81e4a; }
.live-card .t { display: block; margin-top: 6px; font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: -.012em; overflow-wrap: anywhere; }
.live-card .s { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.live-card .s .icon { width: 14px; height: 14px; flex: none; }
@keyframes live-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 860px) { .live-now-list { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) {
    .live-card::after { animation: none; }
    .live-card:hover { transform: none; }
    .count-up.is-tick { animation: none; }
}

/* ------------------------------------------------------------------ Eventseite: Event laeuft gerade */
.badge-live { background: rgba(224, 36, 94, .11); color: #c81e4a; gap: 7px; }
.feature-icon-live { background: rgba(224, 36, 94, .11); }
.feature-icon-live .live-dot { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ Eventliste: Zahl der Events ueber den Kacheln */
.result-count { text-align: center; font-size: 19px; font-weight: 500; color: var(--text-2); letter-spacing: -.012em; }
.result-count .count-up { display: inline-block; margin-right: 8px; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; vertical-align: -.1em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Video als Hintergrund des Fusses, auf jeder Seite */
.site-footer { position: relative; overflow: hidden; }
.footer-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
/* Ein leichter Schleier haelt die Links lesbar */
.site-footer::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .42); z-index: 0; pointer-events: none; }
.site-footer > .container { position: relative; z-index: 1; }
/* Mehr Hoehe unter den Spalten, damit das Video Raum bekommt */
.site-footer .footer-grid { padding-bottom: 170px; }
@media (max-width: 860px) { .site-footer .footer-grid { padding-bottom: 110px; } }
@media (prefers-color-scheme: dark) { .site-footer::before { background: rgba(10, 10, 14, .55); } }
@media print { .footer-bg, .site-footer::before { display: none; } }

/* ------------------------------------------------------------------ Video als Hintergrund eines Abschnitts, wie im Fuss */
.has-video-bg { position: relative; overflow: hidden; }
.has-video-bg .section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.has-video-bg::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .42); z-index: 0; pointer-events: none; }
.has-video-bg > .container { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) { .has-video-bg::before { background: rgba(10, 10, 14, .55); } }
@media print { .has-video-bg .section-bg, .has-video-bg::before { display: none; } }

/* ------------------------------------------------------------------ Statistik im Dashboard */
.stats-head { margin-bottom: 16px; }
.stats-head h2 { font-size: 1.22rem; letter-spacing: -.02em; }
.stats-head p { margin-top: 4px; }
.stat-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi.stat-tile .l { color: var(--text); font-weight: 600; }
.kpi.stat-tile .h { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.stat-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.chart-card { padding: 22px 22px 18px; min-width: 0; }
.chart-title { font-size: 1.05rem; letter-spacing: -.015em; }
.chart-readout { margin-top: 4px; min-height: 1.45em; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.chart-readout.is-live { color: var(--text); font-weight: 600; }
.chart { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--text-2); }
.chart .chart-tick { font-variant-numeric: tabular-nums; }
.chart .chart-value { fill: var(--text); font-weight: 600; }
.chart .chart-year { fill: var(--text-3); }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-base { stroke: var(--line-strong); stroke-width: 1; }
.chart-hit { fill: transparent; }
.chart-bar { fill: var(--accent); transition: fill .15s var(--ease); }
.chart-col:hover .chart-bar { fill: var(--accent-press); }
.chart-col:hover .chart-label { fill: var(--text); }
.chart-table { margin-top: 10px; font-size: 14px; }
.chart-table summary { cursor: pointer; color: var(--text-2); width: fit-content; }
.chart-table summary:hover { color: var(--text); }
.chart-table .table { margin-top: 8px; }
.stat-top-card { margin-top: 16px; }
.stat-top { list-style: none; margin: 0; display: grid; gap: 16px; }
.stat-top li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 64px; gap: 6px 18px; align-items: center; }
.stat-top .s { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.stat-top-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .stat-charts { grid-template-columns: 1fr; }
    .stat-top li { grid-template-columns: minmax(0, 1fr) 64px; }
    .stat-top-name { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .stat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi.stat-tile { padding: 18px; }
}
@media (max-width: 380px) { .stat-kpis { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Aufgaben */
.tabs-wrap { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: var(--radius); }
.tab-count { margin-left: 3px; font-size: 12.5px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Zeile einer Aufgabe: Die Knoepfe stehen unter dem Text, damit Titel und Beschreibung die ganze Breite haben */
.task-row { flex-wrap: wrap; }
.task-row .actions { width: 100%; justify-content: flex-start; }
.task-who { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.task-who .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-3); }
.task-who strong { color: var(--text); font-weight: 600; }
.label-sub { font-size: 13px; font-weight: 500; color: var(--text-2); }
.task-card { display: flex; flex-direction: column; text-align: left; color: var(--text); }
.task-card:hover { text-decoration: none; }
.task-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.task-card-icon .icon { width: 22px; height: 22px; }
.task-card-more { margin-top: auto; padding-top: 18px; }
.task-action .cluster form { display: inline-flex; }
.tasks-hint { margin-top: 10px; }
.task-taken strong { display: block; }
.task-taken .link-arrow { display: inline-flex; margin-top: 6px; }

/* ------------------------------------------------------------------ Social Links einer Organisation */
.social-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; padding: 0; }
.social-link {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2);
    transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.social-link .icon { width: 22px; height: 22px; }
.fold-head .badge { flex: none; }

/* Suche in der Liste der Aufgaben */
.task-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.task-search .field { flex: 1 1 260px; min-width: 0; }
.task-search .btn { flex: none; }

/* Seite der Organisation: Der Abstand ueber und unter "Ueber uns" ist halb so gross wie zwischen anderen Abschnitten */
#ueber-uns { padding-top: 8px; padding-bottom: 0; }
@media (max-width: 860px) { #ueber-uns { padding-top: 6px; } }

/* "Ueber uns" als Nachricht: kleines Logo als Profilbild links unten, Text in einer Blase */
.about-msg { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.orga-logo.about-avatar { width: 46px; height: 46px; border-radius: 50%; font-size: 17px; }
.orga-logo.about-avatar img { padding: 4px; border-radius: 50%; }
.about-bubble {
    flex: 0 1 auto; min-width: 0; max-width: 620px; padding: 13px 18px 15px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    border-radius: 20px 20px 20px 6px;
}
.about-name { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--accent); }
.about-text { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--text); }

/* Startseite: Der Abstand unter der Liste der Organisationen ist 60 Prozent kleiner, 70 statt 176 Pixel, am Handy 48 statt 120 */
#organisationen { padding-bottom: 35px; }
#organisationen + #newsletter { padding-top: 35px; }
@media (max-width: 860px) { #organisationen { padding-bottom: 24px; } #organisationen + #newsletter { padding-top: 24px; } }

/* Aufgaben: Infos nur fuer die Person, der die Aufgabe gehoert */
.task-private { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 14.5px; line-height: 1.5; }
.task-private .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.task-private .k .icon { width: 15px; height: 15px; }
.task-private .v { margin-top: 4px; color: var(--text); overflow-wrap: anywhere; }
.task-private .n { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }

/* Startseite: Sterne aus den Feedbacks unter dem Namen der Organisation */
.orga-chip .rating { display: block; margin-top: 4px; line-height: 0; }
.orga-chip .rating .stars .icon { width: 15px; height: 15px; }

/* Events im Backend: bestaetigte Teilnehmer unter den Marken, wenn der Schalter auf "Mit" steht */
.event-people { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; padding: 0; }
.event-people li { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 4px 11px; border-radius: var(--pill); background: var(--bg-alt); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.event-people .c { flex: none; font-size: 12.5px; color: var(--text-2); }
.event-people-none { margin-top: 10px; font-size: 13.5px; color: var(--text-3); }
.tabs-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }

/* Liste der Events drucken: nur die Events und, wenn eingeblendet, ihre Teilnehmer */
.tabs-row .tabs-print { margin-left: auto; }
.no-js .tabs-print { display: none; }
@media print {
    .event-row .actions, .pagination { display: none !important; }
    .list-row { break-inside: avoid; padding: 8pt 0; }
    .event-people li { border: .5pt solid #999; background: #fff; }
    .event-date { border: .5pt solid #999; }
    .print-head { margin: 0 0 8pt; font-size: 10pt; }
    .print-note { margin-top: 12pt; font-size: 9pt; }
}

/* Startseite: freie Aufgaben unter den naechsten Events, in derselben Sektion */
.home-tasks { margin-top: 72px; }
.home-tasks .section-head { margin-bottom: 32px; }
.task-card-orga { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); }
@media (max-width: 860px) { .home-tasks { margin-top: 52px; } .home-tasks .section-head { margin-bottom: 24px; } }

/* ------------------------------------------------------------------ Gesuche und Angebote */
.listing-card { display: flex; flex-direction: column; text-align: left; color: var(--text); }
.listing-card:hover { text-decoration: none; }
.listing-card .subtitle { margin-top: 12px; }
.listing-card-meta { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--text-2); }
.listing-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.listing-filter-orga { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }

/* Startseite: Aufgaben und Inserate als zwei getrennte Bloecke unter einer gemeinsamen Ueberschrift */
.home-sub { max-width: 640px; margin: 40px auto 22px; text-align: center; }
.home-tasks .section-head + .home-sub { margin-top: 0; }
.home-sub p { margin-top: 6px; color: var(--text-2); }

/* Karten fuer Aufgaben und Inserate: Die ganze Karte ist ueber den Titel anklickbar, der Name der Organisation ist ein eigener Link */
.task-card, .listing-card { position: relative; }
.card-link { color: inherit; }
.card-link:hover { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-link:focus-visible { outline: none; }
.task-card-orga, .listing-card-orga { position: relative; z-index: 1; color: var(--text-2); }
.task-card-orga:hover, .listing-card-orga:hover { color: var(--accent); }
.task-card-orga { align-self: flex-start; }
/* Titel steht neben dem Symbol, wie in den Karten "Fuer Ehrenamtliche" */
.task-card-head { display: flex; align-items: center; gap: 14px; }
.task-card-head .task-card-icon { flex: none; margin-bottom: 0; }
.task-card-head + .task-card-orga { margin-top: 12px; }
.listing-card-head { display: flex; align-items: flex-start; gap: 12px; }
.listing-card-head .badge { flex: none; margin-top: 2px; }
.listing-card .listing-card-head .subtitle { flex: 1; min-width: 0; margin-top: 0; }
.listing-card-meta { align-items: center; }

/* ------------------------------------------------------------------ Umfragen */
.survey-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Am Desktop zeigen die Nebenaktionen nur ihr Symbol, der Name steht im Tooltip. Gestapelt auf dem Handy steht er aus. */
@media (min-width: 761px) {
    .survey-table td:first-child { width: 46%; }
    .survey-actions { max-width: 250px; }
    .survey-actions .act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .survey-actions .btn:has(.act-label) { padding-left: 9px; padding-right: 9px; }
    .survey-actions .btn:has(.act-label) .icon { margin: 0; }
}
.cluster-tight { gap: 6px; }
.question-grid-wide { grid-template-columns: minmax(0, 1fr) 270px; }
@media (max-width: 620px) { .question-grid-wide { grid-template-columns: 1fr; } }
.survey-form .survey-q { padding-top: 22px; border-top: 1px solid var(--line); }
.survey-form .survey-q:first-of-type { padding-top: 0; border-top: 0; }
.survey-options { border: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.survey-options .hint { margin: -4px 0 2px; }
.survey-option { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.survey-option:hover { border-color: var(--accent); }
.survey-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.survey-options[aria-invalid="true"] .survey-option { border-color: var(--danger); }
/* Auswertung */
.result-kpis { margin-bottom: 0; }
.kpi .n.n-text { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.2; }
.result-num { color: var(--text-3); font-variant-numeric: tabular-nums; }
.result-average { margin-top: 14px; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.result-average .small { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.result-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.result-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 92px; gap: 6px 16px; align-items: center; }
.result-label { font-size: 15px; color: var(--text); }
.result-row.is-top .result-label { font-weight: 600; }
.result-track { display: block; line-height: 0; }
.result-bar { display: block; }
.result-bar-track { fill: var(--bg-alt); }
.result-bar-fill { fill: var(--accent); }
.result-value { text-align: right; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-texts { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.result-texts li { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-alt); font-size: 15px; line-height: 1.5; }
.result-by { display: block; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.result-answers { display: grid; gap: 2px; font-size: 14.5px; }
.result-answers dt { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.result-answers dt:first-child { margin-top: 0; }
@media (max-width: 620px) {
    .result-row { grid-template-columns: minmax(0, 1fr) auto; }
    .result-row .result-track { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
    .result-question { break-inside: avoid; }
    .result-bar-track { fill: #e6e6ea; }
    .result-bar-fill { fill: #444; }
    .result-texts li { background: transparent; border: .5pt solid #999; }
}

/* ------------------------------------------------------------------ Startseite: schwebende Kacheln mit den Funktionen fuer Organisationen */
/* Vier leicht gekippte Kacheln in den Farben des Verlaufs der Marke. Jede schwebt in ihrem eigenen Takt.
   Die Bewegung laeuft bewusst auch bei "weniger Bewegung": Sie ist langsam und klein, und der Betreiber will sie sehen. */
.float-tiles {
    list-style: none; margin: 56px auto 0; padding: 14px 0 26px; max-width: 980px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px;
    perspective: 1100px;
}
.float-tile {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 178px; padding: 22px 20px 20px;
    border-radius: 24px; color: #fff; text-align: left;
    transform-style: preserve-3d; will-change: transform;
    animation: float-a 7s ease-in-out infinite;
}
/* Glanz von oben links */
.float-tile::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(140deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 46%);
}
.float-tile-icon {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px;
    background: rgba(255, 255, 255, .22); transform: translateZ(14px);
}
.float-tile-icon .icon { width: 24px; height: 24px; }
.float-tile-name { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; transform: translateZ(10px); }
.float-tile-text { font-size: 14px; line-height: 1.4; opacity: .93; transform: translateZ(6px); }
.float-tile-1 { background: linear-gradient(150deg, #6f64ee, #5548d6); box-shadow: 0 26px 38px -20px rgba(85, 72, 214, .7); }
.float-tile-2 { background: linear-gradient(150deg, #9360e6, #7b45cf); box-shadow: 0 26px 38px -20px rgba(123, 69, 207, .7); animation-name: float-b; animation-duration: 8.2s; animation-delay: -2.1s; margin-top: 22px; }
.float-tile-3 { background: linear-gradient(150deg, #c257cf, #a640b8); box-shadow: 0 26px 38px -20px rgba(166, 64, 184, .7); animation-duration: 9s; animation-delay: -4.4s; }
.float-tile-4 { background: linear-gradient(150deg, #ec5f8a, #d4416f); box-shadow: 0 26px 38px -20px rgba(212, 65, 111, .7); animation-name: float-b; animation-duration: 7.6s; animation-delay: -5.3s; margin-top: 22px; }
.float-tile:hover { animation-play-state: paused; }
@keyframes float-a {
    0%, 100% { transform: translateY(0) rotateX(7deg) rotateY(-9deg); }
    50% { transform: translateY(-13px) rotateX(3deg) rotateY(-4deg); }
}
@keyframes float-b {
    0%, 100% { transform: translateY(-5px) rotateX(5deg) rotateY(9deg); }
    50% { transform: translateY(9px) rotateX(9deg) rotateY(4deg); }
}
@media (max-width: 860px) {
    .float-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; margin-top: 40px; max-width: 520px; }
    .float-tile { min-height: 0; padding: 18px 16px; border-radius: 20px; }
    .float-tile-2, .float-tile-4 { margin-top: 16px; }
    .float-tile-name { font-size: 1.1rem; }
    .float-tile-text { font-size: 13.5px; }
}
@media print { .float-tile { animation: none; transform: none; box-shadow: none; } }

/* Platzhalter als Titelbild eines Events ohne eigenes Bild: Das picture-Element nimmt keinen eigenen Platz ein */
.event-hero-image picture, .event-cover picture { display: contents; }

/* ------------------------------------------------------------------ Karte einer Location */
/* Fertiges Bild von dieser Seite. Der Hinweis auf OpenStreetMap steht immer sichtbar in der Ecke. */
.map-figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-alt); aspect-ratio: 2 / 1; max-width: 720px; }
.map-link { display: block; width: 100%; height: 100%; }
.map-figure picture { display: contents; }
/* Die Karte wird nie verkleinert, sonst sind die Strassennamen nicht mehr lesbar. In schmalen Rahmen ist der Ausschnitt um die Nadel kleiner. */
.map-figure img { display: block; width: 100%; height: 100%; object-fit: none; object-position: center; }
@media (max-width: 620px) { .map-figure { aspect-ratio: 3 / 2; } }
.map-credit {
    position: absolute; right: 0; bottom: 0; padding: 2px 9px 3px; border-top-left-radius: 10px;
    background: rgba(255, 255, 255, .86); color: #2b2b30; font-size: 11.5px; line-height: 1.5;
}
.map-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.meta-list + .map-figure { margin-top: 22px; }
.map-state { display: flex; gap: 10px; align-items: flex-start; }
.map-state .icon { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--text-3); }
@media print { .map-credit a { text-decoration: none; } }

/* ------------------------------------------------------------------ Verzeichnis der Organisationen */
.orga-search { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px; margin-left: auto; margin-right: auto; }
.orga-search .input { flex: 1 1 260px; min-width: 0; }
.orga-search .btn { flex: none; }
.orga-entries { display: flex; flex-direction: column; gap: 18px; }
.orga-entry { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.orga-entry-head { display: flex; align-items: center; gap: 16px; }
.orga-entry-head .grow { flex: 1; min-width: 0; }
.orga-entry-head .subtitle a { color: var(--text); }
.orga-entry-logo { flex: none; line-height: 0; }
.orga-entry-logo:hover { text-decoration: none; }
.orga-entry-open { flex: none; }
.orga-entry-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 14px; color: var(--text-2); }
.orga-entry-sub > span { display: inline-flex; align-items: center; gap: 5px; }
.orga-entry-sub .icon { width: 15px; height: 15px; }
.orga-entry-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 14px; line-height: 1.3; color: var(--text-2); }
.orga-entry-rating .stars .icon { width: 16px; height: 16px; }
.orga-entry-rating.is-empty { color: var(--text-3); }
.about-msg-left { justify-content: flex-start; }
.orga-entry .about-bubble { background: var(--bg-alt); box-shadow: none; }
.orga-entry-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.orga-entry-count {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--pill);
    background: var(--accent-soft); color: var(--accent); font-size: 14.5px; font-weight: 600; line-height: 1.2;
}
a.orga-entry-count:hover { text-decoration: none; background: var(--accent); color: var(--on-accent); }
.orga-entry-count .icon { width: 17px; height: 17px; }
.orga-entry-count .icon:last-child { width: 14px; height: 14px; margin-left: -2px; }
.orga-entry-count.is-zero { background: var(--bg-alt); color: var(--text-3); font-weight: 500; }
.orga-entry-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.orga-entry-web { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; min-width: 0; }
.orga-entry-web .icon { flex: none; width: 17px; height: 17px; }
.orga-entry-links .social-links { margin: 0; justify-content: flex-start; gap: 8px; }
.orga-entry-links .social-link { width: 38px; height: 38px; }
.orga-entry-links .social-link .icon { width: 19px; height: 19px; }
@media (max-width: 620px) {
    .orga-entry-head { flex-wrap: wrap; }
    .orga-entry-open { width: 100%; justify-content: center; }
    .orga-entry .about-avatar { display: none; }
}

/* Eventliste im Backend: Link zum Event und Knopf zum Kopieren bleiben beim Umbruch zusammen */
.link-pair { display: inline-flex; align-items: center; gap: 4px; }
.link-copy { padding-left: 10px; padding-right: 10px; }
/* Kopieren ohne eigenes Textfeld: kurzer Hinweis ueber dem Knopf */
[data-copy].is-copied { position: relative; }
[data-copy].is-copied::after {
    content: attr(data-copied); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    padding: 4px 10px; border-radius: var(--radius-xs); background: var(--text); color: var(--bg);
    font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; z-index: 5; pointer-events: none;
}

/* Event-Formular: Altersregel. "Nur fuer Volljaehrige" schliesst die Regel zur Begleitperson ein, sie verschwindet dann.
   Aeltere Browser ohne :has() zeigen beide, der Server nimmt die strengere. */
.age-box { display: grid; gap: 12px; }
@supports selector(:has(*)) {
    .age-box:has(input[name="adults_only"]:checked) .age-companion { display: none; }
}

/* Kleines Textfeld, etwa fuer den Grund einer Absage */
.textarea-sm { min-height: 68px; }

/* Logo im Menue: groesser als in der Fusszeile. In schmaleren Fenstern und am Handy eine Stufe kleiner. */
.site-header .brand { font-size: 24px; }
@media (max-width: 1080px) { .site-header .brand { font-size: 22px; } }
/* Mit Symbolen ist das Menue am breitesten. Die Punkte ruecken dort etwas enger, damit Logo und Knopf rechts im Rahmen bleiben. */
@media (min-width: 1241px) {
    .nav-links { gap: 2px; }
    .nav-links a, .nav-group-toggle { padding-left: 11px; padding-right: 11px; }
}

/* Pflichtfelder: Stern an der Beschriftung und Hinweis am Anfang des Formulars */
.req { margin-left: 3px; color: var(--danger); font-weight: 700; }
.req-note { font-size: 13.5px; color: var(--text-2); }
.req-note .req { margin-left: 0; }

/* Seite eines Events: wer sich schon angemeldet hat, als Blasen wie auf der Startseite. Wenige Blasen stehen mittig. */
.section-bubbles { padding-top: 0; }
.signup-bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; max-width: 1040px; margin: 0 auto; }
.signup-bubble { display: flex; align-items: flex-end; gap: 10px; flex: 0 1 320px; min-width: 0; }
.signup-bubbles-more { margin-top: 16px; text-align: center; font-size: 14px; color: var(--text-2); }
@media (max-width: 560px) { .signup-bubble { flex-basis: 100%; } }

/* Ueberschrift ueber den Blasen auf der Seite eines Events */
.section-bubbles .title { margin-bottom: 24px; }