/*
Theme Name:   Feli-Cité
Theme URI:    https://association-feli-cite.fr
Description:  Child-Theme für Kadence — Association Feli-Cité, protection féline, Aix-en-Provence. Enthält die Markenfarben, die Fiche-Darstellung der Katzen und die Bausteine der Startseite.
Author:       twosteps GmbH
Author URI:   https://twosteps.net
Template:     kadence
Version:      1.4.0
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  felicite
Tags:         non-profit, animal-shelter
*/

/* ==========================================================================
   1. Token-Ebene
   Eigene Tokens als einzige Schicht zwischen Kadence-Palette und Bausteinen.
   Aendert der Verein eine Farbe im Customizer, folgt das Stylesheet ohne
   Codeaenderung. Zum Abkoppeln reicht es, den var()-Aufruf durch einen festen
   Hex-Wert zu ersetzen — eine Zeile pro Farbe.
   ========================================================================== */

:root {
	/* An die Kadence-Palette gekoppelt. Der zweite Wert greift nur, falls die
	   Variable fehlt — z. B. im Block-Editor oder nach einem Theme-Wechsel.
	   Zuordnung: Kadence hat die urspruenglichen neun Slots beibehalten und die
	   sechs neuen hinten angehaengt. Die Reihenfolge im Customizer entspricht
	   also NICHT der Nummerierung im CSS:
	     1-2   Akzent 1-2
	     3-6   Kontrast 1-4
	     7-9   Basis 1-3
	     10    Akzent 3   <- steht im Customizer bei den Akzenten, nicht hier
	     11-15 Hinweise                                                        */
	--fc-terre:        var( --global-palette1,  #A94E2F );  /* Akzent 1 — Links, Buttons      */
	--fc-terre-fonce:  var( --global-palette2,  #8C3F26 );  /* Akzent 2 — Hover               */
	--fc-encre:        var( --global-palette3,  #2E2A26 );  /* Kontrast 1 — Ueberschriften    */
	--fc-texte:        var( --global-palette4,  #443E38 );  /* Kontrast 2 — Fliesstext        */
	--fc-gris:         var( --global-palette5,  #6B625A );  /* Kontrast 3 — Metadaten         */
	--fc-bordure:      var( --global-palette6,  #C9BCA9 );  /* Kontrast 4 — Rahmen, Linien    */
	--fc-sable:        var( --global-palette7,  #F2EBE0 );  /* Basis 1 — abgesetzte Flaechen  */
	--fc-craie:        var( --global-palette8,  #FAF6EF );  /* Basis 2 — Karten               */
	--fc-blanc:        var( --global-palette9,  #FDFBF7 );  /* Basis 3 — Seitenhintergrund    */
	--fc-ocre:         var( --global-palette10, #E0A526 );  /* Akzent 3 — nur Spenden-CTA     */

	/* Passt in keine der 15 Gruppen — bleibt ein fester Wert. */
	--fc-sauge:        #6E8460;

	--fc-rayon:        3px;
	--fc-ligne:        1px solid var(--fc-bordure);
	--fc-transition:   140ms ease-out;
}

/* ==========================================================================
   2. Grundrhythmus
   Zurueckhaltend: Kadence bringt bereits ein brauchbares Grundgeruest mit,
   hier wird nur korrigiert, was fuer die Lesbarkeit laengerer Texte zaehlt.
   ========================================================================== */

.entry-content p,
.entry-content li {
	line-height: 1.7;
	max-width: 68ch;              /* Zeilenlaenge begrenzen, unabhaengig vom Container */
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	text-wrap: balance;           /* verhindert einzelne Waisenwoerter in Ueberschriften */
}

.entry-content h2 + p,
.entry-content h3 + p {
	margin-top: 0;
}

/* Sichtbarer Fokus. Kadence liefert einen sehr blassen Ring, das reicht bei
   einem creme-farbenen Hintergrund nicht aus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--fc-terre);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   3. Spendenbutton
   Als eigene Klasse statt globalem Button-Override, damit der Ocker-Ton
   seine Signalwirkung behaelt. Wird er ueberall benutzt, wirkt er nirgends.
   Dunkle Schrift auf Ocker liegt bei ~7:1, weisse Schrift waere durchgefallen.
   ========================================================================== */

.fc-don,
.wp-block-button.is-style-fc-don .wp-block-button__link {
	display: inline-block;
	background-color: var(--fc-ocre);
	color: var(--fc-encre);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.7em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--fc-rayon);
	text-decoration: none;
	transition: background-color var(--fc-transition);
}

.fc-don:hover,
.fc-don:focus,
.wp-block-button.is-style-fc-don .wp-block-button__link:hover {
	background-color: #C98F1D;
	color: var(--fc-encre);
}

/* ==========================================================================
   4. Die Fiche — Signature-Element
   Vereine fuehren pro Tier eine Fiche. Die Karte greift das auf: schmale
   Kopfzeile mit Aktenzeichen, Daten als Definitionsliste, Status am Fuss.
   Das unterscheidet die Seite von der ueblichen Tierheim-Kachel mit Herz.
   ========================================================================== */

.fc-fiches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.fc-fiche {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--fc-craie);
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	overflow: hidden;
	transition: border-color var(--fc-transition), transform var(--fc-transition);
}

.fc-fiche:hover,
.fc-fiche:focus-within {
	border-color: var(--fc-terre);
	transform: translateY(-2px);
}

.fc-fiche__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--fc-sable);
	overflow: hidden;
}

.fc-fiche__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fc-fiche__corps {
	padding: 0.9rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Aktenzeichen — kleiner Registraturvermerk, gibt der Karte ihren Charakter */
.fc-fiche__ref {
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fc-gris);
	margin: 0 0 0.35rem;
}

.fc-fiche__nom {
	font-size: 1.3rem;
	line-height: 1.15;
	margin: 0 0 0.7rem;
	color: var(--fc-encre);
}

.fc-fiche__nom a {
	color: inherit;
	text-decoration: none;
}

.fc-fiche__nom a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Daten als Definitionsliste — semantisch korrekt und optisch der Kern
   des Karteikarten-Eindrucks. */
.fc-fiche__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.9rem;
	margin: 0 0 1rem;
	font-size: 0.85rem;
	border-top: var(--fc-ligne);
	padding-top: 0.7rem;
}

.fc-fiche__meta dt {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fc-gris);
	align-self: center;
	margin: 0;
}

.fc-fiche__meta dd {
	margin: 0;
	color: var(--fc-texte);
}

.fc-fiche__statut {
	margin: auto 0 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.35em 0.7em;
	border-radius: 2px;
	align-self: flex-start;
}

/* Klassennamen folgen den Term-Slugs aus dem MU-Plugin, nicht der Beschriftung.
   Der Ockerton bleibt hier bewusst aussen vor — er gehoert dem Spendenbutton. */
.fc-statut--a-l-adoption { background: #E8EDE4; color: #3F5033; }
.fc-statut--parrainage   { background: #EDE4D6; color: #6B5334; }
.fc-statut--soins        { background: #F6E2DC; color: #7A2E17; }
.fc-statut--reserve      { background: var(--fc-sable); color: var(--fc-gris); }

/* Vermittelte Katzen: Stempel statt Badge. Der Moment der Vermittlung ist
   das, was der Verein zeigen will — er verdient eine eigene Geste. */
.fc-fiche--adopte .fc-fiche__media img {
	filter: saturate(0.75);
}

.fc-fiche__tampon {
	position: absolute;
	top: 1rem;
	right: -0.4rem;
	transform: rotate(-7deg);
	background: rgba(253, 251, 247, 0.94);
	border: 2px solid var(--fc-sauge);
	border-radius: 2px;
	color: var(--fc-sauge);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	line-height: 1.2;
	text-align: center;
	margin: 0;
}

.fc-fiche__tampon span {
	display: block;
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
}

/* ==========================================================================
   5. Kennzahlen
   Steht auf der Startseite vor der ersten Spendenbitte. Reihenfolge ist hier
   das Argument: erst der Nachweis, dann die Frage.
   ========================================================================== */

.fc-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--fc-bordure);
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	overflow: hidden;
	margin: 2.5rem 0;
}

.fc-chiffre {
	background: var(--fc-blanc);
	padding: 1.4rem 1rem;
	text-align: center;
}

.fc-chiffre__valeur {
	display: block;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	line-height: 1;
	color: var(--fc-terre);
	font-variant-numeric: tabular-nums;
}

.fc-chiffre__label {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fc-gris);
}

/* ==========================================================================
   6. Ablauf der Adoption
   Nummeriert, weil hier die Reihenfolge tatsaechlich Information traegt:
   ohne Dossier keine Visite, ohne Visite keine Vermittlung.
   ========================================================================== */

.fc-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
	counter-reset: fc-etape;
}

.fc-etape {
	counter-increment: fc-etape;
	padding-top: 0.8rem;
	border-top: 3px solid var(--fc-bordure);
}

.fc-etape::before {
	content: counter(fc-etape, decimal-leading-zero);
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--fc-terre);
	margin-bottom: 0.4rem;
}

.fc-etape h3 {
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
	color: var(--fc-encre);
}

.fc-etape p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--fc-texte);
}

