/* ==========================================================================
   sphere publishers – Gestaltung
   Übernommen aus dem freigegebenen Entwurf (Neubau/Entwurf/gestaltung.css, Fassung 8, 13.10.2026),
   dessen Maße an der alten Avada-Website gemessen sind. Hier angepasst an das Markup der
   WordPress-Blöcke. Farben, Schriften und der Grundstil der Knöpfe stehen in theme.json
   (dort sind sie auch im Website-Editor einstellbar); hier steht, was theme.json nicht kann:
   feste Maße, Raster, Kopf-Verhalten, Diashow.

   Wo WordPress eigene Regeln mit hoher Gewichtung mitbringt (Galerie, Navigation, Abstände
   zwischen Blöcken), sind die Selektoren hier bewusst gleich stark oder stärker – das steht
   jeweils dabei.
   ========================================================================== */

:root {
	--lila: var(--wp--preset--color--lila);
	--schwarz: var(--wp--preset--color--schwarz);
	--weiss: var(--wp--preset--color--weiss);
	--linie: var(--wp--preset--color--linie);
	--feld: var(--wp--preset--color--feld);
	--leise: var(--wp--preset--color--leise);
	--schrift-text: var(--wp--preset--font-family--roboto);
	--schrift-titel: var(--wp--preset--font-family--roboto-condensed);
	--breite: 1200px;       /* Avada site_width */
	--rand: 30px;           /* Seitenrand, auch auf dem Handy */
	--kopf: 160px;          /* Kopfhöhe, auch auf dem Handy */
	--kopf-fest: 65px;      /* mitlaufender Kopf (Avada: Shrinkage) */
	--spalte: 264px;        /* linke Buchspalte = Breite aller Knöpfe */
}

html { -webkit-text-size-adjust: 100%; }
@media (min-width: 801px) { html { scroll-padding-top: 85px; } }   /* Sprungziele unter dem festen Kopf */
body.menue-offen { overflow: hidden; }
.nur-vorleser {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0 !important;
}
.ohne-umbruch { white-space: nowrap; }
/* Lange Adressen (Datenschutzerklärung) dürfen umbrechen, statt die Seite auf dem Handy zu verbreitern */
.inhalt :where(p, li, h1, h2, h3, h4) { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }

/* WordPress setzt zwischen Kopf, Inhalt und Fuß je 20 px Abstand (blockGap) – die alte Seite hatte keinen */
.wp-site-blocks > * { margin-block: 0; }

.innen { width: min(var(--breite), 100% - 2 * var(--rand)); margin-inline: auto; }

/* ==========================================================================
   Knöpfe: Avada „XLarge“ – schwarz, beim Darüberfahren lila (Farben/Schrift in theme.json).
   Alle gleich groß: 264 × 55 = Breite der linken Buchspalte, einzeilig; zu lange
   Beschriftungen enden mit „…“ (der volle Text steht im title).
   ========================================================================== */
/* WordPress setzt den Link auf 100 % seines Rahmens (.wp-block-button) – darum die Breite am Rahmen */
.wp-block-buttons > .wp-block-button { width: var(--spalte); max-width: 100%; }
.wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; }
.wp-block-button__link,
.wpcf7 .wpcf7-submit,
.formular .sb-absenden {
	display: inline-block; box-sizing: border-box; vertical-align: top;
	max-width: 100%; height: 55px;
	text-align: center; text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
	transition: background-color .2s linear; cursor: pointer;
}
/* Der Formular-Knopf ist ein <input> – theme.json erreicht ihn nicht, darum der Stil hier vollständig */
.formular .sb-absenden { width: var(--spalte); border: 0; }
.wpcf7 .wpcf7-submit {
	width: var(--spalte); padding: 0 20px; border: 0; border-radius: 0;
	background: var(--schwarz); color: var(--weiss);
	font: 400 18px/55px var(--schrift-titel); text-transform: uppercase;
}
.wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-submit:focus { background: var(--lila); }
.wp-block-buttons { gap: 10px; }

/* ==========================================================================
   Kopf
   ========================================================================== */
