/* ==========================================================================
   Ergänzungen für WordPress.
   Das Aussehen aus dem Entwurf steht unverändert in haupt.css.
   Hier steht nur, was WordPress zusätzlich braucht.
   ========================================================================== */

/* ---------- Schalter "Animationen aus" ---------- */

body.ruhig .fahre,
body.ruhig.js .fahre {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

body.ruhig .wolke-1,
body.ruhig .wolke-2,
body.ruhig .schwarm,
body.ruhig .menueband::before,
body.ruhig .uhrkachel::before,
body.ruhig .grossbuehne::before,
body.ruhig .aurora-1,
body.ruhig .aurora-2,
body.ruhig .aurora-3,
body.ruhig .sterne1,
body.ruhig .sterne2,
body.ruhig .schnuppe {
	animation: none !important;
}

body.ruhig .schnuppe {
	opacity: 0;
}

body.ruhig * {
	scroll-behavior: auto !important;
}

/* Sicherheitsnetz: wenn das Skript nicht lädt, bleibt der Inhalt sichtbar. */
.no-js .fahre {
	opacity: 1;
	transform: none;
}

/* ---------- Tagesbotschaft ---------- */

.willkarte.nur-bild,
.willkarte.nur-text,
.willkarte.untereinander {
	grid-template-columns: 1fr;
}

.willkarte.nur-bild .willbild,
.willkarte.untereinander .willbild {
	border-right: 0;
}

.willkarte.untereinander .willbild {
	border-bottom: 1px solid var(--linie);
}

.willkarte.nur-text .willwort {
	padding: 34px 40px;
}

.grusstext-block > p {
	font-size: 16.5px;
	line-height: 1.76;
	color: var(--tinte-2);
	margin: 0 0 13px;
	max-width: 62ch;
}

.grusstext-block > p:first-of-type {
	font-family: var(--serif);
	font-size: 19.5px;
	line-height: 1.55;
	color: var(--tinte);
}

.grusstext-block h1,
.grusstext-block h2,
.grusstext-block h3 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(26px, 3.1vw, 35px);
	line-height: 1.16;
	margin: 0 0 14px;
	color: var(--tinte);
}

.grusstext-block em {
	font-style: italic;
	color: var(--lila);
}

.grusstext-block a {
	color: var(--lila);
}

.grusstext-block img {
	height: auto;
}

.grusstext-block > :last-child {
	margin-bottom: 0;
}

/* ---------- Widgets in der Seitenleiste ---------- */

.rand .widget > *:not(.kachelkopf) {
	padding-left: 20px;
	padding-right: 20px;
}

.rand .widget > *:not(.kachelkopf):first-child {
	padding-top: 18px;
}

.rand .widget > *:last-child {
	padding-bottom: 20px;
	margin-bottom: 0;
}

.rand .widget ul,
.rand .widget ol {
	list-style: none;
	margin: 0;
	padding-left: 20px;
	padding-right: 20px;
}

.rand .widget li {
	font-size: 15px;
	line-height: 1.5;
	padding: 9px 0;
	border-bottom: 1px solid var(--linie);
}

.rand .widget li:last-child {
	border-bottom: 0;
}

.rand .widget a {
	color: var(--tinte);
	text-decoration: none;
}

.rand .widget a:hover {
	color: var(--lila);
}

.rand .widget p {
	font-size: 15px;
	line-height: 1.66;
	color: var(--tinte-2);
}

.rand .widget img {
	height: auto;
}

.rand .widget input[type="text"],
.rand .widget input[type="search"],
.rand .widget input[type="email"] {
	width: 100%;
	font-family: var(--sans);
	font-size: 15px;
	padding: 11px 16px;
	border: 1px solid var(--linie-2);
	border-radius: 999px;
	background: #ffffff;
	color: var(--tinte);
}

.rand .widget input[type="submit"],
.rand .widget button[type="submit"] {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient(100deg, var(--nacht-2), var(--lila));
	border: 1px solid var(--lila-tief);
	border-radius: 999px;
	padding: 11px 22px;
	margin-top: 10px;
	cursor: pointer;
}