/* ==========================================================================
   7. Stimmen der Adoptanten
   ========================================================================== */

.fc-temoignage {
	background: var(--fc-sable);
	border-radius: var(--fc-rayon);
	padding: 1.6rem 1.8rem;
	margin: 2rem 0;
}

.fc-temoignage blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--fc-encre);
	font-style: italic;
}

.fc-temoignage figcaption {
	margin-top: 0.9rem;
	font-size: 0.85rem;
	color: var(--fc-gris);
}

/* ==========================================================================
   8. Kleinigkeiten
   ========================================================================== */

/* SIRET und Rechtstexte im Footer bewusst leise, aber lesbar (>4.5:1). */
.fc-mentions {
	font-size: 0.82rem;
	color: var(--fc-gris);
}

/* Sprungmarke fuer Tastaturnutzer — Kadence liefert keine mit. */
.fc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--fc-encre);
	color: var(--fc-blanc);
	padding: 0.7em 1.2em;
	text-decoration: none;
}

.fc-skip-link:focus {
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fc-fiche,
	.fc-don {
		transition: none;
	}
	.fc-fiche:hover {
		transform: none;
	}
}

@media print {
	.fc-fiche {
		break-inside: avoid;
		border-color: #999;
	}
	.fc-don,
	.fc-skip-link {
		display: none;
	}
}

