/* ===== AKTUELLES / NEWS PAGE ===== */

.aktuelles, .news-section {
    padding: clamp(1.5rem, 2.5vw, 4rem) clamp(1rem, 2vw, 2rem);
    background: var(--main-bg);
    color: var(--main-text);
    box-sizing: border-box;
    width: min(1100px, 92vw);
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
}

.aktuelles h2 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    letter-spacing: 0.01em;
    color: var(--main-text);
}

.news-section {
    margin: 3rem auto 2rem auto;
    max-width: 1100px;
    padding: clamp(1.5rem, 2.5vw, 4rem) clamp(1rem, 2vw, 2rem);
    background: var(--main-bg);
    color: var(--main-text);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    box-sizing: border-box;
    width: min(1100px, 92vw);
}

.news-section h2 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
    margin-bottom: 1.2rem;
    color: var(--accent);
}

.news-list, .archive-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.news-item {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    box-shadow: 0 2px 10px rgba(102,15,35,0.06);
    border-left: 4px solid var(--accent);
    margin-bottom: 0;
}

.news-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.15rem);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.news-title a,
.news-title a:visited {
    color: inherit;
    text-decoration: none;
}

.news-title a:hover {
    text-decoration: underline;
}

.news-content p {
    margin: 0.2em 0 0.6em 0;
    color: #333;
    font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1rem);
    line-height: 1.6;
}

.news-date {
    font-size: 0.98rem;
    color: #888;
    margin-bottom: 0.5rem;
    margin-top: 0.7rem;
    font-family: 'Inter', sans-serif;
}

.news-archive {
    margin-top: 2rem;
    font-size: 1.08rem;
}

.news-archive > summary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    cursor: pointer;
    outline: none;
    padding: 0.4em 0;
    margin-bottom: 0.7em;
}

.archive-year {
    margin-top: 1rem;
    margin-left: 1.2rem;
}

.calendar-wrapper {
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(102,15,35,0.06);
}

.calendar-iframe {
    display: block;
    width: 100%;
    min-height: clamp(500px, 70vw, 750px);
    border: 0;
}

.archive-year > summary {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--accent-light);
    cursor: pointer;
    outline: none;
    padding: 0.3em 0;
    margin-bottom: 0.5em;
}

.archive-list .news-item {
    margin-top: 0.7rem;
}

.news-archive[open] > summary,
.archive-year[open] > summary {
    color: var(--accent-light);
}

.download-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--main-bg);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 1.1rem 1.4rem;
    gap: 1.1rem;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.18s;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}
.download-item:hover { box-shadow: 0 4px 20px rgba(176,58,46,0.13); }
.download-icon { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; margin-right: 0.7rem; color: var(--accent-light); display: flex; align-items: center; justify-content: center; }
.download-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; gap: 0.5rem; }
.download-name { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--accent); font-size: 1.08rem; line-height: 1.6; overflow-wrap: break-word; }
.download-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 0.3rem;
}
.download-link:hover,
.download-link:focus { background: var(--accent); text-decoration: none; }

.aktuelles-download-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--main-bg);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 1.1rem 1.4rem;
    gap: 1.1rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.18s;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}

.aktuelles-download-item:hover {
    box-shadow: 0 4px 20px rgba(176,58,46,0.13);
}

.download-list-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 0.4rem;
}
.download-list-link:hover,
.download-list-link:focus { background: var(--accent); text-decoration: none; }

.aktuelles-download-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.7rem;
    color: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aktuelles-download-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
    max-width: 700px;
}

.aktuelles-download-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--accent);
    font-size: 1.08rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;
    max-width: 520px;
}

.aktuelles-download-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(176,58,46,0.08);
    white-space: nowrap;
    display: inline-block;
    border: none;
    cursor: pointer;
    margin-top: 0.3rem;
}

.aktuelles-download-link:hover,
.aktuelles-download-link:focus {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(176,58,46,0.15);
}

.news-update {
    display: block;
    color: var(--accent-light);
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.2em;
    margin-bottom: 0.3em;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-left: 3px solid var(--accent-light);
    padding-left: 0.7em;
    background: #f9f6f6;
}

.news-content-flex {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
}

.news-content-flex .news-article-image {
    max-width: 260px;
    width: 100%;
    flex-shrink: 0;
    margin: 0 0 1rem 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(102,15,35,0.10);
    object-fit: cover;
}

.news-content-text {
    flex: 1 1 0;
}

@media (min-width: 800px) {
    .news-content-flex {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.2rem;
    }
    .news-content-flex .news-article-image {
        margin: 0;
        max-width: 260px;
    }
    .news-content-text {
        min-width: 0;
    }
}

@media (max-width: 1100px) {
    .news-section {
        width: 94vw;
        padding: 2.5rem 1rem;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .aktuelles,
    .news-section {
        width: 94vw;
        padding: 2.5rem 1rem;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 800px) {
    .aktuelles-download-item {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 0.7rem;
        gap: 0.7rem;
    }
    .aktuelles-download-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }
    .aktuelles-download-link {
        width: 100%;
        text-align: center;
        font-size: 0.98rem;
        padding: 0.7em 0;
        margin-top: 0.2rem;
    }
    .aktuelles-download-icon {
        margin-right: 0;
        margin-bottom: 0.3rem;
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .aktuelles {
        width: 94vw;
    }
}

@media (max-width: 500px) {
    .archive-year {
        margin-left: 0.3rem;
    }
}

/* ===== FSR TEAM PAGE ===== */

.fsr-header {
    padding: 2.5rem 2rem 1.5rem 2rem;
    background: var(--main-bg);
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 16px;
    text-align: center;
}

.fsr-header h2 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    margin: 0;
    letter-spacing: 0.01em;
    color: var(--accent);
}

.fsr-board-image {
    max-width: 70%;
    min-height: fit-content;
    height: auto;
    margin: 2.5rem auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}

.fsr-board-img {
    width: 100%;
    box-shadow: 0 4px 32px rgba(102,15,35,0.10);
    border-radius: 24px;
    object-fit: cover;
}

@media (max-width: 900px) {
    .fsr-board-image {
        max-width: 90%;
    }
}

.vorstand-gallery-section {
    max-width: 90%;
    margin: 2.5rem auto 0 auto;
    padding: 2rem 2rem 1.5rem 2rem;
    background: var(--main-bg);
    border-radius: 16px;
    box-sizing: border-box;
}

.vorstand-gallery-section h2 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
    text-align: left;
}

.vorstand-img {
    width: 100%;
    max-width: 180px;
    height: 240px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
    background: #f7f7f7;
}

.vorstand-title {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

.vorstand-name {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1rem;
    color: var(--main-text);
}

@media (max-width: 700px) {
    .vorstand-gallery-section {
        padding: 1.2rem 0.5rem 1rem 0.5rem;
    }
    .vorstand-img {
        max-width: 120px;
        height: 160px;
    }
}

/* ===== FSR TEAM PAGE — Companion-Regeln fuer die wp:columns-Galerie (Phase 7, D-02) ===== */
/*
 * Rein additiv: nichts oberhalb wird geloescht (die Karussellregeln
 * .vorstand-gallery/.vorstand-item bleiben stehen, bis Plan 07-03 ihre
 * Referenzfreiheit maschinell nachweist). Jede Regel hier ist auf
 * .vorstand-gallery-section eingegrenzt, weil .wp-block-column und
 * .wp-block-columns projektweit geteilte Klassen sind — eine unscoped
 * Regel wuerde jede kuenftige Spaltennutzung auf jeder Seite treffen
 * (dieselbe Kollisionsart wie Phase 5 Gap G-05-7 und Phase 6 Gap G-06-1).
 */

.vorstand-gallery-section .wp-block-column {
    background: var(--main-bg);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 1.2rem 1rem 1rem 1rem;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vorstand-gallery-section .wp-block-columns {
    gap: 2rem;
    margin-bottom: 2rem;
}

/* .vorstand-gallery-section ist wie .arbeitsgruppen-grid/.kontakt-block ein
   core/group mit Flow-Layout und mehreren direkten Kindern (Ueberschrift +
   wp:columns-Zeilen); dessen Core-Regeln setzen sonst auf jedes Kind ausser
   dem ersten einen zusaetzlichen vertikalen Startabstand, der sich zu den
   eigenen margin-bottom/gap-Angaben dieser Datei addieren wuerde. WR-03. */
.vorstand-gallery-section.wp-block-group > * {
    margin-block-start: 0;
}

.vorstand-gallery-section .vorstand-img {
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 180px;
}

.vorstand-gallery-section .vorstand-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 12px;
    background: #f7f7f7;
    display: block;
}

.vorstand-gallery-section .vorstand-title {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    margin-top: 0;
    margin-bottom: 0.3rem;
}

.vorstand-gallery-section .vorstand-name {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1rem;
    color: var(--main-text);
    margin-top: 0;
}

/* D-04: Zentrierung der zweiten (unvollstaendigen) Vorstandszeile. Der
 * Block traegt bereits "layout":{"type":"flex","justifyContent":"center"}
 * (per parse_blocks()/serialize_blocks()-Roundtrip gegen den installierten
 * WP-Core als erhalten gemessen, siehe 07-01-SUMMARY.md) — diese Regel ist
 * ein defensiver Rueckfall auf denselben className-Haken, ohne !important.
 */
.vorstand-gallery-section .vorstand-row-2 {
    justify-content: center;
}

/* ===== Mitglieder-Galerie (Phase 7, Plan 02) ===== */
/*
 * Rein additiv, wie oben: nichts wird geloescht. Alles, was Vorstand- und
 * Mitglieder-Galerie gemeinsam haben (Kartenoptik, Fotozuschnitt,
 * Namenstypografie, Zeilenabstand), gilt bereits automatisch mit, weil die
 * Mitglieder-Sektion denselben Sektionsklassennamen .vorstand-gallery-section
 * traegt wie der Vorstand — diese Regeln werden hier NICHT verdoppelt.
 */

/* D-03: die Restzeile (2 Karten) der Mitglieder-Galerie steht per
 * Nutzerentscheidung LINKSBUENDIG, bewusst anders als die zentrierte
 * Vorstand-Restzeile oben (D-04). Der Block traegt bereits
 * "layout":{"type":"flex","justifyContent":"left"} (per parse_blocks()/
 * serialize_blocks()-Roundtrip gegen den installierten WP-Core als erhalten
 * gemessen, siehe 07-02-SUMMARY.md) — diese Regel ist derselbe defensive
 * Rueckfall auf den className-Haken wie bei .vorstand-row-2, ohne
 * !important.
 */
.vorstand-gallery-section .mitglieder-row-last {
    justify-content: flex-start;
}

/* fsr-mitglieder-section traegt ABSICHTLICH keine eigene Regel — der
 * Klassenname existiert ausschliesslich als Unterscheidungsmerkmal fuer das
 * Verify-Gate und die Blockstruktur (Zaehlungen, Zentrierungsregel-Scoping),
 * nicht fuer eine eigene Optik. Nicht als tote Klasse entfernen.
 */

/* Schmale Bildschirme: die bestehende 700px-Media-Query weiter oben
 * verkleinert das Foto ueber die unscoped Regel .vorstand-img — diese
 * verliert gegen die spezifischere .vorstand-gallery-section .vorstand-img
 * img (Plan 07-01), sodass Fotos auf dem Handy sonst in voller Hoehe stehen
 * blieben. Eigene, passend spezifische Media-Query mit denselben Zielwerten
 * wie die bestehende Query (120px/160px) statt die bestehende Query zu
 * aendern.
 */
@media (max-width: 700px) {
    .vorstand-gallery-section .vorstand-img {
        max-width: 120px;
    }
    .vorstand-gallery-section .vorstand-img img {
        height: 160px;
    }
}

/* Gap G-07-3: beide Restzeilen der Galerie (die zentrierte Vorstand-Zeile
 * aus Plan 07-01 UND die linksbuendige Mitglieder-Schlusszeile aus Plan
 * 07-02) rendern breiter als die Karten der Viererzeilen darueber. Ursache:
 * WordPress schreibt fuer das Blockattribut width eine feste Prozentbreite
 * auf die Karte selbst, waehrend die Karten einer Viererzeile ihren Anteil
 * ueber den Flexbox-Algorithmus zugeteilt bekommen und dabei automatisch
 * mitwachsen. Die feste Prozentbreite rechnet zusaetzlich nicht mit dem
 * Anteil, den der Spaltenabstand der Zeile (siehe die gap-Angabe der
 * Nachbarregel oben) den vier Kartenplaetzen jeweils abzieht — die Formel
 * unten zieht diesen Anteil deshalb selbst ab. Die Eingrenzung greift erst
 * ab dem Umbruchpunkt, den WordPress' eigenes Spalten-Stylesheet selbst
 * verwendet (782 Bildpunkte); darunter stapelt der Core ohnehin jede Spalte
 * auf volle Zeilenbreite, eine unbedingte Eingrenzung wuerde die gestapelten
 * Karten dort faelschlich auf ein Viertel schrumpfen.
 */
@media (min-width: 782px) {
    .vorstand-gallery-section .vorstand-row-2 > .wp-block-column,
    .vorstand-gallery-section .mitglieder-row-last > .wp-block-column {
        max-width: calc((100% - 6rem) / 4);
    }
}

/* ===== KONTAKT PAGE ===== */

.kontakt {
    padding: 4rem 2rem;
    background: var(--main-bg);
    color: var(--main-text);
    box-sizing: border-box;
    max-width: 1100px;
    min-width: 50vw;
    margin: 3rem auto 2rem auto;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(102,15,35,0.07);
}

.kontakt h2 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.01em;
    color: var(--main-text);
}

