/*
Theme Name: Schröer
Theme URI: https://schroeer.law/
Author: Schröer Tax Law Consulting
Description: Schlankes Block-Theme für Schröer Tax Law Consulting. Inhalte und Bilder werden vollständig im Editor gepflegt.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: schroeer
*/

:root {
	--sk-radius: 14px;
	--sk-teal: #1b8c9a;
	--sk-shadow: 0 10px 30px rgba(10, 45, 42, 0.08);
	--sk-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke-width='14'%3E%3Ccircle cx='200' cy='200' r='178' stroke='%2376C043' stroke-opacity='.45'/%3E%3Ccircle cx='238' cy='200' r='126' stroke='%231B8C9A' stroke-opacity='.5'/%3E%3Ccircle cx='268' cy='200' r='76' stroke='%23ffffff' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(a):focus-visible,
:where(button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
}
::selection { background: var(--wp--preset--color--hellgruen); }

/* ---------- Kopfbereich ---------- */
.sk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	backdrop-filter: saturate(160%) blur(8px);
}
.admin-bar .sk-header { top: 32px; }
.sk-header-inner { gap: 1.5rem; }
.sk-header .wp-block-site-logo img { width: 190px; height: auto; }
.sk-header-nav { gap: 1.75rem; }
.sk-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--text); }
.sk-header .wp-block-navigation a:hover,
.sk-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--tiefgruen-2); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--wp--preset--color--akzent); }
.sk-header-cta .wp-block-button__link { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 2rem 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff !important; font-size: 1.5rem; }
@media (max-width: 781px) {
	.admin-bar .sk-header { top: 0; }
	.sk-header .wp-block-site-logo img { width: 150px; }
	.sk-header-cta { display: none; }
}

