/* Dürrenast-Leist – Ergänzungen für WordPress-Blöcke, Menüs und Formulare */

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

/* ---------- Abschnitte aus dem Editor ---------- */
.inhalt > .wp-block-group.abschnitt,
.editor-styles-wrapper .wp-block-group.abschnitt { padding-left: var(--rand); padding-right: var(--rand); }
.inhalt > .wp-block-group.abschnitt > *,
.editor-styles-wrapper .wp-block-group.abschnitt > * { max-width: var(--breite); margin-left: auto !important; margin-right: auto !important; }
.inhalt > .abschnitt:first-child:not(.abschnitt-stein):not(.abschnitt-see):not(.abschnitt-seehell):not(.abschnitt-sonne) { padding-top: var(--space-8); }
.inhalt > *:not(.abschnitt) { max-width: var(--breite); margin-left: auto; margin-right: auto; padding-left: var(--rand); padding-right: var(--rand); }
.inhalt > p:not(.abschnitt):first-child { margin-top: var(--space-8); }

/* Raster und Spalten: keine Fluss-Abstände zwischen den Kindern */
.raster > *, .zweispaltig > *, .abschnitt-kopf > *, .aufruf > *, .galerie > *, .wp-block-buttons > * { margin-block: 0 !important; }
.abschnitt-kopf > .wp-block-group > * + * { margin-top: var(--space-1); }
.abschnitt-kopf p { margin: 0; }
.legende { margin-bottom: var(--space-6) !important; }

/* ---------- Blockstile ---------- */
.is-style-dachzeile { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--akzent); }
.abschnitt-see .is-style-dachzeile { color: var(--see-hell); }
.abschnitt-seehell .is-style-dachzeile { color: var(--tinte); }
.abschnitt-sonne .is-style-dachzeile { color: var(--see-tief); }
.karte-hervor .is-style-dachzeile { color: var(--sonne); }
.is-style-dachzeile + h1, .is-style-dachzeile + h2, .is-style-dachzeile + h3 { margin-top: var(--space-1) !important; }

.is-style-lead { font-size: 21px; line-height: 31px; }
@media (max-width: 640px) { .is-style-lead { font-size: 19px; line-height: 28px; } }

.is-style-zahl { font-size: clamp(40px, 5vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--see-tief); }
.abschnitt-see .is-style-zahl { color: var(--sonne); }
.is-style-zahl + p { margin-top: var(--space-1) !important; }

.is-style-karte { background: var(--kalk); border-radius: var(--radius-m); padding: var(--space-4); display: flex; flex-direction: column; }
.abschnitt:not(.abschnitt-stein):not(.abschnitt-see) .is-style-karte { background: var(--stein); }
.is-style-karte > * + * { margin-block-start: var(--space-1) !important; }
.is-style-karte.karte-hervor { background: var(--see-tief) !important; color: var(--kalk); }
.karte-hervor .preis small, .karte-hervor .leise { color: var(--see-hell); }

.is-style-blase, .is-style-blase-sonne { position: relative; border-radius: 24px; padding: var(--space-4); margin-bottom: 44px; }
.is-style-blase { background: var(--see-tief); color: var(--kalk); }
.is-style-blase-sonne { background: var(--sonne); color: var(--tinte); }
.is-style-blase::after, .is-style-blase-sonne::after { content: ""; position: absolute; left: 36px; bottom: -40px; width: 44px; height: 44px; background: inherit; clip-path: polygon(27% 0, 0 100%, 100% 0); }
.blase-rechts::after { left: auto !important; right: 36px; transform: scaleX(-1); }
.blase-versetzt { margin-left: 15% !important; }
.is-style-blase p, .is-style-blase-sonne p { font-weight: 800; font-size: 26px; line-height: 32px; }
@media (max-width: 640px) { .is-style-blase p, .is-style-blase-sonne p { font-size: 22px; line-height: 28px; } }

.is-style-hinweis { background: var(--stein); border-radius: var(--radius-m); padding: var(--space-3); margin-top: var(--space-4); }
.abschnitt-stein .is-style-hinweis, .hinweis-kalk { background: var(--kalk) !important; }
.is-style-hinweis > * + * { margin-block-start: var(--space-1) !important; }

ul.is-style-haken { list-style: none; padding: 0; }
ul.is-style-haken li { position: relative; padding-left: 32px; }
ul.is-style-haken li + li { margin-top: var(--space-1); }
ul.is-style-haken li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4F6C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.abschnitt-see ul.is-style-haken li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4C542' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

ol.chronik { list-style: none; padding: 0; }
ol.chronik li { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); padding-bottom: var(--space-3); }