.kontakt .kontakt-block {
    margin-bottom: 2.2rem;
}

.kontakt .kontakt-title {
    font-weight: bold;
    font-size: 1.15rem;
    margin-bottom: 0.5em;
}

.kontakt address {
    font-style: normal;
    line-height: 1.7;
    margin-bottom: 0.7em;
    font-size: 1.07rem;
}

.kontakt .kontakt-label {
    font-weight: bold;
    font-size: 1.08rem;
    margin-bottom: 0.5em;
    display: block;
}

.kontakt .kontakt-info {
    line-height: 1.7;
    font-size: 1.05rem;
}

.kontakt a {
    color: var(--accent);
    text-decoration: underline;
    word-break: break-all;
    transition: color 0.18s;
}

.kontakt a:hover,
.kontakt a:focus {
    color: var(--accent-light);
    outline: none;
}

.kontakt .kontakt-ort {
    display: block;
    margin-top: 0.5em;
    color: #555;
    font-size: 1.01rem;
}

@media (max-width: 700px) {
    .kontakt {
        padding: 1.2rem 0.7rem;
        max-width: 80vw;
        min-width: 70vw;
    }
    .kontakt h2 {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
    }
    .kontakt address,
    .kontakt .kontakt-info {
        font-size: 0.98rem;
    }
}

/* --- Phase 5: Block-Mapping Kontakt --- */

/* Die beiden kontakt-block-Gruppen benutzen das Flow-Layout des
   Gruppenblocks; dessen Core-Regeln setzen auf jedes Kind ausser dem
   ersten einen vertikalen Startabstand. In der Quelle hatten
   kontakt-title/kontakt-label nur ihr eigenes margin-bottom: 0.5em und
   daneben keinen Abstand. Diese beiden Regeln neutralisieren den
   zusaetzlichen Core-Abstand, ohne bestehende .kontakt-Regeln zu aendern. */
.kontakt .kontakt-block.wp-block-group > * {
    margin-block-start: 0;
}

.kontakt .kontakt-block.wp-block-group + .kontakt-block.wp-block-group {
    margin-block-start: 0;
}

/* ===== HAUSARBEITEN PAGE ===== */

.hausarbeiten {
    padding: 4rem 2rem;
    background: var(--main-bg);
    color: var(--main-text);
    box-sizing: border-box;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 12px rgba(102,15,35,0.07);
}

.hausarbeiten h1 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 2rem;
    color: var(--accent);
    text-align: left;
}

.hausarbeiten p {
    max-width: 700px;
    margin: 1.2em auto 0 auto;
    line-height: 1.7;
    font-size: 1.08rem;
}

.hausarbeiten-quote {
    background: #f7f7f7;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 1.1rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--main-text);
    box-shadow: 0 2px 10px rgba(102,15,35,0.06);
}

.hausarbeiten-quote p {
    margin: 0;
}

.info-box {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(102, 15, 35, 0.06);
}

.info-box-text {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.info-box-link {
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
    display: inline-block;
    transition: color 0.2s ease;
}

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

@media (max-width: 700px) {
    .hausarbeiten {
        padding: 2.2rem 0.7rem;
        max-width: 98vw;
    }
    .hausarbeiten h1 {
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
    }
    .hausarbeiten p {
        font-size: 1rem;
    }
}

/* --- Phase 4: Block-Mapping Info-Box --- */

.info-box.wp-block-group > .wp-block-heading {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 700;
}

.info-box.wp-block-group > p:last-child {
    margin-block-start: 0;
    margin-bottom: 0;
}

/* ===== ORDNUNGEN & PROTOKOLLE (Downloads) PAGE ===== */

.downloads-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.2rem;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.downloads-list--calendar {
    grid-template-columns: 1fr;
}

.download-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--main-bg);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 1.1rem 1.4rem;
    gap: 1.1rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.18s;
}

.download-item:hover {
    box-shadow: 0 4px 20px rgba(102,15,35,0.13);
}

.download-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.7rem;
    color: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
    max-width: 700px;
}

.download-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--accent);
    font-size: 1.08rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;
    max-width: 520px;
}

.download-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(176,58,46,0.08);
    white-space: nowrap;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.download-link:hover,
.download-link:focus {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(176,58,46,0.15);
    color: #fff;
}

@media (max-width: 800px) {
    .downloads-list {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 0.5rem;
        max-width: 100%;
    }
    .download-item {
        flex-direction: row;
        padding: 1rem 0.7rem;
        gap: 0.7rem;
    }
    .download-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .download-link {
        width: 100%;
        text-align: center;
        font-size: 0.98rem;
        padding: 0.7em 0;
        margin-top: 0.3rem;
    }
}

@media (max-width: 500px) {
    .downloads-list {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .download-item {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.7rem;
    }
    .download-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        width: 100%;
    }
    .download-link {
        width: 100%;
        margin-top: 0.2rem;
    }
    .download-icon {
        margin-right: 0;
        margin-bottom: 0.3rem;
        align-self: flex-start;
    }
}

/* --- Phase 4: Block-Mapping Karten-Optik --- */

.download-item.wp-block-group::before {
    content: "";
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.7rem;
    background-color: var(--accent-light);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L11 13.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L11 13.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

.downloads-list .download-item .wp-block-file {
    margin: 0;
    font-size: inherit;
}

.download-item .wp-block-file > a:not(.wp-block-file__button) {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--accent);
    font-size: 1.08rem;
    line-height: 1.6;
    overflow-wrap: break-word;
    text-decoration: none;
}

.download-item .wp-block-file .wp-block-file__button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 0.3rem;
    margin-left: 0;
}

.download-item .wp-block-file .wp-block-file__button:hover,
.download-item .wp-block-file .wp-block-file__button:focus {
    background: var(--accent);
    text-decoration: none;
    color: var(--button-text);
    opacity: 1;
}

/* ===== ORGANISATION PAGE ===== */

.arbeitsgruppen-section {
    margin: 2rem 0;
}

.arbeitsgruppen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}

.arbeitsgruppe-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.arbeitsgruppe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--accent-light);
}

.arbeitsgruppe-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.arbeitsgruppe-description {
    color: #333333;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.arbeitsgruppe-contact {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666666;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    line-height: 1.4;
}

.arbeitsgruppe-contact a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    word-break: break-word;
    hyphens: auto;
}

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

@media (max-width: 768px) {
    .arbeitsgruppen-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }
    .arbeitsgruppe-card {
        padding: 1.25rem 1rem;
        border-radius: 8px;
    }
    .arbeitsgruppe-title {
        font-size: 1.1rem;
    }
    .arbeitsgruppe-description {
        font-size: 0.9rem;
    }
}

/* --- Phase 5: Block-Mapping Organisation --- */

/* .arbeitsgruppen-grid ist ein Grid mit eigenem gap; die vertikalen
   Startabstaende des Flow-Layouts der Gruppenbloecke wuerden sich dazu
   addieren. margin-block-start (nicht margin-top) trifft dieselbe
   Eigenschaft, die die Core-Layout-Regel setzt, und gewinnt per hoeherer
   Spezifitaet. */
.arbeitsgruppen-grid.wp-block-group > * {
    margin-block-start: 0;
}

/* .arbeitsgruppe-card ist eine Flex-Spalte; die Abstaende zwischen Titel,
   Beschreibung und Kontaktzeile kommen weiterhin ausschliesslich aus den
   bestehenden margin-bottom-Angaben der drei Original-Regeln. */
.arbeitsgruppe-card.wp-block-group > * {
    margin-block-start: 0;
}

/* Die Kontaktzeile ist letztes Kind der Karte und hat in der Quelle keinen
   unteren Abstand; ohne diese Regel entstuende zwischen ihr und dem
   Innenabstand der Karte ein Rest. */
.arbeitsgruppe-card.wp-block-group > .arbeitsgruppe-contact:last-child {
    margin-bottom: 0;
}

/* --- Gap G-05-7: AG-Karten von der globalen Fliesstext-Regel loesen --- */

