/* KirchenThür — Design-System
 *
 * Farben und Schriften sind an bfp-odg.de angelehnt.
 * Die Klassen "kt-*" werden im Elementor-Editor im Feld
 * "Erweitert → CSS-Klassen" an die jeweiligen Widgets vergeben.
 */

:root {
	--kt-teal: #5dd0d8;
	--kt-teal-dark: #3a9da4;
	--kt-pink: #da69ab;
	--kt-dark: #3b3b3b;
	--kt-surface: #f5f5f6;
	--kt-white: #ffffff;
	--kt-text: #262626;
	--kt-text-soft: #5c5c5c;
	--kt-border: #e2e2e4;

	--kt-font-heading: "Secular One", -apple-system, BlinkMacSystemFont, sans-serif;
	--kt-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
	font-family: var(--kt-font-body);
	color: var(--kt-text);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kt-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--kt-text);
}

/* Große Titel pink, Karten-Überschriften dunkel — wie auf bfp-odg.de */
h1, h2 {
	color: var(--kt-pink);
}

/* Größe der Seitentitel wie in der statischen Vorlage: auf dem Handy
   kleiner, damit lange Wörter („Religionslosigkeit“) in die Zeile passen.
   Passt ein Wort trotzdem nicht, wird es umbrochen statt abgeschnitten. */
h1 {
	font-size: clamp(2rem, 4vw, 3rem);
}

h1, h2, h3 {
	overflow-wrap: break-word;
}

/* Die Fließtextfarbe sitzt am Text-Widget statt direkt am <p>: So schlägt
   eine im Widget gesetzte Farbe (z. B. Weiß auf dunklem Grund) auf die
   Absätze durch, statt von einer p-Regel überschrieben zu werden. */
.elementor-widget-text-editor {
	color: var(--kt-text-soft);
}

.elementor-widget-text-editor p {
	color: inherit;
}

/* ---------------------------------------------------------------- Buttons */

/* Große Buttons: türkiser Rand mit hartem pinkem Versatz-Schatten.
   Beim Hovern rutscht der Button in seinen Schatten hinein. */
.kt-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kt-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 12px 26px;
	border: 3px solid var(--kt-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--kt-teal);
	box-shadow: 8px 8px 0 0 var(--kt-pink);
	transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
	max-width: 100%;
}

.kt-btn .elementor-button:hover,
.kt-btn .elementor-button:focus {
	background: transparent;
	color: var(--kt-pink);
	box-shadow: none;
	transform: translate(8px, 8px);
}

/* Kleine Buttons (z. B. in den Gründungs-Karten): kompakt, ohne Schatten */
.kt-btn-sm .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kt-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	padding: 8px 18px;
	border: 1.5px solid var(--kt-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--kt-teal);
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.kt-btn-sm .elementor-button:hover,
.kt-btn-sm .elementor-button:focus {
	background: var(--kt-teal);
	color: var(--kt-white);
}

/* Kleiner, gefüllter Button */
.kt-btn-sm-solid .elementor-button {
	background: var(--kt-teal);
	color: var(--kt-white);
	border-color: var(--kt-teal);
}

.kt-btn-sm-solid .elementor-button:hover,
.kt-btn-sm-solid .elementor-button:focus {
	background: var(--kt-teal-dark);
	border-color: var(--kt-teal-dark);
	color: var(--kt-white);
}

/* ------------------------------------------------------------- Kleinlabel */

/* "WARUM OSTDEUTSCHLAND" usw. — türkise Versalien mit pinkem Strich darunter */
.kt-eyebrow {
	font-family: var(--kt-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kt-teal);
}

.kt-eyebrow .elementor-heading-title {
	font-family: var(--kt-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kt-teal);
}

.kt-eyebrow .elementor-heading-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--kt-pink);
	margin-top: 8px;
}

/* Auf dunklem Grund (Kopfbereich der Unterseiten) ist das Label pink */
.kt-eyebrow-on-dark .elementor-heading-title {
	color: var(--kt-pink);
}

/* ----------------------------------------------------------------- Karten */

/* "Was wir tun" — weiße Karte mit Rand */
.kt-card {
	background: var(--kt-white);
	border: 1px solid var(--kt-border);
	border-radius: 14px;
	padding: 28px 24px;
	height: 100%;
}