/* ==========================================================================
   9. Archiv /nos-chats/
   Filterleiste, Trefferzeile, leerer Zustand, Paginierung.
   ========================================================================== */

.fc-archive__entete {
	margin: 0 0 2rem;
}

.fc-archive__titre {
	margin: 0 0 0.5rem;
	color: var(--fc-encre);
}

.fc-archive__intro {
	margin: 0;
	max-width: 60ch;
	color: var(--fc-gris);
}

/* Filterleiste. Sitzt in einem sandfarbenen Band, damit sie sich vom Raster
   absetzt, ohne wie ein eigenes Modul zu wirken. */
.fc-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	background: var(--fc-sable);
	border-radius: var(--fc-rayon);
	padding: 1rem 1.2rem;
	margin: 0 0 1.5rem;
}

.fc-filtres__champ {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 190px;
	flex: 1 1 190px;
}

.fc-filtres__champ label {
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fc-gris);
}

.fc-filtres__champ select {
	width: 100%;
	padding: 0.5em 0.7em;
	background: var(--fc-blanc);
	border: 1px solid var(--fc-bordure);
	border-radius: var(--fc-rayon);
	color: var(--fc-texte);
	font-size: 0.95rem;
}

.fc-filtres__envoi {
	background: var(--fc-terre);
	color: var(--fc-blanc);
	border: 0;
	border-radius: var(--fc-rayon);
	padding: 0.6em 1.3em;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color var(--fc-transition);
}

.fc-filtres__envoi:hover {
	background: var(--fc-terre-fonce);
}