/* Vor der Umstellung auf core/paragraph waren Titel, Beschreibung und
   Kontaktzeile der AG-Karte einfache div-Elemente; die globale Absatzregel
   fuer .about-Inhalte traf sie nie. Seit sie als p-Elemente rendern, treffen
   gleich drei bestehende, unveraendert gebliebene Regeln aus style.css sie
   mit, weil auch sie ueber einen Nachfahren-Kombinator jedes p innerhalb
   .about ansprechen und dabei spezifischer sind als die urspruenglichen
   Kartenregeln in dieser Datei. Weil .arbeitsgruppe-card eine Flex-Spalte
   ist, zentriert der uebernommene automatische Seitenrand jedes Feld einzeln
   auf seiner eigenen Inhaltsbreite, statt es ueber die volle Kartenbreite zu
   strecken — der kurze Titel und der laengere Fliesstext darunter landen
   dadurch an unterschiedlichen linken Kanten. Die folgende Companion-Regel
   nimmt fuer alle direkten Kinder der Karte ausschliesslich die waagerechte
   Geometrie zurueck; keine senkrechte Angabe wird beruehrt, die Abstaende
   aus der Phase-5-Sektion oben bleiben unangetastet. */
.arbeitsgruppe-card.wp-block-group > * {
    max-width: none;
    margin-inline: 0;
}

/* Dieselbe Kollision reisst nebenbei auch Schriftgroesse, Farbe, Zeilenhoehe
   und unteren Abstand der drei Kartenfelder mit, weil die globalen Regeln in
   diesen Eigenschaften ebenfalls spezifischer sind als die urspruenglichen
   .arbeitsgruppe-title/-description/-contact-Regeln weiter oben in dieser
   Datei. Die folgenden drei Bloecke gestalten nichts neu: sie wiederholen
   jede Angabe zeichengleich aus der zugehoerigen Originalregel, nur mit
   einer Selektorform, die gegen die fremde Regel gewinnt. */
.arbeitsgruppe-card.wp-block-group > .arbeitsgruppe-title {
    font-size: 1.25rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.arbeitsgruppe-card.wp-block-group > .arbeitsgruppe-description {
    color: #333333;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Die Kontaktzeile braucht hier keinen unteren Abstand: die bestehende
   :last-child-Regel oben ist noch spezifischer und setzt ihn bereits auf
   den Ausgangswert zurueck. */
.arbeitsgruppe-card.wp-block-group > .arbeitsgruppe-contact {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.4;
}

/* Im schmalen Viewport gilt dieselbe Kollision fuer die mobilen
   Originalwerte aus dem bestehenden 768px-Media-Block der Karte weiter
   oben: eine Media Query erhoeht die Spezifitaet nicht, die mobilen Werte
   verlieren also ebenso gegen die globalen Regeln wie die Desktop-Werte. */
@media (max-width: 768px) {
    .arbeitsgruppe-card.wp-block-group > .arbeitsgruppe-title {
        font-size: 1.1rem;
    }
    .arbeitsgruppe-card.wp-block-group > .arbeitsgruppe-description {
        font-size: 0.9rem;
    }
}

/* ===== INFOS FÜR ERSTIES ===== */

.instagram-wrapper {
    max-width: 75vw;
    margin: 2rem auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(102, 15, 35, 0.08);
}

.instagram-iframe {
    width: 100%;
    height: 480px;
    border: none;
    overflow: hidden;
    display: block;
    background: #fff;
}

.ersti-guide {
    padding-top: 2rem;
}

@media (max-width: 768px) {
    .instagram-wrapper {
        max-width: 95vw;
        margin: 1.5rem auto;
    }
    .instagram-iframe {
        height: 400px;
    }
    .ersti-guide {
        padding-top: 1.5rem;
    }
    .about {
        padding: 2rem 1rem;
    }
    .about h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .about h3 {
        font-size: 1.2rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    .about p {
        font-size: 1rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .instagram-wrapper {
        max-width: 98vw;
        margin: 1rem auto;
    }
    .instagram-iframe {
        height: 350px;
    }
}

/* --- Phase 6: Block-Mapping Infos für Ersties --- */

/* R1: Die Quelle zeigte auf diesen Karten kein Download-Symbol; nimmt die
   globale Phase-4-Symbolmaske (.download-item.wp-block-group::before,
   Zeile 985) fuer genau diese Seite zurueck. */
.ersties-main .download-item.wp-block-group::before {
    content: none;
}

/* R2: Der Eintragsname ist jetzt ein Absatz statt einer Textspanne und
   faellt damit unter die geteilte globale Absatzregel `.about p, .contact p,
   .examenspfand p` (style.css Zeile 108). Diese Regel ist mit drei Klassen
   plus Element hoeher gewichtet als jene und uebernimmt die Deklarationen
   von `.download-name` (Zeile 886-897) wortgleich; margin: 0 kommt neu
   hinzu, weil ein Absatz — anders als eine Textspanne — Aussenabstaende
   mitbringt, die die Kachelhoehe veraendern wuerden. */
.ersties-main .download-item p.download-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--accent);
    font-size: 1.08rem;
    line-height: 1.6;
    margin: 0;
    max-width: 520px;
    overflow-wrap: break-word;
}

/* R3/R4: In der Quelle war der Dateilink der Knopf (.download-link,
   Zeile 899-921); die globale Phase-4-Regel macht aus dem Titelanker
   dagegen einen reinen Titeltext. Fuer diese Seite umgekehrt, mit den
   Deklarationen von `.download-link` und ihrer Hover-Regel wortgleich
   uebernommen. */
.ersties-main .download-item .wp-block-file > a:not(.wp-block-file__button) {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(176,58,46,0.08);
    white-space: nowrap;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.ersties-main .download-item .wp-block-file > a:not(.wp-block-file__button):hover, .ersties-main .download-item .wp-block-file > a:not(.wp-block-file__button):focus {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(176,58,46,0.15);
    color: #fff;
}

/* R5/R6: Gilt fuer den ICS- und den WhatsApp-Knopf. Bewusst am CSS und
   nicht am Block-Markup: Farbattribute am Block wuerden die Farbwahl im
   Editor festzurren (D-03-Vorbild aus Phase 5). Dieselben Deklarationen wie
   `.download-link`, aber ohne white-space/display: der Core-Knopf bringt
   `display: inline-block` bereits mit, ein doppeltes `white-space: nowrap`
   kann bei langen Beschriftungen auf schmalen Bildschirmen ueberstehen. */
.ersties-main .wp-block-button__link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(176,58,46,0.08);
    border: none;
    cursor: pointer;
}

.ersties-main .wp-block-button__link:hover, .ersties-main .wp-block-button__link:focus {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(176,58,46,0.15);
    color: #fff;
}

/* R7: Die Blockstruktur bringt in der Kachel Flow-Abstaende mit, die die
   Quelle (reines Flexbox-Layout) nicht hatte. Neutralisiert sie und traegt
   damit auch die Termine-Kachel, die als einzige nur ein Kind hat
   (Annahme A-1). */
.ersties-main .downloads-list.wp-block-group > .download-item > * {
    margin-block-start: 0;
}

/* Gap G-06-1: Die Kachel steht heute waagerecht, weil die Companion-Regeln
   dieser Seite (R1-R7 oben) versehentlich auf der unscoped Regel aus dem
   Ordnungen-Protokolle-Entwurf aufsetzen (Zeile 846 ff.) — dort lebten Titel
   und Link ursprünglich in einem gemeinsamen `.download-content`-Wrapper mit
   waagerechter Anordnung, den das native Blockmarkup dieser Seite gar nicht
   besitzt. Weil Titel und Knopf hier direkte Geschwister derselben Kachel
   sind und der Titel zusätzlich schrumpfen darf, während der Knopf das
   nicht tut, bleibt dem Titel bei langer Beschriftung nur ein winziger
   Rest an Breite übrig — daraus folgt der Buchstabe-für-Buchstabe-Umbruch.
   Diese Regel nimmt allein die Richtung zurück und stellt die streckende
   Querachse wieder her, wie sie die echte Originalvorlage dieser Seite
   hatte. Die Eingrenzung auf `.ersties-main` ist zwingend: die Nachbarseite
   Ordnungen-Protokolle braucht die waagerechte Anordnung aus derselben
   unscoped Regel weiterhin unverändert. */
.ersties-main .download-item.wp-block-group {
    flex-direction: column;
    align-items: stretch;
}

/* ===== STUDIUM PAGE ===== */

.studium-links-section {
    margin: 3rem auto 2rem auto;
    max-width: 700px;
    background: var(--main-bg);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(102,15,35,0.07);
    padding: 2.5rem 2rem 2rem 2rem;
}

.studium-links-section h2 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1.3rem;
    text-align: left;
}

.studium-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.studium-links-list a {
    display: block;
    background: var(--accent);
    color: var(--button-text);
    font-weight: 600;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    text-decoration: none;
    border-radius: 8px;
    padding: 1rem 1.3rem;
    font-size: 1.08rem;
    box-shadow: 0 2px 8px rgba(102,15,35,0.09);
    transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
}

.studium-links-list a:hover,
.studium-links-list a:focus {
    background: var(--accent-light);
    color: var(--button-text);
    box-shadow: 0 4px 16px rgba(102,15,35,0.13);
    text-decoration: underline;
    outline: none;
    transform: translateY(-2px) scale(1.02);
}

.fsr-angebote-section {
    margin: 3rem auto 2.5rem auto;
    max-width: 700px;
    background: var(--main-bg);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(102,15,35,0.06);
    padding: 2.2rem 2rem 2rem 2rem;
}

.fsr-angebote-intro {
    font-size: 1.13rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    color: var(--main-text);
}

.fsr-angebote-list {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.fsr-angebot {
    background: var(--main-bg);
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(102,15,35,0.07);
    padding: 1.2rem;
    border-left: 4px solid var(--accent);
}

.fsr-angebot-title {
    font-size: 1.13rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.4rem;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
}

.fsr-angebot-desc {
    font-size: 1.03rem;
    color: var(--main-text);
    line-height: 1.6;
}

.fsr-angebot-desc a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 600;
}

.studium-main {
    max-width: 900px;
    margin: 3rem auto 2rem auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    background: var(--main-bg);
    color: var(--main-text);
}

.studium-main h1 {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 1.7rem;
    margin-top: 0;
    letter-spacing: 0.01em;
    text-align: left;
    line-height: 1.15;
}

.studium-divider {
    border: none;
    border-top: 2.5px solid var(--accent);
    margin: 2.2rem auto;
    width: 100%;
    max-width: 600px;
    opacity: 0.85;
    border-radius: 2px;
}

@media (max-width: 700px) {
    .studium-main {
        padding: 0 0.5rem;
        gap: 1.5rem;
    }
    .fsr-angebote-section,
    .studium-links-section {
        padding: 1.2rem 0.7rem;
    }
    .studium-main h1 {
        font-size: 1.7rem;
        margin-bottom: 1.1rem;
    }
}

/* --- Phase 5: Block-Mapping Studium --- */

/* Die Quelle setzt die Fliesstext-Ausrichtung inline auf dem <main>-Element
   (style="text-align: justify"). Inline-Styles im Markup sind das, was diese
   Phase abschafft, also wandert die Eigenschaft in die Regel auf dem
   Gruppenblock. */
.studium-main.wp-block-group {
    text-align: justify;
}

/* .studium-main und .fsr-angebote-list sind beide display: flex mit eigenem
   gap. Das Flow-Layout des Gruppenblocks setzt zusaetzlich auf jedes Kind
   ausser dem ersten einen vertikalen Startabstand, der sich zum gap addieren
   wuerde. margin-block-start ist bewusst dieselbe Eigenschaft, die die
   Core-Layout-Regel setzt — die hoehere Spezifitaet entscheidet dann
   eindeutig. */
.studium-main.wp-block-group > * {
    margin-block-start: 0;
}

.studium-main .fsr-angebote-list.wp-block-group > * {
    margin-block-start: 0;
}

/* core/separator bringt eigene Core-Regeln fuer border-top und Breite mit,
   die mit .studium-divider (Spezifitaet 0,1,0) um die Ladereihenfolge
   konkurrieren. Diese Regel (hoehere Spezifitaet) reproduziert die
   Deklarationen der bestehenden .studium-divider-Regel unveraendert. */
.studium-main hr.wp-block-separator.studium-divider {
    border: none;
    border-top: 2.5px solid var(--accent);
    max-width: 600px;
    margin: 2.2rem auto;
    opacity: 0.85;
    border-radius: 2px;
}

/* Die Button-Optik: die visuellen Eigenschaften der bestehenden Regel
   .studium-links-list a werden auf .wp-block-button__link uebertragen —
   das Original bleibt unveraendert stehen, hier wird nur mitgemappt. Werte
   aus der Theme-Fassung von pages.css, nicht aus
   www/stylesheets/style_studium.css (die beiden Fassungen weichen
   geringfuegig ab, siehe 05-02-PLAN.md <interfaces>). */
.studium-main .wp-block-button__link {
    display: block;
    background: var(--accent);
    color: var(--button-text);
    font-weight: 600;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    text-decoration: none;
    border-radius: 8px;
    padding: 1rem 1.3rem;
    font-size: 1.08rem;
    box-shadow: 0 2px 8px rgba(102,15,35,0.09);
    transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
}

.studium-main .wp-block-button__link:hover,
.studium-main .wp-block-button__link:focus {
    background: var(--accent-light);
    color: var(--button-text);
    box-shadow: 0 4px 16px rgba(102,15,35,0.13);
    text-decoration: underline;
    outline: none;
    transform: translateY(-2px) scale(1.02);
}

/* Abstand zwischen den sechs Button-Bloecken — ersetzt das gap: 1.1rem der
   bisherigen Liste. */
.studium-main .wp-block-buttons + .wp-block-buttons {
    margin-block-start: 1.1rem;
}

/* ===== ESSENTIALIA PAGE ===== */

.product-page {
    padding: 2.5rem 1.25rem;
    max-width: 1100px;
    margin: 1.5rem auto;
    box-sizing: border-box;
}

.product-page h1 {
    margin-top: 0;
    font-size: 1.8rem;
    color: var(--main-text);
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 700;
}

.product-overview {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(102,15,35,0.08);
    box-shadow: 0 6px 18px rgba(102,15,35,0.06);
    padding: 1.25rem;
    border-radius: 12px;
    flex-wrap: wrap;
}

.product-image {
    width: 260px;
    max-width: 40%;
    border-radius: 8px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(102,15,35,0.06);
}

.product-info {
    flex: 1 1 320px;
    min-width: 220px;
}

.product-info a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-info p,
.product-info ul {
    margin: 0 0 0.8rem 0;
    line-height: 1.65;
}

.product-actions .button {
    display: inline-block;
    background: var(--accent);
    color: var(--button-text);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-right: 0.6rem;
    box-shadow: 0 2px 8px rgba(102,15,35,0.08);
}

.product-actions .button:hover,
.product-actions .button:focus {
    background: var(--accent-light);
    color: #fff;
    outline: none;
    text-decoration: none;
}

.product-details {
    margin-top: 1.4rem;
    max-width: 900px;
}

.toc-dropdown {
    margin: 0.15rem 0;
    font-size: 0.98rem;
    border-radius: 8px;
    background: rgba(102,15,35,0.03);
    padding: 0.35rem;
    max-width: 820px;
    border: 1px solid rgba(102,15,35,0.08);
}

.toc-dropdown summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    padding: 0.45rem 1.6rem 0.45rem 0.6rem;
    display: inline-block;
    border-radius: 6px;
    transition: background 0.15s;
    position: relative;
}

