/*
 * website.css - Gestaltung der Website des Vereins
 *
 * Richtung (Michael, 2026-10-15): traditionell japanisch und modern, warm wie
 * ein Teezimmer, nicht kühl, nicht Baukasten. Washi-Papier als Grund, Tusche
 * als Schrift, Zinnober (shu) und Indigo (ai) als Akzente, Hanko-Stempel mit
 * Schriftzeichen als Abschnittsmarken, Seigaiha-Wellen als Muster.
 * Kein Dunkelmodus: Info-Seite (globale claude.md 22.4, fünfte Runde).
 * Breite Monitore: Inhalt in fester Breite, der Hero bleibt flach, damit
 * Inhalt ohne Scrollen sichtbar ist. Die Grundlagen (Buttons, Felder,
 * Meldungen) kommen aus site-base.css und werden hier eingefärbt.
 */

@font-face {
    font-family: "Shippori Mincho";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/shippori-mincho-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Shippori Mincho";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/shippori-mincho-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Shippori Mincho";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/shippori-mincho-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-family: "Roboto", "Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", Georgia, serif;

    --color-washi: #f7f2e8;
    --color-washi-deep: #efe7d8;
    --color-paper: #fffdf8;
    --color-ink: #2b2521;
    --color-ink-soft: #4f4741;
    --color-line: #d9cfbf;
    --color-line-strong: #b9ab95;
    --color-shu: #c7402a;
    --color-shu-deep: #a63320;
    --color-ai: #223a5e;
    --color-ai-deep: #16263f;
    --color-gold: #b48a3c;
    --color-matcha: #6e7f4b;
    --color-matcha-soft: #e9ecdd;

    --color-surface: var(--color-paper);
    --color-surface-alt: var(--color-washi);
    --color-surface-raised: #ffffff;
    --color-text: var(--color-ink);
    --color-text-muted: var(--color-ink-soft);
    --color-border: var(--color-line);
    --color-border-strong: var(--color-line-strong);
    --color-primary: var(--color-shu);
    --color-primary-hover: var(--color-shu-deep);
    --color-on-primary: #ffffff;
    --color-accent: var(--color-ai);
    --color-link: #1f4f8a;
    --color-link-hover: var(--color-shu);
    --color-required: var(--color-shu);
    --color-info-surface: #e8eef6;
    --color-stripe: #f3eee4;
    --color-success: #3f6b3a;
    --color-success-surface: var(--color-matcha-soft);
    --color-danger: #a8302a;
    --color-danger-surface: #f8e4e1;
    --color-credit-background: rgba(34, 58, 94, 0.92);
    --color-credit-link: #ffb482;
    --focus-ring: 0 0 0 3px rgba(199, 64, 42, 0.35);
    --radius: 6px;
    --radius-small: 4px;
    --shadow-card: 0 1px 2px rgba(43, 37, 33, 0.06), 0 12px 32px rgba(43, 37, 33, 0.08);
    --max-width: 1140px;
    --section-space: clamp(48px, 7vw, 96px);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    background: var(--color-washi);
}

body {
    background: var(--color-washi);
    color: var(--color-ink);
    font-size: 17px;
    line-height: 1.65;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0.01em;
}

h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.18;
}

h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.25;
    margin: 0 0 0.6em;
}

h3,
.h3 {
    font-size: 1.3rem;
    margin: 0 0 0.4em;
}

p {
    margin: 0 0 1.1em;
}

a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--color-shu);
}

.lead {
    font-size: 1.18rem;
    line-height: 1.6;
    max-width: 62ch;
}

.center {
    text-align: center;
}

.small {
    font-size: 0.9rem;
}

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

.container.narrow {
    max-width: 820px;
}

.section {
    padding: var(--section-space) 0;
}

/* Washi-Fläche: heller Grund mit sehr feiner Faserstruktur */
.section-paper {
    background: var(--color-paper);
    background-image: radial-gradient(rgba(43, 37, 33, 0.035) 0.6px, transparent 0.7px);
    background-size: 7px 7px;
}

/* Seigaiha-Wellen als Muster, dezent */
.section-waves {
    background-color: var(--color-washi-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23b9ab95' stroke-width='1' stroke-opacity='0.45'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='22'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='0' cy='20' r='38'/%3E%3Ccircle cx='0' cy='20' r='30'/%3E%3Ccircle cx='0' cy='20' r='22'/%3E%3Ccircle cx='0' cy='20' r='14'/%3E%3Ccircle cx='80' cy='20' r='38'/%3E%3Ccircle cx='80' cy='20' r='30'/%3E%3Ccircle cx='80' cy='20' r='22'/%3E%3Ccircle cx='80' cy='20' r='14'/%3E%3Ccircle cx='40' cy='0' r='38'/%3E%3Ccircle cx='40' cy='0' r='30'/%3E%3Ccircle cx='40' cy='0' r='22'/%3E%3Ccircle cx='40' cy='0' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

.section-ai {
    background: var(--color-ai);
    color: #f4efe6;
}

.section-ai h2,
.section-ai h3 {
    color: #ffffff;
}

.section-ai p,
.section-ai li {
    color: #f4efe6;
}

.section-ai a:not(.button) {
    color: #ffd7c4;
}

/* ---------- Hanko: Stempel mit Schriftzeichen als Abschnittsmarke ---------- */

.hanko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--color-shu);
    border-radius: 6px;
    color: var(--color-shu);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    transform: rotate(-4deg);
    background: rgba(255, 255, 255, 0.5);
    flex: none;
}

.section-ai .hanko {
    border-color: #ffb482;
    color: #ffb482;
    background: transparent;
}

.section-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.section-head h2 {
    margin-bottom: 0.2em;
}

.section-head .eyebrow {
    margin-bottom: 2px;
}

.section-head-link {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
}

.eyebrow {
    display: block;
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-shu);
}

.eyebrow-light {
    color: #ffb482;
}