/* Stimme aus dem Quartier */
.wp-block-quote.is-style-stimme { margin: 0; border: 0; padding: 0 0 0 clamp(90px, 12vw, 150px); position: relative; }
.wp-block-quote.is-style-stimme::before { content: "«"; position: absolute; left: 0; top: -6px; font-weight: 800; font-size: clamp(110px, 14vw, 160px); line-height: 110px; color: var(--geranie); }
.wp-block-quote.is-style-stimme p { font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.015em; }
.wp-block-quote.is-style-stimme cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: 17px; }
@media (max-width: 640px) { .wp-block-quote.is-style-stimme { padding: 70px 0 0; } .wp-block-quote.is-style-stimme::before { line-height: 80px; } }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); font: 700 16px/1.2 var(--font-grotesk); text-decoration: none; border: 0; background: var(--see-tief); color: var(--kalk); transition: background-color var(--takt-2) var(--standard), color var(--takt-2) var(--standard); }
.wp-block-button__link:hover { background: var(--horizont-vorn); color: var(--kalk); }
.is-style-rand .wp-block-button__link { background: transparent; color: var(--see-tief); box-shadow: inset 0 0 0 2px var(--see-tief); }
.is-style-rand .wp-block-button__link:hover { background: var(--see-tief); color: var(--kalk); }
.is-style-sonne .wp-block-button__link { background: var(--sonne); color: var(--tinte); }
.is-style-sonne .wp-block-button__link:hover { background: var(--kalk); color: var(--tinte); }
.is-style-hell .wp-block-button__link { background: var(--kalk); color: var(--see-tief); }
.is-style-hell .wp-block-button__link:hover { background: var(--see-hell); color: var(--tinte); }
.abschnitt-see a.wp-block-button__link { text-decoration: none; }

/* Bausteine in Absätzen */
p.icon-kreis { width: 56px; height: 56px; border-radius: 50%; background: var(--see-hell); display: grid; place-items: center; margin-bottom: var(--space-1); }
p.person-bild { aspect-ratio: 1; border-radius: var(--radius-m); background: var(--see-hell); display: grid; place-items: center; }
p.person-bild .icon { width: 48px; height: 48px; }
p.person-bild.mit-foto { overflow: hidden; background: var(--stein); }
p.person-bild.mit-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-offen p.person-bild { background: transparent; box-shadow: inset 0 0 0 2px var(--see-tief); }
.person > * + * { margin-block-start: var(--space-1) !important; }
p.h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
.mit-icon { display: flex; gap: 10px; align-items: center; }
p.preis { font-size: 44px; line-height: 1; font-weight: 800; color: var(--see-tief); letter-spacing: -0.02em; }
p.preis small { font-size: 17px; font-weight: 600; color: var(--schrift-leise); letter-spacing: 0; }
.karte-hervor p.preis, .karte-hervor .h3 { color: var(--kalk); }
.galerie p.bild-platz { margin: 0; }
/* Galerie mit Fotos: erstes Bild gross, die übrigen quadratisch (wie die Platzhalter) */
.galerie > .wp-block-image { margin: 0; aspect-ratio: 1; }
.galerie > .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galerie > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); display: block; }
.stapel-klein > * + * { margin-block-start: var(--space-1) !important; }

/* Karten und Listen aus Shortcodes */
.karte-bild { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-m); }
.karte .karte-bild, .karte .bild-platz { margin-bottom: var(--space-1); }
.termin-link { color: inherit; text-decoration: none; }
.termin-link:hover { color: var(--see-tief); text-decoration: underline; }
.beitrag-bild img { width: 100%; height: auto; border-radius: var(--radius-m); }
.anlass-daten { gap: var(--space-2); }
.anlass-daten .termin-meta { margin: 0; font-size: 17px; color: var(--tinte); }

/* Eintragstexte */
.eintrag > * + * { margin-top: var(--space-2); }
.eintrag h2, .eintrag h3 { margin-top: var(--space-4); }
.eintrag img { height: auto; border-radius: var(--radius-m); }

/* ---------- Menüs ---------- */
.nav ul.menu, .nav > ul { list-style: none; padding: 0; margin: 0; }
.fuss-unten ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-2); }

/* Blättern */
.blaettern { margin-top: var(--space-6); }
.blaettern .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.blaettern .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--stein); color: var(--tinte); text-decoration: none; font-weight: 700; }
.blaettern .page-numbers.current { background: var(--see-tief); color: var(--kalk); }

/* ---------- Formulare ---------- */
.auswahl { border: 0; padding: 0; margin: 0; }
.auswahl legend { margin-bottom: 8px; }
.formular .formular-meldung { margin: 0; }
.formular-fehler { background: var(--kalk); box-shadow: inset 0 0 0 2px var(--geranie); }