.toc-dropdown summary:hover,
.toc-dropdown[open] summary {
    background: rgba(102,15,35,0.06);
}

.toc-content {
    margin-top: 0.6rem;
    padding: 0.6rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(102,15,35,0.06);
}

.toc-level-0 { list-style: none; padding-left: 0; margin: 0; }
.toc-level-1 { list-style: none; padding-left: 0.6rem; margin: 0.3rem 0; }
.toc-level-2 { list-style: none; padding-left: 1.2rem; margin: 0.2rem 0; }

.toc-level-2 li {
    margin: 0.18rem 0;
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.toc-row {
    margin: 0.18rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}

.toc-number {
    width: 2.6rem;
    color: var(--accent);
    font-weight: 700;
    display: inline-block;
    flex: 0 0 2.6rem;
    text-align: center;
    padding: 0.05rem 0.3rem;
    line-height: 1.2;
    border-radius: 6px;
    background: rgba(102,15,35,0.06);
    border: 1px solid rgba(102,15,35,0.16);
    font-variant-numeric: tabular-nums;
    margin-right: 0.6rem;
}

.toc-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.6rem;
}

.toc-meta {
    display: flex;
    align-items: baseline;
    flex: 0 0 9rem;
}

.toc-abbr {
    flex: 0 0 5rem;
    text-align: left;
    white-space: nowrap;
}

.toc-pages {
    color: #6b6b6b;
    font-size: 0.95em;
    display: inline-flex;
    align-items: baseline;
    padding-left: 0.25rem;
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .product-overview {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }
    .product-image {
        width: 100%;
        max-width: 240px;
        height: auto;
    }
}

/* ===== EXAMENSPFAND PAGE ===== */

.examenspfand .process-list-wrapper {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 0;
    margin: 1.1rem 0 1.2rem 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    border-left: 2px solid var(--accent);
    opacity: 1;
}

.examenspfand .process-list {
    counter-reset: examenspfand-counter;
    margin: 0;
    padding-left: 0;
    font-size: 1rem;
}

.examenspfand .process-list li {
    margin-bottom: 0.4em;
    line-height: 1.55;
    background: none;
    border-radius: 0;
    padding: 0.3em 0.5em 0.3em 2em;
    position: relative;
    box-shadow: none;
    border-left: none;
    list-style: none;
    counter-increment: examenspfand-counter;
    font-size: 1rem;
    color: var(--main-text);
}

.examenspfand .process-list li::before {
    content: counter(examenspfand-counter) ".";
    position: absolute;
    left: 0.2em;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--accent);
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 1em;
    width: 1.3em;
    height: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Geteilte Regel, nicht geloescht (D-00b, Plan 06-03): der Kopier-Knopf und
   seine Klick-Rueckmeldung (Zeiger, Uebergang, Hover-/Fokus-Farbwechsel)
   entfallen mit dem JavaScript, das sie bediente. Die Festbreitenschrift
   kam bisher aus der Inline-Formatierung der vier Kontodaten-Textspannen,
   die diese Migration verwirft (kein Phase-3-bis-5-Markup traegt
   Inline-Formatierung fuer reine Typografie) — sie wird deshalb hier
   ergaenzt, sonst waere "die Optik bleibt erhalten" schlicht unwahr. */
.iban-copy {
    font-family: monospace;
    text-decoration: underline dotted;
    color: var(--accent);
    border-radius: 4px;
    padding: 0 2px;
}

/* Gap G-06-2: Die Ueberschriften auf dieser Seite wirken gegenueber der
   Live-Seite verschoben, obwohl Schriftgroesse, Schriftschnitt und
   Ueberschriftsebene maschinell als zeichengleich nachgewiesen sind (siehe
   Diagnose) — nicht die Schrift ist kleiner geworden, sondern ihr
   umgebender Abschnitt ist um 66% breiter geworden. Auf der Live-Seite
   sitzt der Abschnitt als Flex-Kind mit automatischen Seitenraendern und
   schrumpft deshalb nach Flexbox-Spezifikation auf seinen Inhalt, der durch
   die geteilte Absatzregel in style.css ohnehin auf 600px begrenzt ist. Im
   WordPress-Blocklayout sitzt derselbe Abschnitt dagegen im normalen
   Blockfluss, wo automatische Seitenraender strecken statt schrumpfen —
   daher die Verbreiterung bis zur geteilten Obergrenze aus
   `.about, .contact, .gallery, .examenspfand, .useful-links` in style.css.
   Diese Regel stellt fuer den Abschnitt allein das Schrumpfverhalten der
   Live-Seite wieder her, ohne die geteilte Obergrenze, `theme.json` oder
   die Typografie anzufassen. Dieselbe geteilte Klassenliste betrifft laut
   Diagnose vermutlich auch Startseite und Ordnungen-Protokolle — das ist
   hier bewusst nicht mitrepariert, siehe SUMMARY. */
.examenspfand.wp-block-group {
    width: fit-content;
}

/* ===== REMONSTRATION PAGE ===== */

.remonstration-main .wp-block-quote {
    border-left: 3px solid var(--accent-light);
    background: var(--main-bg);
    margin: 1.2em 0;
    padding: 0.7em 1em;
    font-style: italic;
    color: var(--accent);
    font-size: 1em;
}

.remonstration-main .wp-block-quote p {
    margin: 0;
}

.remonstration-main {
    max-width: 700px;
    margin: 2.5rem auto 2rem auto;
    padding: 2rem 1.2rem;
    background: var(--main-bg);
    color: var(--main-text);
    text-align: justify;
}

.remonstration-main h1 {
    font-size: 2rem;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    color: var(--accent-light);
    margin-bottom: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
    line-height: 1.2;
    border-bottom: 2px solid #f0e3e0;
    padding-bottom: 0.4em;
}

.remonstration-main p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1em;
    color: var(--main-text);
}

/* ===== PAGINATION (WordPress) ===== */

