/* ==========================================================================
   QUASI – Abschnitts-Styles
   Farben, Schriften und Grössen kommen aus theme.json (WordPress-Variablen).
   Hier steht nur, was theme.json nicht kann: Raster, Karten, Laufband usw.
   Jeder Abschnitt hat eine eigene Klasse (quasi-hero, quasi-shop, …).
   ========================================================================== */

/* ── Kurznamen für die Werte aus theme.json ─────────────────────────────── */
:root,
.editor-styles-wrapper {
	--green: var(--wp--preset--color--green);
	--green-hv: var(--wp--preset--color--green-hv);
	--green-lt: var(--wp--preset--color--green-lt);
	--bg: var(--wp--preset--color--bg);
	--bg2: var(--wp--preset--color--bg-2);
	--border: var(--wp--preset--color--border);
	--text: var(--wp--preset--color--text);
	--grey: var(--wp--preset--color--grey);
	--white: var(--wp--preset--color--white);
	--r: var(--wp--custom--radius, 6px);
	--max: var(--wp--custom--max, 1200px);
	--font-head: var(--wp--preset--font-family--barlow-condensed);
	--font-body: var(--wp--preset--font-family--barlow);
}

/* ── Grundlage ──────────────────────────────────────────────────────────── */
:where(.quasi-main, .wp-block-template-part) *,
:where(.quasi-main, .wp-block-template-part) *::before,
:where(.quasi-main, .wp-block-template-part) *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html { scroll-behavior: smooth; }
/* Twenty Twenty-Five bricht Text «pretty» um – wir wie bisher normal */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p { text-wrap: wrap; }
body { overflow-x: hidden; }
.quasi-main img, .wp-block-template-part img { max-width: 100%; display: block; }
.quasi-main figure.wp-block-image, .wp-block-template-part figure.wp-block-image { margin: 0; }
.quasi-main strong, .wp-block-template-part strong { font-weight: 600; }
.quasi-main em, .wp-block-template-part em { font-style: normal; }
/* Ankerziele nicht unter der fixen Navigation verstecken */
.quasi-main [id] { scroll-margin-top: 64px; }

/* ── Buttons (Grundstil kommt aus theme.json) ───────────────────────────── */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: all .2s;
	cursor: pointer;
	text-decoration: none;
}
.wp-block-button.is-style-outline-hell .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .35);
}
.wp-block-button.is-style-outline-hell .wp-block-button__link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
}
.wp-block-button.is-style-dunkel .wp-block-button__link {
	background: var(--text);
	border: 0;
	color: #fff;
	padding: .7rem 2rem;
}
.wp-block-button.is-style-dunkel .wp-block-button__link:hover { background: var(--green); border-color: var(--green); }
.wp-block-button.is-style-klein-dunkel .wp-block-button__link {
	font-size: .75rem;
	letter-spacing: .08em;
	padding: .35rem .85rem;
	background: var(--text);
	border: none;
	line-height: normal;
}
.wp-block-button.is-style-klein-dunkel .wp-block-button__link:hover { background: var(--green); }

/* ── Navigation (Kopfzeile) ─────────────────────────────────────────────── */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 200;
}
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2.5rem;
	height: 64px;
	background: var(--bg);
	border-bottom: 2px solid var(--text);
}
.nav-logo img { display: block; width: 48px; height: 42px; }
.nav .wp-block-navigation { gap: 2rem; }
.nav .wp-block-navigation .wp-block-navigation__container { gap: 2rem; align-items: center; }
.nav .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--grey);
	transition: color .2s;
	line-height: 1.5;
}
.nav .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--text); }
.nav .wp-block-navigation .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
	font-weight: 800;
	padding: .55rem 1.4rem;
	background: var(--green);
	color: #fff;
	border-radius: var(--r);
	transition: background .2s;
}
.nav .wp-block-navigation .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content:hover { background: var(--green-hv); color: #fff; }

/* Burger-Knopf: drei Striche wie bisher */
.nav .wp-block-navigation__responsive-container-open {
	width: 32px;
	height: 26px;
	padding: 4px;
	background: none;
	border: 0;
	position: relative;
	cursor: pointer;
	color: var(--text);
}
.nav .wp-block-navigation__responsive-container-open svg { display: none; }
.nav .wp-block-navigation__responsive-container-open::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 5px;
	width: 24px;
	height: 2px;
	background: var(--text);
	box-shadow: 0 7px 0 var(--text), 0 14px 0 var(--text);
}