.kopf {
	position: relative; z-index: 50; height: var(--kopf);
	background-color: var(--lila);
	transition: height .3s ease-in-out, background-color .25s ease-in-out, box-shadow .25s;
}
.kopf > .innen { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.kopf > .innen > * { margin: 0; }                       /* Blockabstände im Flex-Raster aus */

/* Logo: zwei Bilder übereinander – beim Mitlaufen wird gleitend vom weißen zum
   dunklen Logo überblendet, während der Rahmen schrumpft (wie Avada) */
.kopf__logo { position: relative; display: block; width: 200px; height: 120px; flex: none;
	transition: width .3s ease-in-out, height .3s ease-in-out; }
.kopf__logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .25s ease-in-out; }
.kopf__logo .logo-dunkel { opacity: 0; }

/* Menü (Navigations-Block). Farbe am Listenpunkt: WordPress setzt den Link selbst auf
   „color: inherit“ mit hoher Gewichtung – so erbt er unsere Farbe. */
.wp-block-navigation.kopf__menue,
.kopf__menue .wp-block-navigation__container { gap: 45px; }   /* nav_padding 45 */
.kopf__menue { font: 400 20px/1 var(--schrift-titel); color: var(--weiss); }
.kopf__menue .wp-block-navigation-item { color: var(--weiss); transition: color .2s linear; }
.kopf__menue .wp-block-navigation-item:hover,
.kopf__menue .current-menu-item,
.kopf__menue .current-menu-ancestor { color: var(--schwarz); }
.kopf__knopf { display: none; }

/* Startseite: Kopf liegt durchsichtig über der Diashow (wie bisher) */
.home .kopf:not(.is-fixiert) { position: absolute; inset: 0 0 auto 0; background-color: transparent; }

/* Mitlaufender Kopf ab 801 px: sofort beim Scrollen, schrumpft auf 65 px */
@media (min-width: 801px) {
	.kopf.is-fixiert {
		position: fixed; inset: 0 0 auto 0; height: var(--kopf-fest);
		background-color: rgba(255, 255, 255, .85);                 /* header_sticky_bg_color */
		box-shadow: 0 1px 3px rgba(0, 0, 0, .118);                  /* header_sticky_shadow */
	}
	.kopf.is-fixiert .kopf__logo { width: 92px; height: 55px; }
	.kopf.is-fixiert .kopf__logo .logo-hell { opacity: 0; }
	.kopf.is-fixiert .kopf__logo .logo-dunkel { opacity: 1; }
	.kopf.is-fixiert .kopf__menue .wp-block-navigation-item { color: var(--schwarz); }   /* header_sticky_menu_color */
	.kopf.is-fixiert .kopf__menue .wp-block-navigation-item:hover,
	.kopf.is-fixiert .kopf__menue .current-menu-item,
	.kopf.is-fixiert .kopf__menue .current-menu-ancestor { color: var(--lila); }
	/* Admin-Leiste (nur angemeldet) schiebt den festen Kopf nach unten */
	.admin-bar .kopf.is-fixiert { top: 32px; }
}
/* Platzhalter: hält auf Unterseiten die 160 px, damit der Inhalt beim Festwerden nicht springt */
.kopf-platz { display: none; height: var(--kopf); }
@media (min-width: 801px) { body:not(.home) .kopf.is-fixiert + .kopf-platz { display: block; } }

/* Handy und Tablet hochkant (bis 800 px): wie bisher – lila, großes Logo, drei weiße Striche;
   das Menü legt sich als helle Fläche über die Seite (Avada „Flyout“) */