.rand .widget .suchfeld {
	margin: 0;
	width: 100%;
}

.rand .widget form {
	margin: 0;
}

/* ---------- Beiträge: Inhalt aus dem Block-Editor ---------- */

.artikeltext > *,
.entry-content > * {
	max-width: 100%;
}

.artikeltext img,
.entry-content img,
.artikeltext iframe,
.entry-content iframe,
.artikeltext video,
.entry-content video {
	max-width: 100%;
	height: auto;
}

.artikeltext figure,
.entry-content figure {
	margin: 26px 0;
}

.artikeltext figcaption,
.entry-content figcaption {
	font-size: 13.5px;
	font-style: italic;
	color: var(--leise);
	text-align: center;
	margin-top: 8px;
}

.artikeltext h3,
.entry-content h3 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.25;
	margin: 28px 0 10px;
}

.artikeltext h4,
.entry-content h4 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 19px;
	margin: 24px 0 8px;
}

.artikeltext ul,
.artikeltext ol,
.entry-content ul,
.entry-content ol {
	font-size: 17px;
	line-height: 1.78;
	color: var(--tinte);
	margin: 0 0 20px;
	padding-left: 24px;
}

.artikeltext li,
.entry-content li {
	margin-bottom: 8px;
}

.artikeltext table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
	margin: 0 0 22px;
}

.artikeltext th,
.artikeltext td,
.entry-content th,
.entry-content td {
	border: 1px solid var(--linie);
	padding: 9px 12px;
	text-align: left;
}

.artikeltext pre,
.entry-content pre {
	background: var(--karte-2);
	border: 1px solid var(--linie);
	padding: 16px 18px;
	overflow-x: auto;
	font-size: 14px;
}

.artikeltext a,
.entry-content a {
	color: var(--lila);
}

.artikeltext hr,
.entry-content hr {
	border: 0;
	border-top: 1px solid var(--linie);
	margin: 30px 0;
}

/* Breite Blöcke */
.alignwide {
	margin-left: -40px;
	margin-right: -40px;
	max-width: calc(100% + 80px);
	width: calc(100% + 80px);
}

.alignfull {
	margin-left: -42px;
	margin-right: -42px;
	max-width: calc(100% + 84px);
	width: calc(100% + 84px);
}

.wp-block-image.alignwide img,
.wp-block-image.alignfull img {
	width: 100%;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-button__link {
	background: linear-gradient(100deg, var(--nacht-2), var(--lila));
	color: #ffffff;
	border-radius: 999px;
	padding: 12px 26px;
	text-decoration: none;
	display: inline-block;
}

.wp-block-quote,
.wp-block-pullquote {
	border-left: 3px solid var(--gold-2);
	padding-left: 26px;
	font-family: var(--serif);
	font-style: italic;
	color: var(--lila);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--linie);
}

.seitenteile {
	font-size: 14px;
	color: var(--leise);
	margin-top: 24px;
}

.seitenteile a {
	color: var(--lila);
}

.archivwort {
	padding: 16px 0 4px;
	font-size: 16px;
	color: var(--tinte-2);
}

.artikelfuss .kat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--lila);
	background: var(--lila-blass);
	border: 1px solid var(--flieder);
	padding: 3px 11px;
	border-radius: 999px;
	text-decoration: none;
}

.schlagwoerter {
	font-size: 13.5px;
	color: var(--leiser);
}

.schlagwoerter a {
	color: var(--lila);
	text-decoration: none;
}

/* ---------- Kommentare ---------- */

.kommentarliste,
.kommentarliste .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kommentarliste .children {
	margin-top: 22px;
}

.kommentarliste > li.kommentar:last-child {
	border-bottom: 0;
}

.kommentar > .children,
.kommentar .comment-respond {
	grid-column: 1 / -1;
}

.kommentarliste .comment-reply-link,
.kommentarliste .comment-edit-link {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lila);
	text-decoration: none;
}

.navigation.comments-pagination {
	padding: 14px 0;
	font-size: 14px;
}

.navigation.comments-pagination a {
	color: var(--lila);
	text-decoration: none;
	margin-right: 12px;
}