/* Japanische Zeichen als Akzent neben lateinischem Text */
.kanji {
    font-family: var(--font-display);
    color: var(--color-ai);
    font-weight: 600;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

/* ---------- Buttons (Grund in site-base.css) ---------- */

.button {
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.button-primary {
    background: var(--color-shu);
    color: #ffffff;
}

.button-primary:hover {
    background: var(--color-shu-deep);
    color: #ffffff;
}

.button-secondary {
    background: transparent;
    border-color: var(--color-ai);
    color: var(--color-ai);
}

.button-secondary:hover {
    background: var(--color-ai);
    color: #ffffff;
    border-color: var(--color-ai);
}

.section-ai .button-secondary {
    border-color: #ffffff;
    color: #ffffff;
}

.section-ai .button-secondary:hover {
    background: #ffffff;
    color: var(--color-ai);
}

.button-row .button {
    flex: 0 0 auto;
    min-width: 170px;
}

/* ---------- Kopf ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 242, 232, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-line);
}

.site-header.is-scrolled {
    box-shadow: 0 6px 24px rgba(43, 37, 33, 0.08);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
}

.site-logo img {
    height: 40px;
    width: auto;
}

.site-nav ul {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: block;
    padding: 10px 14px;
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--color-shu);
    border-bottom-color: var(--color-shu);
}

.site-nav a[aria-current="page"] {
    color: var(--color-shu);
    border-bottom-color: var(--color-shu);
}

.nav-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.nav-toggle {
    display: none;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.language-menu {
    position: relative;
}

.language-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: 4px;
    background: var(--color-paper);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.language-menu summary:hover,
.language-menu[open] summary {
    border-color: var(--color-shu);
    color: var(--color-shu);
}

.language-menu summary .icon {
    width: 1.1em;
    height: 1.1em;
}

.language-menu ul {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    box-shadow: var(--shadow-card);
}

.language-menu li a {
    display: block;
    padding: 8px 12px;
    border-radius: 3px;
    color: var(--color-ink);
    text-decoration: none;
}

.language-menu li a:hover {
    background: var(--color-washi);
    color: var(--color-shu);
}

@media (max-width: 960px) {
    .header-inner {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .site-logo img {
        height: 34px;
    }

    .site-nav {
        order: 3;
        width: 100%;
        display: none;
        padding: 6px;
        border: 1px solid var(--color-line);
        border-radius: 4px;
        background: var(--color-paper);
    }

    .nav-toggle-input:checked ~ .site-nav {
        display: block;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid var(--color-line-strong);
        border-radius: 4px;
        background: var(--color-paper);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
    }

    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        border-color: var(--color-shu);
        color: var(--color-shu);
    }

    .nav-toggle .icon-close {
        display: none;
    }

    .nav-toggle-input:checked ~ .nav-toggle .icon-close {
        display: inline-block;
    }

    .nav-toggle-input:checked ~ .nav-toggle .icon-open {
        display: none;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 2px;
    }

    .site-nav a {
        padding: 12px 14px;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }

    .site-nav a:hover,
    .site-nav a[aria-current="page"] {
        border-left-color: var(--color-shu);
        background: var(--color-washi);
    }
}

/* ---------- Hero: Brücke zwischen Berlin und Tokio ---------- */

.bridge {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: clamp(300px, 36vw, 440px);
    background: var(--color-ai-deep);
    overflow: hidden;
}

.bridge .photo {
    margin: 0;
    height: 100%;
}

.bridge .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.bridge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 38, 63, 0.05) 0%, rgba(22, 38, 63, 0.3) 100%);
    pointer-events: none;
}

.bridge-label {
    position: absolute;
    bottom: 18px;
    padding: 6px 12px;
    background: rgba(22, 38, 63, 0.7);
    color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

.bridge-label-left {
    left: 18px;
}

.bridge-label-right {
    right: 18px;
}

.hero-card {
    position: relative;
    z-index: 3;
    max-width: 860px;
    margin: -110px auto 0;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
    background: var(--color-paper);
    border-top: 4px solid var(--color-shu);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.hero-card h1 {
    margin: 10px 0 14px;
}

.hero-card .lead {
    margin: 0 auto 22px;
}

.hero-card .button-row {
    justify-content: center;
    margin-top: 0;
}

.hero-kanji {
    font-family: var(--font-display);
    color: var(--color-ai);
    font-size: 1.05rem;
    letter-spacing: 0.4em;
    margin-bottom: 4px;
}

@media (max-width: 720px) {
    .bridge {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: 400px;
    }

    .bridge-label-right {
        right: auto;
        left: 18px;
        bottom: auto;
        top: calc(50% + 14px);
    }

    .bridge-label-left {
        bottom: auto;
        top: 18px;
    }

    .hero-card {
        margin: -40px 16px 0;
    }
}

/* ---------- Seitenkopf ---------- */

.page-head {
    padding: clamp(36px, 6vw, 64px) 0 clamp(28px, 4vw, 44px);
    background: var(--color-washi);
    border-bottom: 1px solid var(--color-line);
}

.page-head-inner {
    display: grid;
    gap: 24px;
    align-items: center;
}

.page-head h1 {
    margin: 8px 0 12px;
}

.page-head .lead {
    margin-bottom: 0;
}

.page-head .button-row {
    margin-top: 22px;
}

.page-head-image {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.page-head-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

@media (min-width: 900px) {
    .page-head-inner {
        grid-template-columns: 1.1fr 1fr;
    }
}

.breadcrumb {
    font-size: 0.9rem;
    color: var(--color-ink-soft);
    margin-bottom: 10px;
}

.breadcrumb a {
    color: inherit;
}

/* ---------- Fotos ---------- */

.photo {
    margin: 0;
    position: relative;
}

.photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-position: center;
}

.photo-pos-top img {
    object-position: center top;
}

.photo-pos-bottom img {
    object-position: center bottom;
}

.photo-caption {
    margin-top: 8px;
    font-size: 0.88rem;
    color: var(--color-ink-soft);
}

.art img {
    border-radius: 0;
}

.art-credit {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-credit-background);
    color: #ffffff;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.art-credit a {
    color: var(--color-credit-link);
    font-weight: 500;
}

.art:hover .art-credit,
.art:focus .art-credit,
.art:focus-within .art-credit,
.art.show-credit .art-credit {
    opacity: 1;
}

/* ---------- Karten und Raster ---------- */

.card-grid,
.door-grid,
.pillar-grid,
.cta-grid,
.people-grid,
.way-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 720px) {
    .card-grid-2,
    .cta-grid,
    .people-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .door-grid,
    .pillar-grid,
    .way-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 960px) {
    .card-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    padding: 26px 28px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

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

.door {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px 28px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-top: 4px solid var(--color-ai);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.door:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    color: inherit;
}

.door-business {
    border-top-color: var(--color-shu);
}

.door-projects {
    border-top-color: var(--color-gold);
}

.door h2 {
    font-size: 1.4rem;
    margin: 0;
}

.door p {
    margin: 0;
    color: var(--color-ink-soft);
    flex: 1;
}

.door .text-link {
    color: var(--color-shu);
}

.pillar {
    padding: 26px 28px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.pillar .hanko {
    margin-bottom: 16px;
}

.pillar h3 {
    margin-bottom: 8px;
}

.pillar p {
    margin: 0;
}

.project-card {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    color: inherit;
}

.project-card-image {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.project-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-washi-deep);
    color: var(--color-ai);
}

.project-card-placeholder .icon {
    width: 2.5em;
    height: 2.5em;
}

.project-card-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.project-card-body h3 {
    margin: 0;
}

.project-card-body p {
    margin: 0;
    color: var(--color-ink-soft);
}

.project-card-body .text-link {
    margin-top: auto;
    padding-top: 10px;
    color: var(--color-shu);
}

.kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ai);
}

.kicker-sep {
    margin: 0 6px;
    color: var(--color-line-strong);
}

.project-card-featured h3 {
    font-size: 1.6rem;
}

.feature-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

@media (min-width: 720px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Zahlen, Zeitstrahl, Partner ---------- */

.stat-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-list li {
    padding: 18px 16px;
    text-align: center;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.stat-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--color-shu);
    line-height: 1.1;
}

.stat-list span {
    display: block;
    font-size: 0.88rem;
    color: var(--color-ink-soft);
    margin-top: 4px;
}

@media (min-width: 720px) {
    .stat-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.split {
    display: grid;
    gap: 32px;
    align-items: center;
}

.split-photos {
    display: grid;
    gap: 14px;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.1fr 1fr;
    }

    .split-photos {
        grid-template-columns: 1fr 1fr;
    }

    .split-photos .photo:nth-child(2) {
        margin-top: 36px;
    }
}

.timeline {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    border-left: 2px solid var(--color-line-strong);
}

.timeline li {
    position: relative;
    padding: 0 0 22px 36px;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-shu);
    border: 3px solid var(--color-washi);
    box-shadow: 0 0 0 1px var(--color-line-strong);
}

