/*
Theme Name: Marcus Brenning Tierfotografie
Theme URI: https://brenning-tierfotografie.de
Author: Marcus Brenning
Description: Schlankes Block-Theme für Marcus Brenning Tierfotografie (Hunde- und Haustierfotografie, Wandbilder-Shop mit WooCommerce). Design nach dem Prototyp vom 08.11.2026. Keine externen Schriften, kein Tracking.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brenning-tierfotografie
*/

/* =========================================================
   Farben im Dunkelmodus (folgt der Systemeinstellung wie im Prototyp)
   Die hellen Farben stehen in theme.json.
   ========================================================= */
@media (prefers-color-scheme: dark) {
	body:not(.wp-admin) {
		--wp--preset--color--hintergrund: #191b17;
		--wp--preset--color--papier: #21241f;
		--wp--preset--color--sand: #2a2e27;
		--wp--preset--color--tinte: #ece6da;
		--wp--preset--color--grau: #a8a193;
		--wp--preset--color--linie: #363b32;
		--wp--preset--color--moos: #a4bb94;
		--wp--preset--color--moos-dunkel: #c9d9bd;
		--wp--preset--color--rost: #e0956a;
		--wp--preset--color--rost-hell: #3a2b22;
		--wp--preset--color--heide: #c9a6c4;
	}
	body:not(.wp-admin) .wp-element-button,
	body:not(.wp-admin) .wp-block-button__link { color: #191b17; }
}
/* Im Editor immer hell lassen */
.editor-styles-wrapper { color-scheme: light; }

/* =========================================================
   Grundlagen
   ========================================================= */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--wp--preset--color--rost); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* Abschnitte */
.mb-section { padding-top: clamp(3rem, 8vw, 5.25rem); padding-bottom: clamp(3rem, 8vw, 5.25rem); }
.mb-section--alt {
	background: var(--wp--preset--color--papier);
	border-top: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.mb-kicker {
	font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--wp--preset--color--rost); font-weight: 600; margin-bottom: 0.4rem !important;
}
.mb-lead { font-size: 1.1875rem; color: var(--wp--preset--color--grau); max-width: 44ch; }
.mb-muted, .mb-note { color: var(--wp--preset--color--grau); }
.mb-note { font-size: 0.875rem; }
.mb-intro { color: var(--wp--preset--color--grau); max-width: 60ch; }

/* Platzhalter deutlich markieren (Marcus muss hier noch etwas tun) */
.mb-platzhalter {
	border: 2px dashed var(--wp--preset--color--rost);
	background: var(--wp--preset--color--rost-hell);
	border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.9375rem;
}

/* Etiketten */
.mb-badge {
	display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	border-radius: 99px; padding: 0.2rem 0.65rem; background: var(--wp--preset--color--rost-hell); color: var(--wp--preset--color--rost);
}

/* =========================================================
   Kopfbereich
   ========================================================= */
/* Der Kopfbereich klebt oben. Selektor greift auch in den WooCommerce-Vorlagen. */
.wp-site-blocks > .wp-block-template-part:has(> .mb-header),
.wp-site-blocks > header:has(> .mb-header) { position: sticky; top: 0; z-index: 30; }
.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .mb-header) { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > .wp-block-template-part:has(> .mb-header) { top: 0; } }
.mb-header {
	background: color-mix(in srgb, var(--wp--preset--color--hintergrund) 90%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.mb-logo { margin: 0; line-height: 1.05; }
.mb-logo a { text-decoration: none; display: inline-flex; flex-direction: column; }
.mb-logo strong {
	font-family: var(--wp--preset--font-family--ueberschrift); font-weight: 600; font-size: 1.375rem;
	letter-spacing: -0.01em; white-space: nowrap; color: var(--wp--preset--color--tinte);
}
.mb-logo span {
	font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--wp--preset--color--rost); font-weight: 600;
}
.mb-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--grau); }
.mb-header .wp-block-navigation a:hover { color: var(--wp--preset--color--tinte); }
.mb-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--papier); }

/* =========================================================
   Buttons
   ========================================================= */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--tinte);
	border: 1.5px solid var(--wp--preset--color--linie);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--tinte); }
.wp-block-button__link { transition: transform .15s, background .15s; }
.wp-block-button__link:active { transform: translateY(1px); }

/* =========================================================
   Hero
   ========================================================= */
.mb-hero { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 2.5rem; }
.mb-hero h1 em { font-style: italic; color: var(--wp--preset--color--moos); }
.mb-arch { margin: 0; }
.mb-arch img {
	width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 60% 50%;
	border-radius: 240px 240px 24px 24px; box-shadow: var(--wp--custom--schatten);
}
@media (max-width: 781px) { .mb-arch img { aspect-ratio: 1 / 1; max-width: 440px; margin: 0 auto; } }
.mb-facts { gap: 1.75rem !important; color: var(--wp--preset--color--grau); font-size: 0.9rem; margin-top: 2rem; }
.mb-facts p { margin: 0; }
.mb-facts strong {
	display: block; color: var(--wp--preset--color--tinte);
	font-family: var(--wp--preset--font-family--ueberschrift); font-size: 1.5rem; font-weight: 500;
}