.kformular .kzeile {
	margin-top: 14px;
}

.kformular .comment-form-cookies-consent,
.kformular .esistallesda-datenschutz {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 16px 0 4px;
}

.kformular .comment-form-cookies-consent input,
.kformular .esistallesda-datenschutz input {
	width: 19px;
	height: 19px;
	margin: 3px 0 0;
	accent-color: var(--lila);
	flex: none;
}

.kformular .comment-form-cookies-consent label,
.kformular .esistallesda-datenschutz label {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tinte-2);
}

.kformular .esistallesda-datenschutz label a {
	color: var(--lila);
}

.kformular .kformkopf {
	font-family: var(--serif);
	font-size: 23px;
	font-weight: 600;
	margin: 0 0 6px;
}

.kformular .kformkopf small {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 400;
	margin-left: 10px;
}

.kformular .logged-in-as {
	font-size: 14.5px;
	color: var(--leise);
	margin: 0 0 14px;
}

.kformular .logged-in-as a {
	color: var(--lila);
}

.comment-respond {
	padding-top: 6px;
}

/* ---------- Kleinigkeiten ---------- */

/* Nur die Tagesbotschaft behaelt die freie Hoehe. Aufmacher, Listeneintrag
   und Artikelbild regeln ihre Hoehe in haupt.css selbst. Standen sie hier
   mit drin, hob diese Datei das dortige height:100% wieder auf, und die
   Bilder sassen oben im Kasten statt ihn zu fuellen. */
.bildhalter img {
	height: auto;
}

.kachel.widget .kachelkopf h4 {
	margin: 0;
}

.fuss-raster ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menueband-innen .klapp a b {
	margin-left: 8px;
}

/* Der Sprunglink oben */
.screen-reader-text:focus {
	z-index: 100000;
}

@media (max-width: 900px) {

	.alignwide,
	.alignfull {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 700px) {

	.kformular .kzeile {
		grid-template-columns: 1fr;
	}
}

/* ---------- Suchfeld in der Seitenleiste ----------
   Die allgemeinen Widget-Regeln oben geben jedem Eingabefeld und jedem
   Knopf eine eigene Pille. Im Suchfeld ergibt das drei Pillen ineinander.
   Hier wird das zurueckgenommen: aussen eine Pille, innen nichts. */

.rand .widget .suchfeld {
	display: flex;
	align-items: stretch;
	width: auto;
	margin: 16px 20px 18px;
	padding: 0;
	border: 1px solid var(--linie-2);
	border-radius: 999px;
	background: #ffffff;
	overflow: hidden;
	box-shadow: none;
}

.rand .widget .suchfeld:focus-within {
	border-color: var(--flieder);
	box-shadow: 0 0 0 3px var(--lila-blass);
}

.rand .widget .suchfeld input[type="search"],
.rand .widget .suchfeld input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--tinte);
	padding: 12px 4px 12px 18px;
	-webkit-appearance: none;
	appearance: none;
}

.rand .widget .suchfeld input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.rand .widget .suchfeld button[type="submit"],
.rand .widget .suchfeld input[type="submit"] {
	flex: 0 0 auto;
	border: 0;
	border-radius: 0;
	background: var(--lila);
	color: #ffffff;
	padding: 0 20px;
	margin: 0;
	font-size: 0;
	letter-spacing: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.3s;
}

.rand .widget .suchfeld button[type="submit"]:hover {
	background: var(--lila-tief);
}

.rand .widget .suchfeld button svg {
	display: block;
}

@media (max-width: 640px) {
	.rand .widget .suchfeld { margin: 14px 16px 16px; }
}

/* ---------- Seiten wie Herzlich willkommen und Dankes-Spende ----------
   Diese Seiten bestehen aus reinem Fliesstext ohne Zwischentitel und ohne
   Bilder. Damit sie trotzdem ruhig und schoen wirken, bekommen sie einen
   eigenen Kopf, einen groesseren ersten Absatz und eine begrenzte Zeilen-
   laenge. Ein Absatz, der nur aus einem Link besteht, wird zum Knopf. */

.seitenkarte {
	padding: 0;
	overflow: hidden;
}