.timeline-year {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-ai);
    margin-right: 10px;
}

.timeline p {
    margin: 2px 0 0;
    color: var(--color-ink-soft);
}

@media (min-width: 900px) {
    .timeline {
        columns: 2;
        column-gap: 56px;
    }

    .timeline::before {
        display: none;
    }

    .timeline li {
        break-inside: avoid;
        border-left: 2px solid var(--color-line-strong);
        margin-left: 7px;
        padding-left: 28px;
    }

    .timeline li::before {
        left: -9px;
    }
}

.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: marquee 48s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        flex-wrap: wrap;
        width: auto;
    }

    .marquee {
        mask-image: none;
    }
}

.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 76px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-ink);
    text-align: center;
    flex: none;
}

a.logo-box:hover {
    border-color: var(--color-shu);
}

.logo-box img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
    display: block;
}

.logo-text {
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.25;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.logo-grid .logo-box {
    width: auto;
}

.sponsor-year {
    margin-bottom: 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-paper);
}

.sponsor-year summary {
    padding: 14px 20px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.sponsor-year summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-shu);
    border-bottom: 2px solid var(--color-shu);
    transform: rotate(-45deg);
}

.sponsor-year[open] summary::before {
    transform: rotate(45deg);
}

.sponsor-year .logo-grid {
    padding: 0 20px 20px;
    margin: 0;
}

.cta-card {
    padding: 28px 30px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-left: 5px solid var(--color-ai);
    border-radius: var(--radius);
}

.cta-card h2 {
    font-size: 1.45rem;
}

.cta-card p {
    color: var(--color-ink-soft);
}

.cta-card-shu {
    border-left-color: var(--color-shu);
}

/* ---------- Verein ---------- */

.structure-note {
    padding: 22px 26px;
    background: var(--color-info-surface);
    border-left: 4px solid var(--color-ai);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.structure-note p:last-child {
    margin-bottom: 0;
}

.board-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 500;
}

.board-list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.document-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.document-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    text-decoration: none;
    font-weight: 500;
}

.document-list a:hover {
    border-color: var(--color-shu);
}

.team-photo {
    margin: 28px 0 0;
}

.team-photo img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* ---------- Projekte ---------- */

.project-layout {
    display: grid;
    gap: 32px;
}

@media (min-width: 900px) {
    .project-layout {
        grid-template-columns: 1fr 300px;
        align-items: start;
    }
}

.project-text {
    max-width: 68ch;
}

.project-text h2 {
    font-size: 1.4rem;
    margin-top: 1.5em;
    padding-left: 14px;
    border-left: 4px solid var(--color-shu);
}

.project-text ul {
    padding-left: 1.3em;
}

.project-text li {
    margin-bottom: 6px;
}

.project-facts {
    padding: 22px 24px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

/* Logos stehen mittig (Michael, 2026-10-16) */
.project-logo {
    max-width: 220px;
    max-height: 80px;
    width: auto;
    height: auto;
    margin: 0 auto 18px;
    display: block;
}

.project-facts dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
}

.project-facts dt {
    color: var(--color-ink-soft);
    font-size: 0.9rem;
}

.project-facts dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.project-facts .button {
    margin-top: 20px;
    width: 100%;
}

.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--color-matcha-soft);
    color: var(--color-success);
}

.pill-paused {
    background: var(--color-info-surface);
    color: var(--color-ai);
}

.pill-archive {
    background: var(--color-washi-deep);
    color: var(--color-ink-soft);
}

.gallery {
    display: grid;
    gap: 14px;
}

@media (min-width: 640px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gallery-item {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-ai-deep);
    aspect-ratio: 3 / 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform 0.25s ease;
}

.gallery-item.photo-pos-top img {
    object-position: center top;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

.gallery-item .project-card-placeholder {
    width: 100%;
    height: 100%;
}

.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 12px;
    font-size: 0.85rem;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(22, 38, 63, 0) 0%, rgba(22, 38, 63, 0.85) 100%);
}

.gallery-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-shu);
    color: #ffffff;
}

.gallery-play .icon {
    width: 1.5em;
    height: 1.5em;
    margin-left: 3px;
}

.lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(96vw, 1400px);
    max-height: 96vh;
}

.lightbox::backdrop {
    background: rgba(22, 38, 63, 0.92);
}

.lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.lightbox img {
    max-width: min(96vw, 1400px);
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    display: block;
}

.lightbox-caption {
    color: #ffffff;
    font-size: 0.95rem;
    text-align: center;
    margin: 0;
}

.lightbox-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-ink);
    cursor: pointer;
}

.lightbox-button:hover {
    background: #ffffff;
    color: var(--color-shu);
}

.lightbox-prev {
    left: -8px;
}

.lightbox-next {
    right: -8px;
}

.lightbox-close {
    position: absolute;
    top: -8px;
    right: -8px;
    transform: none;
    width: 40px;
    height: 40px;
}

@media (max-width: 720px) {
    .lightbox-prev {
        left: 4px;
    }

    .lightbox-next {
        right: 4px;
    }

    .lightbox-close {
        top: 4px;
        right: 4px;
    }
}

.regional-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.regional-item {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.regional-item h3 {
    margin-bottom: 4px;
}

.regional-item p {
    margin-bottom: 6px;
    color: var(--color-ink-soft);
}

.regional-photo {
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-washi-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ai);
}

.regional-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

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

/* ---------- Business ---------- */

.offer-grid {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-grid li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.offer-grid p {
    margin: 2px 0 0;
    color: var(--color-ink-soft);
}

.offer-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-matcha-soft);
    color: var(--color-success);
}

@media (min-width: 720px) {
    .offer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.reference-item {
    margin: 0;
}

.reference-item .photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.reference-item figcaption {
    margin-top: 10px;
    font-size: 0.92rem;
    color: var(--color-ink-soft);
}

.reference-item figcaption strong {
    color: var(--color-ink);
}

.person-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    align-items: start;
    padding: 24px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.person-photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.person-role {
    color: var(--color-shu);
    font-weight: 500;
    margin-bottom: 8px;
}

@media (max-width: 560px) {
    .person-card {
        grid-template-columns: 1fr;
    }

    .person-photo {
        width: 150px;
    }
}

/* ---------- Mitmachen ---------- */

.way {
    padding: 26px 28px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-top: 4px solid var(--color-ai);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}

.way-member {
    border-top-color: var(--color-shu);
}

.way-team {
    border-top-color: var(--color-gold);
}

.way-helper {
    border-top-color: var(--color-matcha);
}

.way h3 {
    margin-bottom: 6px;
}

.way-sub {
    color: var(--color-ink-soft);
    font-size: 0.92rem;
    margin-bottom: 12px;
}

.way ul {
    margin: 0 0 16px;
    padding-left: 1.2em;
}

.way li {
    margin-bottom: 6px;
}

.way .button {
    margin-top: auto;
    align-self: flex-start;
}

.step-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.step-list li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
}

.step-list p {
    margin: 4px 0 0;
    color: var(--color-ink-soft);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--color-ai);
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}

@media (min-width: 900px) {
    .step-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .step-list li {
        grid-template-columns: 1fr;
    }
}

.fee-box {
    padding: 22px 24px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
}

.fee-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--color-ai);
    color: #ffffff;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fee-table td {
    padding: 12px;
    border-bottom: 1px solid var(--color-line);
}

.fee-table tbody tr:nth-child(even) {
    background: var(--color-stripe);
}

