/* ============================================================
   CANISANUM · Header + Footer (Theme-Chrome, global auf allen Seiten)
   Aus onepager.css extrahiert und auf die globalen --color-*-Tokens
   gemappt (onepager.css ist nur auf der Startseite geladen; Header/Footer
   müssen aber überall — Warenkorb, Kasse, Konto — korrekt aussehen).
   ============================================================ */

/* ---- HEADER ------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: var(--z-header, 60);
	background: color-mix(in srgb, var(--color-surface) 93%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--color-line);
}
.header-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; height: 76px;
}
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand-logo { display: block; }
.site-header .brand-logo { height: 46px !important; width: auto !important; max-width: none !important; aspect-ratio: 3353 / 760; }
.header-nav { display: flex; align-items: center; gap: 30px; }
.header-nav a { font-size: 15px; font-weight: 500; color: var(--color-text-soft); transition: color .2s; }
.header-nav a:hover { color: var(--color-sage); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.cart-btn {
	position: relative;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: var(--radius-pill, 999px);
	border: 1.5px solid var(--color-line);
	color: var(--color-text);
	background: transparent;
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.cart-btn:hover { border-color: var(--color-sage); color: var(--color-sage); }
.cart-btn svg { width: 21px; height: 21px; }
.cart-count {
	position: absolute; top: -6px; right: -6px;
	min-width: 21px; height: 21px; padding: 0 5px;
	background: var(--color-gold); color: var(--color-text); /* dunkel: Weiss auf Gold nur 2,7:1 */
	border-radius: 999px;
	font-size: 11.5px; font-weight: 700;
	display: none; align-items: center; justify-content: center;
	border: 2px solid var(--color-bg);
}
.cart-count.show { display: flex; }
@media (max-width: 860px) { .header-nav { display: none; } }
@media (max-width: 600px) { .header-inner { gap: 10px; } .header-actions { gap: 9px; } }

/* ---- FOOTER ------------------------------------------------- */
.site-footer {
	background: var(--color-surface);
	border-top: 1px solid var(--color-line);
	padding-block: 56px 32px;
	margin-top: var(--space-2xl, 4rem);
}
.site-footer .footer-logo { height: 54px !important; width: auto !important; max-width: none !important; aspect-ratio: 3353 / 760; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { font-size: 14.5px; color: var(--color-text-soft); max-width: 36ch; }
.footer-col h2 { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; font-weight: 700; }
.footer-col a { display: block; font-size: 14.5px; color: var(--color-text-soft); padding: 6px 0; transition: color .2s; }
.footer-col a:hover { color: var(--color-sage); }
.footer-bottom {
	border-top: 1px solid var(--color-line);
	padding-top: 22px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 13px; color: var(--color-muted);
}
.footer-bottom a { color: var(--color-muted); white-space: nowrap; } /* „Cookie-Einstellungen" nicht am Bindestrich trennen */
.footer-bottom a:hover { color: var(--color-sage); }
/* Widerrufs-Link betont: unterstrichen, da der schwebende Auto-Button entfernt wurde. */
.footer-bottom a.footer-widerruf { text-decoration: underline; }
@media (max-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } }

/* ---- AKTIONSLEISTE ------------------------------------------
   Nur waehrend einer Preisaktion (Plugin canisanum-aktion). Anthrazit + Sanddorn-Gold
   wie die Aktions-Badges in der Kaufbox. Bewusst ohne Preise (siehe header.php). */
.aktion-bar {
	display: block;
	background: var(--color-anthracite);
	color: var(--color-on-primary);
	font-size: 13.5px;
	line-height: 1.35;
	text-decoration: none;
}
.aktion-bar__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 2px 10px;
	padding-block: 9px;
	text-align: center;
}
.aktion-bar__name { color: var(--color-gold); font-weight: 700; letter-spacing: .02em; }
.aktion-bar__sep { opacity: .5; }
.aktion-bar__cta {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-gold) 70%, transparent);
	text-underline-offset: 3px;
}
.aktion-bar:hover .aktion-bar__cta,
.aktion-bar:focus-visible .aktion-bar__cta { color: var(--color-gold); }
.aktion-bar__short { display: none; }
@media (max-width: 560px) {
	.aktion-bar { font-size: 12.5px; }
	.aktion-bar__long { display: none; }
	.aktion-bar__short { display: inline; }
	.aktion-bar__cta { display: none; } /* Die ganze Leiste ist der Link. */
	/* Zwei feste Zeilen statt freiem Umbruch (sonst haengt ein „·" am Zeilenende):
	   oben Aktion + Ersparnis, unten Datum + Gratisversand. */
	.aktion-bar__lead { flex-basis: 100%; }
	.aktion-bar__sep--lead { display: none; }
}