.seitenkopf {
	text-align: center;
	padding: 46px 30px 30px;
	background: linear-gradient(180deg, var(--lila-blass), rgba(255, 255, 255, 0));
	border-bottom: 1px solid var(--linie);
}

.seitenkopf .seitenzeichen {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid var(--flieder);
	color: var(--lila);
	box-shadow: 0 10px 24px -16px rgba(52, 36, 72, 0.6);
	margin-bottom: 16px;
}

.seitenkopf .seitenzeichen svg { display: block; width: auto; height: auto; max-width: 30px; }

.seitenart-danke .seitenkopf .seitenzeichen {
	border-color: var(--gold-2);
	color: var(--gold);
}

.seitenkopf h1 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(30px, 3.8vw, 42px);
	line-height: 1.14;
	color: var(--tinte);
	margin: 0;
	text-wrap: balance;
}

.seitenkopf .seitenlinie {
	display: block;
	width: 72px;
	height: 2px;
	margin: 20px auto 0;
	background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

.seitenbild {
	padding: 0;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	border-bottom: 1px solid var(--linie);
}

.seitenbild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.seitentext {
	max-width: 62ch;
	margin: 0 auto;
	padding: 38px 30px 46px;
}

.seitentext > p {
	font-size: 17.5px;
	line-height: 1.85;
	color: var(--tinte);
	margin: 0 0 22px;
}

/* Der erste Absatz traegt die Seite, deshalb etwas groesser und ruhiger. */
.seitentext > p:first-child {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.68;
	color: var(--tinte-2);
	margin-bottom: 28px;
}

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

.seitentext h2,
.seitentext h3 {
	font-family: var(--serif);
	font-weight: 600;
	color: var(--tinte);
	margin: 34px 0 12px;
}

.seitentext h2 { font-size: 26px; }
.seitentext h3 { font-size: 21px; }

.seitentext a {
	color: var(--lila);
	text-decoration: underline;
	text-decoration-color: var(--flieder);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.seitentext a:hover { color: var(--lila-tief); text-decoration-color: var(--lila); }

/* Steht ein Link allein in einem Absatz, wird daraus ein Knopf. */
.seitentext p:has(> a:only-child) {
	text-align: center;
	margin: 34px 0;
}

.seitentext p:has(> a:only-child) > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nacht);
	background: linear-gradient(100deg, var(--gold-2), #E5C77E);
	border: 1px solid var(--gold);
	border-radius: 999px;
	padding: 15px 32px;
	box-shadow: 0 14px 30px -18px rgba(160, 123, 43, 0.9);
	transition: transform 0.3s, box-shadow 0.3s;
}

.seitentext p:has(> a:only-child) > a:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -16px rgba(160, 123, 43, 0.95);
	color: var(--nacht);
}

/* Auf Rechtsseiten bleibt alles schlicht, dort zaehlt Lesbarkeit. */
.seitenart-recht .seitenkopf {
	padding: 34px 30px 22px;
	background: none;
}

.seitenart-recht .seitentext > p:first-child {
	font-family: var(--sans);
	font-size: 17.5px;
	line-height: 1.85;
	color: var(--tinte);
}

.seitenart-recht .seitentext {
	max-width: 72ch;
}

@media (max-width: 700px) {
	.seitenkopf { padding: 34px 20px 24px; }
	.seitentext { padding: 28px 20px 34px; }
	.seitentext > p:first-child { font-size: 19px; }
	.seitentext p:has(> a:only-child) > a { padding: 14px 24px; font-size: 12px; }
}

/* ---------- Wenn Rosi den Text mittig ausrichtet ----------
   Auf der Willkommensseite steht jeder Absatz zentriert. Mittiger Text
   liest sich nur bei kurzen Zeilen gut. Deshalb wird die Spalte dort
   schmaler, und die Ueberschrift steht ohnehin schon mittig. Die
   Ausrichtung selbst wird nicht angetastet, das ist ihre Entscheidung. */

.seitentext:has(p[style*="center"]),
.seitentext:has(p.has-text-align-center) {
	max-width: 50ch;
}