.fee-table td:not(:first-child) {
    font-weight: 500;
    white-space: nowrap;
}

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

.form-card {
    padding: clamp(24px, 4vw, 40px);
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-top: 4px solid var(--color-shu);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.form-card-head {
    display: grid;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.form-card-art {
    display: flex;
    justify-content: center;
}

.form-card-art .art {
    width: min(170px, 50%);
}

/* Die zweite Spalte nur mit Bild, sonst nahm der Text nicht die ganze Breite (Michael, 2026-10-19) */
@media (min-width: 820px) {
    .form-card-head-art {
        grid-template-columns: 1fr 200px;
    }
}

.form-card h3 {
    margin-top: 26px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-line);
}

.form-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
}

.form-docs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.field-row {
    display: grid;
    gap: 0 16px;
}

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

.field-row .field {
    padding: 14px 16px 10px;
    border-radius: var(--radius);
    background: var(--color-washi);
    border: 1px solid var(--color-line);
    margin-bottom: 16px;
}

.field-input,
.field-select,
.field-textarea {
    background: #ffffff;
    border-color: var(--color-line-strong);
    border-radius: 4px;
}

.field-textarea {
    min-height: 170px;
    resize: vertical;
    line-height: 1.55;
    padding: 12px 14px;
}

.field-hint {
    margin-top: 6px;
    margin-bottom: 0;
}

.field-checkbox {
    margin-bottom: 14px;
}

.checkbox-label {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: start;
    cursor: pointer;
    line-height: 1.5;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-washi);
}

.checkbox-input {
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--color-shu);
}

.honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Kontakt ---------- */

.contact-layout {
    display: grid;
    gap: 32px;
}

@media (min-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr 1.4fr;
        align-items: start;
    }
}

.contact-address {
    font-style: normal;
    line-height: 1.6;
    margin-bottom: 16px;
}

.contact-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
}

.contact-links {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.contact-links a:hover {
    text-decoration: underline;
}

.contact-art {
    display: none;
}

@media (min-width: 900px) {
    .contact-art {
        display: block;
        width: 200px;
    }
}

/* ---------- Rechtstexte ---------- */

.legal-text {
    padding: clamp(24px, 4vw, 44px);
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.legal-text h2 {
    font-size: 1.35rem;
    margin-top: 1.8em;
    padding-left: 14px;
    border-left: 4px solid var(--color-shu);
}

.legal-text h3 {
    margin-top: 1.4em;
    font-size: 1.1rem;
}

.legal-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95rem;
}

.legal-text th {
    text-align: left;
    padding: 9px 12px;
    background: var(--color-ai);
    color: #ffffff;
}

.legal-text td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: top;
}

.legal-text td:last-child,
.legal-text th:last-child {
    white-space: nowrap;
}

.legal-text tbody tr:nth-child(even) {
    background: var(--color-stripe);
}

.legal-text .clause {
    padding-left: 3em;
    text-indent: -3em;
}

.toc {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: var(--color-washi);
    border: 1px solid var(--color-line);
}

.toc-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.toc ol {
    margin: 0;
    padding-left: 1.4em;
}

/* ---------- Fehlerseiten ---------- */

.error-page {
    text-align: center;
}

.error-code {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--color-shu);
    line-height: 1;
    margin-bottom: 8px;
}

.art-error {
    width: min(260px, 70%);
    margin: 16px auto;
}

.error-caption {
    color: var(--color-ink-soft);
}

.error-detail {
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    padding: 12px;
    background: var(--color-washi);
    border-radius: var(--radius);
}

/* ---------- Fuß ---------- */

.site-footer {
    margin-top: auto;
    background: var(--color-ai-deep);
    color: #e8e1d3;
    padding: 56px 0 28px;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 22px;
}

.footer-columns {
    display: grid;
    gap: 32px;
    margin-bottom: 32px;
}

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

.footer-brand img {
    height: 34px;
    width: auto;
    margin-bottom: 16px;
}

.footer-brand p {
    color: #b6c0d2;
    max-width: 44ch;
}

.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 6px;
}

.footer-contact a:hover {
    color: #ffb482;
}

.footer-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.site-footer li a {
    color: #b6c0d2;
    text-decoration: none;
}

.site-footer li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-note {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: #b6c0d2;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}

.footer-kanji {
    font-family: var(--font-display);
    letter-spacing: 0.3em;
    color: #ffb482;
}

/* ---------- Abstände (statt Inline-Styles, die die CSP sperrt) ---------- */

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-36 {
    margin-top: 36px;
}

.narrow-text {
    max-width: 820px;
}

.fee-note {
    margin: 12px 0 0;
}

/* ---------- Kopf auf schmalen Bildschirmen: alles in einer Reihe ---------- */

@media (max-width: 720px) {
    .header-inner {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .site-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-logo img {
        height: auto;
        max-height: 34px;
        max-width: 100%;
    }

    .language-menu summary span {
        display: none;
    }

    .language-menu summary {
        padding: 0 8px;
    }

    .nav-toggle span {
        display: none;
    }

    .nav-toggle {
        padding: 0 10px;
    }

    .site-nav {
        position: absolute;
        left: 16px;
        right: 16px;
        top: calc(100% + 6px);
        order: initial;
        width: auto;
        box-shadow: var(--shadow-card);
        z-index: 30;
    }
}

@media (max-width: 720px) {
    .section-head {
        flex-wrap: wrap;
        gap: 14px 16px;
    }

    .section-head-link {
        flex-basis: 100%;
        margin-left: 0;
        white-space: normal;
    }
}

/* Buttons mit langen Texten (z.B. E-Mail-Adresse) laufen auf Smartphones nie über den Rand */
.button-row .button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---------- Korrekturen nach Michaels Test (2026-10-15) ---------- */

/* Das Ankreuzfeld nutzt die ganze Breite: site-base.css legt .field-checkbox als
   Raster mit 22px-Spalte an, hier steckt aber das ganze Etikett im Feld */
.field-checkbox {
    display: block;
}

/* Felder einer Reihe teilen sich die Zeilen (Beschriftung, Feld, Erklärung, Fehler),
   damit die Felder auf einer Höhe bleiben, auch wenn eine Beschriftung umbricht */
@media (min-width: 640px) {
    .field-row .field {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    .field-row .field-label {
        align-self: end;
    }
}

/* Raster-Elemente in einer Reihe werden gestreckt, ihr Inhalt bleibt oben:
   sonst verteilt das Raster den Leerraum zwischen Nummer und Text */
.step-list li,
.regional-item,
.person-card,
.offer-grid li,
.door,
.way,
.project-card-body {
    align-content: start;
}

/* Kontrast: Zinnober auf Papier liegt knapp unter 4,5:1, Text in Zinnober nimmt den dunkleren Ton */
.eyebrow,
.field-required,
.door .text-link,
.project-card-body .text-link,
.person-role,
.hanko {
    color: var(--color-shu-deep);
}

.hanko {
    border-color: var(--color-shu-deep);
}

/* Beschriftungen einer Reihe stehen oben auf einer Linie, die Felder darunter ebenfalls (Subgrid) */
@media (min-width: 640px) {
    .field-row .field-label {
        align-self: start;
    }
}

/* Kontakt: linke Spalte beginnt auf der Höhe der Formular-Karte */
@media (min-width: 900px) {
    .contact-info {
        padding-top: clamp(24px, 4vw, 40px);
    }
}

/* Hochformat in der Galerie: belegt zwei Zeilen, damit kein Kopf abgeschnitten wird */
.gallery-item-portrait {
    aspect-ratio: auto;
    grid-row: span 2;
}

@media (max-width: 639px) {
    .gallery-item-portrait {
        aspect-ratio: 3 / 4;
        grid-row: auto;
    }
}

.kicker-sep {
    font-size: 1em;
}

/* ---------- Unterstützen (2026-10-15) ---------- */

.purpose-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.purpose-list li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: start;
    align-content: start;
}

.purpose-list p {
    margin: 2px 0 0;
    color: var(--color-ink-soft);
}

.donation-layout {
    display: grid;
    gap: 20px;
}

@media (min-width: 820px) {
    .donation-layout {
        grid-template-columns: 1.2fr 1fr;
    }
}

.donation-card {
    padding: 26px 28px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-top: 4px solid var(--color-shu);
    border-radius: var(--radius);
    align-content: start;
}

.donation-card-online {
    border-top-color: var(--color-ai);
    position: relative;
}

.bank-list {
    margin: 0;
    display: grid;
    gap: 8px;
}

.bank-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-line);
}

