/*
Theme Name: magnet-druck.de
Template: kadence
Description: Child-Theme von Kadence für magnet-druck.de (Braun & Müller). Schrift Montserrat (selbst gehostet), Farben aus dem Logo.
Version: 0.3.4
Text Domain: magnetdruck
*/

/* Montserrat selbst gehostet (DSGVO: nie von Google laden), OFL */
@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap; src: url("assets/fonts/montserrat-light.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("assets/fonts/montserrat-regular.woff2") format("woff2"); }
/* Montserrat 500 nicht mehr geladen (Review 25.10.2026): kaum von 400/600 zu unterscheiden – 300 nur für die freigegebene helle Hero-Zeile */
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("assets/fonts/montserrat-semibold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-bold.woff2") format("woff2"); }

:root {
	--md-ink: #1a1a1a;
	--md-muted: #57534f;
	--md-coral: #e0563b;
	--md-coral-d: #c4442b; /* Knöpfe: weiße Schrift erreicht 4.5:1 */
	--md-sand: #f2f3f5;
	--md-sand-2: #e5e8eb;
	--md-steel: #d3d8dd;
	/* Kadence-Palette auf die Markenfarben legen */
	--global-palette1: #c4442b;
	--global-palette2: #1a1a1a;
	--global-palette3: #1a1a1a;
	--global-palette4: #2b2a29;
	--global-palette5: #57534f;
	--global-palette6: #6b6762; /* Nebentexte/Platzhalter: 5,6:1 auf Weiß (vorher #8a8580 = 3,65:1) */
	--global-palette7: #e5e8eb;
	--global-palette8: #f2f3f5;
	--global-palette9: #ffffff;
	--global-body-font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
	--global-heading-font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}

body, button, input, select, textarea { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; }
body { color: var(--md-ink); }
h1, h2, h3, h4, .product_title { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-weight: 700; letter-spacing: -.03em; color: var(--md-ink); }

