/*
 * Fundament – ergänzende Styles (Produkt-/Admin-Look von SimpleForYou).
 * Design-Sprache: flache, randbasierte Flächen statt Schatten, Hairline-Borders
 * (rgba(16,24,40,.08)), Primary-getönte Hover-/Active-States, weiche Radien.
 * Farben/Typografie/Layout kommen aus theme.json.
 */

/* Sanftes Scrollen zu In-Page-Ankern (#services, #about, #contact …). */
html {
	scroll-behavior: smooth;
}

:where(section[id], div[id]) {
	scroll-margin-top: 2rem;
}

/* ── Moderner Hintergrund: heller Verlauf mit dezentem Teal-Schimmer ───── */
body {
	background-color: var(--wp--preset--color--background);
	background-image:
		radial-gradient(60rem 40rem at 12% -8%, rgba(17, 75, 95, 0.06), transparent 60%),
		radial-gradient(50rem 36rem at 100% 0%, rgba(17, 75, 95, 0.05), transparent 55%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── App-Shell: transparenter Header (nimmt den Seitenhintergrund auf) ── */
.site-header__main {
	background-color: transparent;
	border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.site-footer {
	background-color: var(--wp--preset--color--surface);
	border-top: 1px solid rgba(16, 24, 40, 0.08);
}

/* Hauptinhalt bündig unter die Navigation: kein Block-Gap-Abstand (sonst
   blitzt zwischen Header-Border und erster Sektion ein heller Balken durch). */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Erste Sektion ohne eigenen Top-Border – zusammen mit dem Border-Bottom der
   Navigation entstünde sonst eine doppelte, zu dicke Linie. */
.wp-site-blocks > main > .has-surface-background-color.has-background:first-child {
	border-top: 0;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.custom-logo {
	max-height: 72px;
	width: auto;
	height: auto;
	display: block;
}

/* ── Navigation: modernes Pill-Menü (wie Admin-Drawer-Items) ──────────── */
.wp-block-navigation {
	font-weight: 500;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	background: rgba(17, 75, 95, 0.08);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content[aria-current],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(17, 75, 95, 0.12);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* Dropdown-Untermenü: weiche Karte statt harter Kasten. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(16, 24, 40, 0.1);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
	padding: 6px;
	margin-top: 10px;
	min-width: 210px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	border-radius: 8px;
}

/* Mobiles Overlay-Menü: saubere Fläche mit weichen Items. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: 12px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.05rem;
}

/* Mobil: Logo bleibt links, der Menü-(Hamburger-)Button rückt rechts daneben.
   Der „Jetzt anfragen"-Button wird ausgeblendet (er steht im Menü als Sektion
   ohnehin bereit), der Login-Button bleibt sichtbar – nur kompakter, denn er
   ist der einzige Weg ins Portal. */
@media (max-width: 600px) {
	.site-header__actions .wp-block-button.header-cta {
		display: none;
	}

	.site-header__actions .wp-block-button.header-login .wp-block-button__link {
		padding: 8px 14px;
		font-size: 0.9rem;
	}

	/* Logo + Burger sicher auf einer Zeile halten (kein Umbruch/Überlauf):
	   Logo darf schrumpfen, die Actions (Burger) bleiben rechts fixiert. */
	.site-header__main > .wp-block-group {
		flex-wrap: nowrap;
	}

	.site-header__actions {
		flex-shrink: 0;
		margin-left: auto;
	}

	.site-header .wp-block-site-logo,
	.site-header .custom-logo-link {
		min-width: 0;
	}

	.site-header .custom-logo,
	.site-header .wp-block-site-logo img {
		max-width: 150px;
		height: auto;
	}
}

/* ── Karten: flach + randbasiert (Admin-„v-card"-Sprache) ─────────────── */
.wp-block-group.has-base-background-color.has-background {
	border: 1px solid rgba(16, 24, 40, 0.08);
	box-shadow: none !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-group.has-base-background-color.has-background:hover {
	border-color: rgba(17, 75, 95, 0.22);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06) !important;
}

/* Icon-Chips / Sub-Panels auf Sektionen: dezent abgesetzt. */
.wp-block-group.has-surface-background-color.has-background {
	border: 1px solid rgba(16, 24, 40, 0.05);
}

/* Bilder weich gerundet mit zartem Rand. */
.wp-block-image img {
	border: 1px solid rgba(16, 24, 40, 0.06);
}

/* ── Über-uns: zentrierter Intro-Block ────────────────────────────────── */
.about-intro {
	text-align: center;
}

.about-intro .wp-block-buttons {
	justify-content: center;
}

/* ── Leistungs-Karten: Inhalt zentriert ───────────────────────────────── */
.service-card {
	text-align: center;
}

/* ── Leistungs-Icons (Chip mit Teal-Tönung) ───────────────────────────── */
.service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 20px;
	background: rgba(17, 75, 95, 0.1);
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
}

.service-icon svg {
	display: block;
	width: 42px;
	height: 42px;
}

/* ── Listen ───────────────────────────────────────────────────────────── */
.wp-block-list.is-style-no-bullets {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* ── Footer-Links: dezent, Primary beim Hover ─────────────────────────── */
.site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Footer-Markentitel kräftig (nicht gedimmt wie die Link-Liste). */
.site-footer .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
}

/* ── Preis-Karten ─────────────────────────────────────────────────────── */
.pricing-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Button-Block ans Kartenende schieben (alle CTAs auf gleicher Höhe). */
.pricing-card .wp-block-buttons {
	margin-top: auto !important;
}

.pricing-features li {
	position: relative;
	padding-left: 28px;
	list-style: none;
}

.pricing-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* „Beliebt"-Badge */
.pricing-badge {
	display: inline-block;
	color: var(--wp--preset--color--primary) !important;
	background: rgba(17, 75, 95, 0.1);
	padding: 4px 14px;
	border-radius: 999px;
}

/* Hervorgehobene Karte: Teal-Rahmen + weicher Teal-Schatten */
.pricing-card--featured.has-base-background-color.has-background {
	border-color: rgba(17, 75, 95, 0.5);
	box-shadow: 0 18px 44px rgba(17, 75, 95, 0.18) !important;
}

.pricing-card--featured.has-base-background-color.has-background:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 22px 52px rgba(17, 75, 95, 0.24) !important;
}

/* ── Buttons: flach, Primary-Tönung statt großer Schlagschatten ───────── */
.wp-block-button .wp-block-button__link {
	box-shadow: none;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 6px 16px rgba(17, 75, 95, 0.22);
}

/* Outline-Button: Hairline-Rahmen → Primary-Tönung beim Hover. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	border-color: rgba(16, 24, 40, 0.14);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background-color: rgba(17, 75, 95, 0.08);
}

/* ── Kontaktsektion: Icons neben den Infoblöcken ──────────────────────── */
.contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(17, 75, 95, 0.1);
	color: var(--wp--preset--color--primary);
}

.contact-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Karte mit dem Formular: gleiche Hairline-Sprache wie die übrigen Karten. */
.contact-card {
	height: 100%;
}

/* ── Kontaktformular ──────────────────────────────────────────────────── */
.cc-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* Honeypot: für Menschen unsichtbar, für Bots erreichbar. */
.cc-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cc-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
	.cc-form__row {
		grid-template-columns: 1fr;
	}
}