/* ---------- Seitenkopf ---------- */
.sk-main { padding-bottom: clamp(3rem, 7vw, 6rem); }
.sk-main--home { padding-bottom: 0; }
.sk-main > .wp-block-post-content > :first-child.alignfull { margin-top: 0; }
.sk-pagehead {
	background: var(--sk-rings) no-repeat right -60px center / 420px auto,
		linear-gradient(135deg, var(--wp--preset--color--tiefgruen-2) 0%, var(--wp--preset--color--tiefgruen) 100%);
	color: #fff;
	padding-top: clamp(3rem, 7vw, 5.5rem) !important;
	padding-bottom: clamp(3rem, 7vw, 5.5rem) !important;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.sk-pagehead h1 { color: #fff; max-width: 18ch; margin: 0; }
@media (max-width: 781px) {
	.sk-pagehead { background-size: 260px auto, auto; background-position: right -110px center, 0 0; }
}

/* ---------- Typografie-Bausteine ---------- */
.sk-kicker {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tiefgruen-2);
	margin-bottom: 0.5rem !important;
}
.sk-lead { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.55; }
.sk-intro { color: var(--wp--preset--color--text-leise); max-width: 640px; margin-top: 0.5rem !important; }
.sk-role { color: var(--wp--preset--color--text-leise); font-weight: 600; margin-top: 0.25rem !important; }
.sk-note { color: var(--wp--preset--color--text-leise); font-size: 0.9375rem; }
.sk-more a { font-weight: 700; text-decoration: none; }
.sk-more a::after { content: " →"; transition: margin 0.15s; }
.sk-more a:hover::after { margin-left: 4px; }
.sk-todo { background: #fff4d6; border-left: 4px solid #d9a400; padding: 0.75rem 1rem; font-weight: 700; }

/* Listen */
.sk-chips { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sk-chips li { background: var(--wp--preset--color--hellgruen); color: #234023; border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.875rem; font-weight: 600; }
.sk-checks { list-style: none; padding: 0; }
.sk-checks li { position: relative; padding-left: 2rem; margin: 0.7rem 0; }
.sk-checks li::before {
	content: "";
	position: absolute; left: 0; top: 0.35em;
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	background: var(--wp--preset--color--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23102B12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.sk-timeline { list-style: none; padding: 0 0 0 1.25rem; border-left: 2px solid var(--wp--preset--color--linie); }
.sk-timeline li { position: relative; margin: 0.8rem 0; }
.sk-timeline li::before { content: ""; position: absolute; left: calc(-1.25rem - 6px); top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--akzent); }

/* Buttons: Kontur-Variante */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--tiefgruen);
	border: 2px solid currentColor;
	padding: calc(0.8rem - 2px) calc(1.5rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--hellgruen); }

/* ---------- Hero (Startseite) ---------- */
.sk-hero {
	background: var(--sk-rings) no-repeat left -140px bottom -160px / 460px auto,
		linear-gradient(135deg, var(--wp--preset--color--tiefgruen-2) 0%, var(--wp--preset--color--tiefgruen) 70%);
	color: #fff;
	padding-top: clamp(3rem, 8vw, 6.5rem) !important;
	padding-bottom: clamp(3rem, 8vw, 6.5rem) !important;
	margin-top: 0 !important;
}
.sk-hero h1 { color: #fff; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.08; max-width: 14ch; }
.sk-hero .sk-kicker { color: var(--wp--preset--color--akzent); }
.sk-hero .sk-lead { color: rgba(255, 255, 255, 0.88); max-width: 34em; }
.sk-hero-cols { align-items: center !important; gap: clamp(2rem, 5vw, 4rem) !important; }
.sk-hero-img img { border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); max-height: 560px; width: 100%; }
.sk-hero .is-style-outline > .wp-block-button__link,
.sk-band--dark .is-style-outline > .wp-block-button__link { color: #fff; }
.sk-hero .is-style-outline > .wp-block-button__link:hover,
.sk-band--dark .is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 781px) {
	.sk-hero-img img { max-height: 340px; aspect-ratio: 4 / 3 !important; }
}

/* ---------- Abschnitte ---------- */
.sk-section { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.sk-section--tight { padding-top: clamp(2rem, 4vw, 3rem); }
.sk-band { padding-top: clamp(3rem, 7vw, 5.5rem) !important; padding-bottom: clamp(3rem, 7vw, 5.5rem) !important; margin-top: clamp(3rem, 7vw, 5.5rem) !important; }
.sk-band--light { background: var(--wp--preset--color--hellgruen); }
.sk-band--dark {
	background: var(--sk-rings) no-repeat right -120px center / 380px auto, var(--wp--preset--color--tiefgruen);
	color: rgba(255, 255, 255, 0.88);
}
.sk-band--dark h2 { color: #fff; }
.sk-cta { text-align: left; }
.sk-split { align-items: center !important; gap: clamp(2rem, 5vw, 4rem) !important; }
.sk-rounded img { border-radius: var(--sk-radius); }

/* Karten */
.sk-cards { gap: 1.5rem !important; margin-top: 2rem !important; }
.sk-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--sk-radius);
	padding: 1.75rem !important;
	display: flex; flex-direction: column;
	transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.sk-card:hover { box-shadow: var(--sk-shadow); border-color: var(--wp--preset--color--akzent); transform: translateY(-2px); }
.sk-card h3 { margin-top: 0; margin-bottom: 0.5rem; }
.sk-card h3 + p { margin-top: 0.5rem !important; }
.sk-card h3 a, .sk-person h3 a, .sk-contact h3 a { color: var(--wp--preset--color--tiefgruen); text-decoration: none; }
.sk-card .sk-more { margin-top: auto; padding-top: 1rem; }

/* Personen */
.sk-people { gap: 2rem !important; margin-top: 2rem !important; }
.sk-person { background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sk-radius); padding: 1rem 1rem 1.5rem !important; }
.sk-person .sk-portrait { margin-bottom: 1.25rem; }
.sk-person h3, .sk-person p, .sk-person ul { padding-left: 0.5rem; padding-right: 0.5rem; }
.sk-portrait img { border-radius: 10px; width: 100%; object-position: 50% 20%; }
.sk-person .sk-portrait img { max-height: 440px; }

.sk-contact { background: #fff; border: 1px solid var(--wp--preset--color--linie); border-left: 4px solid var(--wp--preset--color--akzent); border-radius: var(--sk-radius); padding: 1.5rem !important; margin-top: 2.5rem !important; }
.sk-contact-cols { align-items: center !important; gap: 1.5rem !important; margin: 0 !important; }
.sk-contact-img { flex: 0 0 120px !important; }
.sk-avatar img { border-radius: 50%; width: 120px; object-position: 50% 20%; }
.sk-contact .sk-kicker { margin: 0 !important; }
.sk-contact h3 { margin: 0.2rem 0 0; }
.sk-contact p { margin: 0.25rem 0 0; }
@media (max-width: 781px) { .sk-contact-img { flex-basis: auto !important; } }

/* Profil */
.sk-profile { gap: clamp(2rem, 5vw, 4rem) !important; align-items: flex-start !important; }
.sk-profile .sk-portrait { position: sticky; top: 110px; }
.sk-profile .sk-role { font-size: 1.25rem; color: var(--wp--preset--color--tiefgruen); margin-top: 0 !important; }
.sk-profile h3 { margin-top: 2rem; }

/* Kanzleidaten-Block */
.sk-kd { font-style: normal; }
.sk-kd--karte { background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sk-radius); padding: 1.5rem; height: 100%; }
.sk-kd__name { font-weight: 700; color: var(--wp--preset--color--tiefgruen); font-size: 1.25rem; margin: 0; }
.sk-kd__badge { display: inline-block; margin-left: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #234023; background: var(--wp--preset--color--hellgruen); border-radius: 999px; padding: 0.1rem 0.6rem; vertical-align: middle; }
.sk-kd p { margin: 0.5rem 0 0; }
.sk-kd__route a { font-weight: 700; text-decoration: none; }
.sk-kd__route a::after { content: " ↗"; }
.sk-locations { gap: 1.5rem !important; margin-top: 1.5rem !important; }
.sk-aside { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---------- Kontaktformular ---------- */
.sk-form { display: grid; gap: 1.1rem; background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sk-radius); padding: clamp(1.25rem, 3vw, 2rem); }
.sk-form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .sk-form__row { grid-template-columns: 1fr; } }
.sk-form label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.35rem; }
.sk-form input[type=text], .sk-form input[type=email], .sk-form input[type=tel], .sk-form select, .sk-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
	padding: 0.7rem 0.85rem; border: 1px solid #b9c6bd; border-radius: 8px; background: #fff; color: inherit;
}
.sk-form textarea { min-height: 170px; resize: vertical; }
.sk-form input:focus, .sk-form select:focus, .sk-form textarea:focus { border-color: var(--wp--preset--color--tiefgruen-2); outline: 2px solid var(--wp--preset--color--akzent); outline-offset: 1px; }
.sk-form__check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; }
.sk-form__check input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--tiefgruen-2); }
.sk-form__check label { font-weight: 400; margin: 0; }
.sk-form__hint { font-size: 0.875rem; color: var(--wp--preset--color--text-leise); margin: 0; }
.sk-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sk-form button { justify-self: start; border: 0; cursor: pointer; }
.sk-form__msg { border-radius: 10px; padding: 1rem 1.25rem; font-weight: 600; }
.sk-form__msg--ok { background: var(--wp--preset--color--hellgruen); color: #234023; }
.sk-form__msg--err { background: #fde8e8; color: #7a1c1c; }

/* ---------- Fußbereich ---------- */
.sk-footer {
	background: var(--wp--preset--color--tiefgruen);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9375rem;
	padding-top: clamp(3rem, 6vw, 4.5rem) !important;
	padding-bottom: 2rem !important;
	margin-top: 0 !important;
}
.sk-footer a { color: #fff; text-decoration: none; }
.sk-footer a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--akzent); }
.sk-footer-cols { gap: 2rem !important; }
.sk-footer-brand { color: #fff; font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem !important; }
.sk-footer-head, .sk-footer .sk-kd__name { color: #fff; font-weight: 700; font-size: 1rem; }
.sk-footer .sk-kd__badge { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sk-footer-links { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.sk-footer-links li { margin: 0.35rem 0; }
.sk-footer-copy { max-width: var(--wp--style--global--wide-size) !important; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.25rem; margin-top: 2.5rem !important; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Seiten, die mit dem dunklen Kontakt-Band enden, schließen direkt an den Fußbereich an. */
.sk-main:has(> .wp-block-post-content > .sk-cta:last-child) { padding-bottom: 0; }
.wp-block-post-content > .sk-cta:last-child { margin-bottom: 0 !important; }