.bank-row dt {
    color: var(--color-ink-soft);
}

.bank-row dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.bank-iban {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .bank-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.donation-buttons {
    margin-top: 12px;
}

.donation-art {
    width: 140px;
    margin: 16px 0 0 auto;
}

.cta-card-gold {
    border-left-color: var(--color-gold);
}

@media (min-width: 960px) {
    .cta-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.offer-grid-single {
    grid-template-columns: 1fr;
}

/* ---------- Startseite, Michaels Runde vom 2026-10-15 (sieben Bildschirmgrößen) ---------- */

/* Hero: auf breiten Monitoren höher und mit Blick auf die Stadt statt nur auf die Turmspitzen.
   Die Höhe hängt an Breite UND Höhe des Fensters, damit die Karte darunter immer ohne Scrollen sichtbar bleibt */
.bridge {
    height: clamp(300px, min(38vw, 58vh), 720px);
}

.bridge .photo img {
    object-position: 50% 62%;
}

/* Smartphone: beide Städte gleich hoch (1fr allein ließ das höhere Bild die Reihe sprengen),
   Tokyo-Schild oben rechts in seiner Hälfte, Karte etwas tiefer */
@media (max-width: 720px) {
    .bridge {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        height: min(400px, 62vh);
    }

    .bridge .photo {
        min-height: 0;
    }

    .bridge .photo img {
        object-position: 50% 55%;
    }

    .bridge-label-right {
        left: auto;
        right: 14px;
        top: calc(50% + 16px);
    }

    .bridge-label-left {
        left: 14px;
        top: 14px;
    }

    .hero-card h1 {
        font-size: clamp(1.55rem, 7vw, 2.1rem);
    }

    .hero-kanji {
        font-size: 0.95rem;
        letter-spacing: 0.3em;
    }

    .hero-card .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-card .button-row .button {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .hero-card {
        margin: -30px 10px 0;
        padding: 22px 16px;
    }
}

/* Karten mit data-href: Text bleibt markierbar, der Klick führt trotzdem auf die Seite */
.door,
.project-card {
    cursor: pointer;
}

.door h2 a,
.project-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.door h2 a:hover,
.project-card-body h3 a:hover {
    color: inherit;
    text-decoration: none;
}

.door:hover .text-link,
.project-card:hover .text-link {
    text-decoration: underline;
}

/* Kicker: Trennpunkt in der Farbe des Textes, lesbar und ohne Lint-Befund */
.kicker-sep {
    color: inherit;
    opacity: 0.6;
}

/* Fotos, die sich vergrößern lassen */
.photo-zoom {
    display: block;
    cursor: zoom-in;
}

.photo-zoom img {
    transition: filter 0.15s ease;
}

.photo-zoom:hover img {
    filter: brightness(1.06);
}

/* Lightbox: Knöpfe innerhalb des Rahmens, damit kein Querscrollbalken entsteht */
.lightbox {
    overflow: hidden;
}

.lightbox-prev {
    left: 10px;
}

.lightbox-next {
    right: 10px;
}

.lightbox-close {
    top: 10px;
    right: 10px;
}

/* Wellenmuster: Text liegt nie direkt auf dem Muster, sondern auf einer Papierfläche */
.section-waves {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23b9ab95' stroke-width='1' stroke-opacity='0.3'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='22'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='0' cy='20' r='38'/%3E%3Ccircle cx='0' cy='20' r='30'/%3E%3Ccircle cx='0' cy='20' r='22'/%3E%3Ccircle cx='0' cy='20' r='14'/%3E%3Ccircle cx='80' cy='20' r='38'/%3E%3Ccircle cx='80' cy='20' r='30'/%3E%3Ccircle cx='80' cy='20' r='22'/%3E%3Ccircle cx='80' cy='20' r='14'/%3E%3Ccircle cx='40' cy='0' r='38'/%3E%3Ccircle cx='40' cy='0' r='30'/%3E%3Ccircle cx='40' cy='0' r='22'/%3E%3Ccircle cx='40' cy='0' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

.wave-panel {
    padding: 22px 26px;
    background: rgba(255, 253, 248, 0.92);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.section-head.wave-panel {
    margin-bottom: 24px;
}

/* Handlungskarten: Button unten auf einer Linie, Farbe wie der Rand der Karte */
.cta-card {
    display: flex;
    flex-direction: column;
}

.cta-card p {
    flex: 1;
}

.cta-card .button {
    align-self: flex-start;
    margin-top: 6px;
}

.button-card {
    background: var(--color-ai);
    border-color: var(--color-ai);
    color: #ffffff;
}

.button-card:hover {
    background: var(--color-ai-deep);
    border-color: var(--color-ai-deep);
    color: #ffffff;
}

.cta-card-gold .button-card {
    background: var(--color-gold);
    border-color: var(--color-gold);
}

.cta-card-gold .button-card:hover {
    background: #8f6a27;
    border-color: #8f6a27;
}

.cta-card-shu .button-card {
    background: var(--color-shu);
    border-color: var(--color-shu);
}

.cta-card-shu .button-card:hover {
    background: var(--color-shu-deep);
    border-color: var(--color-shu-deep);
}

/* Hero-Höhe hängt zusätzlich an der Fensterhöhe: die Karte mit drei Buttons (gut 540px) bleibt ohne Scrollen sichtbar */
.bridge {
    height: clamp(300px, min(38vw, 100vh - 560px), 720px);
}

@media (min-width: 721px) and (max-height: 760px) {
    .hero-card {
        padding: 24px clamp(24px, 4vw, 56px) 28px;
    }
}

/* Befunde des Lints über sieben Bildschirmgrößen (2026-10-15) */

/* Smartphone: Hero wieder 400px hoch (die Regel mit der Fensterhöhe gilt nur für breite Fenster) */
@media (max-width: 720px) {
    .bridge {
        height: min(400px, 60vh);
    }
}

/* Tablet (721 bis 960px): die Karte überdeckt die untere Kante des Heros, die Stadt-Schilder wandern nach oben */
@media (min-width: 721px) and (max-width: 960px) {
    .bridge-label {
        bottom: auto;
        top: 16px;
    }
}

/* Notebook (961 bis 1100px): sechs Menüpunkte plus Sprache brauchen engere Abstände */
@media (min-width: 961px) and (max-width: 1100px) {
    .header-inner {
        gap: 10px;
        padding: 12px 16px;
    }

    .site-logo img {
        height: 34px;
    }

    .site-nav a {
        padding: 10px 9px;
        font-size: 0.92rem;
    }

    .language-menu summary {
        padding: 0 8px;
    }
}

/* Bildunterschriften auf Indigo */
.section-ai .photo-caption {
    color: #e8e1d3;
}

/* Goldener Button: Gold ist als Fläche zu hell für weiße Schrift, der Button nimmt den tiefen Goldton */
.cta-card-gold .button-card {
    background: #8a6524;
    border-color: #8a6524;
}

.cta-card-gold .button-card:hover {
    background: #6f511c;
    border-color: #6f511c;
}

/* Sehr schmale Geräte: lange Wörter in Kartentiteln sprengen das Raster nicht */
.cta-grid > *,
.door-grid > *,
.card-grid > *,
.feature-grid > * {
    min-width: 0;
}

.cta-card h2,
.door h2 {
    overflow-wrap: anywhere;
}

.kicker {
    font-size: 0.8rem;
}

/* 320px: Jahreszahl im Zeitstrahl in eigener Zeile, Beitragstabelle scrollt im Kasten statt die Seite zu sprengen */
@media (max-width: 480px) {
    .timeline-year {
        display: block;
        margin: 0 0 2px;
    }
}

.split > * {
    min-width: 0;
}

.fee-box {
    overflow-x: auto;
}

@media (max-width: 360px) {
    .fee-table td,
    .fee-table th {
        padding: 8px 6px;
    }

    .fee-table td:not(:first-child) {
        white-space: normal;
    }
}

/* Michaels Rückmeldung vom 2026-10-16 */

/* Breite Fenster: Ausschnitt tiefer, damit mehr Stadt zu sehen ist (Berlin hat oben viel Himmel, Tokyo nur wenig Luft über dem Turm) */
@media (min-width: 721px) {
    .bridge .bridge-berlin img {
        object-position: 50% 38%;
    }

    .bridge .bridge-tokyo img {
        object-position: 50% 28%;
    }
}

/* Lightbox: Knöpfe nicht auf dem Bild, sondern dezent darunter neben der Unterschrift,
   seit 2026-10-16 in allen Größen (Michael: wie auf dem Smartphone) */
@media (min-width: 0) {
    .lightbox-inner {
        padding-bottom: 56px;
    }

    .lightbox-button {
        top: auto;
        bottom: 0;
        transform: none;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.45);
    }

    .lightbox-button:hover {
        background: rgba(255, 255, 255, 0.3);
        color: #ffffff;
    }

    .lightbox-prev {
        left: 50%;
        margin-left: -72px;
    }

    .lightbox-next {
        left: 50%;
        margin-left: 32px;
    }

    .lightbox-close {
        top: 8px;
        right: 8px;
        bottom: auto;
        width: 36px;
        height: 36px;
        background: rgba(22, 38, 63, 0.6);
    }
}

/* Fehler vom 2026-10-16: Die Rasterzeile des Heros wuchs mit der natürlichen Höhe des Bildes (635px statt 390px),
   overflow: hidden schnitt unten ab, object-position blieb wirkungslos. Die Zeile darf nicht größer sein als der Hero. */
@media (min-width: 721px) {
    .bridge {
        grid-template-rows: minmax(0, 1fr);
    }
}

.bridge .photo {
    min-height: 0;
}

.bridge .photo img {
    min-height: 0;
}

/* ---------- Seitenkopf in Indigo (Michael, 2026-10-16) ---------- */

.page-head {
    position: relative;
    padding: clamp(36px, 6vw, 64px) 0 clamp(32px, 5vw, 56px);
    background: var(--color-ai-deep);
    border-top: 4px solid var(--color-shu);
    border-bottom: 0;
    color: #e8e1d3;
}

.page-head-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.07'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='22'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='0' cy='20' r='38'/%3E%3Ccircle cx='0' cy='20' r='30'/%3E%3Ccircle cx='0' cy='20' r='22'/%3E%3Ccircle cx='0' cy='20' r='14'/%3E%3Ccircle cx='80' cy='20' r='38'/%3E%3Ccircle cx='80' cy='20' r='30'/%3E%3Ccircle cx='80' cy='20' r='22'/%3E%3Ccircle cx='80' cy='20' r='14'/%3E%3Ccircle cx='40' cy='0' r='38'/%3E%3Ccircle cx='40' cy='0' r='30'/%3E%3Ccircle cx='40' cy='0' r='22'/%3E%3Ccircle cx='40' cy='0' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

.page-head-kanji {
    position: absolute;
    left: max(12px, calc((100% - var(--max-width)) / 2 - 1.2em));
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(110px, 12vw, 190px);
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fffdf8;
    opacity: 0.06;
    user-select: none;
}

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

.page-head h1 {
    color: #fffdf8;
}

.page-head .lead {
    color: #e8e1d3;
}

.page-head .eyebrow,
.page-head .kicker {
    color: #ffb482;
}

.page-head .kicker-sep {
    color: #ffb482;
}

.page-head .breadcrumb,
.page-head .breadcrumb a {
    color: #b6c0d2;
}

.page-head .breadcrumb a:hover {
    color: #ffffff;
}

.page-head .button-secondary {
    border-color: #fffdf8;
    color: #fffdf8;
}

.page-head .button-secondary:hover {
    background: #fffdf8;
    border-color: #fffdf8;
    color: var(--color-ai-deep);
}

/* Foto wie ein aufgezogener Abzug mit Papierrand */
.page-head-image {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 6px solid var(--color-paper);
    border-radius: 3px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
    background: var(--color-paper);
}

.page-head-image .photo-zoom,
.page-head-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.page-head-image img {
    object-fit: cover;
    border-radius: 0;
}

/* Breite Fenster: das Foto ragt in den nächsten Abschnitt, der Text bleibt mittig im Band */
@media (min-width: 900px) {
    .page-head-with-photo {
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
    }

    .page-head-has-photo {
        padding-bottom: clamp(32px, 5vw, 56px);
    }

    .page-head-with-photo .page-head-image {
        margin-bottom: calc(-1 * (clamp(32px, 5vw, 56px) + 36px));
    }

    .page-head-has-photo + .section {
        padding-top: calc(var(--section-space) + 24px);
    }
}

@media (max-width: 899px) {
    .page-head-kanji {
        left: auto;
        right: 8px;
        font-size: 96px;
        opacity: 0.05;
    }
}

/* Seitenkopf: das Wellenmuster lag hinter dem Text und störte das Lesen (Michael, 2026-10-16).
   Jetzt liegt es nur noch an den Rändern außerhalb des Inhalts, hinter dem Text ist das Band glatt */
.page-head-backdrop {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.7) 100%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.7) 100%);
}

.page-head-backdrop .page-head-kanji {
    opacity: 0.1;
}

.page-head .lead {
    color: #f1ebe0;
}

.page-head .breadcrumb,
.page-head .breadcrumb a {
    color: #c9d1de;
}

/* Aktive Rubrik im Menü farbig hinterlegt (Michael, 2026-10-16), gilt auch auf Unterseiten einer Rubrik */
.site-nav a[aria-current="page"] {
    background: rgba(199, 64, 42, 0.1);
    border-radius: 4px 4px 0 0;
    color: var(--color-shu-deep);
    border-bottom-color: var(--color-shu);
}

@media (max-width: 960px) {
    .site-nav a[aria-current="page"] {
        border-radius: 4px;
        border-bottom-color: transparent;
    }
}

/* ---------- Verein, Michaels Runde vom 2026-10-16 ---------- */

/* Galerie unter den vier Kästen deutlich abgesetzt */
.values-gallery {
    margin-top: clamp(36px, 5vw, 56px);
}

/* Geschichte: der Fließtext nutzt dieselbe Breite wie der Zeitstrahl darunter, ab 900px in zwei Spalten */
.history-text {
    margin-bottom: 8px;
}

@media (min-width: 900px) {
    .history-text {
        columns: 2;
        column-gap: 56px;
    }

    .history-text p {
        break-inside: avoid;
    }
}


/* ---------- Mitmachen, Michaels Runde vom 2026-10-16 ---------- */

/* Buttons der drei Wege in der Akzentfarbe der Kachel */
.way-member .button-card {
    background: var(--color-shu);
    border-color: var(--color-shu);
}

.way-member .button-card:hover {
    background: var(--color-shu-deep);
    border-color: var(--color-shu-deep);
}

.way-team .button-card {
    background: #8a6524;
    border-color: #8a6524;
}

.way-team .button-card:hover {
    background: #6f511c;
    border-color: #6f511c;
}

.way-helper .button-card {
    background: var(--color-matcha);
    border-color: var(--color-matcha);
}

.way-helper .button-card:hover {
    background: #566438;
    border-color: #566438;
}

/* Leichteres Formular: keine Kästen um jedes Feld, dafür klare Abschnitte mit Luft.
   Das lange Antragsformular wirkte sonst erdrückend (Michael, 2026-10-16) */
.form-light .field-row .field {
    padding: 0;
    background: transparent;
    border: 0;
    margin-bottom: 18px;
}

.form-light h3 {
    margin-top: 34px;
    padding-bottom: 8px;
    border-bottom: 0;
    font-size: 1.15rem;
    color: var(--color-ai);
}

.form-light h3::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background: var(--color-shu);
    border-radius: 2px;
}