.cc-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.cc-form__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.cc-form__req {
	color: var(--wp--preset--color--accent);
}

.cc-form__hint {
	font-weight: 400;
	color: var(--wp--preset--color--body);
	opacity: 0.75;
}

/*
 * box-sizing gehört hier zwingend dazu: WordPress setzt in Block-Themes KEINEN
 * globalen border-box-Reset. Ohne diese Zeile addiert der Browser Innenabstand
 * und Rahmen auf die 100 % Breite – die Felder werden breiter als ihre
 * Grid-Spalte und schieben sich in der zweispaltigen Zeile ineinander
 * (Name/E-Mail, Telefon/Auswahl). In der Vorschau fiel das nicht auf, weil
 * deren Emulation ein `* { box-sizing: border-box }` mitbringt.
 */
.cc-form__row,
.cc-form__field,
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form input[type="tel"],
.cc-form select,
.cc-form textarea {
	box-sizing: border-box;
}

.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form input[type="tel"],
.cc-form select,
.cc-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(16, 24, 40, 0.14);
	border-radius: 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	appearance: none;
}

.cc-form textarea {
	resize: vertical;
	min-height: 150px;
	line-height: 1.6;
}

/* Pfeil des Auswahlfelds selbst zeichnen (appearance:none entfernt ihn). */
.cc-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475467' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 16px 16px;
	padding-right: 2.4rem;
}

.cc-form input::placeholder,
.cc-form textarea::placeholder {
	color: var(--wp--preset--color--body);
	opacity: 0.55;
}

.cc-form input:focus,
.cc-form select:focus,
.cc-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(17, 75, 95, 0.12);
}

/* Erst nach dem Absenden rot markieren, nicht schon beim Tippen. */
.cc-form input:user-invalid,
.cc-form textarea:user-invalid {
	border-color: var(--wp--preset--color--accent);
}

.cc-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.cc-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--wp--preset--color--primary);
}

.cc-form__consent label {
	font-weight: 400;
	color: var(--wp--preset--color--body);
}

.cc-form__actions {
	margin: 0;
}

/* Vollständig ausformuliert, damit der <button> nicht auf Browser-Defaults
   zurückfällt – .wp-element-button liefert im Frontend dieselben Werte. */
.cc-form__submit {
	display: inline-block;
	padding: 0.9rem 1.8rem;
	border: 1px solid transparent;
	border-radius: 12px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.cc-form__submit:hover,
.cc-form__submit:focus {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--light);
	box-shadow: 0 6px 16px rgba(17, 75, 95, 0.22);
}

.cc-form__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
	opacity: 0.8;
}

/* Rückmeldung nach dem Absenden (Post/Redirect/Get). */
.cc-form__notice {
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.cc-form__notice--ok {
	background: rgba(17, 75, 95, 0.08);
	border-color: rgba(17, 75, 95, 0.24);
	color: var(--wp--preset--color--primary);
}

.cc-form__notice--error {
	background: rgba(249, 112, 102, 0.1);
	border-color: rgba(249, 112, 102, 0.4);
	color: #b42318;
}

/* Mehrere Meldungen auf einmal – ohne Aufzählungszeichen bei nur einer. */
.cc-form__errors {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-form__errors li + li {
	margin-top: 0.4rem;
}

.cc-form__errors:has(li + li) {
	padding-left: 1.1rem;
	list-style: disc;
}

/* Rechenaufgabe: schmales Feld, damit es nicht wie ein Textfeld wirkt. */
.cc-form__captcha input {
	max-width: 8rem;
}

/* ── Rechtsseiten (Impressum, Datenschutz, AGB) ───────────────────────── */
.legal-page > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.legal-page h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.legal-page ul {
	padding-left: 1.2rem;
}

.legal-page li + li {
	margin-top: 0.4rem;
}