/* Handy-Menü (Overlay) wie bisher: unter der Leiste, grosse Schrift */
.nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: calc(64px + var(--wp-admin--admin-bar--height, 0px)) 0 auto 0;
	height: auto;
	background: var(--bg) !important;
	color: var(--text) !important;
	padding: 2rem !important;
	border-bottom: 2px solid var(--text);
	z-index: 150;
	animation: none;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin: 0; padding: 0; max-width: none; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: none; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0 !important;
	align-items: stretch !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch !important;
	gap: 1.2rem !important;
	width: 100%;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	width: 100%;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-cta { align-items: stretch !important; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: normal;
	color: var(--text);
	padding: 0 !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content {
	display: flex;
	justify-content: center;
	font-size: 1rem;
	letter-spacing: .1em;
	padding: .75rem 2rem !important;
	margin-top: .5rem;
	border: 2px solid var(--green);
}
/* Wie früher: unter 900px Burger statt Links (WordPress schaltet sonst erst bei 600px um) */
@media (min-width: 600px) and (max-width: 900px) {
	.nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ── Abschnitte allgemein ───────────────────────────────────────────────── */
section.wp-block-group { padding: 5rem 2.5rem; }
.wrap { max-width: var(--max); margin: 0 auto; }
.sec-eyebrow {
	font-family: var(--font-head);
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: .6rem !important;
	display: block;
}
.sec-title {
	font-family: var(--font-head);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: .95;
	color: var(--text);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
section.quasi-hero {
	min-height: calc(100vh - 64px);
	display: flex;
	align-items: center;
	padding: 4rem 2.5rem !important;
	background: var(--text);
	position: relative;
	overflow: hidden;
}
.quasi-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(88, 100, 34, .18) 0%, transparent 65%);
	pointer-events: none;
}
.hero-inner {
	max-width: var(--max);
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}
.hero-text { z-index: 2; }
.hero-eyebrow {
	font-family: var(--font-head);
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--green-lt);
	margin-bottom: 1.2rem !important;
	display: flex;
	align-items: center;
	gap: .6rem;
}
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--green-lt); flex-shrink: 0; }
.hero-h1 {
	font-family: var(--font-head);
	font-size: clamp(3.5rem, 7vw, 7rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: .9;
	color: var(--white);
	margin-bottom: 1.5rem !important;
}
.hero-h1 em { color: var(--green-lt); font-style: normal; display: block; }
.hero-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .65);
	max-width: 460px;
	margin-bottom: 2.5rem !important;
	line-height: 1.7;
}
.hero-sub strong { color: var(--green-lt); font-weight: 600; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-founders {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 2rem !important;
	padding-top: 1.5rem !important;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.hero-founders-avatars { display: flex; }
.hero-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--green);
	background: var(--green-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-size: .8rem;
	font-weight: 900;
	color: var(--green);
	margin-right: -8px !important;
}
.hero-avatar.wp-block-image { overflow: hidden; background: var(--green-lt); padding: 0 !important; }
.hero-avatar.wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hero-founders-text { font-size: .82rem; color: rgba(255, 255, 255, .55); padding-left: .6rem !important; }
.hero-founders-text strong { color: rgba(255, 255, 255, .85); font-weight: 600; }
.hero-visual { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.hero-logo-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; text-align: center; }
.hero-logo-svg {
	width: 100%;
	max-width: 420px;
	margin: 0 auto !important;
	filter: drop-shadow(0 0 60px rgba(88, 100, 34, .5));
	animation: logoPulse 4s ease-in-out infinite;
}
.hero-logo-svg img { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
@keyframes logoPulse {
	0%, 100% { filter: drop-shadow(0 0 40px rgba(88, 100, 34, .4)); }
	50% { filter: drop-shadow(0 0 80px rgba(88, 100, 34, .7)); }
}
.hero-logo-tagline {
	font-family: var(--font-head);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .3);
	margin-top: 1.5rem !important;
}

/* ── Laufband (Block-Stil an der Gruppe, Text im Absatz) ────────────────── */
.is-style-laufband,
.is-style-laufband-hell {
	overflow: hidden;
	display: flex;
	align-items: center;
}
.is-style-laufband { height: 56px; background: var(--green); }
.is-style-laufband-hell {
	height: 72px;
	justify-content: center;
	background: var(--bg2);
	border-top: 2px solid var(--text);
	border-bottom: 2px solid var(--text);
}
.is-style-laufband > p,
.is-style-laufband-hell > p {
	font-family: var(--font-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .2em;
	white-space: pre;
	flex-shrink: 0;
}
.is-style-laufband > p { font-size: 1rem; color: #fff; opacity: .9; animation: marquee 22s linear infinite; }
.is-style-laufband-hell > p { font-size: clamp(.9rem, 2vw, 1.15rem); color: var(--grey); opacity: .5; animation: marquee 24s linear infinite; }
@keyframes marquee { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.is-style-laufband > p, .is-style-laufband-hell > p { animation: none; transform: none; }
	.hero-logo-svg { animation: none; }
	html { scroll-behavior: auto; }
}

/* ── Shop ───────────────────────────────────────────────────────────────── */
section.quasi-shop { background: var(--bg); border-top: 2px solid var(--text); padding-top: 4rem !important; }
.shop-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 3rem !important;
	gap: 1rem;
	flex-wrap: wrap;
}
.shop-header-note { font-size: .85rem; color: var(--grey); max-width: 260px; text-align: right; }
.shop-filter-row { display: flex; gap: .5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.filter-btn {
	font-family: var(--font-head);
	font-size: .8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: .45rem 1rem;
	border: 2px solid var(--border);
	border-radius: 20px;
	cursor: pointer;
	background: transparent;
	color: var(--grey);
	transition: all .2s;
	line-height: normal;
}
.filter-btn:hover, .filter-btn.active { background: var(--text); border-color: var(--text); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem !important; }
.shop-card {
	background: var(--bg2);
	border: 2px solid var(--text);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s;
	cursor: pointer;
	position: relative;
}
.shop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.shop-card.is-hidden { display: none; }
.shop-card-img {
	aspect-ratio: 1 / 1;
	background: var(--green-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border-bottom: 2px solid var(--text);
}
.shop-card-img .wp-block-image { width: 100%; height: 100%; }
.shop-card-img .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.shop-card:hover .shop-card-img img { transform: scale(1.06); }
.shop-card-img .tag,
.shop-card-img .new-badge {
	position: absolute;
	top: .7rem;
	color: #fff;
	font-family: var(--font-head);
	font-size: .65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: .2rem .6rem !important;
	border-radius: 3px;
	line-height: 1.5;
}
.shop-card-img .tag { left: .7rem; background: var(--text); }
.shop-card-img .new-badge { right: .7rem; background: var(--green); }
.shop-card-body { padding: 1.1rem 1.3rem 1.4rem !important; display: flex; flex-direction: column; gap: .2rem; }
.shop-card-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; line-height: 1.5; }
.shop-card-sub { font-size: .8rem; color: var(--grey); }
.shop-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem !important; }
.shop-card-price { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; color: var(--green); }
/* Beschreibung, Material, Grössen: nur im Produkt-Fenster sichtbar */
.quasi-produkt-details { display: none; }

.shop-cta {
	background: var(--text);
	border-radius: 8px;
	padding: 2.5rem !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.shop-cta-text { color: #fff; }
.shop-cta-title { font-family: var(--font-head); font-size: 1.8rem; font-weight: 900; text-transform: uppercase; margin-bottom: .3rem !important; line-height: 1.5; }
.shop-cta-sub { color: var(--border); font-size: .92rem; }
.shop-cta-btn { flex-shrink: 0; }

/* ── Produkt-Fenster (wird von site.js aus der Karte gebaut) ────────────── */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .75);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}
.modal-overlay * { box-sizing: border-box; margin: 0; padding: 0; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
	background: var(--bg);
	border: 2px solid var(--text);
	border-radius: 12px;
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(20px);
	transition: transform .25s;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-img-side { background: var(--green-lt); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 360px; }
.modal-img-side img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.modal-info-side { padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 36px;
	height: 36px;
	background: var(--text);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background .2s;
}
.modal-close:hover { background: var(--green); }
.modal-tag { font-family: var(--font-head); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.modal-name { font-family: var(--font-head); font-size: 2.2rem; font-weight: 900; text-transform: uppercase; line-height: .95; color: var(--text); }
.modal-price { font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: var(--green); }
.modal-desc { font-size: .92rem; color: var(--grey); line-height: 1.65; }
.modal-detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 1rem !important; background: var(--bg2); border-radius: var(--r); font-size: .82rem; }
.modal-detail-row dt { font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.modal-detail-row dd { color: var(--text); font-weight: 600; }
.modal-sizes-title { font-family: var(--font-head); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--grey); margin-bottom: .6rem !important; }
.modal-sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.size-chip {
	padding: .3rem .7rem !important;
	border: 2px solid var(--border);
	border-radius: var(--r);
	font-family: var(--font-head);
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	transition: all .15s;
	background: transparent;
	color: var(--text);
}
.size-chip:hover, .size-chip.active { background: var(--text); border-color: var(--text); color: #fff; }
.modal-buy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1rem !important;
	background: var(--green);
	color: #fff;
	border: none;
	border-radius: var(--r);
	font-family: var(--font-head);
	font-size: 1.1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background .2s;
	margin-top: auto;
	text-decoration: none;
}
.modal-buy-btn:hover { background: var(--green-hv); color: #fff; }
.modal-note { font-size: .75rem; color: var(--grey); text-align: center; line-height: 1.5; }

/* ── Wer wir sind ───────────────────────────────────────────────────────── */
.quasi-ueberuns { background: var(--text); border-top: 2px solid var(--text); overflow: hidden; }
.ueberuns-inner { max-width: var(--max); margin: 0 auto; padding: 5rem 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ueberuns-eyebrow { font-family: var(--font-head); font-size: .8rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: var(--green-lt); margin-bottom: .6rem !important; display: block; }
.ueberuns-title { font-family: var(--font-head); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; text-transform: uppercase; line-height: .92; color: var(--white); margin-bottom: 1.5rem !important; }
.ueberuns-title em { color: var(--green-lt); font-style: normal; }
.ueberuns-p { color: rgba(255, 255, 255, .65); font-size: .98rem; line-height: 1.75; margin-bottom: 1rem !important; }
.ueberuns-p strong { color: var(--green-lt); font-weight: 600; }
.founders-row { display: flex; gap: 1.5rem; margin-top: 2rem !important; flex-wrap: wrap; }
.founder-card { flex: 1; min-width: 160px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 1.2rem !important; }
.founder-initial {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-size: 1.4rem;
	font-weight: 900;
	color: #fff;
	margin-bottom: .8rem !important;
}
/* Sobald ein Foto da ist: Bild-Block mit Klasse founder-initial, wird rund */
.founder-initial.wp-block-image { overflow: hidden; background: none; }
.founder-initial.wp-block-image img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.founder-name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: #fff; margin-bottom: .2rem !important; line-height: 1.5; }
.founder-links { font-size: .78rem; margin-top: .6rem !important; color: rgba(255, 255, 255, .3); }
.founder-links a { color: var(--green-lt); font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; transition: color .2s; }
.founder-links a:hover { color: #fff; }
.founder-initial.wp-block-image a { display: block; border-radius: 50%; }
.founder-initial.wp-block-image a:hover img { opacity: .85; }
.founder-role { font-size: .78rem; color: rgba(255, 255, 255, .45); letter-spacing: .05em; }
.ueberuns-visual { display: flex; flex-direction: column; gap: 1rem; }
.ueberuns-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ueberuns-stat { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 1.4rem !important; text-align: center; }
.ueberuns-stat-num { font-family: var(--font-head); font-size: 2.8rem; font-weight: 900; color: var(--green-lt); line-height: 1; margin-bottom: .2rem !important; }
.ueberuns-stat-label { font-size: .8rem; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.wp-block-quote.ueberuns-quote {
	background: rgba(88, 100, 34, .25);
	border: 1px solid rgba(88, 100, 34, .4);
	border-left: 4px solid var(--green-lt);
	border-radius: var(--r);
	padding: 1.4rem !important;
	margin: 0;
}
.ueberuns-quote p { font-size: 1rem; color: var(--green-lt); font-style: italic; line-height: 1.6; margin-bottom: .5rem !important; }
.ueberuns-quote cite { display: block; line-height: 1.5rem; font-size: .78rem; color: rgba(255, 255, 255, .45); font-style: normal; margin-top: 0; }
.ueberuns-insta {
	position: relative;
	display: grid;
	grid-template-columns: 32px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: .8rem;
	align-items: center;
	padding: 1.2rem !important;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	transition: all .2s;
}
.ueberuns-insta:hover { background: rgba(88, 100, 34, .2); }
.ueberuns-insta::before {
	content: '';
	grid-row: 1 / 3;
	width: 32px;
	height: 32px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBF0DB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.8' fill='%23EBF0DB' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ueberuns-insta::after { content: '→'; grid-column: 3; grid-row: 1 / 3; color: rgba(255, 255, 255, .3); font-size: 1.2rem; }
.ueberuns-insta-handle { grid-column: 2; font-family: var(--font-head); font-size: 1rem; font-weight: 800; text-transform: uppercase; color: #fff; letter-spacing: .05em; line-height: 1.5; }
.ueberuns-insta-handle a { color: #fff; }
.ueberuns-insta-handle a::after { content: ''; position: absolute; inset: 0; } /* ganze Box klickbar */
.ueberuns-insta-sub { grid-column: 2; font-size: .75rem; color: rgba(255, 255, 255, .4); margin-top: .1rem !important; }

/* ── Drucken ────────────────────────────────────────────────────────────── */
.quasi-drucken { background: var(--bg2); border-top: 2px solid var(--text); }
.print-hero { margin-bottom: 3.5rem !important; }
.print-hero-headline { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 900; text-transform: uppercase; line-height: .92; color: var(--text); margin-bottom: 1rem !important; }
.print-hero-headline em { color: var(--green); font-style: normal; }
.print-hero-sub { font-size: 1.05rem; color: var(--grey); max-width: 560px; line-height: 1.7; }
.print-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem !important; }
.print-card { background: var(--white); border: 2px solid var(--text); border-radius: 8px; padding: 1.8rem !important; transition: all .2s; }
.print-card:hover { background: var(--green-lt); border-color: var(--green); }
.print-card-icon { font-size: 2rem; margin-bottom: 1rem !important; width: 56px; height: 56px; background: var(--green-lt); border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1.5; }
.print-card-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: .3rem !important; line-height: 1.5; }
.print-card-from { font-family: var(--font-head); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--green); margin-bottom: .8rem !important; }
.print-card-desc { font-size: .88rem; color: var(--grey); line-height: 1.65; }
.steps-box { background: var(--white); border: 2px solid var(--text); border-radius: 8px; padding: 2.5rem !important; }
.steps-box-title { font-family: var(--font-head); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--green); margin-bottom: .3rem !important; }
.steps-box-sub { font-size: .88rem; color: var(--grey); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2rem !important; }
.step { text-align: center; }
.step-num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	font-family: var(--font-head);
	font-size: 1.4rem;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto .9rem !important;
	border: 3px solid var(--green-lt);
}
.step-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; color: var(--text); margin-bottom: .35rem !important; }
.step-desc { font-size: .85rem; color: var(--grey); line-height: 1.55; }

/* ── Preise ─────────────────────────────────────────────────────────────── */
.quasi-preise-sektion { background: var(--bg); border-top: 2px solid var(--text); }
.price-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 3rem !important; align-items: end; }
.price-note { font-size: .9rem; color: var(--grey); margin-top: .8rem !important; line-height: 1.65; }
.price-intro-btn { margin-bottom: 1rem !important; }
.price-intro-note { font-size: .85rem; color: var(--grey); }

/* Druckpreis-Tabelle */
.wp-block-table.quasi-preise { overflow-x: auto; margin: 0; }
.wp-block-table.quasi-preise table { width: 100%; border-collapse: collapse; font-family: var(--font-head); table-layout: auto; }
.wp-block-table.quasi-preise th,
.wp-block-table.quasi-preise td { border: 0; }
.wp-block-table.quasi-preise thead { border: 0; }
.wp-block-table.quasi-preise th {
	background: var(--text);
	color: #fff;
	padding: .7rem 1rem;
	text-align: center;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.wp-block-table.quasi-preise th:first-child { text-align: left; }
.wp-block-table.quasi-preise td { padding: .65rem 1rem; text-align: center; font-size: .95rem; border-bottom: 1px solid var(--border); }
.wp-block-table.quasi-preise td:first-child { text-align: left; font-weight: 700; }
.wp-block-table.quasi-preise tr:nth-child(even) td { background: var(--bg2); }
.wp-block-table.quasi-preise tr.best td { background: var(--green-lt); font-weight: 700; }

.textile-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--green); margin: 2.5rem 0 1rem !important; line-height: 1.5; }

/* Textilpreis-Tabelle: im Editor eine Tabelle, auf der Seite Karten */
.wp-block-table.quasi-textil { margin: 2rem 0 0 !important; overflow: visible; }
.wp-block-table.quasi-textil table,
.wp-block-table.quasi-textil tbody { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border: 0; width: 100%; }
.wp-block-table.quasi-textil table { display: block; }
.wp-block-table.quasi-textil thead { display: none; }
.wp-block-table.quasi-textil tr { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--border); border-radius: var(--r); padding: 1.2rem; }
.wp-block-table.quasi-textil td { display: block; border: 0; padding: 0; }
.wp-block-table.quasi-textil td:nth-child(1) { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; margin-bottom: .1rem; }
.wp-block-table.quasi-textil td:nth-child(2) { font-size: .78rem; color: var(--grey); }
.wp-block-table.quasi-textil td:nth-child(3) { font-family: var(--font-head); font-size: 1.5rem; font-weight: 900; color: var(--green); margin-top: .5rem; }
.wp-block-table.quasi-textil td:nth-child(3)::after { content: '/Stk.'; font-size: .75rem; font-weight: 500; color: var(--grey); }
.price-footnote { font-size: .78rem; color: var(--grey); margin-top: 1rem !important; }

/* ── Anfrage (Kopf; der Assistent selbst ist im Plugin) ─────────────────── */
section.quasi-anfrage { background: var(--bg); border-top: 2px solid var(--text); padding: 5rem 0 !important; }
.anfrage-head { text-align: center; margin-bottom: 3.5rem !important; }
.anfrage-head .sec-eyebrow { display: block; margin-bottom: .5rem !important; }
.anfrage-head h2 { font-family: var(--font-head); font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: 900; text-transform: uppercase; line-height: .92; margin-bottom: 1rem !important; }
.anfrage-head h2 em { color: var(--green); font-style: normal; }
.anfrage-head p:not(.sec-eyebrow) { color: var(--grey); font-size: 1rem; max-width: 480px; margin: 0 auto !important; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.quasi-faq { background: var(--bg); border-top: 2px solid var(--text); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem !important; }
.faq-q { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--text); margin-bottom: .4rem !important; display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.faq-q::before { content: '→'; color: var(--green); flex-shrink: 0; }
.faq-a { font-size: .9rem; color: var(--grey); line-height: 1.68; padding-left: 1.4rem !important; }

/* ── Instagram ──────────────────────────────────────────────────────────── */
section.quasi-instagram { background: var(--bg2); border-top: 2px solid var(--text); padding: 4rem 2.5rem !important; }
.insta-header { text-align: center; margin-bottom: 2.5rem !important; }
.insta-handle {
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--text);
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}
.insta-handle::before {
	content: '';
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.8' fill='%231A1A1A' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.insta-sub { font-size: .88rem; color: var(--grey); margin-top: .3rem !important; }
.insta-cta-wrap { justify-content: center; margin-top: 1.5rem !important; }
.insta-placeholder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto; }
.insta-placeholder {
	aspect-ratio: 1 / 1;
	background: var(--green-lt);
	border: 2px solid var(--text);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	cursor: pointer;
	transition: all .2s;
	overflow: hidden;
	position: relative;
}
.insta-placeholder:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.insta-placeholder .wp-block-image { width: 100%; height: 100%; }
.insta-placeholder .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.insta-placeholder-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(26, 26, 26, .7);
	padding: .5rem !important;
	font-family: var(--font-head);
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #fff;
	text-align: center;
}
.insta-mehr { background: var(--text); flex-direction: column; text-align: center; padding: 1rem !important; }
.insta-mehr-icon { font-size: 2rem; margin-bottom: .5rem !important; line-height: 1.5; }
.insta-mehr-title { font-family: var(--font-head); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; line-height: 1.5; }
.insta-mehr-title a { color: #fff; }
.insta-mehr-title a::after { content: ''; position: absolute; inset: 0; }
.insta-mehr-sub { font-size: .75rem; color: rgba(255, 255, 255, .4); margin-top: .3rem !important; line-height: 1.5; }

/* ── Fusszeile ──────────────────────────────────────────────────────────── */
.quasi-footer { background: var(--text); border-top: 2px solid var(--green); padding: 4rem 2.5rem 3rem !important; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
.footer-logo { font-family: var(--font-head); font-size: 2.5rem; font-weight: 900; color: var(--white); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .3rem !important; line-height: 1.5; }
.footer-logo em { color: var(--green-lt); font-style: normal; }
.footer-tagline { color: var(--border); font-size: .88rem; margin-bottom: 1.2rem !important; line-height: 1.55; }
.footer-btns { margin-top: 1.9375rem !important; }
.footer-col-title { font-family: var(--font-head); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--green-lt); margin-bottom: 1rem !important; }
.footer-links { font-size: .9rem; line-height: 1.9rem; margin: -.275rem 0 -.275rem !important; }
.footer-links a { color: var(--border); transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
	max-width: var(--max);
	margin: 2rem auto 0 !important;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 1.2rem !important;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .8rem;
	color: rgba(255, 255, 255, .3);
	flex-wrap: wrap;
	gap: .5rem;
}
.footer-bottom a { color: rgba(255, 255, 255, .45); }
.footer-bottom a:hover { color: #fff; }

/* ── Unterseiten (Impressum, Datenschutz, Anleitung) ────────────────────── */
.quasi-seite { padding: 5rem 2.5rem !important; min-height: 60vh; }
.quasi-seite-titel { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 2rem !important; }
.quasi-seite-inhalt > * + * { margin-top: 1em !important; }
.quasi-seite-inhalt h2 { font-size: 1.8rem; margin-top: 2rem !important; }
.quasi-seite-inhalt h3 { font-size: 1.3rem; margin-top: 1.5rem !important; }
.quasi-seite-inhalt ul, .quasi-seite-inhalt ol { padding-left: 1.4em !important; }
.quasi-seite-inhalt a, .quasi-404 a { color: var(--green); text-decoration: underline; }
.quasi-404 .sec-title { margin-bottom: 1.5rem !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.hero-inner, .price-intro, .ueberuns-inner { grid-template-columns: 1fr; }
	.hero-visual, .ueberuns-visual { display: none; }
	.shop-grid { grid-template-columns: 1fr 1fr; }
	.print-cards { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr 1fr; }
	.wp-block-table.quasi-textil tbody { grid-template-columns: 1fr 1fr; }
	.faq-grid { grid-template-columns: 1fr; }
	.footer-inner { grid-template-columns: 1fr 1fr; }
	.insta-placeholder-grid { grid-template-columns: 1fr 1fr; }
	:where(section.wp-block-group), .quasi-seite { padding: 3.5rem 1.5rem !important; }
	section.quasi-shop { padding-top: 4rem !important; }
	.nav { padding: 0 1.5rem; }
	.modal { grid-template-columns: 1fr; max-height: 80vh; }
	.modal-img-side { min-height: 220px; }
}
@media (max-width: 600px) {
	.shop-grid { grid-template-columns: 1fr; }
	.footer-inner { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr; }
	.wp-block-table.quasi-textil tbody { grid-template-columns: 1fr 1fr; }
	.insta-placeholder-grid { grid-template-columns: repeat(2, 1fr); }
}