.nav-links {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.page-numbers {
    padding: 0.5em 0.9em;
    border-radius: 6px;
    background: #f7f7f7;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    transition: background 0.18s;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--accent);
    color: #fff;
}

/* Fix nav-links collision: WordPress pagination uses .nav-links but so does the header navigation. Scope WordPress pagination: */
.navigation .nav-links {
    list-style: none;
    flex-direction: row;
    gap: 1rem;
    padding: 0;
    margin: 2rem auto;
    max-width: 1100px;
}

/* ===== NÜTZLICHE LINKS (Startseite) ===== */

.useful-links {
    padding: 4rem 2rem;
    background: var(--main-bg);
    color: var(--main-text);
}

.useful-links h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
    letter-spacing: 0.01em;
    color: var(--accent);
    text-align: left;
}

.useful-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--accent);
}

.useful-links-gallery-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    padding: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.useful-gallery {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 90vw;
    max-width: 90vw;
    border-radius: 12px;
    scroll-snap-type: x mandatory;
    min-width: 0;
    box-sizing: border-box;
    justify-content: start;
    margin: 0 auto;
    -webkit-border-radius: 12px;
}

.useful-gallery::-webkit-scrollbar {
    height: 8px;
}

.useful-gallery::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 4px;
}

.useful-gallery .useful-item {
    background: var(--main-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    min-width: 220px;
    max-width: 240px;
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.7rem;
    transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s;
    scroll-snap-align: start;
    margin-bottom: 0.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.useful-gallery .useful-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    background: #f7f7f7;
    transition: box-shadow 0.2s;
    display: block;
}

.useful-gallery .useful-item .useful-img[alt="Instagram"] {
    object-fit: contain;
    background: #fff;
    padding: 12px;
    height: 90px;
    width: 90px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: none;
}

.useful-gallery .useful-item .useful-img[alt="StudIP"] {
    object-fit: contain;
    background: #fff;
    padding: 12px;
    height: 90px;
    width: 90px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: none;
}

.useful-gallery .useful-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(85,35,39,0.85);
    color: var(--button-text);
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(.4,2,.6,1);
    border-radius: 12px;
    text-align: center;
    padding: 0.5rem;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.useful-gallery .useful-item:hover .useful-title {
    opacity: 1;
}

.useful-gallery .useful-item:hover .useful-img {
    box-shadow: 0 4px 16px rgba(102,15,35,0.10);
    filter: blur(1px) brightness(0.7);
}

@media (max-width: 900px) {
    .useful-gallery {
        gap: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .useful-gallery .useful-item {
        min-width: 180px;
        max-width: 200px;
        flex-basis: 180px;
    }
    .useful-gallery .useful-img {
        height: 100px;
    }
    .useful-links h2 {
        font-size: 1.18rem;
        margin-bottom: 0.8rem;
    }
    .useful-title {
        font-size: 0.97rem;
    }
}

@media (max-width: 600px) {
    .useful-gallery {
        gap: 0.75rem;
    }
    .useful-gallery .useful-item {
        min-width: 140px;
        max-width: 160px;
        flex-basis: 140px;
    }
    .useful-gallery .useful-img {
        height: 80px;
    }
    .useful-gallery .useful-title {
        font-size: 0.98rem;
        padding: 0.7rem 0.3rem;
        line-height: 1.2;
        white-space: normal;
        max-width: 100%;
    }
    .useful-links h2 {
        font-size: 1.02rem;
        margin-bottom: 0.6rem;
    }
    .useful-title {
        font-size: 0.93rem;
    }
}


/* ===== STARTSEITE — HERO ===== */
.hero {
    background: url("../images/index/hintergrund.webp") no-repeat center center / cover;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 2rem;
    position: relative;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
.hero-text {
    position: relative;
    z-index: 1;
    padding: 2rem;
    border-radius: 10px;
    color: var(--button-text);
}
.hero-text h1 {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.25);
    margin-bottom: 1rem;
    line-height: 1.13;
    word-break: break-word;
    text-align: center;
}
.hero-text p {
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    color: #fff;
}
.hero-image-copyright {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 1rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    background-color: rgba(0,0,0,0.5);
    border-top-left-radius: 10px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.hero:hover .hero-image-copyright { opacity: 1; }
@media (max-width: 900px) {
    .hero-image-copyright { opacity: 1; pointer-events: auto; }
}
@media (max-width: 700px) {
    .hero { padding: 1.2rem 0.5rem; height: 38vh; min-height: 220px; }
    .hero-text { padding: 1.1rem 0.5rem; }
    .hero-text h1 { font-size: 1.45rem; line-height: 1.18; }
}
@media (max-width: 400px) {
    .hero-text h1 { font-size: 1.05rem; line-height: 1.15; }
}

/* --- Phase 8.1: Block-Mapping Aktuelles-Download-Kachel --- */

/* Maskensymbol: wiederholt die Phase-4-Maske (.download-item.wp-block-group::before,
   Zeile 993) zeichengleich (dieselbe SVG-Adresse = dasselbe Symbol,
   www/aktuelles.html Zeilen 169-172), eingegrenzt auf .aktuelles-download-item
   statt der Phase-4-Klasse .download-item, damit die Regel nicht auf die
   Phase-4-Kacheln uebergreift. width/height/margin-right/background-color
   entsprechen den Werten, die .aktuelles-download-icon (Zeilen 219-228) fuer
   dasselbe Symbol setzt (2.1rem/2.1rem/0.7rem/var(--accent-light)). */
.aktuelles-download-item.wp-block-group::before {
    content: "";
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.7rem;
    background-color: var(--accent-light);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L11 13.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L11 13.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

/* Der Beitrags-Kachelname ist jetzt ein Absatz (<p class="aktuelles-download-name">)
   statt der Textspanne aus der Quelle. Die geteilte globale Regel
   .aktuelles-download-name (Zeile 240) traegt bereits dieselbe Typografie;
   diese Nachfahren-Regel wiederholt sie mit hoeherer Spezifitaet und
   ergaenzt margin: 0 gegen die geerbten Absatzabstaende (dieselbe
   Kollisionsklasse wie in Phase 5 Plan 04 und Phase 6 Plan 02). */
.aktuelles-download-item .aktuelles-download-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--accent);
    font-size: 1.08rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

/* Der Dateiblock bringt eigene Flow-Abstaende mit, die die Quelle (reines
   Flexbox-Layout) nicht hatte (analog Zeile 1010-1013). */
.aktuelles-download-content .wp-block-file {
    margin: 0;
    font-size: inherit;
}

/* wp:file haengt seinen className an die umschliessende div, nicht an den
   Anker — die Optik der Schaltflaeche wird deshalb hier wiederholt
   (.aktuelles-download-link, Zeilen 253-269), auf dem Nachfahren-Selektor
   statt der Klasse selbst. */
.aktuelles-download-content .wp-block-file > a:not(.wp-block-file__button) {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--button-text);
    background: var(--accent-light);
    border-radius: 6px;
    padding: 0.6em 1.3em;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(176,58,46,0.08);
    white-space: nowrap;
    display: inline-block;
    border: none;
    cursor: pointer;
    margin-top: 0.3rem;
}

.aktuelles-download-content .wp-block-file > a:not(.wp-block-file__button):hover,
.aktuelles-download-content .wp-block-file > a:not(.wp-block-file__button):focus {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(176,58,46,0.15);
}

/* --- Phase 8.1: Block-Mapping Archiv-Aufklappmenue --- */

.news-archive-dropdown .wp-block-archives__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    padding: 0.4em 0;
    display: block;
}

.news-archive-dropdown select {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    padding: 0.5em 0.8em;
    border: 1px solid var(--accent-light);
    border-radius: 6px;
    background: var(--main-bg);
    cursor: pointer;
    max-width: 100%;
}

.news-archive-dropdown select:focus {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

/* --- Phase 8.1 Gap G-08.1-3a: Breitenbegrenzung des Instagram-Abschnitts --- */
.instagram-section {
    width: min(1100px, 92vw);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .instagram-section {
        width: 94vw;
    }
}

/* --- Phase 8.1 Gap G-08.1-4b, korrigiert als Gap G-08.1-6b: unterer Abschnittsabstand --- */
.news-section.wp-block-group {
    margin-bottom: 0;
}

.instagram-section.wp-block-group > :first-child {
    margin-top: calc(0.83 * clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem));
}

/* --- Phase 8.1 Gap G-08.1-3b: Kachel-Obergrenze beim heutigen Grid-Entwurf --- */
@media (min-width: 700px) {
    .downloads-list .download-item {
        max-width: 400px;
    }
}

/* --- Phase 8.1 Gap G-08.1-6a: Abstand vor dem Archiv-Aufklappmenue --- */
.news-section .wp-block-query {
    margin-bottom: 1.2rem;
}

/* --- Phase 8.1 Gap G-08.1-6c: Kalender-Zeile gestapelt statt nebeneinander --- */
.downloads-list--calendar .download-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* ===== Phase 9 Plan 01 (EDIT-01/EDIT-02): Vorstand-Zeile-Baustein ===== */
/*
 * Additiv: die bestehenden Vorstand-/Mitglieder-Vierer- und Restzeilen aus
 * Phase 7 sind von dieser Regel unberuehrt, weil keine von ihnen die Klasse
 * vorstand-row-flex traegt (die trifft ausschliesslich die ueber diesen
 * Baustein neu eingefuegte Zeile). Dieselbe Breitenformel wie Gap G-07-3:
 * 6rem ist der Anteil, den der 2rem-Spaltenabstand der Galerie (Regel
 * .vorstand-gallery-section .wp-block-columns oben) den vier Kartenplaetzen
 * jeweils abzieht — box-sizing: border-box sorgt dafuer, dass der eigene
 * Innenabstand der Karte nicht zusaetzlich zur Prozentbreite hinzukommt.
 * Die Eingrenzung greift erst ab dem WordPress-eigenen 782px-Umbruchpunkt;
 * darunter stapelt der Core jede Spalte ohnehin auf volle Zeilenbreite.
 */
@media (min-width: 782px) {
    .vorstand-gallery-section .vorstand-row-flex > .wp-block-column {
        max-width: calc((100% - 6rem) / 4);
        box-sizing: border-box;
    }
}

/* ===== Phase 9 Plan 03 (EDIT-03, D-09/D-11): gleiche Kachelhoehen + zweispaltiges Protokoll-Raster ===== */
/*
 * D-09: die Download-Kacheln auf "Ordnungen & Protokolle" sollen
 * untereinander alle gleich hoch sein, unabhaengig von der Textlaenge.
 * .downloads-list (Zeile 839) definiert heute nur Spalten; alle Zeilen
 * sind implizit, weshalb grid-auto-rows der richtige Hebel ist. 1fr zwingt
 * alle impliziten Zeilen auf dieselbe Hoehe (die der inhaltsreichsten) —
 * genau das, was D-09 verlangt. Die Kalender-Variante von "Aktuelles"
 * (Phase 8.1) ist per :not() ausgenommen.
 *
 * Negative Eingrenzung statt einer neuen Container-Klasse: .downloads-list
 * kommt heute auf drei Seiten vor (Ordnungen & Protokolle, Infos fuer
 * Ersties, Aktuelles). Eine neue Klasse am D-09-Zielcontainer haengen
 * hiesse, den post_content der bereits abgenommenen Ordnungen-Protokolle-
 * Seite neu zu schreiben und dabei jede Redaktionsaenderung seit Phase 4 zu
 * ueberschreiben. Die negative Eingrenzung erreicht dasselbe Ergebnis rein
 * ueber Companion-CSS, ohne einen Datenbankinhalt anzufassen.
 */
.downloads-list:not(.downloads-list--calendar) {
    grid-auto-rows: 1fr;
}

/*
 * Ersties-Ruecknahmeregel: muss NACH der obigen Hoehenregel stehen, beide
 * haben dieselbe Spezifitaet (je zwei Klassen-Selektoren), die spaetere
 * gewinnt. D-08 haelt fest, dass bereits migrierte Seiten mit anderen
 * Download-Stilen unangetastet bleiben — diese Regel ist die maschinelle
 * Absicherung dafuer auf der Infos-fuer-Ersties-Seite (Phase 6).
 */
.ersties-main .downloads-list {
    grid-auto-rows: auto;
}

/*
 * D-11: zweispaltiges Raster fuer die kuenftige Sitzungsprotokolle-Seite
 * (Plan 09-06). Die 800px-/500px-Media-Queries weiter oben in dieser Datei
 * stapeln die Liste darunter ohnehin einspaltig, dieser Modifier greift
 * daher nur oberhalb dieser Breiten.
 *
 * Fix REVIEW.md WR-03: der Klassenname ist HISTORISCH/IRREFUEHREND. Trotz
 * "protokolle" im Namen ist diese Regel NICHT auf die Sitzungsprotokolle-
 * Seite beschraenkt — sie gilt ueberall dort, wo eine Redaktion den
 * generischen Baustein "Download-Eintrag: Einzeln"
 * (download-eintrag-einzeln.php) oder "Download-Liste" (download-liste.php)
 * einfuegt, also auf jeder beliebigen Seite mit einem oder zwei Dokumenten.
 * Eine Umbenennung wurde bewusst zurueckgestellt, weil bereits ueber
 * tools/phase9-convert-pages.php erzeugte Live-Inhalte denselben
 * Klassennamen fest in post_content eingebettet haben koennten; eine
 * Umbenennung nur in Theme-Dateien wuerde solche bereits veroeffentlichten
 * Seiten von dieser Regel abkoppeln.
 */
.downloads-list--protokolle {
    grid-template-columns: repeat(2, 1fr);
}

/*
 * Follow-up-Fix zu Plan 09-08, Abweichung 2 (Kachelhoehen-Inkonsistenz):
 * die urspruengliche Untersuchung in 09-08-SUMMARY.md mass ausschliesslich
 * echte, ueber die_content()/do_blocks() gerenderte FRONT-END-Seiten und
 * fand dort durchgehend 0px Abweichung. Der Nutzer reproduzierte den Fehler
 * jedoch ausschliesslich im WP-BLOCK-EDITOR-Canvas (Seite bearbeiten ->
 * Baustein "Download-Liste (zweispaltig)" einfuegen, beide Platzhalterkacheln
 * mit identischem Inhalt zeigen unterschiedliche Hoehe).
 *
 * Ursache (gemessen via Playwright im echten editor-canvas-iframe, siehe
 * 09-08-SUMMARY.md "Deviations from Plan" fuer die vollstaendige Herleitung):
 * WordPress' Block-Editor-Iframe fuegt fuer JEDE Gruppe mit
 * layout.type=default zusaetzlich zur Theme-CSS eine eigene, dynamisch
 * generierte Regel ein (":root :where(.is-layout-flow) > *
 * {margin-block:24px 0}" + "> :first-child {margin-block-start:0}"), die es
 * auf dem Front-End NICHT gibt. In .downloads-list--protokolle (2 Kacheln,
 * 1 Zeile, align-items:normal->stretch) bekommt dadurch NUR die erste Kachel
 * margin-block-start:0, die zweite 24px – beide werden auf dieselbe
 * Zeilenhoehe gestreckt, wodurch die zweite Kachel im Editor-Canvas exakt um
 * die Differenz (24px) niedriger als die erste erscheint. Dieselbe
 * Editor-Iframe-Regel existiert unabhaengig vom Karteninhalt und betrifft
 * daher jede .downloads-list-Variante mit mehr als einer Kachel.
 *
 * Fix nach demselben, bereits fuer .arbeitsgruppen-grid etablierten Muster
 * (siehe "Phase 5: Block-Mapping Organisation" weiter unten in dieser
 * Datei): margin-block-start (nicht margin-top) trifft dieselbe Eigenschaft,
 * die die Editor-Layout-Regel setzt, und eine zweiteilige Klassenkette
 * gewinnt gegen deren Spezifitaet 0-1-0 unabhaengig von der Einfuegereihenfolge
 * im Iframe-<head>. Zusaetzlich auf ".editor-styles-wrapper" eingegrenzt (die
 * Klasse, die WordPress ausschliesslich dem <body> des Editor-Canvas-Iframes
 * gibt) – die Regel kann dadurch NIE auf einer Front-End-Seite greifen, das
 * bereits gemessene und abgenommene Front-End-Verhalten bleibt unveraendert.
 */
.editor-styles-wrapper .downloads-list.wp-block-group > * {
    margin-block-start: 0;
}

/*
 * D-16: Blocksatz-Modifier fuer den gemeinsamen AG-/Referat-Karten-Baustein
 * (Plan 09-04, ag-referat-karte.php/ag-referat-raster.php). D-16 verlangt
 * den Blocksatz ausschliesslich fuer neue Karten; die zwei bestehenden
 * AG-Karten auf /organisation/ tragen die Modifier-Klasse nicht und werden
 * von diesem Selektor daher nie getroffen. Die dreiteilige Klassenkette am
 * Kartenelement ist bewusst spezifischer als die Gap-G-05-7-Regel aus Plan
 * 05-04, die denselben Absatz mit einer zweiteiligen Klassenkette
 * adressiert (Ziel: auch dann gewinnen, wenn eine kuenftige Seite einer
 * neuen Karte dieselbe Typografie-Ruecknahme traegt wie Organisation).
 */
.arbeitsgruppe-card.arbeitsgruppe-card--blocksatz.wp-block-group > .arbeitsgruppe-description {
    text-align: justify;
}

/*
 * D-19: Fließtextbreite fuer den generischen Embed-Baustein
 * (Plan 09-05, embed-baustein.php). D-19 verlangt eine Einbettung in
 * Fließtextbreite; die bestehende Einbettungs-Optik der Ersties-Seite ist
 * bewusst breiter als der Fließtext und bleibt deshalb unangetastet — die
 * Breite dieser beiden Klassen kommt ausschliesslich aus der umschliessenden
 * constrained-Layout-Huelle des Bausteins, nicht aus einer eigenen
 * Viewport-Maximalbreite.
 */
.embed-wrapper {
    max-width: 100%;
    margin: 2rem auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(102, 15, 35, 0.08);
}

.embed-iframe {
    width: 100%;
    height: 480px;
    border: none;
    display: block;
    background: #fff;
}

/*
 * Plan 09-08 (Checkpoint-Fix, Abweichung 1 von 3): fester Zwei-Spalten-
 * Modifier fuer den neuen Solo-Baustein "AG-/Referat-Karte: Einzeln".
 * .arbeitsgruppen-grid nutzt regulaer
 * grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) (Zeile 1056) —
 * auto-fit zieht eine einzelne Karte auf die volle Zeilenbreite, sobald keine
 * zweite Karte die zweite Spur belegt (anders als bei .downloads-list--
 * protokolle, D-11, Zeile 2472, die bereits eine FESTE Zwei-Spalten-Regel
 * traegt). Die neue Modifier-Klasse erzwingt nach demselben Muster wie D-11
 * immer genau 2 feste Spalten, sodass eine einzelne Karte automatisch die
 * halbe Breite behaelt, ohne dass ein "zwei einfuegen, eine loeschen"-Umweg
 * noetig waere. Nur der neue Solo-Baustein traegt diese Zusatzklasse; das
 * bestehende ag-referat-raster.php UND die zwei bereits live stehenden
 * AG-Karten auf /organisation/ tragen sie nicht und bleiben unveraendert auf
 * auto-fit. Bewusst ohne eigene Media-Query-Ruecknahme bei schmalen
 * Ansichten — .downloads-list--protokolle (D-11) hat ebenfalls keine und
 * bleibt bei jeder Breite zweispaltig; dieselbe, bereits abgenommene
 * Konvention wird hier fortgesetzt statt ein neues, unabgestimmtes
 * Verhalten einzufuehren.
 */
.arbeitsgruppen-grid.arbeitsgruppen-grid--einzeln {
    grid-template-columns: repeat(2, 1fr);
}

/*
 * Fix REVIEW.md WR-01: die feste Zwei-Spalten-Regel oben ist ein compound
 * Selektor (Spezifitaet 0-2-0) und schlaegt die mobile Basisregel
 * .arbeitsgruppen-grid { grid-template-columns: 1fr; } (Zeile 1121-1123,
 * Spezifitaet 0-1-0) bei JEDER Breite, unabhaengig von der Quellreihenfolge.
 * Anders als beim Praezedenzfall .downloads-list--protokolle (D-11, gleiche
 * Spezifitaet wie seine mobile Basisregel, Sieg nur durch Quellreihenfolge)
 * traegt dieser Solo-Baustein einen vollen Beschreibungsabsatz
 * (.arbeitsgruppe-description) statt nur Titel + Download-Button — eine
 * erzwungene halbe Spaltenbreite auf dem Handy waere hier eine deutlich
 * staerkere Lesbarkeitsregression. Deshalb bekommt .arbeitsgruppen-grid--
 * einzeln (anders als D-11) eine eigene Media-Query-Ruecknahme.
 */
@media (max-width: 768px) {
    .arbeitsgruppen-grid.arbeitsgruppen-grid--einzeln {
        grid-template-columns: 1fr;
    }
}

/*
 * Plan 09-08 (Checkpoint-Fix, Abweichung 3 von 3): Info-Box-Breite an die
 * umgebende Fliesstextbreite angleichen. .info-box (Zeile 782) traegt keine
 * eigene max-width und wurde dadurch breiter dargestellt als der umgebende
 * Absatztext. Gemessen (Playwright, Chromium+WebKit) auf beiden aktuellen
 * Verwendungsstellen: /sitzungsprotokolle/ (Abschnittsklasse .about, Absatz-
 * Fliesstextregel max-width:600px in style.css Zeile 108-112) und
 * /hausarbeiten/ (Abschnittsklasse .download-list-section, Absatz-
 * Fliesstextregel max-width:700px in style.css Zeile 381-385). Die neue
 * Regel koppelt .info-box an genau dieselbe, bereits bestehende
 * Fliesstextbreite der jeweils umschliessenden Abschnittsklasse, statt einen
 * seitenspezifischen Wert zu erfinden — damit bleibt die Regel fuer jede
 * aktuelle UND kuenftige Verwendung des Bausteins korrekt, ohne einen
 * bestehenden Selektor anzufassen. Nur margin-left/margin-right werden
 * gesetzt (Zentrierung wie bei den Fliesstextabsaetzen selbst); der
 * bestehende obere/untere Aussenabstand aus der .info-box-Basisregel bleibt
 * unangetastet, ebenso Form/Rahmen/Farbe/Innenabstand.
 */
.about .info-box,
.contact .info-box,
.examenspfand .info-box {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.download-list-section .info-box {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Gap G-09-1 (Plan 09-09, Task 1) — freistehend eingefuegte
 * Mitgliederkachel-Karten fehlt der Karten-Rahmen (Hintergrund/Radius/
 * Schatten/Innenabstand) UND der randfuellende Bildzuschnitt, weil die
 * gesamte Kartenoptik in dieser Datei (Zeile 496-551) bewusst auf den
 * Vorfahren .vorstand-gallery-section eingegrenzt ist (Phase-7-Entscheidung,
 * siehe Kommentar dort) — eine Klasse, die nur auf der bereits befuellten
 * Teamseite existiert, nicht auf den fuenf Phase-9-Mitgliederkachel-
 * Bausteinen (.vorstand-row / .mitglieder-row, die jeder Baustein bereits
 * traegt, siehe fsr-jura-theme/patterns/mitgliederkachel-*.php). Diese
 * Reparatur koppelt dieselbe Kartenoptik zusaetzlich an die Zeilenklasse,
 * rein additiv, ohne eine bestehende Regel zu aendern (D-06: kein
 * Custom-Block, kein Locking, keine Markup-Aenderung).
 *
 * Diese Karten-Rahmen-Regel traegt exakt dieselben Deklarationen wie
 * .vorstand-gallery-section .wp-block-column (Zeile 496-506) — bewusst
 * zeichengleich, damit eine freistehende Karte optisch nicht von einer
 * Teamseiten-Karte abweicht; der Gate-Kopplungswaechter in
 * tools/phase9-verify.php::standalone_card_frame_check() erzwingt das bei
 * jedem Lauf. Beide Regeln haben dieselbe Selektor-Spezifitaet (ein
 * Klassen-Selektor + ein Kindkombinator-Nachfahren-Selektor); auf der
 * Teamseite (wo BEIDE Selektoren zutreffen) gewinnt die spaetere Regel in
 * der Dateireihenfolge — hier die sektionsgekoppelte Vorlagenregel weiter
 * oben in dieser Datei, da diese Companion-Regel ans Dateiende angehaengt
 * ist. Das ist unschaedlich, weil die Deklarationen zeichengleich sind.
 */
.mitglieder-row > .wp-block-column,
.vorstand-row > .wp-block-column {
    background: var(--main-bg);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 1.2rem 1rem 1rem 1rem;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
 * Zeilenabstand — bewusst OHNE ".wp-block-columns" davor (anders als die
 * Vorlagenregel .vorstand-gallery-section .wp-block-columns), damit auf der
 * Teamseite die bestehende, dort hoeher gewichtete Sektionsregel weiterhin
 * gewinnt und sich nichts an deren Geometrie aendert. Der 2rem-Wert ist der
 * Subtrahend, an dem die 782px-Breitenformel weiter unten haengt (Gap
 * G-07-3-Muster) — Kopplungswaechter (d) in standalone_card_frame_check()
 * prueft das.
 */
.mitglieder-row,
.vorstand-row {
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Bildrahmen-Geometrie — identisch zu .vorstand-gallery-section .vorstand-img
 * (Zeile 522-526). */
.mitglieder-row .vorstand-img,
.vorstand-row .vorstand-img {
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 180px;
}

/* Randfuellender Zuschnitt — identisch zu
 * .vorstand-gallery-section .vorstand-img img (Zeile 528-535). */
.mitglieder-row .vorstand-img img,
.vorstand-row .vorstand-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 12px;
    background: #f7f7f7;
    display: block;
}

/*
 * Gap G-09-1 (Plan 09-09, Task 2) — Typografie, identisch zu
 * .vorstand-gallery-section .vorstand-title / .vorstand-name (Zeile
 * 537-551), jetzt zusaetzlich an die beiden Zeilenklassen gekoppelt.
 */
.vorstand-row .vorstand-title,
.mitglieder-row .vorstand-title {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    margin-top: 0;
    margin-bottom: 0.3rem;
}

.vorstand-row .vorstand-name,
.mitglieder-row .vorstand-name {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1rem;
    color: var(--main-text);
    margin-top: 0;
}

/*
 * Ausrichtungs-Rueckfall der beiden Restzeilen — dieselben defensiven
 * Rueckfaelle wie die sektionsgekoppelten Vorbilder
 * (.vorstand-gallery-section .vorstand-row-2 Zeile 559-561 und
 * .vorstand-gallery-section .mitglieder-row-last Zeile 581-583), ohne
 * !important. Beide Bausteine tragen die Ausrichtung bereits als
 * Blockattribut ("layout":{"justifyContent":...}); die Regel greift nur,
 * falls das Attribut je verloren geht.
 */
.vorstand-row-2 {
    justify-content: center;
}

.mitglieder-row-last {
    justify-content: flex-start;
}

/*
 * Breitenparitaet freistehender Zeilen — dieselbe Formel und derselbe
 * Umbruchpunkt wie Gap G-07-3 (Zeile 623-628) und Plan 09-01 (Zeile
 * 2427-2431): 6rem ist der Anteil, den der 2rem-Zeilenabstand den vier
 * Kartenplaetzen einer Vierer-Zeile abzieht. Unterhalb von 782px stapelt
 * WordPress' eigenes Spalten-Stylesheet ohnehin jede Spalte auf volle
 * Zeilenbreite; eine unbedingte Eingrenzung wuerde die gestapelten Karten
 * dort faelschlich auf ein Viertel schrumpfen.
 */
@media (min-width: 782px) {
    .vorstand-row-flex > .wp-block-column,
    .vorstand-row-2 > .wp-block-column,
    .mitglieder-row-last > .wp-block-column {
        max-width: calc((100% - 6rem) / 4);
        box-sizing: border-box;
    }
}

/*
 * Schmale Bildschirme — dieselben Zielwerte wie Zeile 599-606, jetzt
 * zusaetzlich an die beiden Zeilenklassen gekoppelt.
 */
@media (max-width: 700px) {
    .vorstand-row .vorstand-img,
    .mitglieder-row .vorstand-img {
        max-width: 120px;
    }
    .vorstand-row .vorstand-img img,
    .mitglieder-row .vorstand-img img {
        height: 160px;
    }
}

/* ===== Gap G-09-5 (Plan 09-12): Zeilenbreite unabhaengig vom Einfuegeort ===== */
/*
 * Ursache (siehe .planning/debug/mitgliederkachel-kartenbreite-block-
 * inserter-vs-skript.md, Resolution): die 782px-Kartenbreitenformel oben
 * (Zeile 2764-2771, absichtlich unscoped, G-09-1) rechnet gegen die EIGENE
 * Zeilenbreite. Liegt die Zeile in .vorstand-gallery-section, ist diese
 * Breite durch deren max-width:90% festgelegt (926px bei 1100px
 * Inhaltsbreite). Landet dieselbe Zeile stattdessen als eigenstaendiger
 * Block direkt im Inhaltscontainer (z.B. weil eine Redaktion den Cursor
 * unterhalb der Sektion statt praezise dazwischen setzt), fehlt diese
 * Eingrenzung — die Zeile wird 1100px breit, ihre Karten dadurch rund 21%
 * dicker als in der Sektion. Diese Regel gibt einer SOLCHEN freistehenden
 * Zeile dieselbe Bezugsbreite wie die Sektion (90% Inhaltsbreite minus
 * ihrem eigenen 2rem-Innenabstand je Seite = 4rem), zentriert passend zur
 * ebenfalls zentrierten Sektion. Der Kindkombinator trifft ausschliesslich
 * Top-Level-Zeilen; eine Zeile INNERHALB der Sektion (kein direktes Kind
 * des Inhaltscontainers) bleibt unberuehrt. Keine .wp-block-column-Regel,
 * daher unabhaengig von der Phase-7-Eingrenzungs-Positivliste.
 *
 * Restabdeckung, ehrlich benannt: eine freistehende Zeile, die selbst in
 * einem WEITEREN, fremden Gruppenblock steckt (also kein direktes Kind des
 * Inhaltscontainers ist), erreicht dieser Kindkombinator nicht — gemessen
 * und in der Debug-Sitzung als eingegrenzte Restunsicherheit dokumentiert,
 * kein automatisch erzeugbarer redaktioneller Anwendungsfall dieses
 * Projekts.
 */
@media (min-width: 782px) {
    .wp-block-post-content > .vorstand-row.vorstand-row-flex,
    .wp-block-post-content > .vorstand-row.vorstand-row-2,
    .wp-block-post-content > .mitglieder-row.mitglieder-row-last {
        max-width: calc(90% - 4rem);
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * Editor-Canvas-Ergaenzung: WordPress' eigene, im Block-Editor-Iframe
 * dynamisch eingehaengte Vorgabe fuer Wurzel-Ebenen-Bloecke
 * (".block-editor-block-list__layout.is-root-container > :where(...)",
 * zwei Klassen, Spezifitaet 0-2-0) gewinnt dort gegen die einzelne Klasse
 * .vorstand-gallery-section (0-1-0) und erzwingt faelschlich eine feste
 * Breite von 1100px statt der eigenen 90%-Regel weiter oben in dieser
 * Datei (Zeile ~433) — NUR im Editor-Canvas, das Frontend ist unberuehrt
 * (dort gewinnt die 90%-Regel bereits ohne Zusatz, weil dieselbe
 * Wurzel-Ebenen-Vorgabe dort gar nicht existiert). Ohne diese Ergaenzung
 * bekaeme die Redaktion im Editor selbst weiterhin unterschiedlich breite
 * Karten zwischen der Sektion und einer freistehenden Zeile zu sehen —
 * genau dort, wo der urspruengliche Befund gemeldet wurde. Gewichtung
 * ausschliesslich ueber Spezifitaet, bewusst OHNE !important (Phase
 * 8.1 haelt pages.css frei von !important-Deklarationen, siehe
 * tools/phase8.1-verify.php Pruefung 6): die verdoppelte Klasse
 * ".vorstand-gallery-section.vorstand-gallery-section" traegt zusammen
 * mit dem vorangestellten ".editor-styles-wrapper"-Vorfahren drei
 * Klassen-Selektoren (Spezifitaet 0-3-0) und gewinnt damit outright
 * gegen WordPress' 0-2-0-Regel, unabhaengig von der Kaskadenreihenfolge
 * der beiden Stylesheets im Editor-Iframe. ".editor-styles-wrapper"
 * existiert nur im Editor-Canvas, daher greift diese Regel im Frontend
 * gar nicht (dort ist die bestehende Zeile-433-Regel bereits
 * ausreichend) — rein additiv, keine bestehende Deklaration wird
 * veraendert oder geloescht.
 */
.editor-styles-wrapper .vorstand-gallery-section.vorstand-gallery-section {
    max-width: 90%;
}

/* ===== EINHEITLICHE LINKOPTIK (Quick-Task 260916-hag) =====
   Vorgabe: alle Verweise der Seite sollen gleich aussehen. Referenz ist die
   .modern-link-Behandlung aus style.css — Akzentfarbe und Unterstreichung im
   Ruhezustand, weisse Schrift auf Akzentflaeche beim Ueberfahren.

   Rein ergaenzend: keine bestehende Zeile dieser Datei wird veraendert
   (tools/phase8.1-verify.php verlangt 0 Loeschzeilen im Diff gegen den
   Basis-Commit), und die Aufloesung laeuft allein ueber Spezifitaet und
   Quellreihenfolge — diese Datei bleibt frei von Erzwingungs-Deklarationen
   (Pruefung 6 desselben Gates).

   Teil 1: Die Verweise des Info-Box-Bausteins. Live derzeit auf
   /hausarbeiten/, /ordnungen-protokolle/ und /sitzungsprotokolle/, kuenftig
   ueberall, wo der Baustein eingefuegt wird. Das display:inline-block der
   Grundregel bleibt unberuehrt; das Pfeilzeichen steht im Blockinhalt und
   wird hier bewusst nicht angefasst. Der Innenabstand steht im Ruhezustand
   (nicht erst beim Ueberfahren), damit die Flaeche ohne Layoutsprung
   erscheint. */
a.info-box-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s, background 0.2s;
    border-radius: 4px;
    padding: 1px 3px;
    background: transparent;
}

a.info-box-link:hover,
a.info-box-link:focus {
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    outline: none;
}

/* Teil 2: Traegt ein Absatz- oder Listenblock den Zusatz-Klassennamen
   "modern-link" -- der Weg, den docs/ANLEITUNG-FSR.md Redakteuren nennt, weil
   das Erweitert-Feld des Editors die Klasse immer am BLOCK ablegt, nie am
   Anker --, dann gilt die Linkoptik fuer die enthaltenen Verweise, nicht fuer
   den Absatztext. Ohne diese Ruecknahme erschiene der ganze Absatz in
   Akzentfarbe und unterstrichen. inherit statt fester Werte, damit die
   Typografie des umgebenden Abschnitts unveraendert weitergilt. */
p.modern-link,
li.modern-link {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    background: transparent;
    padding: 0;
}

p.modern-link a,
li.modern-link a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.2s, background 0.2s;
    border-radius: 4px;
    padding: 1px 3px;
    background: transparent;
}

p.modern-link a:hover,
p.modern-link a:focus,
li.modern-link a:hover,
li.modern-link a:focus {
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    outline: none;
}

/* ===== SEITENWEITE BUENDIGKEIT: .about-UEBERSCHRIFT WANDERT ZUM FLIESSTEXT
   (Quick-Task 260916-h9t, KORRIGIERTE RICHTUNG, dritter Anlauf) =====

   Entwurfsentscheidung (korrigiert 2026-09-16, Nutzerentscheidung nach
   Sichtabnahme): auf allen zehn Seiten mit der Abschnittsklasse .about
   zentriert sich der Fliesstext bereits seit jeher in seiner eigenen
   600px-Lesespalte (.about p, style.css Zeile 108-112 — UNVERAENDERT, bleibt
   exakt in dieser Position, siehe evidence/baseline-pre-fix.json als
   Zielzustand). Die h2/h3-Ueberschriften sitzen dagegen linksbuendig an der
   Container-Kante (text-align:left, style.css Zeile 704-712 — text-align
   bleibt unberuehrt, nur die Box-Position aendert sich). Ab jetzt wandert die
   Ueberschrift zur bereits bestehenden zentrierten Position des Fliesstextes
   — nicht umgekehrt.

   Vorgeschichte: erster Anlauf 2026-09-01 (Commit 54ee325, zurueckgesetzt in
   7500d9f) zentrierte den Fliesstext nach links und verursachte dabei eine
   unbemerkte Nebenwirkung weiter unten auf /organisation/. Zweiter Anlauf
   (dieser Quick-Task, Commit 2e08a38, hier zurueckgebaut) wiederholte densel-
   ben Richtungsfehler: er zog erneut den Fliesstext auf Offset 0 statt die
   Ueberschrift auf die zentrierte Fliesstext-Position zu bewegen — vom
   Nutzer nach Sichtabnahme ausdruecklich korrigiert. Dieser dritte Anlauf
   kehrt die Richtung um.

   Mechanisch weiterhin gueltig (evidence/cascade-evidence.json): 0 Vorkommen
   von @layer im ausgelieferten HTML. WordPress' eigene
   .is-layout-constrained > :where(...)-Regel deklariert
   margin-left/margin-right: auto !important (Spezifitaet 0,1,0) UND
   max-width: var(--wp--style--global--content-size) OHNE wichtige
   Gewichtung. Fuer Ueberschriften ist das kein Gegner mehr, sondern der
   Hebel: direkte Kinder eines is-layout-constrained-Containers werden von
   WordPress bereits automatisch zentriert (auto-Raender, wichtig
   gewichtet) — es fehlte ihnen bisher nur eine max-width unter der vollen
   Inhaltsbreite, damit diese Zentrierung sichtbar wird. Eine normal
   gewichtete max-width:600px schlaegt WordPress' normal gewichtete
   max-width:1100px bereits durch hoehere Spezifitaet (0,2,1 statt 0,1,0) —
   kein !important noetig.

   Live vermessen (siehe 260916-h9t-SUMMARY.md): saemtliche h2/h3 der zehn
   .about-Fliesstextbereiche sind direkte Kinder von .about (Tiefe 1) und
   damit is-layout-constrained-Kinder, bis auf eine Ausnahme auf
   /infos-fuer-ersties/ (eine Tiefe-2-Ueberschrift in einer verschachtelten
   is-layout-flow-Gruppe ohne WordPress-Zentrierung). Fuer diesen einen Fall
   liefert dieselbe Regel zusaetzlich eigene margin-left/right:auto (normal
   gewichtet) — wirkungslos fuer die Tiefe-1-Faelle (WordPresss eigene
   !important-Regel gewinnt dort ohnehin), aber fuer den Tiefe-2-Fall die
   fehlende Zentrierung nachliefernd. Der Kasten .info-box bleibt bewusst
   unberuehrt: er war schon vor diesem Plan an die Fliesstextbreite gekoppelt
   (.about .info-box, Plan 09-08, max-width:600px) und sitzt deshalb bereits
   an derselben Kante wie der (unveraenderte) Fliesstext — er muss in dieser
   Richtung nicht mitgezogen werden.

   Dieser Block kommt komplett ohne !important aus (Budget: 0 statt vormals
   2 in der verworfenen Fassung) — durchgehend physikalische Eigenschaften
   (margin-left/-right, nicht margin-inline), damit der Kaskadenvergleich mit
   WordPress' eigener physikalischer Deklaration Eigenschaft gegen
   Eigenschaft bleibt. */

.about.wp-block-group h2,
.about.wp-block-group h3 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Quick Task 260916-s7x (D-A/D-B): Kalenderkarte + Ersti-Guide zentrieren ===== */
/*
 * Ursache: keines der beiden .downloads-list-Vorkommen auf
 * /infos-fuer-ersties/ trug bislang eine Ausrichtungs-Modifier-Klasse (U2,
 * siehe 260916-s7x-PLAN.md <interfaces>). Fuer die Kalenderkarte kam zudem
 * die falsche Dokumentreihenfolge hinzu (U1) — das ist jetzt im Konverter
 * behoben (die wp:html-Kalender-Einbettung steht vor der Karte), nicht per
 * CSS. Beide neuen Klassen sind zusaetzlich auf .ersties-main eingegrenzt,
 * obwohl ihr Klassenname bereits eindeutig ist — Verteidigung in der Tiefe,
 * analog zur bestehenden "Ersties-Ruecknahmeregel" oben in dieser Datei.
 *
 * D-A (A2): die Kalender-Abo-Karte bleibt 400px breit (bestehende
 * @media(min-width:700px) .downloads-list .download-item{max-width:400px}
 * bleibt unveraendert) und wird ueber justify-items:center im bereits
 * einspaltigen .downloads-list--calendar-Raster (grid-template-columns:1fr)
 * zentriert — dieselbe horizontale Mitte wie .calendar-iframe-wrapper, weil
 * beide unter demselben .ersties-main-Elternelement per margin:auto
 * zentriert sind (gemessen identisch, siehe evidence/baseline-pre-fix.json).
 */
.ersties-main .downloads-list--kalenderkarte-mittig {
    justify-items: center;
}

/*
 * D-B (B1): das Ersti-Guide-Raster wechselt von CSS-Grid auf Flexbox mit
 * Zeilenumbruch, damit jede entstehende Zeile ueber justify-content:center
 * unabhaengig zentriert wird — bei 1004px Inhaltsbreite ergeben sich
 * weiterhin zwei Kacheln in Zeile 1 und eine in Zeile 2 (3x340+2x19.2px
 * Spaltenabstand passen nicht in eine Zeile, siehe U4 in der Diagnose),
 * beide Zeilen jetzt zentriert statt linksbuendig — dasselbe Muster wie die
 * Vorstand-Restzeile aus Phase 9. flex-basis:400px entspricht der
 * bestehenden 400px-Kachel-Obergrenze; kein !important, gleiche
 * Spezifitaet (0-2-0 bzw. 0-3-0) wie die Grundregel gewinnt allein durch
 * die Dateireihenfolge. Unterhalb der bestehenden 800px-Stapelbreite bleibt
 * das Verhalten unveraendert einspaltig (flex-wrap zeigt bei zu schmalem
 * Container ohnehin genau eine Kachel pro Zeile, jetzt zusaetzlich
 * zentriert statt linksbuendig).
 */
.ersties-main .downloads-list--zeilen-mittig {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ersties-main .downloads-list--zeilen-mittig .download-item {
    flex: 0 1 auto;
}