/* Gründungs-Karte */
.kt-gr-card {
	background: var(--kt-white);
	border: 1px solid var(--kt-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	height: 100%;
}

.kt-gr-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Pill-Label "VON KIRCHENTHÜR GEGRÜNDET" / "… UNTERSTÜTZT" */
.kt-label .elementor-heading-title {
	display: inline-block;
	font-family: var(--kt-font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kt-white);
	background: var(--kt-teal);
	padding: 6px 14px;
	border-radius: 999px;
}

.kt-label-supported .elementor-heading-title {
	background: #6b6b6b;
}

/* ----------------------------------------------------- Icons im Kreis */

/* Elementors "min-width: 0" auf Widgets lässt die Icon-Kreise in einer
   Flex-Zeile zusammenschrumpfen, wodurch sie den Text überlappen. */
.kt-icon-circle,
.kt-icon-circle-dark {
	flex-shrink: 0;
	min-width: max-content;
}

.kt-icon-circle .elementor-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--kt-surface);
	color: var(--kt-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Dunkler Kreis mit weißem Icon (Abschnitt "Warum Ostdeutschland") */
.kt-icon-circle-dark .elementor-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kt-dark);
	color: var(--kt-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------- Statistik und Zitat */

.kt-stat {
	background: #fafafa;
	border-radius: 8px;
	padding: 16px 18px;
}

.kt-stat-number .elementor-heading-title {
	font-family: var(--kt-font-heading);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--kt-pink);
	border-bottom: 2px solid var(--kt-border);
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.kt-quote {
	background: rgba(59, 59, 59, 0.94);
	border-radius: 8px;
	padding: 20px 24px;
}

.kt-quote p,
.kt-quote .elementor-heading-title {
	color: var(--kt-white);
	margin: 0;
	font-size: 0.95rem;
}

/* ------------------------------------------------------------ Hero-Titel */

/* Der Hero-Text bricht wie in der Vorlage auf Textbreite um,
   statt über die ganze Containerbreite zu laufen.
   Der lange Selektor ist nötig, um Elementors eigene Regel
   „.elementor.elementor .e-con > .elementor-widget { max-width:100% }"
   zu übertreffen. */
.elementor.elementor .e-con > .kt-hero-title.elementor-widget,
.e-con.e-con > .e-con-inner > .kt-hero-title.elementor-widget {
	max-width: 560px;
}

.kt-hero-title .elementor-heading-title {
	color: var(--kt-white);
	font-size: clamp(2rem, 4.2vw, 2.7rem);
	line-height: 1.2;
}

/* Das hervorgehobene Wort ("Starthelfer.") wird im Text als
   <span class="kt-accent"> ausgezeichnet. */
.kt-accent {
	color: var(--kt-pink);
	display: inline-block;
	border-bottom: 3px solid var(--kt-pink);
	padding-bottom: 4px;
}

/* ------------------------------------------------------ Kopf- und Fußbereich */

.kt-header {
	background: var(--kt-dark);
}

/* Logo und Schriftzug (Kopf- und Fußbereich) nie zusammendrücken lassen */
.kt-brand {
	flex-shrink: 0;
	min-width: max-content;
}

/* Waagerechte Navigation: gleichmäßige Abstände, kein Umbruch.
   Die Abstandsregler des HFE-Widgets greifen hier nicht zuverlässig,
   deshalb wird der Abstand fest im Design-System gesetzt. */
/* Elementor setzt auf allen Widgets "min-width: 0". Dadurch schrumpft das
   Menü-Widget unter seine Inhaltsbreite und die Liste läuft rechts heraus.
   Beides wird hier unterbunden. */
/* Nur auf breiten Bildschirmen: Bis 1024 px zeigt das Menü-Widget
   (Umschaltpunkt „Tablet“) das Burger-Symbol. Dort darf es weder die
   Breite der ausgeblendeten Menüliste beanspruchen — das drückte Logo
   und Schriftzug auf 0 px zusammen — noch die Liste als Zeile erzwingen. */
@media (min-width: 1025px) {
	.kt-header .elementor-widget-navigation-menu {
		flex-shrink: 0;
		min-width: max-content;
	}

	/* Kein "width: 100%": die Liste soll ihre Eigenbreite behalten,
	   sonst quetscht die Flexbox des Kopfbereichs sie zusammen.
	   Rechtsbündig wird sie durch das "space-between" der Kopfzeile. */
	.kt-header .hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		gap: 28px;
	}
}

/* Bis 1024 px: Burger-Menü. Das Menü-Plugin gibt dem aufgeklappten Menü
   einen weißen Hintergrund — zusammen mit den weißen Kopf-Links wäre es
   unlesbar. Es wird deshalb dunkel wie der Kopfbereich. Die Selektoren
   müssen spezifischer sein als Elementors eigene Regel für dieses Widget
   (Spezifität 0,6,2), daher die doppelte Klasse .kt-header. */
@media (max-width: 1024px) {
	.kt-header .elementor-widget-navigation-menu {
		flex-grow: 1;
	}

	/* Burger ganz rechts statt mittig (das Plugin setzt margin: 0 auto) */
	.kt-header.kt-header .elementor-element.elementor-widget-navigation-menu .hfe-nav-menu__toggle {
		margin: 0 0 0 auto;
	}

	.kt-header .hfe-nav-menu-icon {
		color: var(--kt-white);
		border-color: var(--kt-white);
	}

	.kt-header .hfe-nav-menu-icon svg {
		fill: var(--kt-white);
	}

	.kt-header.kt-header .elementor-element.elementor-widget-navigation-menu nav.hfe-dropdown,
	.kt-header.kt-header .elementor-element.elementor-widget-navigation-menu nav.hfe-dropdown .menu-item a.hfe-menu-item {
		background-color: var(--kt-dark);
		color: var(--kt-white);
	}

	.kt-header.kt-header .elementor-element.elementor-widget-navigation-menu nav.hfe-dropdown li.menu-item:not(:last-child) {
		border-bottom-color: rgba(255, 255, 255, 0.15);
	}
}