.seitentext p[style*="center"],
.seitentext p.has-text-align-center {
	text-wrap: pretty;
}

/* Der erste Absatz traegt die Seite nur dann, wenn er lang genug ist.
   Steht dort eine kurze Zeile wie "Mein Name ist Rosi", bleibt sie
   schlicht und der Text beginnt ruhig. */
.seitentext > p:first-child:has(+ p) {
	margin-bottom: 24px;
}

/* ---------- Bankdaten auf der Spendenseite ----------
   IBAN und BIC bekommen einen eigenen ruhigen Kasten mit Schreibmaschinen-
   ziffern, damit man sie abtippen kann, ohne sich zu verzaehlen. */

.seitentext .bankkasten {
	background: var(--karte-2);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--gold-2);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 26px 0;
	text-align: left;
	font-size: 16px;
	line-height: 1.9;
	color: var(--tinte);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
}

.seitentext .bankkasten p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 6px;
	text-align: left;
}

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

.seitentext .bankkasten strong { color: var(--lila); }

@media (max-width: 700px) {
	.seitentext .bankkasten { padding: 15px 16px; font-size: 15px; }
}

/* ---------- Rechtlicher Hinweis auf der Willkommensseite ----------
   Am Ende ihres Textes stehen zwei lange Absaetze mit einem Haftungs-
   ausschluss. Sie bekommen einen eigenen ruhigen Kasten, damit sie zwischen
   den persoenlichen Saetzen nicht mehr so hart wirken. Grau-lila und ohne
   goldenen Streifen, denn hier soll nichts hervorstechen. Die Ausrichtung
   der Absaetze bleibt unangetastet, das ist ihre Entscheidung. */

.seitentext .hinweiskasten {
	background: var(--karte-2);
	border: 1px solid var(--linie);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 30px 0;
}

.seitentext .hinweiskasten p {
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--leise);
	margin: 0 0 10px;
}

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

.seitentext .hinweiskasten strong {
	color: var(--tinte-2);
	font-weight: 600;
}

.seitentext .hinweiskasten a { color: var(--lila); }

.seitentext .hinweiskasten:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
	.seitentext .hinweiskasten { padding: 16px 17px; font-size: 15px; }
}

/* ---------- Spendenseite ----------
   Das Aussehen steht schon in haupt.css. Hier steht nur, was dort fehlt:
   die Innenabstaende, die im Entwurf direkt am Element standen, und die
   Betragskacheln als echte Links. Im Entwurf sind es Attrappen aus
   <button>. Damit sie auch ohne JavaScript funktionieren, sind es hier
   <a>. Deshalb braucht es dieselben Regeln noch einmal fuer a. */

.spendenkachel { padding: 32px 36px 34px; }

/* Der Text steht zentriert, wie die Buehne darueber. */
.spendenwort { text-align: center; }

.spendenwort p {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.6;
	color: var(--tinte);
	max-width: 62ch;
	margin: 0 auto 8px;
}

.spendenzeile {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 22px;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-top: 8px;
}

.spendenhinweis { flex: 1 1 240px; min-width: 0; }

.spendenhinweis p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--leiser);
	margin: 0 0 6px;
}

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

.spendenwahl a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 600;
	line-height: normal;
	padding: 18px 10px;
	background: #ffffff;
	border: 1px solid var(--linie-2);
	border-radius: 999px;
	color: var(--tinte);
	overflow-wrap: anywhere;
	transition: background .3s, border-color .3s, color .3s, transform .3s;
}

.spendenwahl a:not([href]) { cursor: default; }

.spendenwahl a span {
	display: block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--leiser);
	margin-top: 4px;
}

.spendenwahl a[href]:hover {
	border-color: var(--gold-2);
	background: var(--gold-blass);
	transform: translateY(-2px);
}

.spendenwahl a[href]:focus-visible {
	outline: 2px solid var(--lila);
	outline-offset: 3px;
}

.spendenwahl a.gewaehlt {
	background: var(--gold);
	border-color: var(--gold);
	color: #ffffff;
}

.spendenwahl a.gewaehlt span { color: rgba(255, 255, 255, 0.78); }