.form-light .field-hint {
    font-size: 0.86rem;
}

.form-light .checkbox-label {
    background: transparent;
    border-color: var(--color-line);
}

.field-file {
    padding: 9px 12px;
    cursor: pointer;
}

.field-file::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: 4px;
    background: var(--color-washi);
    color: var(--color-ink);
    font: inherit;
    cursor: pointer;
}

/* Beiträge: Text auf einer Papierfläche, die Tabelle daneben bleibt ein Kasten */
#beitrag .wave-panel {
    align-self: start;
}

/* ---------- Team-Laufband auf Mitmachen (Michael, 2026-10-16) ---------- */

.team-marquee {
    margin-top: 8px;
}

.team-track {
    gap: 10px;
    animation-duration: 140s;
}

.team-item {
    display: block;
    flex: 0 0 auto;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-washi-deep);
    box-shadow: var(--shadow-card);
    cursor: zoom-in;
}

.team-item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.team-item-portrait img {
    aspect-ratio: 3 / 4;
}

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

@media (max-width: 720px) {
    .team-item {
        height: 110px;
    }

    .team-track {
        animation-duration: 110s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 16px;
    }

    .team-track .team-item[aria-hidden="true"] {
        display: none;
    }
}

/* Hinweis ohne JavaScript (Skript-Blocker): Warnung in Gelb und Braun, nicht Rot, denn es ist kein Fehler des Nutzers */
.flash-warning {
    display: block;
    background: #fbf3d8;
    border: 1px solid #c9a24a;
    border-left: 4px solid #8a6524;
    color: #4a3a12;
    padding: 12px 14px;
    margin: 0 0 18px;
    border-radius: 4px;
}