/* Knöpfe: Pille, Koralle */
.button, button.button, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .wc-block-components-button {
	border-radius: 999px !important; font-weight: 600; background: var(--md-coral-d); color: #fff; padding: .85em 1.6em;
	transition: background-color .18s ease, transform .14s cubic-bezier(.22, 1, .36, 1);
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .wc-block-components-button:hover { background: var(--md-ink); color: #fff; }
.button:active { transform: scale(.97); }

/* Kopf: ruhiger weißer Balken, Oberleiste schwarz */
.site-top-header-wrap .site-header-row-container-inner { background: var(--md-ink); color: #fff; font-size: 14px; }
.site-top-header-wrap .header-html b { color: #ff8a70; font-weight: 600; }
.site-main-header-wrap .site-header-row-container-inner { background: #fff; }
.main-navigation .primary-menu-container > ul > li.menu-item > a { font-weight: 600; }
.custom-logo { max-height: 46px; width: auto; }

/* Logo: größer, Pole mit dezentem Magnet-Effekt (Inline-SVG aus functions.php) */
.site-branding .brand { display: inline-flex; align-items: center; }
.md-logo { display: block; height: 64px; width: auto; max-height: none; overflow: visible; }
.md-pol { transform-box: fill-box; transform-origin: center; transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), rotate .45s cubic-bezier(.34, 1.56, .64, 1); }
.md-pol-plus { animation: md-schnapp-plus .9s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
.md-pol-minus { animation: md-schnapp-minus .9s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
@keyframes md-schnapp-plus { from { transform: translateY(-38%) rotate(-90deg); } to { transform: none; } }
@keyframes md-schnapp-minus { from { transform: translateY(38%); } to { transform: none; } }
/* eigene Eigenschaften translate/rotate: wirken zusätzlich zur Lade-Animation, die dadurch nicht neu startet */
.site-branding .brand:hover .md-pol-plus, .site-branding .brand:focus-visible .md-pol-plus { translate: 0 7%; rotate: 90deg; }
.site-branding .brand:hover .md-pol-minus, .site-branding .brand:focus-visible .md-pol-minus { translate: 0 -7%; }
@media (max-width: 767px) { .md-logo { height: 48px; } }
@media (prefers-reduced-motion: reduce) { .md-pol { animation: none !important; transition: none; } .site-branding .brand:hover .md-pol { translate: none; rotate: none; } }

/* Kopfzeile: ausgewogene Abstände zwischen Logo, Menü und Symbolen */
/* gleiche Breite und Ränder wie die Inhalte (.md-start .wrap: 1240 px, 28 px) → Logo steht bündig über der Überschrift */
.site-main-header-wrap .site-header-row-container-inner > .site-container { max-width: 1240px; padding: 12px 24px; }
.main-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .9em; padding-right: .9em; }
.site-header-main-section-right .site-header-item { margin-left: 8px; }

/* Shop-Kacheln: Bild mit runden Ecken, sonst Kadence */
.woocommerce ul.products li.product { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }
.woocommerce ul.products li.product a img { border-radius: 20px; }
.woocommerce ul.products li.product .price { color: var(--md-coral-d); font-weight: 600; }
.woocommerce span.onsale { background: var(--md-coral-d); }

/* Produktseite */
.single-product div.product .product_title { font-size: clamp(30px, 3.4vw, 46px); }
.single-product div.product p.price { color: var(--md-coral-d); font-weight: 700; }
.woocommerce div.product form.cart .button { font-size: 17px; }
.woocommerce div.product form.cart .quantity .qty { border-radius: 12px; border: 0; background: var(--md-sand); font-weight: 600; }

/* Startseite ohne Abstand unter dem Kopf */
.home .content-area { margin-top: 0; margin-bottom: 0; }
.home .entry-content-wrap { padding: 0; }

/* Fuß */
.site-footer-wrap .site-bottom-footer-wrap .site-footer-row-container-inner { background: var(--md-ink); color: #c9c4be; }
.site-footer a { color: #c9c4be; }
.site-footer a:hover { color: #fff; }

/* Review 24.10.2026 */
/* Fuß: Links lesbar (Kadence-Regel ist spezifischer) */
#colophon .footer-navigation .footer-menu-container > ul > li > a, .site-footer .footer-html { color: #c9c4be; }
#colophon .footer-navigation .footer-menu-container > ul > li > a:hover { color: #fff; }
/* Shop-Kacheln: Bildecken passend zur Karte */
.woocommerce ul.products li.product a img { border-radius: inherit; }
/* kleine Hilfstexte mindestens 14 px */
.woocommerce div.product .product_meta, .woocommerce div.product .product_meta a, .woocommerce div.product .product_meta .posted_in { font-size: 14px; color: var(--md-muted); }

/* ================================================================ Design-Überarbeitung 25.10.2026
   Ein Abstands- und Formensystem für alle Seiten (Werte wie auf der Startseite) */
:root {
	/* Eckenradien (Review 25.10.2026): 8 Mini · 12 Felder/Chips · 24 Karten · 32 große Flächen · 999 Pille */
	--md-r-s: 8px;
	--md-r-m: 12px;
	--md-r: 24px;        /* Karten */
	--md-r-gross: 32px;  /* große Flächen */
	--md-abstand: 24px;  /* zwischen Elementen */
	--md-block: 48px;    /* zwischen Blöcken */
	--md-sektion: 96px;  /* zwischen Abschnitten */
}
body, .site, .site-main { background: #fff; }
.single-content.entry-content-wrap, .entry.single-entry { background: #fff; box-shadow: none; }
.content-area { margin-top: var(--md-block); margin-bottom: var(--md-sektion); }
.home .content-area { margin-top: 0; margin-bottom: 0; }
.entry-title, .md-shopkopf h1 { font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.woocommerce-breadcrumb, .kadence-breadcrumbs { font-size: 14px; margin-bottom: var(--md-abstand); }

/* Shop-Kopf + Bereichs-Knöpfe */
.md-shopkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: var(--md-block); }
.md-shopkopf h1 { margin: 0; }
.md-shopkopf p { margin: 12px 0 0; max-width: 34em; color: var(--md-muted); font-size: 17px; }
.md-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.md-chips a { padding: 12px 16px; border-radius: 999px; background: var(--md-sand); color: var(--md-ink); font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .18s; }
.md-chips a:hover { background: var(--md-sand-2); }
.md-chips a[aria-current="page"] { background: var(--md-ink); color: #fff; }
.woocommerce ul.products li.product { border-radius: var(--md-r-gross); overflow: hidden; box-shadow: none; background: var(--md-sand); }
.woocommerce ul.products li.product .product-details.content-bg { background: transparent; box-shadow: none; padding: 16px 16px 24px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; padding: 0 12px; }
.woocommerce ul.products li.product .price { margin-left: 12px; }
.woocommerce ul.products li.product .button { margin-left: 12px; }
.md-karte-info { font-size: 14px; color: var(--md-muted); margin: 4px 12px 12px; line-height: 1.45; }
/* Kadence schiebt den Aktionsbereich (Germanized „inkl. MwSt. / zzgl. Versandkosten“ + Knopf) erst beim Überfahren
   absolut in die Karte → überlappte den Text. Fest in die Karte, Preisangaben direkt unter dem Preis. */
.woocommerce ul.products li.product .product-action-wrap, .woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap, .woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-action-wrap { position: static; opacity: 1; visibility: visible; transform: none; margin: auto 12px 0; padding: 4px 0 0; } /* margin-top auto: Knopf unten, Karten gleich */
.woocommerce ul.products li.product .product-action-wrap .wc-gzd-additional-info { margin: 0; font-size: 13px; line-height: 1.5; color: var(--md-muted); display: inline; }
.woocommerce ul.products li.product .product-action-wrap .tax-info::after { content: ", "; }
.woocommerce ul.products li.product .product-action-wrap .shipping-costs-info a { color: inherit; }
.woocommerce ul.products li.product .product-action-wrap .button { display: table; margin: 12px 0 0; }

/* Produktseite: Abstände im Konfigurator, ein Preis, keine Doppelkästen */
.single-product div.product .product_title { margin-bottom: 12px; }
.bmm-produkt .summary > p.price { display: none; }
.bmm { gap: var(--md-abstand); }
.bmm .bm-schritt-block, .bmm .bmd-box { border: 0; padding: 0; background: none; margin: 0; }
.bmm .bm-schritt::before { display: none; }
.bmm .bmd-karte { border: 0; border-radius: var(--md-r); background: var(--md-sand); padding: 16px 24px; }
.bmm-galerie .bmm-blech { border-radius: var(--md-r-gross); }
.bmm-inhalt { margin-top: var(--md-block); }
.bmm-inhalt h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: var(--md-block) 0 12px; }
.bmm-inhalt h2:first-child { margin-top: 0; }
.bmm-inhalt ul { padding-left: 1.2em; }
.bmm-inhalt details { background: var(--md-sand); border-radius: var(--md-r); padding: 0; }
.bmm-inhalt details + details { margin-top: 8px; }
.bmm-inhalt summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px; min-height: 44px; } /* Tippfläche = ganze Frage */
.bmm-inhalt summary::-webkit-details-marker { display: none; }
.bmm-inhalt summary::after { content: "+"; color: var(--md-coral-d); font-size: 22px; line-height: 1; }
.bmm-inhalt details[open] summary::after { content: "−"; }
.bmm-inhalt details p { margin: 0; padding: 0 24px 16px; color: var(--md-muted); }
form.cart .quantity { display: inline-flex; align-items: center; background: var(--md-sand); border-radius: 999px; padding: 4px; }
form.cart .quantity .qty { width: 64px; height: 44px; border: 0; background: transparent !important; text-align: center; font-size: 17px; }
.md-menge-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--md-ink); font-size: 22px; font-weight: 600; cursor: pointer; line-height: 1; padding: 0; }
.md-menge-btn:hover { background: var(--md-ink); color: #fff; }

/* leerer Warenkorb */
.md-leer { text-align: center; padding: var(--md-block) 0 0; }
.md-leer h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin: 0 0 12px; }
.md-leer p { color: var(--md-muted); margin: 0 auto 24px; max-width: 30em; }
.md-kacheln .cats { margin-top: var(--md-block); text-align: left; }
.md-kacheln .cats > * { min-width: 0; }
.md-kacheln { max-width: 100%; }
.md-start.md-kacheln .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .md-start.md-kacheln .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-kacheln .cat .img img { width: 78%; height: auto; border-radius: 16px; }
.woocommerce-cart .entry-title { display: none; }
.bmm-produkt .summary .legal-price-info, .bmm-produkt .summary > .wc-gzd-additional-info { display: none; }

@media (max-width: 760px) {
	:root { --md-block: 36px; --md-sektion: 64px; }
	.md-shopkopf { align-items: flex-start; }
}
.woocommerce-cart .wp-block-woocommerce-cart.alignwide { margin-left: 0; margin-right: 0; width: auto; max-width: 100%; }

/* Kasse: Hinweis Schweiz / Steuerfrei Österreich (inc/steuer.php) */
.md-kasse-hinweis { max-width: 1290px; margin: 24px auto 0; padding: 12px 16px; border-left: 4px solid var(--md-coral-d, #c4442b); background: var(--md-sand, #f2f3f5); border-radius: 0 12px 12px 0; font-size: 14px; }

/* ================================================================ Design-Review 25.10.2026 (4 Skill-Durchgänge) */
:root { --md-coral-text: #b03a23; } /* Koralle als SCHRIFT auf Grau: 5,4:1 (#c4442b wäre 4,49:1) */

/* Sichtbarer Fokus überall (Felder haben keinen Rand, Kadence-Fokus läuft sonst ins Leere) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--md-coral); outline-offset: 2px; }

/* Ziffern springen nicht bei Live-Preisen */
.woocommerce .price, .bmm-wahl small, .bmm-summe, .bmm-staffel, .bmm-staffelpreise, .md-start .cat .pr, .md-start .total { font-variant-numeric: tabular-nums; }

/* Umbruch: Überschriften ausgewogen, kurze Hilfstexte ohne einzelnes Wort am Ende */
h1, h2, h3, h4, .product_title { text-wrap: balance; }
.md-karte-info, .bmm-hinweis, .bmm-klein, .md-shopkopf p, .bmm-wahl small { text-wrap: pretty; }

/* Startseite: Sprungmarken im Menü nicht alle als „aktiv“ einfärben */
.home .main-navigation .primary-menu-container > ul > li.menu-item > a { color: var(--md-ink); }

/* Shop-Karten: Preis klein in Koralle-Textton, Karten gleich hoch, Knopf unten als Pille wie überall */
.woocommerce ul.products li.product .price { color: var(--md-coral-text); }
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .product-details.content-bg { flex: 1; display: flex; flex-direction: column; }

.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce ul.products.woo-archive-btn-text li.product .product-action-wrap .button {
	display: inline-flex; align-items: center; min-height: 44px; margin: 16px 0 0; padding: 12px 24px; border-radius: 999px;
	background: var(--md-coral-d); color: #fff; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; border: 0;
}
.woocommerce ul.products li.product .product-action-wrap .button:hover { background: var(--md-ink); color: #fff; }

/* Gesperrt reagiert nicht auf Überfahren */
form.cart button[aria-disabled="true"], form.cart button[aria-disabled="true"]:hover { background: var(--md-coral-d); opacity: .5; cursor: not-allowed; }

/* Druck-Feedback für kleine Knöpfe */
.md-menge-btn, .md-chips a, .bmm-staffelpreise button { transition: background-color .18s ease, transform .14s cubic-bezier(.22, 1, .36, 1); }
.md-menge-btn:active, .md-chips a:active, .bmm-staffelpreise button:active { transform: scale(.96); }

/* Anheben beim Überfahren nur mit Maus, nie bei „weniger Bewegung“ */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover { transform: none; }
}

/* Leerer Warenkorb: Kacheln auf dem Handy einspaltig wie auf der Startseite */
@media (max-width: 560px) { .md-start.md-kacheln .cats { grid-template-columns: 1fr; } }

/* Kategorie-Beschreibung (SEO) unter den Produkten */
.md-kategorie-text { max-width: 760px; margin: var(--md-block) 0 0; color: var(--md-muted); }
.md-kategorie-text p { margin: 0 0 16px; }

/* Inhaltsseiten (Ratgeber, Branchen, Hilfe, Rechtstexte): lesbare Zeilenlänge, Tabellen im Shop-Stil (SEO-Seiten 25.10.2026) */
body.page:not(.home):not(.woocommerce-page) .entry-content { max-width: 760px; }
body.page:not(.home) .entry-content h2 { margin: var(--md-block) 0 16px; font-size: 26px; line-height: 1.2; }
body.page:not(.home) .entry-content h3 { margin: 32px 0 8px; font-size: 20px; line-height: 1.25; }
body.page:not(.home) .entry-content p, body.page:not(.home) .entry-content li { line-height: 1.6; }
body.page:not(.home) .entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; font-size: 16px; border-radius: var(--md-r-m); overflow: hidden; background: var(--md-sand); }
body.page:not(.home) .entry-content th, body.page:not(.home) .entry-content td { padding: 12px 16px; text-align: left; vertical-align: top; border: 0; }
body.page:not(.home) .entry-content thead th { background: var(--md-ink); color: #fff; font-weight: 600; }
body.page:not(.home) .entry-content tbody tr:nth-child(even) td { background: #fff; }
body.page:not(.home) .entry-content a { color: var(--md-coral-text); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { body.page:not(.home) .entry-content table { display: block; overflow-x: auto; } }