.spendenwahl a[href].gewaehlt:hover {
	background: #856421;
	border-color: #856421;
	color: #ffffff;
}

/* Bleiben nur ein oder zwei Infofelder, ruecken sie auf die ganze
   Breite. Sonst bliebe eine leere Spalte stehen. */
.dreispalt.anzahl-2 { grid-template-columns: repeat(2, 1fr); }
.dreispalt.anzahl-1 { grid-template-columns: 1fr; }

/* ---------- Die Bankdaten zum Aufklappen ----------
   Gebaut aus details und summary. Das braucht kein JavaScript und ist mit
   der Tastatur bedienbar. Geschlossen eine schmale, ruhige Leiste. Offen
   kommt der Kasten mit den Daten dazu. */

.bankklappe {
	background: var(--karte);
	border: 1px solid var(--linie);
	border-radius: 18px;
	box-shadow: var(--schatten);
	overflow: hidden;
}

.bankklappe > summary {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 22px;
	cursor: pointer;
	list-style: none;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--tinte-2);
	transition: background .25s, color .25s;
}

.bankklappe > summary::-webkit-details-marker { display: none; }
.bankklappe > summary::marker { content: ""; }

.bankklappe > summary:hover { background: var(--lila-blass); color: var(--tinte); }

.bankklappe > summary:focus-visible {
	outline: 2px solid var(--lila);
	outline-offset: -3px;
}

.bankklappe .bankzeichen {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--lila-blass);
	border: 1px solid var(--flieder);
	color: var(--lila);
}

.bankklappe .bankwort { flex: 1 1 auto; min-width: 0; }

.bankklappe .bankpfeil {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--leiser);
	transition: transform .25s;
}

.bankklappe[open] > summary { border-bottom: 1px solid var(--linie); }
.bankklappe[open] .bankpfeil { transform: rotate(180deg); }

body.ruhig .bankklappe .bankpfeil,
body.ruhig .bankklappe > summary { transition: none; }

.bankinhalt { padding: 18px 22px 20px; }

.bankzeilen {
	margin: 0;
	font-family: var(--sans);
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--tinte);
	background: var(--karte-2);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--gold-2);
	border-radius: 12px;
	padding: 14px 17px;
	overflow-wrap: anywhere;
}

@media (max-width: 700px) {
	.spendenkachel { padding: 24px 18px 26px; }
	.spendenwort p { font-size: 18.5px; }
	.spendenwahl { gap: 10px; margin: 20px 0 16px; }
	.spendenwahl a { font-size: 21px; padding: 15px 8px; }
	.spendenwahl a span { font-size: 11px; letter-spacing: 0.06em; }
	.paypalknopf { padding: 14px 24px; font-size: 13px; }
	.spendenhinweis { flex-basis: 100%; }
	.bankklappe > summary { padding: 13px 16px; gap: 10px; font-size: 14.5px; }
	.bankinhalt { padding: 14px 16px 16px; }
	.bankzeilen { font-size: 15px; padding: 13px 14px; }
}

/* ---------- Willkommensseite ----------
   Der Vorstellungsbereich ist nach derselben Aufteilung gebaut wie die
   Tagesbotschaft auf der Startseite: links das Bild in einem weichen
   Verlauf, rechts der Text. Fehlt eines von beiden, steht nur eine Spalte
   da, ohne Luecke. Deshalb ist eine Spalte der Normalfall und die zweite
   kommt erst mit der Klasse "zweispaltig" dazu. */

.vorstellkarte {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
}

.vorstellkarte.zweispaltig { grid-template-columns: 400px 1fr; }