/* Business, Ansprechpartner (Michael, 2026-10-16): Die Texte sind länger geworden. Zwei Karten
   nebeneinander mit je 150px Foto lassen ab 720px nur rund 130px für den Text, lange Wörter
   wie "Japanischkenntnissen" liefen aus der Karte. Zwei Spalten erst ab 960px, die Textspalte
   darf nie breiter sein als ihr Platz. */
@media (min-width: 720px) and (max-width: 959px) {
    .people-grid {
        grid-template-columns: 1fr;
    }
}

.person-card {
    grid-template-columns: 150px minmax(0, 1fr);
}

@media (max-width: 560px) {
    .person-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Unterstützen, Online-Spenden (Michael, 2026-10-16): je Plattform ein eigener Block, die
   PayPal-Adresse steht direkt unter dem PayPal-Button und nicht unter Ko-fi, dazwischen Luft */
.donation-option {
    margin-top: 18px;
}

.donation-option + .donation-option {
    margin-top: 28px;
}

.donation-option .button {
    display: inline-flex;
}

.donation-option .small {
    margin: 8px 0 0;
}

/* Projektseite (Michael, 2026-10-16): Referenzen mit vergrößerbaren Fotos, das Archiv als
   breiter Banner statt einer einsamen Karte im Raster */
.regional-photo .photo,
.regional-photo .photo-zoom {
    height: 100%;
}

.regional-item h3 a {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 720px) {
    .archive-banner .project-card {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .archive-banner .project-card-image {
        aspect-ratio: auto;
        height: 100%;
        min-height: 280px;
    }
}

/* Referenzen: Seit das Foto im Partial steckt (figure und Link), wollte die automatische Spalte
   die natürliche Breite des Bildes, bei 320px lief die Karte 21px aus der Liste. Spalten
   ohne Mindestbreite, wie beim Hero (Lehre vom 2026-10-16) */
.regional-item {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .regional-item {
        grid-template-columns: 180px minmax(0, 1fr);
    }
}

.regional-photo {
    min-width: 0;
}

/* Referenzen: Der Kasten ist ein Flex-Container, die Figur des Fotos schrumpfte auf das
   Seitenverhältnis des Bildes (160 statt 180px, Hochformat 80px) und ließ Ränder frei.
   Figur und Link füllen den Kasten, das Foto wird zugeschnitten (Michael, 2026-10-16) */
.regional-photo .photo,
.regional-photo .photo-zoom {
    width: 100%;
}

/* ---------- Projektseiten (Michael, 2026-10-16): Kanäle, Laufband, Videos ---------- */

.social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-washi);
    border: 1px solid var(--color-line);
    color: var(--color-ai);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.social-link .icon,
.social-link svg {
    width: 1.15em;
    height: 1.15em;
}

.social-link:hover,
.social-link:focus-visible {
    background: var(--color-ai);
    border-color: var(--color-ai);
    color: #ffffff;
}

/* Videos: Vorschaubild von YouTube, selbst gehostet, Klick öffnet YouTube in einem neuen Fenster */
.video-grid {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

@media (min-width: 720px) {
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Ein einzelnes Video bekommt eine große Kachel (Michael, 2026-10-17) */
.video-grid.video-grid-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.video-grid-single .video-body strong {
    font-size: 1.15rem;
}

.video-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.video-card:hover,
.video-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    color: inherit;
}

.video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--color-ai-deep);
    overflow: hidden;
}

.video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.video-card:hover .video-thumb img {
    transform: scale(1.04);
}

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-shu);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(22, 38, 63, 0.35);
}

.video-play .icon,
.video-play svg {
    width: 1.5em;
    height: 1.5em;
    margin-left: 3px;
}

.video-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.video-body strong {
    font-weight: 500;
    line-height: 1.4;
}

.video-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}