@media (max-width: 800px) {
	.kopf, .home .kopf:not(.is-fixiert) { position: relative; background-color: var(--lila); height: var(--kopf); }
	.kopf__knopf {
		display: block; position: relative; z-index: 70;
		width: 44px; height: 44px; margin-right: -3px !important; padding: 0;
		background: none; border: 0; cursor: pointer;
	}
	.kopf__knopf span {
		position: absolute; left: 3px; width: 38px; height: 2.5px; background: var(--weiss);
		transition: transform .3s ease, opacity .2s, background-color .3s, top .3s;
	}
	.kopf__knopf span:nth-child(1) { top: 11px; }
	.kopf__knopf span:nth-child(2) { top: 21px; }
	.kopf__knopf span:nth-child(3) { top: 31px; }
	.menue-offen .kopf__knopf span { background: var(--lila); }
	.menue-offen .kopf__knopf span:nth-child(1) { top: 21px; transform: rotate(45deg) scaleX(.85); }
	.menue-offen .kopf__knopf span:nth-child(2) { opacity: 0; }
	.menue-offen .kopf__knopf span:nth-child(3) { top: 21px; transform: rotate(-45deg) scaleX(.85); }

	.wp-block-navigation.kopf__menue {
		position: fixed; inset: 0; z-index: 60;
		background: rgba(255, 255, 255, .95);                          /* flyout_menu_background_color */
		display: flex; align-items: center; justify-content: center;
		opacity: 0; visibility: hidden;
		transition: opacity .4s, visibility 0s linear .4s;            /* flyout_menu_direction: fade */
	}
	.menue-offen .wp-block-navigation.kopf__menue { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
	.kopf__menue .wp-block-navigation__container { flex-direction: column; align-items: center; gap: 28px; }   /* flyout_menu_item_padding */
	.kopf__menue { font-size: 24px; line-height: 30px; }
	.kopf__menue .wp-block-navigation-item { color: var(--schwarz); }
	.kopf__menue .wp-block-navigation-item:hover,
	.kopf__menue .current-menu-item,
	.kopf__menue .current-menu-ancestor { color: var(--lila); }
}

/* ==========================================================================
   Inhalt: Abstände oben und unten
   ========================================================================== */
/* Erster sichtbarer Block 50 px unter dem Kopf (Katalog: Einleitung bei 210 px); Diashow 40 px */
/* Die Bausteine im Hauptbereich (unsichtbare Überschrift, Seiteninhalt) ohne Blockabstand dazwischen */
.wp-block-group.inhalt > * { margin-block-start: 0; }
.inhalt > .wp-block-post-content > :first-child:not(.alignfull) { margin-top: 50px; }
.inhalt > .wp-block-post-content > .wp-block-gallery.is-style-diashow:not(.diashow--kopf):first-child { margin-top: 40px; }
.inhalt > .wp-block-post-content > .alignfull:first-child { margin-top: 0; }
/* Text unter einer Diashow (Verlag): 42 px wie die Buchseite */
.inhalt > .wp-block-post-content > .wp-block-gallery.is-style-diashow:not(.diashow--kopf) + * { margin-top: 42px; }
.inhalt { padding-bottom: 50px; }

/* Einleitung (z. B. Katalog): mittig, 768 px wie bisher */
.inhalt .einleitung { max-width: 768px; text-align: center; }
.einleitung a { text-decoration: underline; }

/* Trennlinie: fein, 736 px wie bisher (sep_color) */
.inhalt .wp-block-separator {
	border: 0; border-top: 1px solid var(--linie); opacity: 1;
	width: 100%; max-width: 736px; margin-block: 51px 64px;
}
.inhalt .wp-block-separator.trenner--buch { margin-block: 60px 50px; }
/* Handy: auf der Startseite (ohne Diashow) keine Trennlinie – wie bisher; die Bücher rücken nach */
@media (max-width: 640px) {
	.home .inhalt .wp-block-separator { display: none; }
	.home .inhalt .buecher-liste { margin-top: 68px; }
}

/* Überschriften und Absätze in Textseiten (Verlag, Impressum, Datenschutz …) */
.inhalt > .wp-block-post-content > h2 { margin-top: 50px; }
.inhalt > .wp-block-post-content > h3 { margin-top: 30px; }
.inhalt > .wp-block-post-content > :is(h2, h3) + * { margin-top: 10px; }

/* ==========================================================================
   Diashow (Galerie-Block mit Stil „Diashow“)
   Alle laufen von selbst (3 s je Bild, siehe TAKT in sphere.js), ohne Pfeile; die Punkte wählen das Bild (Christoph, 14.10.2026).
   Grundform: zeigt das ganze Bild (Buchseiten, Verlag, Aktuell), Punkte darunter, Klick vergrößert.
   Mit Klasse „diashow--kopf“: breites Band 1440 × 350 unter dem Kopf, Punkte im Bild.
   WordPress' Galerie-Regeln enthalten „:not(#individual-image)“ (zählt wie eine ID) –
   darum tragen die Regeln hier dieselbe Kennung, um sich durchzusetzen.
   ========================================================================== */
.wp-block-gallery.is-style-diashow { position: relative; display: block; padding: 0; gap: 0; }
.inhalt .wp-block-gallery.is-style-diashow:not(.diashow--kopf) { width: 100%; max-width: var(--breite); }
.diashow__buehne { position: relative; overflow: hidden; aspect-ratio: 1440 / 350; background: #ece8f1; touch-action: pan-y; }
.wp-block-gallery.is-style-diashow:not(.diashow--kopf) .diashow__buehne { aspect-ratio: auto; height: clamp(120px, 24vw, 340px); background: var(--weiss); cursor: zoom-in; }

/* Bevor das Skript läuft: nur das erste Bild, in der Höhe der Bühne – nichts springt */
.wp-block-gallery.is-style-diashow:not(.ist-bereit) > figure.wp-block-image:not(#individual-image) ~ figure.wp-block-image { display: none; }
.wp-block-gallery.is-style-diashow:not(.ist-bereit) > figure.wp-block-image:not(#individual-image) { width: 100%; aspect-ratio: 1440 / 350; margin: 0; }
.wp-block-gallery.is-style-diashow:not(.diashow--kopf):not(.ist-bereit) > figure.wp-block-image:not(#individual-image) { aspect-ratio: auto; height: clamp(120px, 24vw, 340px); }

.wp-block-gallery.is-style-diashow .diashow__buehne > figure.wp-block-image:not(#individual-image) {
	position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
	/* Jedes Bild füllt die Bühne. „!important“, weil WordPress Galerien mit genau zwei Bildern je 50 % Breite
	   gibt (Regel mit „:first-child:nth-last-child(2)“, stärker als diese) – seit die Pfeile nicht mehr in der
	   Bühne stehen, griff sie bei „Gera ostmodern“ und rückte das Bild nach links (gefunden 14.10.2026). */
	width: auto !important;
}
.wp-block-gallery.is-style-diashow .diashow__buehne > figure.wp-block-image.ist-aktiv:not(#individual-image) {
	opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s;
}
.wp-block-gallery.is-style-diashow figure.wp-block-image:not(#individual-image) img {
	width: 100%; height: 100%; max-width: 100% !important; object-fit: cover;
}
.wp-block-gallery.is-style-diashow:not(.diashow--kopf) figure.wp-block-image:not(#individual-image) img { object-fit: contain; }
/* Bildunterschriften einzelner Bilder stehen unter der Bühne (Skript), nicht im Bild – darum auch ohne den
   weichgezeichneten Streifen, den WordPress unten ins Bild legt, sobald es eine Unterschrift hat
   („:has(figcaption)::before“ mit backdrop-filter): Er ließ den unteren Bildrand ausgefranst aussehen
   (Christoph, 14.10.2026, BUCH ZWEI; ebenso Aktuell, HdK, WBS70). */
.wp-block-gallery.is-style-diashow figure.wp-block-image:not(#individual-image) figcaption { display: none; }
.wp-block-gallery.is-style-diashow figure.wp-block-image:not(#individual-image)::before { content: none; }
.wp-block-gallery.is-style-diashow > figcaption,
.wp-block-gallery .diashow__unterschrift { font-size: 11px; line-height: 1.4; color: var(--leise); text-align: center; margin: 8px 0 0; }   /* .wp-block-gallery: Galerie setzt Abstände ihrer Kinder auf 0 */

.diashow__punkte { position: absolute; inset: auto 0 14px 0; z-index: 3; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wp-block-gallery.is-style-diashow:not(.diashow--kopf) .diashow__punkte { position: static; margin-top: 6px; }
.diashow__punkte li { margin: 0; }
.diashow__punkte button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.diashow__punkte button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--lila); transition: background-color .2s; }
.diashow__punkte button[aria-current="true"]::before { background: var(--lila); }
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-diashow .diashow__buehne > figure.wp-block-image:not(#individual-image) { transition: none; }
}

/* Kopf-Diashow der Startseite: wie bisher 1440 × 350, auf dem Handy aus */
@media (max-width: 640px) {
	.wp-block-gallery.diashow--kopf { display: none !important; }
}

/* Großansicht */
.grossbild { position: fixed; inset: 0; z-index: 200; background: rgba(20, 16, 26, .94); display: grid; place-items: center; padding: 48px 16px; }
.grossbild[hidden] { display: none; }
.grossbild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.grossbild button { position: absolute; border: 0; background: none; color: var(--weiss); cursor: pointer; width: 56px; height: 56px; display: grid; place-items: center; }
.grossbild__zu { top: 8px; right: 8px; }
.grossbild__zurueck { left: 4px; top: 50%; translate: 0 -50%; }
.grossbild__weiter { right: 4px; top: 50%; translate: 0 -50%; }
.grossbild svg { width: 30px; height: 30px; }

/* ==========================================================================
   Bücher: Kacheln auf Start- und Katalogseite (Abfrage-Block)
   ========================================================================== */
.inhalt .buecher-liste { margin-top: 0; }
.wp-block-post-template.buecher {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4%; row-gap: 70px;
	margin: 0; padding: 0; list-style: none; text-align: center;
}
.wp-block-post-template.buecher > li { margin: 0; }
.buecher > li > * { margin-block: 0; }                          /* schwächer als die Titelregel darunter */

/* Cover: der Schatten liegt am Bild selbst – das Bild behält sein Seitenverhältnis (--v aus functions.php) */
.wp-block-post-featured-image.buchcover,
.wp-block-image.buchcover { height: 285px; margin: 0; }
.wp-block-post-featured-image.buchcover > a { display: flex; height: 100%; align-items: flex-end; justify-content: center; }
.buchcover img,
.wp-block-post-featured-image.buchcover img {
	/* höchstens 285 px hoch, nie breiter als die Spalte – die Fläche steht schon vor dem Laden fest */
	--h: 285px;
	width: min(100%, var(--h) * var(--v, 1)); height: auto; aspect-ratio: var(--v, auto);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
	transition: transform .35s ease, box-shadow .35s ease;
}
/* Anheben beim Darüberfahren – über Cover oder Titel */
@media (hover: hover) {
	.buecher > li:has(a:hover) .buchcover img {
		transform: translateY(-7px);
		box-shadow: 0 10px 14px 0 rgba(0, 0, 0, .2), 0 12px 28px 0 rgba(0, 0, 0, .19);
	}
}
.buecher .buch-kachel__titel { font-size: 24px; margin: 20px 0 10px; }
.buecher .buch-kachel__titel a { text-decoration: none; }
.buch-kachel__daten { font: 400 12px/1.3 var(--schrift-titel); margin: 0; }

@media (max-width: 1024px) { .wp-block-post-template.buecher { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6%; } }
@media (max-width: 640px) {
	.wp-block-post-template.buecher { grid-template-columns: minmax(0, 1fr); row-gap: 59px; }
	.buecher .buch-kachel__titel { margin-top: 10px; }
}

/* ==========================================================================
   Buchseite (Spalten 264 | 48 | 422 wie bisher)
   ========================================================================== */
.inhalt .wp-block-group.buch {
	max-width: 734px; margin-top: 42px;
	display: grid; grid-template-columns: var(--spalte) minmax(0, 1fr); column-gap: 48px;   /* minmax: breite Knöpfe dürfen die Spalte nicht aufdrücken */
	grid-template-areas: "info titel" "info text"; align-items: start;
}
.buch > * { margin-block: 0; }
.buch > .buch__titel { grid-area: titel; font-size: 30px; }
.buch > .buch__info { grid-area: info; }
.buch > .buch__text { grid-area: text; margin-top: 31px; }
.buch__info > * { margin-block: 0; }
.buch__info > .buch__preis { font: 400 30px/42px var(--schrift-titel); margin-bottom: 10px; }
.buch__info > .buch__daten { margin: 43px 0 20px; }          /* unten 20: Abstand zum Text, wenn alles untereinander steht */
.buch__text > h2 { margin: 50px 0 20px; }
.buch__text > h2 + * { margin-top: 0; }

/* Handy: eine Spalte, Titel zuerst (bisher stand der Preis über allem) */
@media (max-width: 760px) {
	.inhalt .wp-block-group.buch { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "info" "text"; }
	.buch > .buch__info { margin-top: 20px; }
}

/* Rezensionen: Knöpfe wie „Bestellen“, darunter klein Datum und Art */
.wp-block-group.rezensionen { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rezensionen > * { margin: 0; }
.wp-block-group.rezension { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 100%; }   /* stretch: auf 320 px wird der Knopf schmaler statt überzustehen */
.rezension > * { margin: 0; }
.rezension .wp-block-button__link { font-size: 15px; }   /* gleiche Knopfgröße, Schrift etwas kleiner als „Bestellen“ */
.rezension__info { font: 400 12px/1.3 var(--schrift-titel); }

/* Kacheln in zwei Spalten, linksbündig (Frühere Auflagen, Presse): Bausteine der Startseite,
   Cover 220 px hoch */
.inhalt .wp-block-group.auflagen { max-width: 734px; }
.auflagen > h2 { margin: 0 0 30px; }
.wp-block-group.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 48px; }
.kacheln > * { margin: 0; }
.kachel > * { margin-block: 0; }
.kachel > .wp-block-image.buchcover { height: 220px; display: flex; align-items: flex-end; justify-content: flex-start; }
.kachel > .buchcover img { --h: 220px; }
.kachel > h3 { font-size: 20px; margin: 20px 0 10px; }
.kachel > .kachel__daten { font: 400 12px/1.3 var(--schrift-titel); }
.kachel > .rezensionen { margin-top: 24px; }
.kachel a:not(.wp-block-button__link) { text-decoration: underline; }
@media (max-width: 640px) { .wp-block-group.kacheln { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Formulare: Bestellen, Widerruf, Newsletter (eigene Plugins) und Kontakt (Contact Form 7)
   ========================================================================== */
.inhalt .wp-block-group.bestellen { max-width: 734px; margin-top: 70px; padding: 40px 0 20px; border-top: 1px solid var(--linie); }
.bestellen > h2 { margin-bottom: 10px; }
.bestellen > h2 + * { margin-top: 0; }

.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.formular h3 { margin: 24px 0 10px; }
.formular fieldset.wahl { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.formular .ganz { grid-column: 1 / -1; }
.formular .feld { display: grid; gap: 4px; font-size: 14px; }
.formular :is(input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select) {
	font: 300 15px/1.4 var(--schrift-text); color: var(--schwarz);
	background: var(--feld); border: 0; border-radius: 0; padding: 0 12px; width: 100%; box-sizing: border-box;
}
.formular :is(input[type=text], input[type=email], input[type=tel], input[type=number], select) { height: 40px; }
.formular :is(textarea) { height: 120px; padding-top: 10px; resize: vertical; display: block; }
.formular input[type=number] { width: 70px; }
.formular select { appearance: none; padding-right: 32px; cursor: pointer;
	background: var(--feld) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
.formular .wahl label { display: flex; gap: 10px; align-items: flex-start; }
.formular :is(input[type=radio], input[type=checkbox]) { margin-top: 3px; accent-color: var(--schwarz); }
.formular .hinweis, .inhalt p.hinweis { font-size: 13px; color: var(--leise); margin: 0; }
.formular .hinweis a, .inhalt p.hinweis a { color: inherit; }
.formular [hidden] { display: none !important; }
/* Nur Contact Form 7 (Kontaktformular) */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .wahl .wpcf7-list-item { display: flex; margin: 0 0 6px; }
.wpcf7 .wahl .wpcf7-list-item:last-child { margin-bottom: 0; }   /* der Abstand zum Hinweis kommt vom Raster */
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; color: #b00020; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 10px 14px; border-width: 1px; font-size: 14px; }
/* Das Warte-Symbol von CF7 steht hinter dem Knopf und rutscht auf dem Handy in eine eigene Zeile
   (+30 px, gemessen) – darum rechts im selben Feld, ohne Platz zu beanspruchen */
.wpcf7 .ganz:has(> .wpcf7-submit) { position: relative; }
.wpcf7 .wpcf7-spinner { position: absolute; top: 15px; right: 0; margin: 0; }
@media (max-width: 560px) { .formular { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Meldungen (Aktuell, einzelne Meldung): Bild links in der Buchspalte, Text rechts
   ========================================================================== */
.inhalt .meldungen-liste { margin-top: 50px; }
.inhalt .wp-block-gallery + .meldungen-liste { margin-top: 42px; }    /* unter der Diashow wie auf der Buchseite */
.wp-block-post-template.meldungen { margin: 0; padding: 0; list-style: none; }
.wp-block-post-template.meldungen > li { margin: 0; padding: 40px 0; border-top: 1px solid var(--linie); }
.wp-block-post-template.meldungen > li:first-child { padding-top: 0; border-top: 0; }
.inhalt .wp-block-group.meldung {
	max-width: 734px; margin-inline: auto;
	display: grid; grid-template-columns: var(--spalte) minmax(0, 1fr); column-gap: 48px; align-items: start;
	grid-template-areas: "bild text";
}
.meldung > * { margin-block: 0; }
.meldung > .meldung__bild { grid-area: bild; margin: 0; }
.meldung > .meldung__text { grid-area: text; }
.meldung__bild img { width: 100%; height: auto; display: block; }
.meldung__text > * { margin-block: 0; }
.meldung__text > .meldung__titel { font-size: 24px; margin-bottom: 15px; }
.meldung__titel a { text-decoration: none; }
.meldung__text .wp-block-post-content > * + * { margin-top: 20px; }
.wp-block-group.inhalt > .meldung--einzeln { margin-top: 50px; }
.meldung--einzeln .meldung__titel { font-size: 30px; }
@media (max-width: 760px) {
	.inhalt .wp-block-group.meldung { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bild" "text"; row-gap: 20px; }
}
.blaettern { max-width: 734px; margin: 40px auto 0; font: 400 18px/1 var(--schrift-titel); text-transform: uppercase; }
.blaettern a { text-decoration: none; }
.blaettern a:hover { color: var(--lila); }

/* ==========================================================================
   Fußzeile – wie bisher: Logo | Links | Symbole, darunter Copyright
   ========================================================================== */
.fuss { background: var(--lila); color: var(--weiss); }
.fuss > * { margin-block: 0; }                               /* seitlich zentriert .innen */
/* unten 40 + 6: Avada setzte nach jedem Link 6 px, auch nach dem letzten (gemessen: Fußzeile 301 / Handy 516 px) */
.wp-block-group.fuss__oben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4%; padding: 45px 0 46px; align-items: start; }
.fuss__oben > * { margin: 0; }
.fuss__logo { display: block; width: 200px; }
.fuss__logo img { display: block; width: 200px; height: 120px; }
.wp-block-navigation.fuss__menue,
.fuss__menue .wp-block-navigation__container { gap: 6px; }                 /* .footer-nav-1 p { margin: .4em 0 } */
.fuss__menue .wp-block-navigation-item { color: var(--weiss); transition: color .2s; }
.fuss__menue .wp-block-navigation-item:hover { color: var(--schwarz); }
.wp-block-social-links.fuss__sozial { justify-content: flex-end; align-items: flex-start; gap: 16px; min-height: 36px; margin: 0; padding: 0; }
.fuss__sozial .wp-social-link { color: var(--weiss); font-size: 30px; }     /* footer_social_links_font_size */
.fuss__sozial .wp-social-link a { padding: 0; }
.fuss__sozial .wp-social-link svg { width: 30px; height: 30px; }
.fuss__sozial .wp-social-link:hover { color: var(--schwarz); transform: none; }
.fuss__copy { text-align: center; font-size: 14px; padding: 18px 0 16px; margin: 0; }   /* copyright_padding */
@media (max-width: 800px) {
	.wp-block-group.fuss__oben { grid-template-columns: minmax(0, 1fr); row-gap: 30px; justify-items: center; text-align: center; }
	.wp-block-navigation.fuss__menue { align-items: center; }
	.fuss__menue .wp-block-navigation__container { align-items: center; }
	.wp-block-social-links.fuss__sozial { justify-content: center; }
}