.vorstellbild {
	padding: 26px 22px;
	background: linear-gradient(158deg, var(--lila-blass), var(--gold-blass) 88%);
	border-bottom: 1px solid var(--linie);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vorstellkarte.zweispaltig .vorstellbild {
	border-bottom: 0;
	border-right: 1px solid var(--linie);
}

/* Steht das Bild allein in der Kachel, braucht es unten keine Linie. */
.vorstellbild:last-child { border-bottom: 0; }

.vorstellwort {
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vorstellwort p {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.72;
	color: var(--tinte-2);
	margin: 0 0 14px;
	max-width: 60ch;
}

.vorstellwort p:last-child { margin-bottom: 0; }
.vorstellwort em { font-style: italic; color: var(--lila); }
.vorstellwort a { color: var(--lila); }

/* Ohne Bild steht der Text allein in der Kachel. Dann rueckt er in die
   Mitte, sonst klebte er links und rechts bliebe eine grosse Leere. */
.vorstellkarte:not(.zweispaltig) .vorstellwort { padding: 34px 40px; }

.vorstellkarte:not(.zweispaltig) .vorstellwort p {
	max-width: 66ch;
	margin-left: auto;
	margin-right: auto;
}

/* Ohne Bild war die Kachel eine weisse Flaeche mit Text darin. Ein zarter
   Schimmer nach oben und ein goldener Faden darueber geben ihr Halt, ohne
   vom Text abzulenken. */
.vorstellkarte:not(.zweispaltig) {
	background:
		radial-gradient(110% 130% at 50% 0%, rgba(240, 232, 250, 0.7), rgba(255, 255, 255, 0) 68%),
		var(--karte);
}

.vorstellkarte:not(.zweispaltig) .vorstellwort::before {
	content: "";
	display: block;
	width: 46px;
	height: 1px;
	margin: 0 auto 24px;
	background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

/* Der Seitentext von Rosi steht unter den Infofeldern. Er braucht dort
   keinen zweiten Seitenkopf, die Ueberschrift steht schon auf der Buehne. */
.seitenart-willkommen.ohne-kopf { padding: 0; }

/* ---------- Rosis eigene Worte auf der Willkommensseite ----------
   Ihr Text ist persoenlich und in kurzen Zeilen geschrieben, fast wie ein
   Brief. Als nuechterner Flattertext in einem weissen Kasten wirkte das
   kalt. Deshalb bekommt dieser Bereich einen warmen Grund, die Schrift mit
   Serifen, viel Luft zwischen den Zeilen und oben ein kleines Zeichen. Die
   Ausrichtung selbst bleibt, wie Rosi sie gesetzt hat. */

.wortkarte {
	position: relative;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(240, 232, 250, 0.85), rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, #FFFDFA, var(--karte) 46%);
	overflow: hidden;
}

/* Ein schmaler goldener Faden ganz oben, wie bei einem guten Briefbogen. */
.wortkarte::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold-2) 22%, var(--gold-2) 78%, transparent);
}

/* Das Zeichen zwischen zwei feinen Strichen. */
.wortzier {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	max-width: 320px;
	margin: 0 auto;
	padding: 40px 24px 0;
}

.wortzier .wortstrich {
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--flieder));
}

.wortzier .wortstrich:last-child {
	background: linear-gradient(90deg, var(--flieder), transparent);
}

.wortzier .wortzeichen {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid var(--gold-2);
	color: var(--gold);
	box-shadow: 0 10px 24px -18px rgba(160, 123, 43, 0.9);
}

.wortzier .wortzeichen svg { display: block; width: auto; height: auto; max-width: 26px; }

.wortkarte .seitentext {
	max-width: 52ch;
	padding: 30px 34px 50px;
}

.wortkarte .seitentext > p {
	font-family: var(--serif);
	font-size: 19.5px;
	line-height: 1.92;
	color: var(--tinte-2);
	margin: 0 0 24px;
	text-wrap: pretty;
}

/* Die erste Zeile ist ihre Vorstellung. Sie steht groesser und in Lila,
   damit der Text einen Anfang hat, an dem das Auge haengen bleibt. */
.wortkarte .seitentext > p:first-child {
	font-family: var(--serif);
	font-size: 25px;
	line-height: 1.5;
	color: var(--lila-tief);
	margin-bottom: 30px;
}

.wortkarte .seitentext > p:last-child { margin-bottom: 0; }

/* Die Unterschrift: groesser, golden, kursiv, mit einem kleinen Strich
   darueber. So schliesst der Text sichtbar ab. */
.wortkarte .seitentext p.unterschrift {
	font-family: var(--serif);
	font-style: italic;
	font-size: 27px;
	line-height: 1.3;
	color: var(--gold);
	margin: 34px 0 8px;
}