.kt-header .hfe-nav-menu a,
.kt-header .elementor-nav-menu a {
	padding: 0;
	color: var(--kt-white);
	font-family: var(--kt-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kt-header .hfe-nav-menu a:hover,
.kt-header .elementor-nav-menu a:hover {
	color: var(--kt-pink);
}

.kt-footer {
	background: var(--kt-dark);
	color: rgba(255, 255, 255, 0.75);
}

.kt-footer p,
.kt-footer a,
.kt-footer .elementor-heading-title {
	color: rgba(255, 255, 255, 0.75);
}

.kt-footer a:hover {
	color: var(--kt-pink);
}

/* ------------------------------------------------- Bausteine Unterseiten */

/* Gelber Platzhalter-Hinweis (noch fehlende Inhalte) */
.kt-note {
	background: #fff8e6;
	border: 1px solid #f0dca0;
	border-radius: 8px;
	padding: 14px 18px;
}

.kt-note p {
	color: #6b5410;
	font-size: 0.88rem;
	margin: 0;
}

/* Hervorgehobenes Zitat im Fließtext */
.kt-pullquote {
	border-left: 3px solid var(--kt-pink);
	padding: 4px 0 4px 24px;
}

.kt-pullquote p {
	font-family: var(--kt-font-heading);
	font-size: 1.25rem;
	color: var(--kt-teal);
	font-style: italic;
	margin: 0 0 10px;
}

.kt-pullquote cite {
	display: block;
	font-family: var(--kt-font-body);
	font-style: normal;
	font-size: 0.85rem;
	color: var(--kt-text-soft);
}

/* Große Kennzahlen im Kopfbereich der Seite „Warum Ostdeutschland“ */
.kt-stat-big .elementor-heading-title {
	font-family: var(--kt-font-heading);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--kt-pink);
}

/* Trennlinie zwischen den Platzhalter-Abschnitten auf „Über uns“ */
.kt-block-divider {
	border-bottom: 1px solid var(--kt-border);
}

/* ------------------------------------ Kontaktformular (Contact Form 7) */

.wpcf7 form p {
	margin: 0 0 16px;
}

.wpcf7 label {
	display: block;
	font-weight: 600;
	color: var(--kt-text);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--kt-border);
	border-radius: 8px;
	background: var(--kt-white);
	color: var(--kt-text);
	font: inherit;
	font-weight: 400;
}

/* Wie in der Vorlage: vier Zeilen hoch, in der Höhe veränderbar */
.wpcf7 textarea {
	height: 7.5em;
	resize: vertical;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--kt-teal);
}

/* Auswahlkästchen untereinander statt nebeneinander */
.wpcf7 .wpcf7-checkbox {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	color: var(--kt-text-soft);
}

/* Absenden-Button im Stil der großen Buttons. Die Selektoren sind bewusst
   spezifischer als die Button-Voreinstellung des Hello-Themes
   ([type=submit] mit Pink-Rand #c36), die sonst durchschlägt. */
.wpcf7 input.wpcf7-submit {
	font-family: var(--kt-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 12px 26px;
	border: 3px solid var(--kt-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--kt-teal);
	box-shadow: 8px 8px 0 0 var(--kt-pink);
	cursor: pointer;
	transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}

.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus {
	background: transparent;
	border-color: var(--kt-teal);
	color: var(--kt-pink);
	box-shadow: none;
	transform: translate(8px, 8px);
}

/* -------------------------------------------------------------- Abstände */

.kt-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

.kt-section-surface {
	background: var(--kt-surface);
}

/* -------------------------------------------------------- Schmale Geräte */

@media (max-width: 767px) {
	.kt-btn .elementor-button {
		font-size: 0.9rem;
		letter-spacing: 1.5px;
		padding: 11px 20px;
		box-shadow: 6px 6px 0 0 var(--kt-pink);
	}

	.kt-btn .elementor-button:hover,
	.kt-btn .elementor-button:focus {
		transform: translate(6px, 6px);
	}

	.wpcf7 input.wpcf7-submit {
		font-size: 0.9rem;
		letter-spacing: 1.5px;
		padding: 11px 20px;
		box-shadow: 6px 6px 0 0 var(--kt-pink);
	}

	.wpcf7 input.wpcf7-submit:hover,
	.wpcf7 input.wpcf7-submit:focus {
		transform: translate(6px, 6px);
	}

	.kt-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}