/* =========================================================
   Karten (Shooting-Pakete, Rubriken)
   ========================================================= */
.mb-card {
	position: relative; height: 100%;
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 22px; padding: 1.6rem 1.4rem 1.4rem;
}
.mb-section--alt .mb-card { background: var(--wp--preset--color--hintergrund); }
.mb-card--top { border: 2px solid var(--wp--preset--color--moos); box-shadow: var(--wp--custom--schatten); }
.mb-flag {
	position: absolute; top: -0.8rem; left: 1.4rem; margin: 0 !important;
	background: var(--wp--preset--color--moos); color: var(--wp--preset--color--papier);
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	border-radius: 99px; padding: 0.2rem 0.75rem;
}
.mb-paketname {
	font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--grau); font-weight: 600; margin-bottom: 0 !important;
}
.mb-card h3 { margin-top: 0.2rem; }
.mb-price {
	font-family: var(--wp--preset--font-family--ueberschrift); font-size: 2.75rem; line-height: 1; margin: 0.4rem 0 0.3rem !important;
}
.mb-meta { font-size: 0.875rem; color: var(--wp--preset--color--grau); }
.mb-card p { font-size: 0.9375rem; }
.mb-list { list-style: none; padding-left: 0; font-size: 0.9375rem; }
.mb-list li { display: flex; gap: 0.55rem; padding: 0.3rem 0; border-top: 1px dashed var(--wp--preset--color--linie); }
.mb-list li::before {
	content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--rost); margin-top: 0.6rem;
}
.mb-preisnote {
	padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--wp--preset--color--sand);
	font-size: 0.9rem; color: var(--wp--preset--color--grau);
}
.mb-preisnote strong { color: var(--wp--preset--color--tinte); }

/* Ausklapp-Boxen (Extras, Anfahrt, FAQ) */
.wp-block-details summary { cursor: pointer; font-weight: 600; padding: 0.75rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; color: var(--wp--preset--color--rost); font-size: 1.25rem; line-height: 1; }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { margin-bottom: 1rem; }
.mb-faq .wp-block-details + .wp-block-details { margin-top: 0.75rem; }

/* =========================================================
   Ablauf (nummerierte Schritte)
   ========================================================= */
.mb-ablauf {
	list-style: none; padding: 0; margin: 0; counter-reset: schritt;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem;
}
.mb-ablauf li { counter-increment: schritt; position: relative; padding-top: 3.6rem; font-size: 0.9375rem; color: var(--wp--preset--color--grau); }
.mb-ablauf li strong { display: block; font-size: 1.0625rem; color: var(--wp--preset--color--tinte); margin-bottom: 0.25rem; }
.mb-ablauf li::before {
	content: counter(schritt); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center; font-family: var(--wp--preset--font-family--ueberschrift); font-size: 1.375rem;
	background: var(--wp--preset--color--rost-hell); color: var(--wp--preset--color--rost);
}
@media (max-width: 920px) { .mb-ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mb-ablauf { grid-template-columns: 1fr; } }

/* =========================================================
   Galerie
   ========================================================= */
.mb-galerie.wp-block-gallery { gap: 1rem; }
.mb-galerie.wp-block-gallery .wp-block-image img { border-radius: 18px; }
.mb-galerie.wp-block-gallery .wp-block-image figcaption {
	left: 0.75rem; right: auto; bottom: 0.75rem; width: auto; max-height: none; padding: 0.2rem 0.75rem;
	border-radius: 99px; font-size: 0.8rem; font-weight: 600;
	background: color-mix(in srgb, var(--wp--preset--color--papier) 92%, transparent);
	color: var(--wp--preset--color--tinte); text-shadow: none;
}

/* =========================================================
   Über mich, Weitere Projekte, Kundengalerie
   ========================================================= */
