/* ==========================================================================
   Ergänzungen von amyma zum übernommenen Original-Template.
   Wird als letztes Stylesheet geladen, damit diese Regeln greifen.
   ========================================================================== */

/* --- Kontaktformular ------------------------------------------------- */

/* Die generische Formularregel des Templates macht jedes input 100 % breit —
   bei einer Checkbox ergibt das einen 300 px breiten Kasten. */
#sp-quickcontact-form .eq-consent input[type="checkbox"] {
	width: auto;
	height: auto;
	display: inline-block;
	margin: 0 8px 0 0;
	vertical-align: baseline;
	float: none;
	min-height: 0;
	padding: 0;
	box-shadow: none;
	background: none;
	border: 1px solid #ccc;
}

#sp-quickcontact-form .eq-consent {
	display: block;
	font-size: 12px;
	line-height: 1.55;
	color: #777;
	font-weight: 400;
	margin: 4px 0 14px;
	text-transform: none;
	letter-spacing: 0;
}

#sp-quickcontact-form .eq-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eq-form-notice {
	padding: 12px 16px;
	border-radius: 2px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}
.eq-form-notice--ok    { background: #eef6ee; border-left: 3px solid #4a8a4a; color: #2f5c2f; }
.eq-form-notice--error { background: #fdeeee; border-left: 3px solid #b04a42; color: #8c2f28; }

/* --- Darstellung auf schmalen und mittleren Bildschirmen --------------

   Das Original stapelt die drei Spalten erst unter 768 px. Zwischen 768
   und 991 px sind sie so schmal, dass der Adressblock ins Formular läuft
   — dieser Fehler besteht auch auf der alten Seite. Wir stapeln daher
   schon ab 991 px.
   --------------------------------------------------------------------- */

@media (max-width: 991px) {

	/* Das Logo läuft sonst bis an den Rand. */
	.t3-header .logo img,
	.navbar-brand img {
		max-width: 210px;
		height: auto;
	}

	/* Alle Spalten der Kontaktseite untereinander, mit gleichem Einzug. */
	#sp-page-builder .sppb-col-sm-4,
	#sp-page-builder .sppb-col-md-4,
	#sp-page-builder [class*="sppb-col-"] {
		width: 100%;
		float: none;
		padding-left: 20px;
		padding-right: 20px;
	}

	#sp-page-builder .sppb-addon,
	#sp-page-builder .sppb-addon-content {
		padding-left: 0;
		padding-right: 0;
	}

	/* Abstand zwischen den gestapelten Blöcken. */
	#sp-page-builder .sppb-addon-module,
	#sp-page-builder .sppb-addon-text-block {
		margin-bottom: 28px;
	}

	/* Adressblock: saubere Zeilenumbrüche statt gequetschter Wörter. */
	#sp-page-builder .contact h4,
	#sp-page-builder .custom h4 {
		line-height: 1.45;
		margin-bottom: 10px;
		word-break: normal;
		overflow-wrap: break-word;
	}

	#sp-page-builder .contact p,
	#sp-page-builder .custom p {
		line-height: 1.6;
		margin-bottom: 12px;
	}

	/* Karte bündig mit dem übrigen Inhalt. */
	#sp-page-builder iframe {
		width: 100%;
		max-width: 100%;
		display: block;
	}
}

/* --- Absende-Knopf ---------------------------------------------------

   Das Original setzt den Knopf per "#contact .ctcbtn #sp_qc_submit" auf
   float:left. Sein Container fällt dadurch zusammen und der Adressblock
   rutscht daneben. Gleiche Spezifität wählen, damit die Regel greift —
   und den Container mit clear/clearfix aufräumen statt mit overflow,
   das ihn neben den gefloateten Geschwistern auf Breite 0 drücken würde.
   --------------------------------------------------------------------- */

#sp-quickcontact-form .ctcbtn {
	clear: both;
	display: block;
	width: 100%;
	margin-bottom: 8px;
}

#sp-quickcontact-form .ctcbtn::after {
	content: "";
	display: table;
	clear: both;
}

#sp-quickcontact-form .ctcbtn .col-md-5 {
	width: auto;
	float: none;
	padding-left: 0;
	padding-right: 0;
}

#contact .ctcbtn #sp_qc_submit {
	float: none;
	display: inline-block;
	max-width: 100%;
}

@media (max-width: 991px) {
	#contact .ctcbtn #sp_qc_submit {
		display: block;
		width: 100%;
	}
}

/* --- Facebook-Seite mit Zustimmung ------------------------------------ */

.fb-consent {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 2px;
	padding: 16px;
	max-width: 300px;
}

.fb-consent.is-loaded {
	padding: 0;
	background: none;
	border: 0;
	max-width: none;
}

.fb-consent-note {
	font-size: 12px;
	line-height: 1.5;
	color: #b9b9b9;
	margin: 0 0 12px;
}

.fb-consent-btn {
	background: #2eb6d1;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-family: Raleway, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 10px 16px;
	text-transform: uppercase;
}