/* Sobald JavaScript laeuft, schickt sich das Formular selbst ab — dann ist der
   Button nur noch Redundanz und verschwindet. Ohne JS bleibt er sichtbar. */
.fc-filtres--auto .fc-filtres__envoi {
	display: none;
}

.fc-filtres__reset {
	font-size: 0.88rem;
	color: var(--fc-gris);
	align-self: center;
}

.fc-compteur {
	margin: 0 0 1.2rem;
	font-size: 0.9rem;
	color: var(--fc-gris);
}

.fc-compteur strong {
	color: var(--fc-encre);
}

/* Leerer Zustand als Einladung, nicht als Entschuldigung. */
.fc-vide {
	background: var(--fc-craie);
	border: 1px dashed var(--fc-bordure);
	border-radius: var(--fc-rayon);
	padding: 2rem 1.6rem;
	text-align: center;
}

.fc-vide p {
	margin: 0 0 0.8rem;
}

.fc-vide__note {
	margin: 0;
	font-size: 0.88rem;
	color: var(--fc-gris);
}

.fc-vide__lien {
	color: var(--fc-terre);
	font-weight: 600;
}

/* Paginierung an die Fiches angleichen. */
.fc-fiches + .navigation.pagination {
	margin-top: 2.5rem;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.4em 0.8em;
	border: 1px solid var(--fc-bordure);
	border-radius: var(--fc-rayon);
	color: var(--fc-texte);
	text-decoration: none;
	margin-right: 0.3rem;
}

.navigation.pagination .page-numbers.current {
	background: var(--fc-terre);
	border-color: var(--fc-terre);
	color: var(--fc-blanc);
}

@media (max-width: 600px) {
	.fc-filtres {
		flex-direction: column;
		align-items: stretch;
	}
	.fc-filtres__reset {
		align-self: flex-start;
	}
}

/* ==========================================================================
   10. Spendenbutton — Korrektur
   Kadence gibt seine Button-Styles inline im <head> aus, also nach dem
   Theme-Stylesheet. Bei gleicher Spezifitaet gewinnt damit Kadence.

   Zwei Konsequenzen aus dem ersten Versuch:
   - Kein .entry-content-Praefix. Diese Klasse existiert im Block-Editor nicht,
     die Regel konnte dort also nie greifen — im Editor blieb der Button schwarz.
   - !important. Ein Spezifitaetswettlauf gegen inline ausgeliefertes CSS ist
     auf Dauer nicht zu gewinnen. Bei genau einer klar abgegrenzten Variante ist
     das vertretbar; als Muster fuer andere Regeln taugt es nicht.
   ========================================================================== */

.wp-block-button.is-style-fc-don > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-fc-don > .wp-block-button__link {
	background-color: var(--fc-ocre) !important;
	background-image: none !important;
	color: var(--fc-encre) !important;
	border-color: var(--fc-ocre) !important;
	font-weight: 600;
}

.wp-block-button.is-style-fc-don > .wp-block-button__link:hover,
.wp-block-button.is-style-fc-don > .wp-block-button__link:focus {
	background-color: #C98F1D !important;
	color: var(--fc-encre) !important;
	border-color: #C98F1D !important;
}

/* Hero als Cover-Block: Text bekommt eine leichte Abdunklung im Ruecken,
   damit er auch ueber hellen Bildstellen lesbar bleibt. */
.fc-hero.wp-block-cover {
	min-height: 70vh;
}

