/* ===== Eyebrow ===== */
.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--accent-strong);
	margin-bottom: 1em;
}

/* ===== Buttons ===== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.7rem;
	min-height: 44px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: var(--step--1);
	transition: transform var(--duration-ui) var(--ease-out), background var(--duration-ui) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out);
}

.btn:active { transform: scale(0.98); }

.btn--primary {
	background: var(--accent-strong);
	color: var(--white);
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--ink);
	box-shadow: var(--shadow-md);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--border);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--accent-strong);
	color: var(--accent-strong);
}

.btn--ghost-light {
	background: transparent;
	color: var(--white);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
	border-color: var(--white);
	background: rgba(255, 255, 255, 0.08);
}

/* ===== Prose (Gutenberg-Inhalte auf Unterseiten) ===== */
.prose h2 { margin-top: 1.6em; font-size: var(--step-3); }
.prose h3 { margin-top: 1.4em; font-size: var(--step-2); }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.2em; max-width: var(--max-line); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius); }

/* Google-Maps-Embed: globale iframe{height:auto}-Regel (wpx-frontend-guard)
   überschreiben, sonst kollabiert die Karte auf 0 Höhe. */
.prose iframe.kontakt-map {
	width: 100%;
	height: 340px;
	border-radius: var(--radius);
}

/* ===== Seiten-Hero (Unterseiten) ===== */
.page-hero {
	background: var(--surface);
	padding-block: var(--space-lg) var(--space-md);
}

.page-hero h1 { margin-bottom: 0.3em; }

.page-hero__subtitle {
	font-size: var(--step-1);
	color: var(--ink-soft);
	max-width: 60ch;
}

/* ===== Kontakt-Karte (einzige erlaubte Karten-Stelle: echte Liste) ===== */
.contact-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-feature);
	padding: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out);
}

.contact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.contact-card__row { display: flex; flex-direction: column; gap: 0.4rem; }

.contact-card__row dt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--accent-strong);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.contact-card__row dt .icon { color: var(--accent-strong); }
.contact-card__row dd { font-size: var(--step-1); margin: 0; }
.contact-card__row dd a:hover { color: var(--accent-strong); }

/* ===== Kontaktformular (Contact Form 7) ===== */
.wpcf7-form {
	display: grid;
	gap: 1.1rem;
	max-width: 44rem;
}

.wpcf7-form p { margin: 0; max-width: none; }

.wpcf7-form label {
	display: block;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	font: inherit;
	font-size: var(--step--1);
	color: var(--ink);
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: var(--radius);
	transition: border-color var(--duration-ui) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out);
}

.wpcf7-form textarea { min-height: 9rem; resize: vertical; }

.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: none;
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 3px rgba(79, 107, 95, 0.18);
}

.wpcf7-form input[type="submit"] {
	justify-self: start;
	background: var(--accent-strong);
	color: var(--white);
	border: none;
	padding: 0.9rem 1.8rem;
	min-height: 44px;
	border-radius: var(--radius);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out);
}

.wpcf7-form input[type="submit"]:hover { background: var(--ink); }
.wpcf7-form input[type="submit"]:active { transform: scale(0.98); }

.wpcf7-not-valid-tip { color: #B3453A; font-size: var(--step--1); margin-top: 0.3rem; }
.wpcf7-response-output { border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1rem; }