/*
Theme Name: Kaufmann-Assistenz
Theme URI: https://kaufmann-assistenz.de/
Author: Marcel Kaufmann
Description: Schlankes, sicheres Block-Theme für Shopify-Experten und virtuelle Assistenz. Ohne Page-Builder, ohne externe Ressourcen, Schriften lokal gehostet.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaufmann-assistenz
*/

/* ------------------------------------------------------------
   Grundlagen
------------------------------------------------------------ */
html { scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
p, li { max-width: 68ch; }
.has-text-align-center { margin-inline: auto; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--petrol);
	outline-offset: 3px;
	border-radius: 4px;
}

.lf-skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--wp--preset--color--ink); color: #fff;
	padding: .75rem 1rem; border-radius: var(--wp--custom--radius--small);
}
.lf-skip-link:focus { top: 1rem; color: #fff; }

/* Abschnitte stoßen direkt aneinander, ohne Standard-Blockabstand */
.wp-site-blocks > * + *,
#inhalt > * + *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block-end: 0; }
.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0; }

/* Text-Hilfsklassen */
.lf-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--muted); }
.lf-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.lf-more a, a.lf-more { font-weight: 650; text-underline-offset: .2em; text-decoration-thickness: 2px; }

/* Sekundärer Button */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	padding: calc(.95rem - 2px) calc(1.6rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------
   Sektionen
------------------------------------------------------------ */
.lf-section { padding-block: var(--wp--preset--spacing--60); }
.lf-section--tight { padding-block: var(--wp--preset--spacing--50); }
.lf-bg-mist { background: var(--wp--preset--color--mist); }
.lf-bg-white { background: var(--wp--preset--color--white); }
.lf-section > .wp-block-heading:first-child,
.lf-section > .alignwide > .wp-block-heading:first-child { margin-top: 0; }
.lf-section-head { margin-bottom: var(--wp--preset--spacing--50); }
.lf-section-head > * { margin-block: 0; }
.lf-section-head > * + * { margin-top: 1rem; }

/* ------------------------------------------------------------
   Kopfbereich
------------------------------------------------------------ */
.lf-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .lf-header { top: var(--wp-admin--admin-bar--height, 32px); }
.lf-header__inner { padding-block: .9rem; gap: 1.5rem; }
.lf-header .wp-block-navigation a:not(.wp-element-button) { text-decoration: none; }
.lf-header .wp-block-navigation a:not(.wp-element-button):hover { text-decoration: underline; text-underline-offset: .3em; }
.lf-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.lf-header .wp-block-button__link { padding: .7rem 1.2rem; font-size: var(--wp--preset--font-size--small); }
.lf-header .wp-block-site-title { white-space: nowrap; }
@media (max-width: 781px) {
	.lf-header__inner { gap: .75rem; }
	.lf-header .wp-block-button__link { padding: .55rem .9rem; font-size: .875rem; }
	.lf-header .wp-block-navigation { order: 2; }
}
@media (max-width: 380px) { .lf-header__cta { display: none !important; } }

/* ------------------------------------------------------------
   Hero mit Bestellung #1001
------------------------------------------------------------ */
.lf-hero { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); overflow: hidden; }
.lf-hero .wp-block-columns { gap: clamp(2rem, 6vw, 5rem); }
.lf-hero h1 { max-width: 17ch; margin-top: 0; }
.lf-hero .lf-lead { max-width: 52ch; }

.lf-proof {
	list-style: none; padding: 0; margin: 1.5rem 0 0;
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted);
}
.lf-proof li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.lf-proof li::before,
.lf-checks li::before {
	content: ""; flex: none; width: 1.1em; height: 1.1em;
	background: var(--wp--preset--color--petrol);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 14.6 3.9 10.3l1.4-1.4 2.9 2.9 6.5-6.5 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 14.6 3.9 10.3l1.4-1.4 2.9 2.9 6.5-6.5 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lf-order-wrap { position: relative; padding: 1.5rem 0 1rem; }
.lf-order-wrap::before {
	content: ""; position: absolute; inset: 0 -2rem 6rem 2.5rem;
	background: var(--wp--preset--color--sun-soft);
	border-radius: 40px 40px 40px 120px;
	z-index: 0;
}
.lf-order {
	position: relative; z-index: 1;
	max-width: 400px; margin-inline: auto;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 24px 48px -28px rgba(18, 96, 107, .45);
	padding: 1.5rem 1.6rem 1.35rem;
	transform: rotate(-1.5deg);
	font-size: var(--wp--preset--font-size--small);
	animation: lf-order-in .7s cubic-bezier(.2, .9, .3, 1.25) .25s both;
}
.lf-order__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--wp--preset--color--muted); }
.lf-order__new {
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--ink);
	font-weight: 700; border-radius: var(--wp--custom--radius--pill); padding: .2rem .7rem;
	animation: lf-pulse 2.4s ease-in-out 1.2s 2;
}
.lf-order__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 7vw, 4.4rem); font-weight: 750; letter-spacing: -.04em; line-height: 1;
	margin: .75rem 0 .2rem; color: var(--wp--preset--color--ink);
}
.lf-order__caption { margin: 0 0 1.1rem; color: var(--wp--preset--color--petrol); font-weight: 650; }
.lf-order__items { list-style: none; margin: 0; padding: .9rem 0; border-block: 1px dashed var(--wp--preset--color--line); }
.lf-order__items li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; max-width: none; }
.lf-order__sum { display: flex; justify-content: space-between; align-items: center; padding-top: .9rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.lf-order__paid {
	display: inline-flex; align-items: center; gap: .35rem; font-weight: 650;
	color: var(--wp--preset--color--petrol); background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--pill); padding: .2rem .65rem;
}
.lf-order-note { position: relative; z-index: 1; text-align: center; margin: 1.4rem auto 0; max-width: 34ch; }