.fc-hero .wp-block-cover__inner-container > * {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.fc-hero .wp-block-cover__inner-container .wp-block-buttons * {
	text-shadow: none;
}

/* ==========================================================================
   11. Ganze Fiche klickbar
   Nicht durch ein <a> um die gesamte Karte: Screenreader lesen dann den
   kompletten Inhalt als einen einzigen Linktext vor ("Fiche Nr 2026-018
   Nougat Alter 8 Monate Weiblich..."), und Textmarkieren wird unmoeglich.

   Stattdessen bekommt der Link im Namen ein unsichtbares Pseudoelement ueber
   die ganze Karte. Fuer die Maus ist alles klickbar, fuer Screenreader bleibt
   genau ein sinnvoller Link mit dem Namen der Katze.
   ========================================================================== */

.fc-fiche__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fc-fiche:hover {
	cursor: pointer;
}

/* Fokusring auf die ganze Karte legen statt nur auf den Namen. */
.fc-fiche:focus-within {
	outline: 2px solid var(--fc-terre);
	outline-offset: 2px;
}

.fc-fiche__nom a:focus-visible {
	outline: none;
}

/* ==========================================================================
   12. Detailseite
   ========================================================================== */

.fc-retour {
	margin: 0 0 1.2rem;
	font-size: 0.9rem;
}

.fc-single {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	margin-bottom: 3.5rem;
}

.fc-single__principale {
	margin: 0;
	border-radius: var(--fc-rayon);
	overflow: hidden;
	background: var(--fc-sable);
}

.fc-single__principale img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fc-single__vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.6rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.fc-single__vignettes a {
	display: block;
	border-radius: var(--fc-rayon);
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color var(--fc-transition);
}

.fc-single__vignettes a:hover,
.fc-single__vignettes a.est-active {
	border-color: var(--fc-terre);
}

.fc-single__vignettes img {
	width: 100%;
	height: 88px;
	object-fit: cover;
	display: block;
}

/* Die Fiche klebt beim Scrollen mit — bei fuenf Fotos scrollt sonst der
   Kontaktbutton aus dem Bild. */
.fc-single__fiche {
	position: sticky;
	top: 2rem;
	background: var(--fc-craie);
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	padding: 1.6rem;
}

.fc-single__nom {
	margin: 0.2rem 0 0.8rem;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	line-height: 1.1;
	color: var(--fc-encre);
}

.fc-single__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	margin: 1.2rem 0;
	padding-top: 1rem;
	border-top: var(--fc-ligne);
	font-size: 0.95rem;
}

.fc-single__meta dt {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fc-gris);
	align-self: center;
	margin: 0;
}

.fc-single__meta dd {
	margin: 0;
	color: var(--fc-texte);
}

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

.fc-single__action {
	margin: 1.4rem 0 0.6rem;
}

.fc-single__action .fc-don {
	display: block;
	text-align: center;
}

.fc-single__note {
	margin: 0;
	font-size: 0.82rem;
	color: var(--fc-gris);
	text-align: center;
}

.fc-autres {
	border-top: var(--fc-ligne);
	padding-top: 2rem;
}

.fc-autres h2 {
	margin-top: 0;
}

@media (max-width: 860px) {
	.fc-single {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.fc-single__fiche {
		position: static;
	}
}

/* ==========================================================================
   13. Kontaktformular
   ========================================================================== */

.fc-contact {
	max-width: 44rem;
	margin: 0 0 2rem;
}

.fc-contact__contexte {
	background: var(--fc-sable);
	border-radius: var(--fc-rayon);
	padding: 0.8rem 1rem;
	margin: 0 0 1.4rem;
	font-size: 0.95rem;
}

.fc-contact__ligne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 1.2rem;
}

.fc-champ {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
}

.fc-champ label {
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fc-gris);
}

.fc-champ input,
.fc-champ textarea {
	width: 100%;
	padding: 0.6em 0.8em;
	background: var(--fc-blanc);
	border: 1px solid var(--fc-bordure);
	border-radius: var(--fc-rayon);
	color: var(--fc-texte);
	font-size: 1rem;
	font-family: inherit;
}

.fc-champ input:focus,
.fc-champ textarea:focus {
	border-color: var(--fc-terre);
}

.fc-champ__aide {
	font-size: 0.83rem;
	color: var(--fc-gris);
}

/* Pflichtfeld-Sternchen in der Akzentfarbe, aber nicht als einziges
   Unterscheidungsmerkmal — die Felder tragen zusaetzlich required. */
.fc-champ label span {
	color: var(--fc-terre);
}

.fc-champ--case {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
}

.fc-champ--case input {
	width: auto;
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.fc-champ--case label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	color: var(--fc-texte);
}