.video-source .icon,
.video-source svg {
    width: 1em;
    height: 1em;
}

/* Infobox der Projektseiten (Michael, 2026-10-16: alles gequetscht): Die Beschriftung
   "Social Media & Community" machte die linke Rasterspalte so breit, dass Status, Jahr und
   Website rechts umbrachen und die Icons untereinander standen. Jetzt steht jede Beschriftung
   klein über ihrem Wert, die Icons laufen in einer Reihe, die Box ist 340px breit */
@media (min-width: 900px) {
    .project-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

.project-facts dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.project-facts dt {
    margin-top: 16px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.project-facts dt:first-of-type {
    margin-top: 0;
}

.project-facts dd {
    margin-top: 6px;
    font-size: 1.05rem;
}

.project-facts .social-list {
    margin-top: 2px;
}

/* Ausschnitt links oder rechts, z.B. das Share-Bild von AnimeRadio.de mit dem Schriftzug links (Michael, 2026-10-16) */
.photo-pos-left img {
    object-position: left center;
}

.photo-pos-right img {
    object-position: right center;
}

/* ---------- Datenabgleich der Mitglieder (Michael, 2026-10-19) ---------- */

/* Beschriftung mit Info-Symbol daneben, die Zeile ist das erste Feld des Subgrids */
.field-label-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.field-label-row .field-label {
    margin-bottom: 4px;
}

@media (min-width: 640px) {
    .field-row .field-label-row {
        align-self: start;
    }
}

/* Info-Symbol: Erklärung zum Aufklappen statt eines langen Hinweises. Die Erklärung hängt am Feld
   (position relative), damit sie auf dem Smartphone nie über den rechten Rand hinausragt */
.member-data .field {
    position: relative;
}

.info-pop {
    position: static;
    display: inline-block;
    margin-top: 1px;
}

.info-pop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-ai);
    border-radius: 50%;
    color: var(--color-ai);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.info-pop-button::-webkit-details-marker {
    display: none;
}

.info-pop-button:hover,
.info-pop[open] .info-pop-button {
    background: var(--color-ai);
    color: #fffdf8;
}

.info-pop-button:focus-visible {
    outline: 2px solid var(--color-shu);
    outline-offset: 2px;
}

.info-pop-panel {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    z-index: 20;
    max-width: 420px;
    padding: 12px 14px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-paper);
    border: 1px solid var(--color-line-strong);
    border-left: 4px solid var(--color-ai);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(43, 37, 33, 0.18);
}

/* Deine Mitgliedschaft: Status, Kennung, Funktion, Vereins-E-Mail */
.member-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0 0 8px;
    padding: 16px 20px;
    background: var(--color-washi);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.member-facts div {
    min-width: 120px;
}

.member-facts dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
}

.member-facts dd {
    margin: 4px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.member-status {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--color-ai);
    border-radius: 999px;
    color: var(--color-ai);
    font-size: 0.9rem;
}

.member-status-active,
.member-status-honorary {
    border-color: var(--color-matcha);
    color: var(--color-matcha);
}

.member-status-team {
    border-color: var(--color-gold);
    color: #7d5c1e;
}

/* Fester Wert statt Feld, z.B. die Discord-Kennung aus dem Account */
.field-static {
    margin: 0;
    min-height: 46px;
    padding: 10px 14px;
    background: var(--color-washi-deep);
    border: 1px dashed var(--color-line-strong);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* AKV-Account: verknüpft (Matcha), verknüpfen lassen (Indigo), anlegen (Zinnober) */
.account-box {
    margin: 0 0 8px;
    padding: 18px 20px;
    background: var(--color-washi);
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-ai);
    border-radius: var(--radius);
}

.account-box-linked {
    border-left-color: var(--color-matcha);
    background: var(--color-matcha-soft);
}

.account-box-call {
    border-left-color: var(--color-shu);
}

.account-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-weight: 700;
}

.account-box-title svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.account-box p:last-child,
.account-box .button-row {
    margin-bottom: 0;
}

.account-box .field-checkbox {
    margin-bottom: 8px;
}

/* Pflichtangaben erst, wenn das Kästchen gesetzt ist (ohne JavaScript immer sichtbar) */
.reveal-block {
    margin-top: 4px;
    padding: 16px 18px 4px;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius);
}

.reveal-block[hidden] {
    display: none;
}

/* Felder nur bei Bedarf, ohne eigenen Rahmen (Datum beim Austritt, Betrag beim Supporter, Grund bei Änderung) */
.reveal-inline[hidden] {
    display: none;
}

/* Austritt: eigener Block zum Aufklappen, nicht im Weg, aber auffindbar */
.leave-box {
    margin: 30px 0 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-washi);
}

.leave-box summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

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

.leave-box summary::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-ink-soft);
    border-bottom: 2px solid var(--color-ink-soft);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.leave-box[open] summary::after {
    transform: rotate(-135deg);
}

.leave-box summary svg {
    width: 20px;
    height: 20px;
    color: var(--color-shu-deep);
}

.leave-box-body {
    padding: 4px 18px 6px;
    border-top: 1px solid var(--color-line);
}

.member-data .field-textarea {
    min-height: 120px;
}

/* Bleib in Verbindung: Gruppen mit einem Satz je Gruppe */
.offer-list {
    margin: 0 0 12px;
    padding-left: 20px;
}

.offer-list li {
    margin-bottom: 6px;
}

/* Auswahl mit einer Antwort (Austritt oder Wechsel ins Team) */
.choice-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.choice-list .checkbox-label {
    background: var(--color-paper);
}

.choice-list input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--color-shu);
}

/* Bankverbindung für den Beitrag */
.bank-box {
    margin-top: 4px;
    border-left-color: var(--color-gold);
}

.bank-facts {
    display: grid;
    gap: 6px 20px;
    margin: 0 0 10px;
}

.bank-facts div {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 8px;
}

.bank-facts dt {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-soft);
    align-self: center;
}

.bank-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .bank-facts div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Kleine Smartphones (Michael, 2026-10-19: alles wirkte zu groß): Grundschrift, Knöpfe und Felder etwas kleiner */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(1.7rem, 8vw, 2rem);
    }

    h2 {
        font-size: 1.45rem;
    }

    .lead {
        font-size: 1.02rem;
    }

    .button {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.95rem;
    }

    .field-input,
    .field-select {
        min-height: 42px;
        padding: 8px 12px;
    }

    .field-label {
        font-size: 0.95rem;
    }

    .form-card {
        padding: 20px 16px;
    }

    .form-light h3 {
        font-size: 1.08rem;
        margin-top: 26px;
    }

    .member-facts {
        padding: 12px 14px;
        gap: 10px 20px;
    }

    .account-box {
        padding: 14px 16px;
    }
}

/* Antrag auf Mitmachen: Wahl Vereinsmitglied oder AKV-Team (Michael, 2026-10-19). Blöcke nur für
   Mitglieder liegen als display: contents im Raster, hidden blendet sie samt Pflicht aus */
.kind-choice {
    border: 0;
    padding: 0;
    margin: 0 0 22px;
    min-width: 0;
}

.kind-choice legend {
    padding: 0;
    margin-bottom: 8px;
}

.choice-list-inline {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.kind-block {
    display: contents;
}

/* !important, weil Blöcke wie ul.form-docs eine eigene display-Regel haben, die hidden sonst schlägt */
.kind-block[hidden],
[data-kind-only][hidden] {
    display: none !important;
}