/* ==========================================================================
   content.css: Seiten-Banner, Gutenberg-Inhalte, Kontaktseite, Formulare
   ========================================================================== */

/* ---------- Seiten-Banner (Unterseiten) ---------- */
.page-banner {
	background: var(--primary);
	color: var(--surface);
	padding-block: clamp(5rem, 12vw, 8rem) clamp(3rem, 6vw, 4.5rem);
	position: relative;
	overflow: hidden;
}
.page-banner::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
	background: var(--surface);
	clip-path: polygon(0% 100%, 8.33% 0%, 16.66% 100%, 25% 0%, 33.33% 100%, 41.66% 0%, 50% 100%, 58.33% 0%, 66.66% 100%, 75% 0%, 83.33% 100%, 91.66% 0%, 100% 100%);
}
.page-banner h1 { color: var(--surface); max-width: 22ch; margin-top: 0.6rem; }
.page-banner .lede { color: oklch(97% 0.006 90 / 0.8); margin-top: 1rem; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: oklch(97% 0.006 90 / 0.6); }
.breadcrumb a:hover { color: var(--clay); }

/* ---------- Gutenberg-Inhalte ---------- */
.entry-content { max-width: 74ch; }
.entry-content.wide { max-width: none; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { margin-top: 2.2em; }
.entry-content h3 { margin-top: 1.8em; }
.entry-content p { text-wrap: pretty; }
.entry-content ul:not(.wp-block-columns *), .entry-content ol {
	padding-left: 1.4em;
	display: flex; flex-direction: column; gap: 0.55em;
}
.entry-content ul { list-style: none; }
.entry-content ul li { position: relative; padding-left: 1.3em; }
.entry-content ul li::before {
	content: "";
	position: absolute; left: 0; top: 0.55em;
	width: 7px; height: 7px;
	background: var(--accent);
	clip-path: polygon(50% 0%, 100% 35%, 100% 100%, 0% 100%, 0% 35%);
}
.entry-content ol { list-style: decimal; }
.entry-content ol li { padding-left: 0.3em; }
.entry-content a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.entry-content strong { color: var(--primary); }
.entry-content .wp-block-columns { gap: var(--gap); margin-top: 1.6em; }
.entry-content .wp-block-group { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); }
.entry-content .wp-block-separator { border: none; border-top: 1px solid var(--line); margin-block: 2.4em; width: 100%; }
.entry-content figure img { border-radius: var(--radius); }
.entry-content figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6em; }

.content-section { padding-block: var(--section-pad); }

/* ---------- Kontaktseite ---------- */
.contact-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.contact-info { grid-column: 1 / span 12; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-card { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--radius); border: 1px solid var(--line); }
.contact-card .contact-line { padding-block: 0.5rem; }
.contact-card .contact-line .icon { width: 22px; height: 22px; }
.contact-map { grid-column: 1 / span 12; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); filter: grayscale(0.25) contrast(1.05); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.contact-form-wrap { grid-column: 1 / span 12; background: var(--primary); color: var(--surface); padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius); }
.contact-form-wrap h2 { color: var(--surface); }

@media (min-width: 900px) {
	.contact-info { grid-column: 1 / span 4; }
	.contact-map { grid-column: 1 / span 4; }
	.contact-form-wrap { grid-column: 5 / span 8; grid-row: 1 / span 2; }
}

/* Contact Form 7 an Design anpassen (höhere Spezifität überschreibt Plugin-Defaults) */
.contact-form-wrap .wpcf7-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form-wrap .wpcf7-form p { margin: 0; }
.contact-form-wrap label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: oklch(97% 0.006 90 / 0.85); }
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form textarea {
	background: oklch(97% 0.006 90 / 0.08);
	border: 1.5px solid oklch(97% 0.006 90 / 0.22);
	color: var(--surface);
	border-radius: var(--radius);
	padding: 0.85em 1em;
	min-height: 48px;
	transition: border-color var(--duration-ui) var(--ease-out);
}
.contact-form-wrap .wpcf7-form textarea { min-height: 130px; resize: vertical; }
.contact-form-wrap .wpcf7-form input:focus, .contact-form-wrap .wpcf7-form textarea:focus { border-color: var(--accent); outline: none; }
.contact-form-wrap .wpcf7-form input[type="submit"].btn-primary,
.contact-form-wrap .wpcf7-submit {
	background: var(--accent); color: var(--paper); border: 0; border-radius: var(--radius);
	padding: 0.95em 1.7em; font-weight: 600; min-height: 48px; cursor: pointer;
	transition: background-color var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out);
}
.contact-form-wrap .wpcf7-submit:hover { background: oklch(52% 0.14 45); transform: translateY(-2px); }
.contact-form-wrap .wpcf7-not-valid-tip { color: var(--clay); font-size: 0.82rem; margin-top: 0.3rem; }
.contact-form-wrap .wpcf7-response-output { border-radius: var(--radius); border-color: oklch(97% 0.006 90 / 0.3) !important; margin-top: 1rem !important; }

/* ---------- Leistungs-Übersicht / Detailseiten Cross-Links ----------
   Bewusst als rohes HTML (wp:html) statt wp:group angelegt, damit die generische
   .entry-content .wp-block-group-Regel (Hintergrund/Padding) hier nicht kollidiert. */
.related-services { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 1.6em; }
.related-service-card {
	grid-column: span 12;
	display: flex; flex-direction: column; gap: 0.5rem;
	padding: 1.3rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none !important;
	transition: border-color var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out);
}
.related-service-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.related-service-card strong { font-family: var(--font-display); font-size: 1.08rem; color: var(--accent); }
.related-service-card span { font-size: 0.92rem; color: var(--ink-soft); }
@media (min-width: 600px) { .related-service-card { grid-column: span 6; } }

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.error-404 .eyebrow { justify-content: center; }
.error-404 .eyebrow::before { display: none; }