.fc-contact__envoi {
	margin: 1.4rem 0 1rem;
}

.fc-contact__envoi .fc-don {
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	font-family: inherit;
}

.fc-contact__mention {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--fc-gris);
	margin: 0;
}

/* Honigtopf. Kein display:none — manche Bots werten das aus und lassen das
   Feld dann leer. Aus dem Sichtfeld schieben wirkt zuverlaessiger. */
.fc-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fc-message {
	border-radius: var(--fc-rayon);
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.6rem;
	border-left: 4px solid;
}

.fc-message p {
	margin: 0 0 0.4rem;
}

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

.fc-message--succes {
	background: #E8EDE4;
	border-color: var(--fc-sauge);
	color: #2F4024;
}

.fc-message--erreur {
	background: #F6E2DC;
	border-color: #B82105;
	color: #6E2413;
}

/* Kontaktangaben neben dem Formular */
.fc-coordonnees {
	background: var(--fc-craie);
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	padding: 1.4rem 1.6rem;
	font-size: 0.95rem;
}

.fc-coordonnees h2 {
	margin-top: 0;
	font-size: 1.15rem;
}

.fc-coordonnees p {
	margin: 0 0 0.8rem;
}

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

/* ==========================================================================
   14. Seite "Nous soutenir"
   ========================================================================== */

/* Hinweis auf die Steuerabsetzbarkeit. Steht neben dem Formular, nicht im
   Kleingedruckten — in Frankreich ist das das staerkste Einzelargument. */
.fc-fiscal {
	background: #E8EDE4;
	border-left: 4px solid var(--fc-sauge);
	border-radius: var(--fc-rayon);
	padding: 1.2rem 1.4rem;
	margin: 1.6rem 0;
}

.fc-fiscal p {
	margin: 0 0 0.5rem;
}

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

.fc-fiscal strong {
	color: #2F4024;
}

.fc-fiscal__exemple {
	font-size: 0.9rem;
	color: var(--fc-gris);
}

/* Formular-Einbettung von HelloAsso. Rahmen und Flaeche, damit der iframe
   nicht wie ein Fremdkoerper wirkt. */
.fc-formulaire {
	background: var(--fc-craie);
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	padding: 1.2rem;
	margin: 1.6rem 0 2.4rem;
}

.fc-formulaire iframe {
	width: 100%;
	border: 0;
	display: block;
}

/* Andere Wege zu helfen. Bewusst schlichte Kacheln, damit sie den
   Spendenformularen nicht die Aufmerksamkeit wegnehmen. */
.fc-aides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.2rem;
	margin: 1.6rem 0 2.4rem;
	padding: 0;
	list-style: none;
}

.fc-aide {
	background: var(--fc-craie);
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	padding: 1.1rem 1.2rem;
}

.fc-aide h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	color: var(--fc-encre);
}

.fc-aide p {
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	color: var(--fc-texte);
}

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

.fc-aide ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.92rem;
	color: var(--fc-texte);
}

/* Wahl zwischen einmalig und monatlich */
.fc-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.2rem;
	margin: 1.6rem 0;
}

.fc-option {
	border: var(--fc-ligne);
	border-radius: var(--fc-rayon);
	padding: 1.2rem 1.3rem;
	background: var(--fc-blanc);
}

.fc-option--phare {
	border-color: var(--fc-terre);
	border-width: 2px;
	position: relative;
}

.fc-option__marque {
	position: absolute;
	top: -0.7rem;
	left: 1.2rem;
	background: var(--fc-terre);
	color: var(--fc-blanc);
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.25em 0.7em;
	border-radius: 2px;
}

.fc-option h3 {
	margin: 0.2rem 0 0.5rem;
	font-size: 1.1rem;
}

.fc-option p {
	margin: 0 0 0.8rem;
	font-size: 0.93rem;
}

/* Mobiler Header: Vereinsname steht bereits im Logo. */
@media (max-width: 1024px) {
	.site-title,
	.site-branding .site-title {
		display: none;
	}

	.site-branding img,
	.custom-logo {
		max-height: 56px;
		width: auto;
	}
}