.wortkarte .seitentext p.unterschrift::before {
	content: "";
	display: block;
	width: 54px;
	height: 1px;
	margin: 0 auto 16px;
	background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

/* Steht die Unterschrift links, wandert auch ihr Strich nach links. */
.wortkarte .seitentext p.unterschrift:not([style*="center"]):not(.has-text-align-center)::before {
	margin-left: 0;
	background: linear-gradient(90deg, var(--gold-2), transparent);
}

/* Der Hinweiskasten war ein flaches graues Rechteck und stach unangenehm
   heraus. Jetzt ist es eine ruhige weisse Karte mit goldener Kante, einer
   kleinen Ueberschrift und linksbuendigem Text: langer Sachtext liest sich
   mittig schlecht, auch wenn der persoenliche Teil mittig bleibt. */
.wortkarte .seitentext .hinweiskasten {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--linie);
	border-left: 3px solid var(--gold-2);
	border-radius: 14px;
	padding: 26px 26px 22px;
	margin: 38px 0 30px;
	box-shadow: 0 18px 40px -32px rgba(52, 36, 72, 0.8);
	text-align: left;
}

.wortkarte .seitentext .hinweiskasten::before {
	content: "Hinweis";
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 12px;
}

/* Der Hinweis ist langer Sachtext. Mittig gesetzt franst er aus und liest
   sich muehsam, deshalb steht er hier linksbuendig, auch wenn Rosi die
   Absaetze mittig angelegt hat. Ihr persoenlicher Text bleibt unberuehrt. */
.wortkarte .seitentext .hinweiskasten p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.8;
	color: var(--leise);
	margin: 0 0 12px;
	text-align: left !important;
}

.wortkarte .seitentext .hinweiskasten p:last-child { margin-bottom: 0; }

.wortkarte .seitentext .hinweiskasten strong {
	color: var(--tinte-2);
	font-weight: 700;
}

@media (max-width: 700px) {
	.wortzier { padding: 30px 18px 0; gap: 14px; }
	.wortzier .wortzeichen { width: 40px; height: 40px; }
	.wortkarte .seitentext { padding: 24px 20px 36px; }
	.wortkarte .seitentext > p { font-size: 18px; line-height: 1.85; }
	.wortkarte .seitentext > p:first-child { font-size: 22px; }
	.wortkarte .seitentext p.unterschrift { font-size: 24px; }
	.wortkarte .seitentext .hinweiskasten { padding: 20px 18px 18px; }
}

/* Im Zusatzschalter "verbundene Bloecke" laufen die Bildspalten aller
   Bloecke in einer Bahn. Der Vorstellungsbereich reiht sich dort ein. */
body.verbunden .haupt > .vorstellkarte.zweispaltig { grid-template-columns: var(--bildbahn) 1fr; }

body.verbunden .haupt > .vorstellkarte.zweispaltig .vorstellbild {
	background: linear-gradient(90deg, var(--lila-blass), var(--gold-blass));
	border-right: 1px solid var(--linie);
	padding: 26px 24px;
}

body.verbunden .haupt > .vorstellkarte .vorstellwort { padding: 26px 28px; }

@media (max-width: 900px) {
	.vorstellkarte.zweispaltig,
	body.verbunden .haupt > .vorstellkarte.zweispaltig { grid-template-columns: 1fr; }

	.vorstellkarte.zweispaltig .vorstellbild,
	body.verbunden .haupt > .vorstellkarte.zweispaltig .vorstellbild {
		border-right: 0;
		border-bottom: 1px solid var(--linie);
	}
}

@media (max-width: 700px) {
	.vorstellbild { padding: 18px 14px; }
	.vorstellwort { padding: 22px 18px; }
	.vorstellwort p { font-size: 17.5px; }
}

/* Das Unendlichkeitszeichen ist breiter als hoch. Im runden Feld der
   Infokacheln darf es deshalb nicht auf ein Quadrat gezwungen werden. */
.infofeld .zeichen svg {
	display: block;
	width: auto;
	height: auto;
	max-width: 22px;
	max-height: 22px;
}