@keyframes lf-order-in {
	from { opacity: 0; transform: translateY(24px) rotate(2deg) scale(.96); }
	to   { opacity: 1; transform: translateY(0) rotate(-1.5deg) scale(1); }
}
@keyframes lf-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 200, 75, .7); }
	50% { box-shadow: 0 0 0 8px rgba(245, 200, 75, 0); }
}

/* ------------------------------------------------------------
   Vertrauensleiste und Haken-Listen
------------------------------------------------------------ */
.lf-trust { padding-block: 1.6rem; border-block: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); }
.lf-checks { list-style: none; padding: 0; margin: 0; }
.lf-checks li { position: relative; padding-left: 1.75em; margin: .55rem 0; }
.lf-checks li::before { position: absolute; left: 0; top: .3em; }
.lf-checks.is-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 2rem; }
.lf-checks.is-row li { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------
   Angebote (Shop & Assistenz)
------------------------------------------------------------ */
.lf-offers.wp-block-columns { gap: 1.5rem; align-items: stretch; }
.lf-offer {
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(1.6rem, 3.5vw, 2.6rem);
	height: 100%;
	display: flex; flex-direction: column;
}
.lf-offer > * { margin-block: 0; }
.lf-offer > * + * { margin-top: 1rem; }
.lf-offer > .wp-block-buttons, .lf-offer > .lf-more { margin-top: auto; padding-top: 1.25rem; }
.lf-offer--primary { background: var(--wp--preset--color--mist); }
.lf-offer--secondary { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); }
.lf-tag {
	display: inline-block; width: fit-content;
	font-size: var(--wp--preset--font-size--small); font-weight: 650;
	background: var(--wp--preset--color--sun-soft); color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill); padding: .25rem .8rem;
}

.lf-va { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--line); }
.lf-va > * { margin-block: 0; }
.lf-va > * + * { margin-top: .75rem; }
.lf-linklist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.lf-linklist li { margin: 0; }
.lf-linklist a {
	display: inline-block; text-decoration: none; color: var(--wp--preset--color--ink); font-weight: 550;
	border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill); padding: .45rem 1rem;
}
.lf-linklist a:hover { border-color: var(--wp--preset--color--petrol); color: var(--wp--preset--color--petrol); }

/* ------------------------------------------------------------
   Band (Gründer-Paket) und Abschluss-CTA
------------------------------------------------------------ */
.lf-band { background: var(--wp--preset--color--petrol); color: var(--wp--preset--color--white); }
.lf-band :where(h2, h3, p, li) { color: var(--wp--preset--color--white); }
.lf-band a:not(.wp-element-button) { color: var(--wp--preset--color--sun); }
.lf-band .lf-checks li::before { background: var(--wp--preset--color--sun); }
.lf-band .lf-checks li { font-size: var(--wp--preset--font-size--large); }
.lf-band .wp-block-columns { gap: clamp(2rem, 6vw, 5rem); }

.lf-cta { background: var(--wp--preset--color--sun); }
.lf-cta .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.lf-cta .wp-block-button__link:hover { background: var(--wp--preset--color--petrol-dark); color: var(--wp--preset--color--white); }
.lf-cta h2 { max-width: 20ch; }

/* ------------------------------------------------------------
   Ablauf (echte Reihenfolge, daher nummeriert)
------------------------------------------------------------ */
ol.lf-steps {
	list-style: none; padding: 0; margin: 0; counter-reset: lf-step;
	display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
ol.lf-steps > li {
	counter-increment: lf-step; position: relative; margin: 0;
	padding-top: 4.2rem; border-top: 2px solid var(--wp--preset--color--ink);
}
ol.lf-steps > li::before {
	content: counter(lf-step);
	position: absolute; top: .9rem; left: 0;
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: 2.4rem; line-height: 1; color: var(--wp--preset--color--petrol);
}
ol.lf-steps strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); margin-bottom: .35rem; }