.mb-sig { font-family: var(--wp--preset--font-family--ueberschrift); font-style: italic; font-size: 1.5rem; color: var(--wp--preset--color--moos); }
.mb-illu { background: var(--wp--preset--color--sand); border-radius: 24px; aspect-ratio: 1; display: grid; place-items: center; max-width: 420px; }
.mb-illu svg { width: 78%; height: auto; }
.mb-proj { border-radius: 24px; overflow: hidden; background: #33412e; color: #f4eee3; }
.mb-proj .wp-block-column:first-child { min-height: 280px; }
.mb-proj img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; display: block; }
.mb-proj .wp-block-image { margin: 0; height: 100%; }
.mb-proj .mb-proj-text { padding: clamp(1.75rem, 4vw, 2.5rem); }
.mb-proj .mb-kicker { color: #f2b27a; }
.mb-proj p { opacity: 0.88; }
.mb-proj .wp-block-button__link { background: #f4eee3; color: #2b2a25; }
.mb-proj .wp-block-button__link:hover { background: #ffffff; color: #2b2a25; }
.mb-schritte { list-style: none; padding: 0; }
.mb-schritte li { padding: 0.85rem 0; border-top: 1px solid var(--wp--preset--color--linie); color: var(--wp--preset--color--grau); font-size: 0.9375rem; }
.mb-schritte li strong { display: block; color: var(--wp--preset--color--tinte); font-size: 1rem; }
.mb-shopinfo { padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--wp--preset--color--sand); font-size: 0.9375rem; }

/* =========================================================
   Formular (Contact Form 7 – Klassen siehe Plugin-Liste.md)
   ========================================================= */
.wpcf7 form { background: var(--wp--preset--color--papier); border: 1px solid var(--wp--preset--color--linie); border-radius: 22px; padding: clamp(1.25rem, 3vw, 1.75rem); }
.wpcf7 label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.9rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea {
	width: 100%; margin-top: 0.3rem; font: inherit; font-weight: 400; color: inherit;
	border: 1.5px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--hintergrund);
	border-radius: 12px; padding: 0.7rem 0.8rem;
}
.wpcf7 textarea { min-height: 120px; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--wp--preset--color--moos); }
.wpcf7 .wpcf7-acceptance label { font-weight: 400; color: var(--wp--preset--color--grau); }
.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--rost); color: #fff; border: 0; border-radius: 99px;
	padding: 0.8rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer;
}

/* =========================================================
   Fußbereich
   ========================================================= */
.mb-footer { border-top: 1px solid var(--wp--preset--color--linie); margin-top: clamp(3rem, 8vw, 5.25rem); padding-top: 3.5rem; padding-bottom: 2.5rem; font-size: 0.9375rem; color: var(--wp--preset--color--grau); }
.mb-footer h4 { font-family: var(--wp--preset--font-family--text); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tinte); font-weight: 600; }
.mb-footer ul { list-style: none; padding: 0; margin: 0; }
.mb-footer li { margin-bottom: 0.4rem; }
.mb-footer a { color: var(--wp--preset--color--grau); text-underline-offset: 3px; }
.mb-footer a:hover { color: var(--wp--preset--color--tinte); }
.mb-footer-unten { border-top: 1px solid var(--wp--preset--color--linie); padding-top: 1.25rem; margin-top: 2.25rem; font-size: 0.85rem; }
.mb-widerruf-btn .wp-block-button__link { font-size: 0.875rem; padding: 0.5rem 1rem; }

/* =========================================================
   „Bald online“-Seite
   ========================================================= */
.mb-coming { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.mb-coming .mb-lead { margin-left: auto; margin-right: auto; }

/* =========================================================
   WooCommerce – nur Feinschliff, Rest kommt von WooCommerce
   ========================================================= */
.woocommerce ul.products li.product, .wc-block-grid__product, .wc-block-product {
	background: var(--wp--preset--color--papier); border: 1px solid var(--wp--preset--color--linie); border-radius: 20px; overflow: hidden; padding-bottom: 1rem;
}
.woocommerce ul.products li.product img, .wc-block-components-product-image img { border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--ueberschrift); font-size: 1.375rem; padding-left: 1rem; padding-right: 1rem; }
.woocommerce ul.products li.product .price { font-family: var(--wp--preset--font-family--ueberschrift); font-size: 1.5rem; color: var(--wp--preset--color--tinte); padding-left: 1rem; padding-right: 1rem; }
.woocommerce ul.products li.product .button { margin-left: 1rem; }
.woocommerce .price, .wc-block-components-product-price { color: var(--wp--preset--color--tinte); }

/* Paketkarten: auf mittleren Bildschirmen 2 × 2 statt 4 nebeneinander */
@media (min-width: 782px) and (max-width: 1100px) {
	.mb-pakete.wp-block-columns { flex-wrap: wrap !important; }
	.mb-pakete.wp-block-columns > .wp-block-column { flex-basis: calc(50% - 1rem) !important; flex-grow: 0; }
}
.mb-pakete { row-gap: 1.75rem; }
.mb-rubriken { padding-top: 1rem; padding-bottom: 2.5rem; }
.mb-rubriken .mb-card { padding: 1.1rem 1.1rem 0.6rem; }
.mb-rubriken .mb-card h3 { font-size: 1.375rem; }
.mb-rubriken .mb-card p { margin-top: 0.4rem; }

/* Nur für Screenreader sichtbar */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}