/* ==========================================================================
   Kanuclub Nidwalden – Theme
   Vereinsfarben: Marineblau (Logo), Blau #0651a0, Türkis #00aba9
   ========================================================================== */

:root {
    --navy: #182a54; /* exakte Logo-Farbe */
    --blue: #0a5cb0;
    --blue-dark: #064182;
    --teal: #00aba9;
    --teal-dark: #008886;
    --bg: #ffffff;
    --bg-page: #f6f9fb;   /* dezenter Seitenhintergrund */
    --bg-soft: #eef4f8;
    --text: #17252e;
    --muted: #5e6e77;
    --border: #e6edf2;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(22, 38, 74, 0.05);
    --shadow: 0 1px 2px rgba(22, 38, 74, 0.04), 0 10px 28px -10px rgba(22, 38, 74, 0.12);
    --shadow-lg: 0 28px 64px -18px rgba(22, 38, 74, 0.24);
    --maxw: 1140px;
    --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* --- Reset / Basis ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Sticky-Footer: Body füllt mindestens die volle Höhe, Footer bleibt unten */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--teal-dark); text-decoration: underline; }

h1, h2, h3, h4 {
    color: var(--navy);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.1rem, 4.8vw, 3.2rem); font-weight: 600; margin: 0 0 .5em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.35rem; }

/* Moderne, gut sichtbare Fokus-Ringe (Barrierefreiheit) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible { outline-offset: 3px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; }

/* --- Header / Navigation ------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(22, 38, 74, 0.07);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-top: .6rem; padding-bottom: .6rem;
}
.site-header__logos { display: flex; align-items: center; gap: 1.25rem; }
.site-header__logo img { height: 64px; width: auto; }
.site-header__sponsor img { height: 30px; width: auto; display: block; }
@media (max-width: 540px) { .site-header__sponsor { display: none; } }

.site-nav ul {
    list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0;
    flex-wrap: wrap; align-items: center;
}
.site-nav a {
    display: block; padding: .5rem .9rem; border-radius: var(--radius-pill);
    color: var(--navy); font-weight: 600; text-decoration: none; letter-spacing: -0.01em;
    transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--bg-soft); color: var(--blue); }
.site-nav li.active > a { color: var(--blue); }
.site-nav li.active > a::after {
    content: ""; display: block; height: 3px; border-radius: 3px;
    background: var(--teal); margin-top: 3px;
}
.site-nav li.has-children > a::before {
    content: ""; display: inline-block; width: .4em; height: .4em; margin-right: .4em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); opacity: .7;
}
.site-nav li.has-children { position: relative; }
.site-nav .submenu {
    position: absolute; top: 100%; left: 0; min-width: 210px;
    list-style: none; margin: .4rem 0 0; padding: .4rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.site-nav li.has-children:hover .submenu,
.site-nav li.has-children:focus-within .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav .submenu a { white-space: nowrap; }

/* Untermenü nicht im Footer anzeigen */
.site-footer__nav .submenu { display: none; }

/* „Intern" als Schloss-Symbol (Text nur im mobilen Menü) */
.site-nav a.nav-lock { display: inline-flex; align-items: center; gap: .45rem; }
.nav-lock svg { display: block; }
.nav-lock__text { display: none; }