/* ------------------------------------------------------------
   Referenzen, Bilder, Über mich
------------------------------------------------------------ */
.lf-frame img, .lf-frame.wp-block-image img {
	border-radius: var(--wp--custom--radius--large);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	display: block; width: 100%;
}
.lf-ref > * { margin-block: 0; }
.lf-ref > * + * { margin-top: .85rem; }
.lf-ref h3 { margin-top: 1.4rem; }
.lf-refs.wp-block-columns { gap: clamp(1.5rem, 4vw, 3rem); }
.lf-about.wp-block-columns { gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.lf-about .lf-frame img { border-radius: 24px 24px 24px 90px; }

/* ------------------------------------------------------------
   Pakete
------------------------------------------------------------ */
.lf-tiers.wp-block-columns { gap: 1.25rem; align-items: stretch; }
.lf-tier {
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large); padding: 2rem 1.75rem; height: 100%;
	display: flex; flex-direction: column;
}
.lf-tier > * { margin-block: 0; }
.lf-tier > * + * { margin-top: .9rem; }
.lf-tier > .wp-block-buttons { margin-top: auto; padding-top: 1.25rem; }
.lf-tier--featured { border: 2px solid var(--wp--preset--color--petrol); box-shadow: 0 20px 40px -30px rgba(18, 96, 107, .6); }
.lf-price { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; }

/* ------------------------------------------------------------
   Unterseiten-Kopf
------------------------------------------------------------ */
.lf-pagehead { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); background: var(--wp--preset--color--mist); }
.lf-pagehead h1 { max-width: 20ch; margin-top: 0; }
.lf-pagehead .lf-lead { color: var(--wp--preset--color--muted); }
.lf-facts { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--large); padding: 1.5rem 1.75rem; }
.lf-facts li { margin: .3rem 0; }

/* ------------------------------------------------------------
   FAQ
------------------------------------------------------------ */
.lf-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 1.1rem; margin: 0;
}
.lf-faq .wp-block-details:first-of-type { border-top: 1px solid var(--wp--preset--color--line); }
.lf-faq summary {
	cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem;
	font-family: var(--wp--preset--font-family--display); font-weight: 650; font-size: var(--wp--preset--font-size--large);
}
.lf-faq summary::-webkit-details-marker { display: none; }
.lf-faq summary::after {
	content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--petrol); transition: transform .2s;
}
.lf-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lf-faq details > p { margin-top: .75rem; color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------
   Kontaktformular
------------------------------------------------------------ */
.lf-form { display: grid; gap: 1.25rem; max-width: 640px; }
.lf-form__row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lf-form label { display: block; font-weight: 650; margin-bottom: .4rem; }
.lf-form .lf-optional { font-weight: 400; color: var(--wp--preset--color--muted); }
.lf-form input[type="text"], .lf-form input[type="email"], .lf-form select, .lf-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; color: inherit;
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--small);
	padding: .8rem .9rem;
}
.lf-form textarea { min-height: 170px; resize: vertical; }
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus { border-color: var(--wp--preset--color--petrol); }
.lf-form [aria-invalid="true"] { border-color: #B3261E; }
.lf-form__check { display: flex; gap: .7rem; align-items: flex-start; }
.lf-form__check input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--wp--preset--color--petrol); flex: none; }
.lf-form__check label { font-weight: 400; margin: 0; }
.lf-form button {
	justify-self: start; cursor: pointer; border: 0;
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--ink);
	font: inherit; font-weight: 650; border-radius: var(--wp--custom--radius--pill); padding: .95rem 1.8rem;
}
.lf-form button:hover { background: #EDB92C; }
.lf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.lf-alert { border-radius: var(--wp--custom--radius--small); padding: 1rem 1.2rem; margin-bottom: 1.5rem; border: 1.5px solid; }
.lf-alert--error { border-color: #B3261E; background: #FCEEEE; color: #5F1410; }
.lf-alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.lf-field-error { color: #B3261E; font-size: var(--wp--preset--font-size--small); margin: .35rem 0 0; }

/* ------------------------------------------------------------
   Fußbereich
------------------------------------------------------------ */
.lf-footer { background: var(--wp--preset--color--ink); color: #DCE6E3; padding-block: var(--wp--preset--spacing--60) 2rem; }
.lf-footer :where(h2, h3, p, li) { color: #DCE6E3; }
.lf-footer h2 { font-size: var(--wp--preset--font-size--medium); font-family: var(--wp--preset--font-family--body); font-weight: 700; color: #fff; margin-bottom: .75rem; }
.lf-footer a { color: #fff; text-decoration: none; }
.lf-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }
.lf-footer ul { list-style: none; padding: 0; margin: 0; }
.lf-footer li { margin: .45rem 0; }
.lf-footer .wp-block-site-title a { color: #fff; }
.lf-footer__bottom { margin-top: var(--wp--preset--spacing--50); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: var(--wp--preset--font-size--small); }

/* ------------------------------------------------------------
   Ratgeber
------------------------------------------------------------ */
.lf-posts .wp-block-post { border-top: 1px solid var(--wp--preset--color--line); padding-block: 1.75rem; }
.lf-posts .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); margin: .3rem 0 .6rem; }
.lf-posts .wp-block-post-date { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.lf-article .wp-block-post-content > * { max-width: 68ch; }

/* ------------------------------------------------------------
   Responsiv und Bewegung
------------------------------------------------------------ */
@media (max-width: 781px) {
	.lf-order { transform: none; }
	.lf-order-wrap::before { inset: 0 -1rem 6rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}