.fb-consent-btn:hover { background: #2897bd; }
.fb-consent iframe { display: block; border: 0; max-width: 100%; }

/* --- Karte mit Zustimmung --------------------------------------------- */

.map-consent {
	background: #f6f6f6;
	border: 1px solid #e3e3e1;
	padding: 24px;
	text-align: center;
	margin: 8px 0 16px;
}

.map-consent.is-loaded { padding: 0; background: none; border: 0; }

.map-consent-note {
	font-size: 13px;
	line-height: 1.5;
	color: #777;
	margin: 0 0 14px;
}

.map-consent-btn {
	background: #2eb6d1;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-family: Raleway, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 10px 18px;
	text-transform: uppercase;
}

.map-consent-btn:hover { background: #2897bd; }
.map-consent iframe { display: block; width: 100%; border: 0; }

/* ------------------------------------------------------------------
   Présentation : le titre « Adhésions » et sa liste
   ------------------------------------------------------------------
   Le portrait est flotté à gauche avec 100 px de marge basse. Sans
   cette règle, le titre tombait encore dans la zone du flottement
   (donc décalé vers la droite) alors que sa liste, quelques pixels
   plus bas, commençait déjà sur toute la largeur — un écart de
   340 px entre les deux, dans les quatre langues.
   ------------------------------------------------------------------ */
.eq-clear {
	clear: left;
}

/* ==================================================================
   Téléphone : en-tête compact et accueil lisible
   ==================================================================
   Sur mobile, le diaporama RevSlider se réduisait à 279 px et passait
   sous l'en-tête fixe (171 px, opaque) : tout son texte disparaissait
   et l'image était rognée en plein milieu du visage. En dessous de
   768 px il cède la place à un bloc empilé, construit des mêmes
   éléments. L'affichage sur ordinateur n'est pas touché.
   ================================================================== */

/* Le bloc mobile n'existe que sur petit écran. */
.eq-hero-mobile {
	display: none;
}

/* Le code de langue ne sert que sur petit écran. */
.eq-lang-code {
	display: none;
}

@media (max-width: 767px) {

	/* --- En-tête : moins haut, logo plus mesuré --- */

	#t3-header {
		height: auto;
		padding: 10px 0;
	}

	#t3-header .logo-img {
		max-width: 150px;
		height: auto;
	}

	#t3-header .logo {
		padding-left: 15px;
	}

	/* --- Sélecteur de langue : des codes en ligne, pas des drapeaux empilés ---
	   Quatre drapeaux de 18 px les uns sous les autres occupaient 80 px de
	   hauteur pour une cible tactile minuscule. « FR DE LU EN » se lit mieux,
	   se touche mieux, et évite d'assimiler une langue à un pays. */

	.mod-languages {
		position: static;
		margin-top: 6px;
	}

	.mod-languages ul.lang-inline {
		display: flex;
		justify-content: flex-end;
		gap: 4px;
		margin: 0;
		padding: 0 15px 0 0;
		list-style: none;
	}

	.mod-languages ul.lang-inline li {
		float: none;
		margin: 0;
		padding: 0;
	}

	.mod-languages ul.lang-inline li img {
		display: none;
	}

	.mod-languages ul.lang-inline li a {
		display: block;
		padding: 7px 9px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .04em;
		line-height: 1;
		color: #777;
		text-decoration: none;
		border-radius: 2px;
	}

	.mod-languages ul.lang-inline li.lang-active a {
		color: #fff;
		background: #2eb6d1;
	}

	.eq-lang-code {
		display: inline;
	}

	/* --- Le diaporama laisse la place au bloc empilé --- */

	.rev_slider_wrapper,
	.forcefullwidth_wrapper_tp_banner,
	.tp-bannershadow {
		display: none !important;
	}

	.eq-hero-mobile {
		display: block;
		/* L'en-tête est fixe : le contenu doit commencer en dessous. */
		margin-top: 103px;
		background: #fff;
	}

	.eq-hero-media {
		width: 100%;
		overflow: hidden;
	}

	.eq-hero-media img {
		display: block;
		width: 100%;
		height: 260px;
		/* Le visage se trouve dans le tiers supérieur de la photo. */
		object-fit: cover;
		object-position: 72% 18%;
	}

	.eq-hero-body {
		padding: 22px 20px 26px;
	}

	.eq-hero-title {
		margin: 0 0 2px;
		font-size: 24px;
		line-height: 1.2;
		font-weight: 300;
		color: #4a4a4a;
	}

	.eq-hero-name {
		margin: 0 0 14px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .02em;
		color: #2eb6d1;
	}

	.eq-hero-roles {
		margin: 0 0 12px;
		font-size: 14px;
		line-height: 1.55;
		color: #4a4a4a;
	}

	.eq-hero-note {
		margin: 0 0 16px;
		font-size: 13px;
		line-height: 1.5;
		color: #777;
	}

	.eq-hero-contact {
		margin: 0;
		padding-top: 14px;
		border-top: 1px solid #e5e5e5;
		font-size: 14px;
		line-height: 1.7;
		color: #4a4a4a;
	}

	.eq-hero-contact a {
		color: #2eb6d1;
	}
}

/* ------------------------------------------------------------------
   Téléphone : bandeau de titre des pages intérieures
   ------------------------------------------------------------------
   Le décalage d'origine (90 px de marge + 80 px de remplissage) était
   calé sur un en-tête de 171 px. L'en-tête compact n'en fait plus que
   103, ce qui laissait 69 px de gris vide au-dessus du fil d'Ariane.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.t3-navhelper.banner {
		margin-top: 103px;
	}

	.parallax.banner {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.t3-navhelper .breadcrumb {
		margin-bottom: 0;
		padding-left: 0;
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------
   Téléphone : images habillées par le texte
   ------------------------------------------------------------------
   Le portrait porte, depuis l'ancien site, un style en ligne
   « float: left; margin-right: 40px; margin-bottom: 100px ». Sur une
   colonne unique, l'habillage n'a plus de sens et les 100 px laissent
   un vide blanc entre la photo et le texte.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.article-content img[style*="float"] {
		float: none !important;
		margin-right: 0 !important;
		margin-bottom: 18px !important;
		margin-left: auto !important;
		display: block;
	}
}