/* Mobile-Menü (reine CSS-Lösung über Checkbox) */
.nav-toggle__button { display: none; cursor: pointer; padding: .5rem; }
.nav-toggle__button span {
    display: block; width: 26px; height: 3px; border-radius: 3px;
    background: var(--navy); margin: 5px 0; transition: .2s;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative; color: #fff; background: var(--navy);
    overflow: hidden;
}
.hero__image { position: absolute; inset: 0; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero { background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 100%); }
.hero__overlay {
    position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0;
    background: linear-gradient(180deg, rgba(6,81,160,.25), rgba(22,38,74,.78));
}
.hero h1 { color: #fff; max-width: 22ch; }
.hero p { font-size: 1.2rem; max-width: 55ch; opacity: .95; }

/* --- Buttons ------------------------------------------------------------- */
.button, a.button {
    display: inline-block; background: var(--blue); color: #fff;
    padding: .72rem 1.5rem; border-radius: var(--radius-pill); font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none; transition: background .15s, transform .12s, box-shadow .15s;
    border: none; cursor: pointer; box-shadow: 0 4px 14px -2px rgba(10, 92, 176, .4);
}
.button:hover { background: var(--blue-dark); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 22px -4px rgba(10, 92, 176, .45); }
.button:active { transform: translateY(0); }
.button--accent { background: var(--teal); box-shadow: 0 2px 8px rgba(0, 171, 169, .25); }
.button--accent:hover { background: var(--teal-dark); }
.button--ghost { background: transparent; border: 2px solid #fff; box-shadow: none; }
.button--ghost:hover { background: rgba(255,255,255,.15); }
.button--light { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.button--light:hover { background: var(--bg-soft); color: var(--blue-dark); }

/* Blaue Vorstellungs-Box auf der Startseite (analog kcnw.ch) – Logo-Blau */
.intro-box {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, #20407e 55%, var(--blue) 130%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.25rem);
    box-shadow: var(--shadow-lg);
}
/* dezenter Lichtschein oben rechts (Türkis-Glanz aufs Wasser) */
.intro-box::after {
    content: ""; position: absolute; top: -40%; right: -10%;
    width: 60%; height: 140%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0,171,169,.32), transparent 70%);
}
/* angedeutete Strömungslinien / Wasseroberfläche unten links */
.intro-box::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background:
        radial-gradient(120% 80% at -10% 120%, rgba(10,92,176,.55), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
    mask-image: linear-gradient(to top, #000 10%, transparent 70%);
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%);
}
.intro-box > * { position: relative; z-index: 1; }
.intro-box h1 { color: #fff; margin-top: 0; }
.intro-box p { font-size: 1.15rem; opacity: .95; line-height: 1.6; }

/* --- Orchestrierter Seitenaufbau: gestaffelte Reveals -------------------- */
@keyframes kcnw-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal {
    opacity: 0;
    animation: kcnw-rise .7s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: var(--reveal-delay, 0ms);
}
.reveal-1 { --reveal-delay: 60ms; }
.reveal-2 { --reveal-delay: 180ms; }
.reveal-3 { --reveal-delay: 300ms; }
.reveal-4 { --reveal-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; animation: none; }
    html { scroll-behavior: auto; }
}

/* --- Layout / Main ------------------------------------------------------- */
.site-main { flex: 1 0 auto; }
.section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section--soft { background: var(--bg-soft); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.section__head h2, .section h1 + .section__head h2 { position: relative; padding-bottom: .5rem; }
.section__head h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 52px; height: 4px; background: var(--teal); border-radius: 4px;
}

/* Content-Seiten (StreamField) – Breite kommt einheitlich von .container */
.intro { font-size: 1.2rem; color: var(--muted); }
article figure { margin: 1.5rem 0; }
article figure img { border-radius: var(--radius); }
article figcaption { font-size: .9rem; color: var(--muted); margin-top: .4rem; }
/* Titelbild einer Inhaltsseite spannt über den ganzen Container */
.page-hero { margin: 0 0 1.5rem; }
.page-hero img { width: 100%; border-radius: var(--radius); }
/* Inhalt nutzt die volle Container-Breite; Fliesstext im Blocksatz */
.standard-body { text-align: justify; hyphens: auto; }
.standard-body p, .rich-content > .intro { text-align: justify; hyphens: auto; }
blockquote {
    margin: 1.5rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--teal);
    background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote cite { display: block; margin-top: .5rem; color: var(--muted); font-style: normal; }
.meta { color: var(--muted); font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* --- News ---------------------------------------------------------------- */
.news-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; }
.news-filter a {
    padding: .4rem .9rem; border-radius: 999px; background: var(--bg-soft);
    color: var(--navy); font-weight: 600; text-decoration: none;
}
.news-filter a:hover { background: #e6eef3; }
.news-filter a.active { background: var(--blue); color: #fff; }

.news-list {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.news-list li {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s;
    display: flex; flex-direction: column;
}
.news-list li:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.news-list li > * { padding-left: 1.1rem; padding-right: 1.1rem; }
.news-list li > a:first-child { display: block; padding-top: 1.1rem; }
.news-list img { width: 100%; padding: 0; border-radius: 12px; transition: transform .3s ease; }
.news-list li:hover img { transform: scale(1.025); }
.news-list h2 { font-size: 1.25rem; margin: .3rem 0; }
.news-list .meta { margin-top: 1rem; }
.news-list li p:last-child { padding-bottom: 1.1rem; }

/* --- Kalenderansicht ----------------------------------------------------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.cal-nav h2 { margin: 0; text-align: center; flex: 1; min-width: 12rem; font-family: var(--font-display); }
.calendar-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: #fff;
}
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 680px; }
.calendar th {
    background: var(--bg-soft); color: var(--navy);
    padding: .7rem .5rem; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
}
/* Wochenend-Spalten (Sa/So) dezent getönt */
.calendar th:nth-child(6), .calendar th:nth-child(7),
.cal-cell:nth-child(6), .cal-cell:nth-child(7) { background: rgba(10,92,176,.035); }
.cal-cell {
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    vertical-align: top; height: 104px; padding: .4rem; width: 14.28%;
    transition: background .12s;
}
.cal-cell:nth-child(7) { border-right: none; }
.calendar tbody tr:last-child .cal-cell { border-bottom: none; }
.cal-cell:hover { background: var(--bg-soft); }
.cal-daynum {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; margin-left: auto; float: right;
    font-size: .8rem; color: var(--muted); border-radius: var(--radius-pill);
}
.cal-out { background: var(--bg-soft); }
.cal-out .cal-daynum { opacity: .45; }
.cal-today .cal-daynum { background: var(--teal); color: #fff; font-weight: 700; }
.cal-event {
    display: block; clear: both; margin-top: .25rem; padding: .2rem .45rem; border-radius: 7px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
    font-size: .76rem; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: transform .12s, box-shadow .12s;
}
.cal-event:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -3px rgba(10,92,176,.5); color: #fff; text-decoration: none; }
.cal-event--internal { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); }
.cal-event--internal:hover { box-shadow: 0 4px 10px -3px rgba(0,171,169,.55); }

/* --- Events -------------------------------------------------------------- */
.event-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.event-list li {
    display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
    padding: .9rem .75rem; margin: 0 -.75rem; border-radius: 10px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.event-list li:hover { background: var(--bg-soft); }
.event-list time {
    font-weight: 700; color: var(--blue); min-width: 9.5rem; font-variant-numeric: tabular-nums;
}
.event-list a { font-weight: 600; }
.event-list .location { color: var(--muted); }
.event-list.past time { color: var(--muted); }

.event-details { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.5rem; margin: 1.5rem 0; }
.event-details dt { font-weight: 700; color: var(--navy); }
.event-details dd { margin: 0; }

/* --- Tags / Pagination --------------------------------------------------- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.5rem 0; }
.tags li { background: var(--bg-soft); padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; }
.search-form { display: flex; gap: .6rem; margin: 1rem 0 2rem; max-width: 520px; }
.search-form input[type="text"] { flex: 1; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.search-results h3 { margin: 0 0 .3rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 2.5rem 0; }
.pagination span { color: var(--muted); }

/* --- Galerie ------------------------------------------------------------- */
.album-grid, .photo-grid { list-style: none; margin: 1.5rem 0; padding: 0; }
.album-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.album-grid a {
    position: relative; display: block; text-decoration: none; color: #fff;
    border-radius: var(--radius-lg); overflow: hidden; background: var(--navy);
    box-shadow: var(--shadow);
    transition: box-shadow .2s, transform .2s;
}
.album-grid a:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.album-grid__media { display: block; aspect-ratio: 4 / 3; }
.album-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.album-grid a:hover img { transform: scale(1.06); }
/* Verlaufs-Scrim, damit der Titel über dem Bild lesbar bleibt */
.album-grid__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1.15rem 1.1rem;
    background: linear-gradient(to top, rgba(13,23,46,.88) 0%, rgba(13,23,46,.45) 55%, transparent 100%);
}
.album-grid__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.album-grid__date { display: block; margin-top: .25rem; font-size: .82rem; color: rgba(255,255,255,.8); font-weight: 600; }

/* Album: Masonry über CSS-Spalten – echte Seitenverhältnisse statt Quadrat-Crop */
.photo-grid {
    columns: 4 220px;
    column-gap: .9rem;
}
.photo-grid figure { margin: 0 0 .9rem; break-inside: avoid; }
.photo-grid figure > a { display: block; overflow: hidden; border-radius: var(--radius); }
.photo-grid img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.photo-grid figure > a:hover img { transform: scale(1.05); }
.photo-grid figcaption { font-size: .85rem; color: var(--muted); margin-top: .35rem; }

/* --- Team / Personen ----------------------------------------------------- */
.team-section { margin: 2rem 0; }
.team-grid {
    list-style: none; padding: 0; margin: 1.5rem 0;
    display: grid; gap: 1.75rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
    .team-grid { grid-template-columns: repeat(4, 1fr); }
}
.team-card { text-align: center; }
.team-card__photo {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 50%; margin-bottom: .75rem; box-shadow: var(--shadow);
}
.team-card__photo--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--blue); color: #fff; font-size: 2.5rem; font-weight: 700;
}
.team-card__name { display: block; font-weight: 700; color: var(--navy); }
.team-card__role { display: block; color: var(--muted); font-size: .95rem; }
.team-card__email { font-size: .85rem; }

/* --- Event-Detail (intern) ----------------------------------------------- */
.event-detail { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr; align-items: start; }
.event-detail__side .card { margin-bottom: 1.5rem; }
.event-detail__side .card h2 { font-size: 1.15rem; }
.event-detail__side .data-table th, .event-detail__side .data-table td { padding: .45rem .5rem; font-size: .92rem; }
.event-detail__side .stacked-form input[type="text"] { margin-bottom: .75rem; }
.reg-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.card-sep { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0 1rem; }
@media (max-width: 800px) { .event-detail { grid-template-columns: 1fr; } }

/* --- Kontakt ------------------------------------------------------------- */
.contact-layout { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr; align-items: start; margin-top: 1.5rem; }
.contact-info { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
@media (max-width: 700px) { .contact-layout { grid-template-columns: 1fr; } }

/* --- Sponsoren ----------------------------------------------------------- */
.main-sponsor {
    text-align: center; background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2.5rem 1.5rem; margin: 2rem 0 3rem;
}
.main-sponsor__label {
    display: inline-block; text-transform: uppercase; letter-spacing: .08em;
    font-size: .8rem; font-weight: 700; color: var(--teal-dark);
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: .3rem 1rem; margin-bottom: 1.5rem;
}
.main-sponsor__logo { max-width: min(420px, 80%); height: auto; margin: 0 auto; }
.main-sponsor__name { font-size: 2rem; font-weight: 800; color: var(--navy); }
.main-sponsor__text { max-width: 60ch; margin: 1.25rem auto 0; color: var(--muted); }

.sponsor-heading { text-align: center; margin-top: 2.5rem; }
.sponsor-grid {
    list-style: none; padding: 0; margin: 1.5rem 0;
    display: grid; gap: 1.5rem; align-items: center;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.sponsor-grid li {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem; min-height: 110px;
}
.sponsor-grid img { max-height: 70px; width: auto; filter: grayscale(100%); opacity: .8; transition: filter .2s, opacity .2s; }
.sponsor-grid li:hover img { filter: none; opacity: 1; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #cfd9e8; flex-shrink: 0; }
.site-footer__inner {
    display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 2.5rem;
    grid-template-columns: 1.2fr 1fr 1.4fr; align-items: start;
}
.site-footer strong { color: #fff; font-size: 1.1rem; }
.site-footer a { color: #cfd9e8; }
.site-footer a:hover { color: #fff; }
.site-footer address { font-style: normal; margin-top: .6rem; line-height: 1.8; }

.site-footer__label, .site-footer__hashtag {
    display: block; text-transform: uppercase; letter-spacing: .08em;
    font-size: .8rem; font-weight: 700; color: #8aa0c4; margin-bottom: .9rem;
}
.site-footer__hashtag { color: var(--teal); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }

.social-links { list-style: none; display: flex; gap: .6rem; margin: 0; padding: 0; }
.social-links a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #fff; transition: background .15s, transform .15s;
}
.social-links a:hover { background: var(--teal); transform: translateY(-2px); }

.footer-cosponsors { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.footer-cosponsors a {
    background: #fff; border-radius: 10px; padding: .6rem .8rem;
    display: flex; align-items: center; min-height: 52px;
}
.footer-cosponsors img { max-height: 34px; width: auto; display: block; }

.site-footer__copyright {
    grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 1.3rem; margin-top: .5rem; font-size: .9rem; color: #8aa0c4;
}

/* --- Mitgliederbereich (Portal) ------------------------------------------ */
.portal-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.portal-user { color: var(--muted); margin: 0; display: flex; align-items: center; gap: .75rem; }
.logout-form { display: inline; }
.logout-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--blue); font: inherit; text-decoration: underline;
}
.logout-link:hover { color: var(--teal-dark); }
.portal-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 2rem; border-bottom: 2px solid var(--border); padding-bottom: .75rem; }
.portal-nav a { padding: .45rem .85rem; border-radius: var(--radius); font-weight: 600; color: var(--navy); }
.portal-nav a:hover { background: var(--bg-soft); text-decoration: none; }
.portal-nav__more { position: relative; }
.portal-nav__more > summary {
    list-style: none; cursor: pointer; padding: .45rem .85rem;
    border-radius: var(--radius); font-weight: 600; color: var(--navy);
}
.portal-nav__more > summary::-webkit-details-marker { display: none; }
.portal-nav__more > summary::after { content: "▾"; margin-left: .35rem; font-size: .8em; }
.portal-nav__more > summary:hover,
.portal-nav__more[open] > summary { background: var(--bg-soft); }
.portal-nav__menu {
    position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0;
    display: flex; flex-direction: column; min-width: 210px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(24,42,84,.12); padding: .35rem;
}
.portal-nav__menu a { padding: .5rem .7rem; border-radius: var(--radius); font-weight: 600; color: var(--navy); white-space: nowrap; }
.portal-nav__menu a:hover { background: var(--bg-soft); text-decoration: none; }

.avatar { border-radius: 50%; object-fit: cover; width: 40px; height: 40px; background: var(--bg-soft); }
.avatar--large { width: 160px; height: 160px; box-shadow: var(--shadow); }

/* Profil: Formulare links, Bild rechts */
.profile-layout { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.profile-main { flex: 1 1 420px; max-width: 560px; }
/* erste Überschrift bündig oben, damit das Bild auf gleicher Höhe startet */
.profile-main > h2:first-child { margin-top: 0; }
.profile-aside { flex: 1 1 240px; order: 2; }
.profile-aside .avatar--large { display: block; margin: 0 auto; }
.profile-aside__upload { margin-top: 1rem; margin-bottom: 1.75rem; font-size: .9rem; text-align: center; }
@media (max-width: 700px) {
    .profile-aside { order: -1; flex-basis: 100%; }
}

.portal-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); }
.card h2 { margin-top: 0; font-size: 1.2rem; }

.login-box { max-width: 380px; margin: 2rem auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.login-box label { display: block; font-weight: 600; margin-bottom: .25rem; }
.login-box input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; }

.data-table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-soft); color: var(--navy); font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
    box-shadow: inset 0 -1px 0 var(--border);
}
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:nth-child(even) { background: rgba(10,92,176,.022); }
.data-table tbody tr:hover { background: var(--bg-page); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table time { font-weight: 700; color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Seitennavigation für lange Tabellen/Listen (je 10 Einträge) */
.table-pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin: .5rem 0 1.5rem; }
.table-pager__btn {
    min-width: 2.1rem; padding: .35rem .55rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: #fff; color: var(--navy);
    font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; line-height: 1;
}
.table-pager__btn:hover:not(:disabled) { background: var(--bg-soft); }
.table-pager__btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.table-pager__btn:disabled { opacity: .4; cursor: default; }

/* Termin-Tabelle (Start/Kalender): Datum + Event hervorgehoben */
.events-table td:first-child { white-space: nowrap; width: 1%; }
.events-table tbody a { font-weight: 600; }

/* Schmale Bildschirme: Tabellen horizontal scrollbar statt Umbruch */
@media (max-width: 640px) {
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .data-table th { position: static; }
}
.sortable-th { cursor: pointer; user-select: none; }
.sortable-th::after { content: " ⇅"; opacity: .35; font-size: .85em; }
.sortable-th[data-sort="asc"]::after { content: " ▲"; opacity: 1; }
.sortable-th[data-sort="desc"]::after { content: " ▼"; opacity: 1; }

.members-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.members-toolbar .search-form { margin: 0; flex: 1; min-width: 240px; }

/* Mitgliedertabelle: feste Avatar-Spalte, vertikal zentriert */
.members-table th, .members-table td { vertical-align: middle; }
.members-table .col-avatar { width: 56px; padding-right: 0; }
.members-table .avatar { display: block; }

.button--small { padding: .4rem .9rem; font-size: .9rem; }
.reg-form { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; flex-wrap: wrap; }
.reg-form input[type="text"] { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; min-width: 0; flex: 1; }
.button--ghost-dark { background: transparent; border: 2px solid var(--border); color: var(--navy); }
.button--ghost-dark:hover { background: var(--bg-soft); color: var(--navy); }

.doc-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.doc-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }

/* Datei-Explorer */
.breadcrumb { margin: .5rem 0 1.5rem; color: var(--muted); }
.breadcrumb__sep { margin: 0 .4rem; color: var(--border); }
.explorer-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.dropzone {
    border: 2px dashed var(--border); border-radius: var(--radius);
    padding: 1rem 1.25rem; text-align: center; color: var(--muted);
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; transition: border-color .15s, background .15s;
}
.dropzone p { margin: 0; }
.dropzone--over { border-color: var(--teal); background: var(--bg-soft); }
#photo-dropzone { cursor: pointer; flex-direction: column; margin-bottom: 1rem; }

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(10, 16, 30, 0.92);
    align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__content { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lightbox__content img { max-width: 92vw; max-height: 80vh; border-radius: 6px; object-fit: contain; }
.lightbox__content figcaption { color: #e8eef6; margin-top: .75rem; font-size: .95rem; }
.lightbox__btn {
    background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.lightbox__btn:hover { background: rgba(255,255,255,.25); }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; }
.lightbox__counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #cfd9e8; font-size: .9rem; }
.js-lightbox a { cursor: zoom-in; }
@media (max-width: 600px) {
    .lightbox__prev { left: .4rem; } .lightbox__next { right: .4rem; }
}

.explorer { list-style: none; padding: 0; margin: 0; }
.explorer__item {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .65rem .25rem; border-bottom: 1px solid var(--border);
}
.explorer__link { flex: 1; min-width: 200px; font-weight: 600; }
.explorer__icon { margin-right: .35rem; }
.explorer__empty { padding: 1rem .25rem; color: var(--muted); }
.link-danger { background: none; border: none; color: #a12a1e; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.explorer__item form { display: inline; }
.explorer__action { font-size: .9rem; }
.reg-form__inline { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .9rem; }
.badge { background: var(--teal); color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 700; }
.badge--muted { background: var(--bg-soft); color: var(--navy); border: 1px solid var(--border); margin: 0 .15rem .15rem 0; display: inline-block; }
.badge--accent { background: var(--blue); color: #fff; }

/* --- Helfereinsätze ------------------------------------------------------ */
.portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.portal-toolbar h2 { margin: 0; }
.vol-year-nav, .vol-filter { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.vol-overview-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .75rem; }
.vol-past summary, .vol-recipients summary { cursor: pointer; font-weight: 700; color: var(--blue); margin-bottom: .6rem; }
.vol-recipient-list { columns: 2; margin: 0 0 1.5rem; padding-left: 1.2rem; }
@media (max-width: 600px) { .vol-recipient-list { columns: 1; } }
/* Datum + Sekundärinfo in Tabellenzellen der Helfer-Übersicht */
.data-table .meta { display: inline-block; margin-left: .4rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.vol-admin-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.vol-row--missing td { background: rgba(176, 92, 10, .06); }

/* --- Erfolge / Medaillen ------------------------------------------------- */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; border: 0;
}
.ach-event__name { font-weight: 600; margin-right: .4rem; }
.medal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.medal-result { display: flex; align-items: center; gap: .55rem; }
.medal { flex: 0 0 auto; width: 1.3rem; height: 1.55rem; }
.medal--gold { color: #e6b422; }
.medal--silber { color: #9fb0bd; }
.medal--bronze { color: #c08457; }
.medal-meta { display: inline-flex; flex-wrap: wrap; gap: .15rem .5rem; align-items: baseline; }
.medal-cat { font-weight: 600; color: var(--navy); }
.medal-name { color: var(--text); }

/* Erfolge-Akkordeon (öffentliche Seite) */
.accordion-toolbar { display: flex; justify-content: flex-end; margin: 0 0 .75rem; }
.ach-sort-arrow { font-weight: 700; }
.ach-item { border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: .5rem; overflow: hidden; }
.ach-item[open] { box-shadow: 0 2px 10px rgba(24,42,84,.07); }
.ach-summary {
    display: grid; grid-template-columns: 4.5rem 1fr auto 1.4rem;
    align-items: center; gap: .25rem 1rem;
    padding: .85rem 1.1rem; cursor: pointer; list-style: none;
}
.ach-summary::-webkit-details-marker { display: none; }
.ach-summary:hover { background: var(--bg-soft); }
.ach-summary .ach-year { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.ach-summary .ach-event__name { margin-right: 0; }
.ach-medals-summary { display: inline-flex; flex-wrap: wrap; gap: .15rem .7rem; align-items: center; justify-self: end; }
.medal-count { display: inline-flex; align-items: center; gap: .2rem; }
.medal-count .medal { width: 1.1rem; height: 1.3rem; }
.medal-count__n { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.ach-chevron { width: .7rem; height: .7rem; justify-self: center; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.ach-item[open] .ach-chevron { transform: rotate(-135deg); }
.ach-details { padding: 0 1.1rem 1rem 1.1rem; border-top: 1px solid var(--border); }
.ach-details .medal-list { padding-top: .85rem; }
@media (max-width: 640px) {
    .ach-summary { grid-template-columns: 3.5rem 1fr 1.2rem; }
    .ach-medals-summary { grid-column: 1 / -1; justify-self: start; }
}

/* Erfolge-Formular: Resultate-Tabelle braucht mehr Breite als ein Standardformular */
.achievement-form { max-width: 820px; }
.result-formset th, .result-formset td { padding: .5rem .55rem; }
.result-formset .result-del { text-align: center; width: 4.5rem; }
/* Checkboxen in Formularen nie auf volle Breite strecken */
.stacked-form input[type="checkbox"] { width: auto; }

.stacked-form { max-width: 560px; }
.stacked-form p { margin: 0 0 1rem; }
.stacked-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.stacked-form input, .stacked-form select, .stacked-form textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--border);
    border-radius: 12px; font: inherit; background: #fff; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.stacked-form input:focus, .stacked-form select:focus, .stacked-form textarea:focus,
.search-form input:focus, .login-box input:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(10, 92, 176, .14);
}
.stacked-form textarea { min-height: 160px; }
/* Checkboxen: Box und Beschriftung in einer Zeile statt gestrecktem Block.
   Reihenfolge per order: erst Box, dann Label; Hilfetext bricht darunter um. */
.stacked-form p:has(> input[type="checkbox"]) {
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1rem;
}
.stacked-form p:has(> input[type="checkbox"]) > input[type="checkbox"] {
    order: 1; width: 1.15rem; height: 1.15rem; flex: 0 0 auto;
    margin: 0; padding: 0; accent-color: var(--blue); cursor: pointer;
}
.stacked-form p:has(> input[type="checkbox"]) > label {
    order: 2; display: inline; margin: 0; font-weight: 600; cursor: pointer;
}
.stacked-form p:has(> input[type="checkbox"]) > .helptext {
    order: 3; flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--muted);
}
.quill-wrap { margin-bottom: 1rem; background: #fff; }
.quill-wrap .ql-container { font: inherit; }
/* Editorbereich vertikal vergrösserbar (Zieh-Griff unten rechts) */
.quill-wrap .ql-editor {
    min-height: 200px;
    max-height: 80vh;
    resize: vertical;
    overflow-y: auto;
}

/* News: verknüpfte Galerie */
.news-gallery-link { display: inline-flex; align-items: center; gap: .5rem; margin: 1.5rem 0; }

.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.message { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: .5rem; }
.message--success { background: #e6f6f2; color: #0a6b54; }
.message--error { background: #fdecea; color: #a12a1e; }
.message--info { background: #e8f0fb; color: #0b4f8a; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
    .nav-toggle__button { display: block; }
    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--border);
        max-height: 0; overflow: hidden; transition: max-height .25s ease;
        box-shadow: var(--shadow);
    }
    .site-nav ul { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1rem; align-items: stretch; }
    .site-nav a { padding: .8rem .5rem; border-bottom: 1px solid var(--border); }
    .site-nav li.active > a::after { display: none; }
    /* Untermenüs auf Mobile eingerückt und immer sichtbar */
    .site-nav .submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; padding: 0 0 0 1rem; margin: 0;
    }
    .site-nav li.has-children > a::before { display: none; }
    .nav-lock__text { display: inline; }
    .site-nav a.nav-lock { display: flex; }
    .nav-toggle:checked ~ .site-nav { max-height: 80vh; }
    .nav-toggle:checked ~ .nav-toggle__button span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-toggle__button span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-toggle__button span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .site-footer__inner { grid-template-columns: 1fr; }
    .event-list time { min-width: 100%; }
}