/* Admin-Leiste */
@media (max-width: 960px) { .admin-bar .nav { top: 100%; } }
.raster + *:not(.raster) { margin-top: var(--space-4) !important; }

/* Statuten aus Blöcken */
.statuten > *, .ziffer > *, .unterschrift > * { margin-block: 0 !important; }
.statuten-inhalt > * + * { margin-top: var(--space-2) !important; }
.statuten-inhalt ol.wp-block-list { margin: var(--space-2) 0 var(--space-3); }
.statuten-inhalt .wp-block-button, .statuten-inhalt .wp-block-button__link { width: 100%; }
.statuten-text > .artikel { margin-block-start: 0; }
.statuten-text > .artikel + .artikel, .statuten-text > .unterschrift + .artikel { margin-top: var(--space-6) !important; }
.ziffer-text > * { margin-block: 0; }
.ziffer-text > * + * { margin-top: var(--space-1) !important; }
.wp-block-table.tabelle { max-width: 520px; margin: 0; }
.wp-block-table.tabelle table { border-collapse: collapse; width: 100%; }
.wp-block-table.tabelle th, .wp-block-table.tabelle td { border: 0; border-bottom: 1px solid var(--linie); padding: 12px 16px; text-align: left; }
.wp-block-table.tabelle thead { border: 0; }
.wp-block-table.tabelle thead th { background: var(--stein); font-size: 15px; }
.wp-block-table.tabelle td:last-child, .wp-block-table.tabelle th:last-child { text-align: right; }
.wp-block-image.karte-leistgebiet img { max-width: 640px; width: 100%; height: auto; border-radius: var(--radius-s); box-shadow: 0 0 0 1px var(--linie); }
.wp-block-image.karte-leistgebiet figcaption { font-size: 13px; line-height: 18px; color: var(--schrift-leise); margin-top: var(--space-1); text-align: left; }

/* Vereinsversammlung (Plugin): Traktanden, Antragsformular, Dokumente */
.versammlung { margin-top: var(--space-6); }
.versammlung > * + * { margin-top: var(--space-3); }
.traktanden { padding-left: 1.4em; }
.traktanden li + li { margin-top: var(--space-1); }
.mitglieder-zugang { margin-top: var(--space-2); max-width: 28rem; }
.mitglieder-zugang > * + * { margin-top: var(--space-2); }

/* Mitgliederbereich (Plugin) */
.mitgliederbereich > section > * + * { margin-top: var(--space-2); }
.knopf-text { background: none; border: 0; padding: 0; font: inherit; color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mitglieder-liste { columns: 2 16rem; }

/* Jubiläum 2028: Signet neben dem Logo (mindestens 64 px, darunter die Textzeile), Jubiläumsfarbe Sonne */
.jubilaeum-signet { display: flex; align-items: center; margin-right: auto; text-decoration: none; color: var(--see-tief); }
.jubilaeum-signet img { height: 64px; width: auto; }
.jubilaeum-signet span { display: none; font-weight: 700; font-size: 14px; }
@media (max-width: 720px) { .jubilaeum-signet img { display: none; } .jubilaeum-signet span { display: inline; } }
body.jubilaeum .nav .current-menu-item > a { text-decoration-color: var(--sonne); }

/* Zeitstrahl (Plugin): die Seekante ist die Zeitachse, Meilensteine als Sprechblasen, 2028 in Sonne */
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x proximity; border-bottom: 6px solid var(--see-hell); }
.zeitstrahl:focus-visible { outline: 3px solid var(--akzent); outline-offset: 4px; }
.zeitstrahl li { flex: 0 0 min(80vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; }
/* Sprechblase und Schwanz kommen aus dem Theme (.blase), hier nur kompakter. */
.zeitstrahl .blase { padding: var(--space-2) var(--space-3); }
.zeitstrahl li { font-weight: 400; }
.zeitstrahl .blase h3 { font-size: 18px; line-height: 24px; font-weight: 800; margin: 0 0 var(--space-1); color: inherit; }
.zeitstrahl .blase p { margin: 0; font-size: 15px; line-height: 22px; font-weight: 400; }
.zeitstrahl .blase img { border-radius: var(--radius-s); margin-bottom: var(--space-1); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.zeitstrahl .blase .quelle { font-size: 12px; opacity: .8; margin-top: var(--space-1); }
.zeitstrahl .jahr { font-weight: 800; font-size: 22px; color: var(--see-tief); }
.zeitstrahl .ziel .blase { background: var(--sonne); color: var(--tinte); }