@charset "UTF-8";

/* =========================================================================
   E+E Spielwaren – Theme layout2018 (modernisiert)
   Vanilla CSS, Grid/Flexbox, Design-Tokens. Ersetzt skel.css + style*.css.
   ========================================================================= */

/* Open Sans (selbst-gehostet) */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../webfonts/open-sans-v34-latin-ext_latin-300.woff2') format('woff2'),
	     url('../webfonts/open-sans-v34-latin-ext_latin-300.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/open-sans-v34-latin-ext_latin-regular.woff2') format('woff2'),
	     url('../webfonts/open-sans-v34-latin-ext_latin-regular.woff') format('woff');
}

/* -------------------------------------------------------------------------
   Design-Tokens
   ------------------------------------------------------------------------- */
:root {
	--brand: #b91715;
	--brand-hover: #c92725;
	--ink: #474747;
	--heading: #373737;
	--muted: #6b6b6b;       /* 5,3:1 auf Weiß (vorher #777: 4,48:1) */
	--muted-light: #707070; /* 4,9:1 auf Weiß (vorher #888: 3,5:1) */
	--line: #e2e0d8;
	--field-border: #e8eaeb;
	--input-border: #868b8e; /* Formularfeld-Rahmen, 3,4:1 (WCAG 1.4.11) */
	--surface: #fff;
	--surface-alt: #f6f6f6;
	--footer-bg: #2f2f2f;
	--footer-ink: #cfcfcf;

	--fb: #3b5998;
	/* ohne Gelb/Orange, damit weißer Text überall mind. 4,5:1 hat */
	--ig: linear-gradient(135deg, #4f5bd5, #962fbf 30%, #d62976 65%, #cc3d2b);

	--container: 1200px;
	--gap: 24px;
	--radius: 8px;
	--radius-lg: 12px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, .12);
	--ease: .25s ease-in-out;
	--header-h: 84px;
}

/* -------------------------------------------------------------------------
   Reset / Basis
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: underline; transition: color var(--ease); }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-weight: 300; color: var(--heading); line-height: 1.2; }
h3 { font-weight: 400; margin: 0 0 .5em; }

p, ul, ol { margin: 0 0 1em; }
strong, b { font-weight: 600; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--brand); color: #fff; padding: .75em 1.25em; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Sichtbarer Tastaturfokus (WCAG 2.4.7); auf dunklen Flächen weiß */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.banner :focus-visible,
.site-footer :focus-visible,
.lb-overlay :focus-visible { outline-color: #fff; }

/* -------------------------------------------------------------------------
   Layout-Helfer
   ------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

/* Zwei-Spalten-Layout (Content + Sidebar) */
.layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: 48px 0;
}
@media (min-width: 1000px) {
	.layout--with-sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ImagePageContact: Inhalt + Kontakt + Hersteller.
   Desktop: Inhalt | Kontakt, darunter Hersteller über volle Breite.
   Mobil: Inhalt -> Hersteller -> Kontakt (per order). */
.ipc {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 48px 0;
}
.ipc__content { order: 1; min-width: 0; }
.ipc__specials { order: 2; }
.ipc__contact { order: 3; }
@media (min-width: 1000px) {
	.ipc { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
	.ipc__content { flex: 1 1 0; }
	.ipc__contact { order: 2; flex: 0 0 320px; }
	.ipc__specials { order: 3; flex: 0 0 100%; }
}

/* -------------------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface);
	border-bottom: 3px solid var(--brand);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
	padding: 12px 0;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 55px; width: auto; }

.nav-toggle {
	display: none;
	border: 0;
	background: none;
	color: var(--heading);
	font-size: 28px;
	line-height: 1;
	padding: 8px;
	cursor: pointer;
}

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.main-nav a {
	display: block;
	padding: 10px 16px;
	color: var(--ink);
	text-decoration: none;
	font-size: 1rem;
	border-radius: var(--radius);
	white-space: nowrap;
	transition: background var(--ease), color var(--ease);
}
.main-nav a:hover { background: var(--surface-alt); color: var(--brand); }
.main-nav .current > a,
.main-nav .section > a { background: var(--brand); color: #fff; }
.main-nav .current > a:hover,
.main-nav .section > a:hover { background: var(--brand-hover); color: #fff; }

/* Dropdown */
.main-nav li { position: relative; }
.main-nav .has-children > a::after {
	content: "\f078";
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	font-size: .7em; margin-left: .5em; vertical-align: middle;
}
.main-nav .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	box-shadow: var(--shadow-md);
	display: none;
	flex-direction: column;
	gap: 0;
	padding: 6px;
	z-index: 110;
}
.main-nav li:hover > .submenu,
.main-nav li:focus-within > .submenu { display: flex; }
.main-nav .submenu a { border-radius: 4px; }

/* -------------------------------------------------------------------------
   Banner-Slider
   ------------------------------------------------------------------------- */
.banner {
	position: relative;
	background: #1a1a1a;
	overflow: hidden;
}
.banner__track { display: flex; }
.banner__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	display: none;
}
.banner__slide.is-active { display: block; }
.banner.is-ready .banner__slide { transition: opacity .6s ease; }

.banner__slide img {
	width: 100%;
	height: clamp(220px, 32vw, 440px);
	object-fit: cover;
}
.banner__caption {
	position: absolute;
	left: max(24px, calc((100% - var(--container)) / 2 + 24px));
	bottom: 24px;
	max-width: min(560px, calc(100% - 48px));
	padding: 18px 24px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius: var(--radius);
	color: #fff;
}
.banner__caption .caption-1 {
	color: #fff; margin: 0 0 .25em;
	font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -1px;
}
.banner__caption .caption-2 { margin: 0 0 .75em; font-size: 1.05rem; color: rgba(255, 255, 255, .9); max-width: 50ch; }
.banner__caption .link {
	display: inline-block;
	background: #fff; color: var(--brand);
	font-weight: 600; padding: 10px 20px; border-radius: var(--radius);
	text-decoration: none;
}
.banner__caption .link:hover { background: var(--brand); color: #fff; }

.banner__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .3); color: #fff; font-size: 20px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background var(--ease);
}
.banner__nav:hover { background: var(--brand); }
.banner__nav--prev { left: 14px; }
.banner__nav--next { right: 14px; }

.banner__dots {
	position: absolute; bottom: 8px; left: 0; right: 0;
	display: flex; gap: 2px; justify-content: center;
}
/* Trefferfläche 24x24, sichtbarer Punkt 10x10 */
.banner__dot {
	width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0;
	background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.banner__dot::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	background: rgba(255, 255, 255, .5);
}
.banner__dot.is-active::before { background: #fff; }

.banner__pause {
	position: absolute; right: 14px; bottom: 14px;
	width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .45); color: #fff; font-size: 14px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background var(--ease);
}
.banner__pause:hover { background: var(--brand); }

/* -------------------------------------------------------------------------
   Content / Artikel
   ------------------------------------------------------------------------- */
.content { min-width: 0; }

.page-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -2px; margin: 0 0 .25em; line-height: 1.05; }
.page-subtitle { display: block; color: var(--muted-light); font-size: 1.15rem; margin: 0 0 1.5em; }

.hero-image { margin: 0 0 2em; border-radius: var(--radius-lg); overflow: hidden; }
.hero-image img { width: 100%; }

.video-wrapper { display: flex; justify-content: center; width: 100%; margin: 0 0 2em; }
.video-wrapper video { max-width: 100%; max-height: 100vh; width: auto; height: auto; border-radius: var(--radius-lg); }

.content :is(h2) { font-size: 1.6rem; margin: 1.5em 0 .5em; }

/* -------------------------------------------------------------------------
   Panels (Startseite)
   ------------------------------------------------------------------------- */
.panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 1.5em 0;
}
.panel {
	display: flex; flex-direction: column;
	border: 1px solid var(--field-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface);
	transition: transform var(--ease), box-shadow var(--ease);
}
.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.panel--static:hover { transform: none; box-shadow: none; } /* ohne Link: kein Klick-Effekt */
.panel__media { display: block; }
.panel__media img { width: 100%; aspect-ratio: 384 / 182; object-fit: cover; }
.panel__body { padding: 16px 18px; }
.panel__body h2 { margin: 0 0 .4em; font-size: 1.15rem; font-weight: 400; }
.panel__body p { margin: 0; font-size: .95rem; color: var(--muted); }

/* -------------------------------------------------------------------------
   Sidebar-Blocks
   ------------------------------------------------------------------------- */
.sidebar { min-width: 0; }
.blocks { display: flex; flex-direction: column; gap: 10px; }
.block {
	position: relative; display: block;
	padding: 28px 80px 28px 28px;
	color: #fff; text-decoration: none;
	border-radius: var(--radius-lg);
	transition: background-color var(--ease), filter var(--ease);
}
.block h2 { color: #fff; font-size: 1.6rem; margin: 0 0 .3em; font-weight: 400; line-height: 1.1; }
.block p { margin: 0; font-size: 1.05rem; color: #fff; }
.block::after {
	content: "\f0a9";
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
	font-size: 40px; opacity: .85;
}
.block--shop, .block--one { background: var(--brand); }
.block--shop:hover, a.block--one:hover { background: var(--brand-hover); }
.block--two { background: #666; }
a.block--two:hover { background: #707070; }
.block--three { background: #2f2f2f; }
a.block--three:hover { background: #3f3f3f; }
.block--fb { background: var(--fb); }
.block--fb:hover { filter: brightness(1.1); }
.block--ig { background: var(--ig); }
.block--ig:hover { filter: brightness(1.05); }
/* Button ohne Zielseite: kein Pfeil, kein Hover */
.block--static { padding-right: 28px; }
.block--static::after { content: none; }

/* Kontakt-Karte (ImagePageContact-Sidebar) */
.contact-card {
	background: var(--surface-alt);
	border: 1px solid var(--field-border);
	border-top: 4px solid var(--brand);
	border-radius: var(--radius-lg);
	padding: 24px 26px;
}
.contact-card h2 { margin: 0 0 .4em; font-size: 1.4rem; }
.contact-card h3 { margin: .75em 0 .25em; font-size: 1.15rem; font-weight: 600; color: var(--heading); }
.contact-card__teaser { color: var(--muted); margin: 0 0 1.25em; }
.contact-card__photo { margin: 0 0 1.25em; border-radius: var(--radius); overflow: hidden; }
.contact-card__photo img { width: 100%; display: block; }
.contact-card__list { list-style: none; padding: 0; margin: .25em 0 0; }
.contact-card__list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--field-border); }
.contact-card__list li:first-child { border-top: 0; }
.contact-card__list i { color: var(--brand); width: 20px; text-align: center; flex: none; }
.contact-card__list a { color: var(--ink); text-decoration: none; word-break: break-word; }
.contact-card__list a:hover { color: var(--brand); }

@media (min-width: 1000px) {
	.contact-card { position: sticky; top: 100px; }
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.button, .btn {
	position: relative; display: inline-block;
	background: var(--brand); color: #fff;
	padding: .85em 1.75em; border: 0; border-radius: var(--radius);
	font-size: 1.05rem; font-weight: 400; text-decoration: none; cursor: pointer;
	transition: background var(--ease);
}
.button:hover, .btn:hover { background: var(--brand-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand); border: 2px solid var(--field-border); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--brand); }

/* -------------------------------------------------------------------------
   Formulare (Kontaktformular bleibt funktional)
   ------------------------------------------------------------------------- */
form { margin: 0 0 2em; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Consent-Overlay (CCM19) für Formulare mit Cloudflare Turnstile */
.consent-gate { position: relative; }
.consent-gate__overlay {
	position: absolute; inset: 0; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	padding: 1.5em;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(3px);
	border-radius: var(--radius);
}
.consent-gate__box { max-width: 30em; text-align: center; }
.consent-gate__box p { margin: 0 0 1.25em; }
.consent-gate--granted .consent-gate__overlay { display: none; }
label { display: block; color: #575d60; font-size: .95rem; font-weight: 600; margin: 0 0 .5em; }

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="search"], select, textarea {
	appearance: none;
	width: 100%;
	background: rgba(144, 150, 154, .06);
	border: 2px solid var(--input-border);
	border-radius: var(--radius);
	color: inherit;
	padding: .65em 1em;
	font: inherit;
	transition: border-color var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
textarea { min-height: 160px; resize: vertical; }

.field { margin: 0 0 1.25em; }

input[type="submit"], button[type="submit"] {
	appearance: none; cursor: pointer;
	background: var(--brand); color: #fff;
	border: 0; border-radius: var(--radius);
	padding: .85em 2em; font: inherit; font-weight: 600;
	transition: background var(--ease);
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--brand-hover); }

/* Checkbox (DSGVO) */
.field.checkbox { display: flex; align-items: flex-start; gap: .75em; }
.field.checkbox input[type="checkbox"] {
	flex: none;
	width: 1.25rem; height: 1.25rem;
	/* mittig zur ersten Textzeile (line-height des Labels ≈ 1.75em) */
	margin: calc((.95rem * 1.75 - 1.25rem) / 2) 0 0;
	accent-color: var(--brand);
	cursor: pointer;
}
.checkbox label, .field.checkbox label { font-weight: 400; color: #575d60; margin: 0; cursor: pointer; }

::placeholder { color: var(--muted-light); opacity: 1; }

.message, .message.good, .message.bad {
	padding: 1em 1.25em; border-radius: var(--radius); margin: 0 0 1.5em;
}
.message.good { background: #eaf3de; color: #3b6d11; }
.message.bad, .message.error, .message.required { background: #fcebeb; color: #a32d2d; }

/* -------------------------------------------------------------------------
   Galerie + Lightbox
   ------------------------------------------------------------------------- */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 2em 0;
}
.gallery__item { margin: 0; }
.gallery__item a { display: block; border-radius: var(--radius); overflow: hidden; }
.gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--ease); }
.gallery__item a:hover img { transform: scale(1.04); }
.gallery__item figcaption { margin-top: .5em; font-size: .9rem; color: var(--muted); }

/* Lightbox-Overlay */
.lb-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(0, 0, 0, .9);
	display: none; align-items: center; justify-content: center;
	padding: 24px;
}
.lb-overlay.is-open { display: flex; }
body.lb-active { overflow: hidden; }
.lb-figure { margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; }
.lb-img { max-width: 90vw; max-height: 82vh; width: auto; height: auto; border-radius: var(--radius); }
.lb-caption { color: #fff; margin-top: .75em; font-size: .95rem; }
.lb-close, .lb-prev, .lb-next {
	position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
	cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 28px; line-height: 1;
	display: flex; align-items: center; justify-content: center; transition: background var(--ease);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--brand); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* -------------------------------------------------------------------------
   Hinweis-Popup (Website-Einstellungen)
   z-index unter dem CCM19-Banner, damit der Cookie-Dialog bedienbar bleibt
   ------------------------------------------------------------------------- */
.site-popup {
	--popup-accent: #1f6fb2;
	--popup-tint: #eaf2fa;
	position: fixed; inset: 0; z-index: 900;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .55);
}
.site-popup[hidden] { display: none; }
.site-popup--important { --popup-accent: var(--brand); --popup-tint: #fcebeb; }
body.site-popup-active { overflow: hidden; }
.site-popup__box {
	position: relative;
	width: 100%; max-width: 34em; max-height: calc(100vh - 32px); overflow-y: auto;
	background: var(--surface);
	border-top: 6px solid var(--popup-accent);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 1.75em 1.75em 1.5em;
}
.site-popup__head { display: flex; align-items: center; gap: .6em; margin: 0 2em .75em 0; }
.site-popup__head i {
	flex: none; width: 2em; height: 2em; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--popup-tint); color: var(--popup-accent); font-size: 1.1rem;
}
.site-popup__head h2 { margin: 0; font-size: 1.5rem; font-weight: 400; }
.site-popup__text > :first-child { margin-top: 0; }
.site-popup__text > :last-child { margin-bottom: 0; }
.site-popup__close {
	position: absolute; top: 12px; right: 12px;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: transparent; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer;
	transition: background var(--ease), color var(--ease);
}
.site-popup__close:hover { background: var(--surface-alt); color: var(--heading); }
.site-popup__actions { display: flex; flex-wrap: wrap; gap: .75em; margin-top: 1.25em; }
.site-popup__cta, .site-popup__ok:not(.btn--ghost) { background: var(--popup-accent); }
.site-popup--info .site-popup__cta:hover, .site-popup--info .site-popup__ok:not(.btn--ghost):hover { background: #185a91; }

/* -------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------- */
.breadcrumbs { padding: 14px 0 0; font-size: .9rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--brand); }

/* -------------------------------------------------------------------------
   Lagerliste (StockListPage)
   ------------------------------------------------------------------------- */
.stock { margin: 1.5em 0; }
.stock__bar { margin: 0 0 1em; }
.stock__search { max-width: 420px; }
.stock__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stock-table { width: 100%; border-collapse: collapse; }
.stock-table th, .stock-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--field-border); }
.stock-table thead th {
	background: var(--surface-alt); color: var(--heading);
	font-weight: 600; border-bottom: 2px solid var(--brand); white-space: nowrap;
}
.stock-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.stock-table tbody tr:hover { background: #efe9e9; }
.stock-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stock__empty { color: var(--muted); padding: 1em 0; }

/* -------------------------------------------------------------------------
   Öffnungszeiten (OpeningHoursPage)
   ------------------------------------------------------------------------- */
.hours {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}
@media (min-width: 900px) {
	.hours { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.hours-card {
	border: 1px solid var(--field-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	background: var(--surface);
}

.hours-status {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
	margin: 0; padding: 14px 22px;
	font-size: 1.05rem; line-height: 1.4;
	border-bottom: 1px solid var(--field-border);
}
.hours-status strong { font-weight: 600; }
.hours-status__dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.hours-status__detail { color: var(--ink); }
.hours-status--open { background: #e9f5ec; color: #1d6b2f; }   /* 6,1:1 */
.hours-status--open .hours-status__dot { box-shadow: 0 0 0 0 rgba(29, 107, 47, .5); animation: hours-pulse 2s infinite; }
.hours-status--closed { background: #fbeceb; color: var(--brand); }
@keyframes hours-pulse {
	70% { box-shadow: 0 0 0 8px rgba(29, 107, 47, 0); }
	100% { box-shadow: 0 0 0 0 rgba(29, 107, 47, 0); }
}

.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td {
	padding: 12px 22px; text-align: left; vertical-align: top;
	border-top: 1px solid var(--field-border); line-height: 1.5;
}
.hours-table tr:first-child th, .hours-table tr:first-child td { border-top: 0; }
.hours-table th { font-weight: 400; color: var(--heading); white-space: nowrap; }
.hours-table__range { display: inline-block; margin-right: 20px; white-space: nowrap; }
.hours-table__range:last-child { margin-right: 0; }
.hours-table__closed { color: var(--muted); font-style: italic; }
.hours-table__today {
	display: inline-block; margin-left: 6px; padding: 1px 8px;
	border-radius: 999px; background: var(--brand); color: #fff;
	font-size: .75rem; font-weight: 400; vertical-align: 2px;
}
.hours-table tr.is-today { background: var(--surface-alt); }
.hours-table tr.is-today th { font-weight: 600; box-shadow: inset 4px 0 0 var(--brand); }
.hours-table tr.is-today td { font-weight: 400; }

.hours-table__note {
	display: block; margin-top: 4px;
	font-size: .9rem; color: var(--brand); font-weight: 400;
}
.hours-table__note::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; }

.hours-aside .contact-list { margin-bottom: 1em; }

.hours-deviations { margin-top: 2em; }
.hours-deviations h2 { margin-top: 0; }
.hours-deviations ul { list-style: none; padding: 0; margin: 0; }
.hours-deviations li {
	display: grid; grid-template-columns: 11em minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
	padding: 12px 18px; border-top: 1px solid var(--field-border);
	box-shadow: inset 4px 0 0 var(--line); line-height: 1.5;
}
.hours-deviations li:last-child { border-bottom: 1px solid var(--field-border); }
.hours-deviations li.is-closed { box-shadow: inset 4px 0 0 var(--brand); }
.hours-deviations li.is-special { box-shadow: inset 4px 0 0 #1d6b2f; }
.hours-deviations__date { font-weight: 400; color: var(--heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours-deviations__hours { white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-closed .hours-deviations__hours { color: var(--brand); }
.is-special .hours-deviations__hours { color: #1d6b2f; font-weight: 400; }
@media (max-width: 600px) {
	.hours-deviations li { grid-template-columns: minmax(0, 1fr); padding: 10px 16px; }
	.hours-deviations__hours { white-space: normal; }
}

.hours-notes {
	margin-top: 1.5em; padding: 16px 22px;
	border-left: 4px solid var(--brand);
	background: var(--surface-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.hours-notes > :first-child { margin-top: 0; }
.hours-notes > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.hours-table th, .hours-table td { display: block; padding: 0 16px; border-top: 0; }
	.hours-table th { padding-top: 12px; }
	.hours-table td { padding-bottom: 12px; }
	.hours-table tr + tr { border-top: 1px solid var(--field-border); }
	.hours-status { padding: 12px 16px; }
}

/* -------------------------------------------------------------------------
   Suchergebnisse
   ------------------------------------------------------------------------- */
.search-results ul { list-style: none; padding: 0; }
.search-results li { padding: 1.25em 0; border-top: 1px solid var(--field-border); }
.search-results li:first-child { border-top: 0; }
.search-results li h2 { font-size: 1.3rem; font-weight: 400; margin: 0 0 .4em; }
.pagination { display: flex; gap: 8px; align-items: center; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); margin-top: 48px; }
.footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
	padding: 40px 0;
}
.footer-col h2 {
	color: #fff; font-size: 1.15rem; font-weight: 400; margin: 0 0 1em;
	padding-bottom: .4em; border-bottom: 2px solid var(--brand); display: inline-block;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 6px 0; }
.footer-col a { color: var(--footer-ink); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { position: relative; padding: 0 0 1em 36px; line-height: 1.5; }
.contact-list li::before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	position: absolute; left: 0; top: 2px;
	width: 24px; text-align: center; color: var(--brand);
}
.contact-list .ci-home::before { content: "\f015"; }
.contact-list .ci-mail::before { content: "\f0e0"; }
.contact-list .ci-phone::before { content: "\f095"; }
.contact-list .ci-fb::before { content: "\f39e"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.contact-list .ci-ig::before { content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }

.copyright {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 18px 0; font-size: .85rem; color: rgba(255, 255, 255, .6);
}
.copyright__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
}
.legal-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.legal-nav a, .legal-nav button {
	color: rgba(255, 255, 255, .75); text-decoration: none;
	font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.legal-nav a:hover, .legal-nav button:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------
   Hersteller-Liste als Karten (aus extra.css übernommen)
   ------------------------------------------------------------------------- */
.caption.leftAlone {
	font-size: 1.1em; font-weight: 400; color: var(--heading);
	margin-bottom: 1.5em; padding-bottom: .5em; border-bottom: 2px solid var(--brand);
}
.specials-list {
	list-style: none; padding: 0; margin: 0 0 2em;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
}
.specials-list li { margin: 0; padding: 0; }
.specials-list li a,
.specials-list li span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	height: 100%; min-height: 48px; padding: 16px 20px;
	background: var(--surface); border-radius: var(--radius);
	color: var(--ink); text-decoration: none; font-weight: 400;
	box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease), color var(--ease);
}
.specials-list li a:hover { color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.specials-list li a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.specials-list li span { color: var(--muted); cursor: default; }

/* Responsive-Video / Maps (aus extra.css) */
.responsive-video, .embed-container {
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.responsive-video iframe, .embed-container iframe,
.embed-container object, .embed-container embed {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* -------------------------------------------------------------------------
   Mobile-Navigation
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
	:root { --header-h: 64px; }
	.brand img { height: 44px; }

	.nav-toggle { display: block; }

	.main-nav {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(320px, 85vw);
		background: var(--surface);
		box-shadow: -4px 0 20px rgba(0, 0, 0, .2);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .3s ease, visibility 0s linear .3s;
		overflow-y: auto;
		padding: 72px 16px 24px;
		z-index: 200;
	}
	body.nav-open .main-nav { transform: translateX(0); visibility: visible; transition: transform .3s ease; }
	body.nav-open { overflow: hidden; }

	.main-nav ul { flex-direction: column; gap: 2px; }
	.main-nav a { padding: 14px 16px; border-radius: var(--radius); }
	.main-nav .has-children > a::after { float: right; }

	.main-nav .submenu {
		position: static; display: flex; box-shadow: none; border: 0;
		border-left: 3px solid var(--brand); border-radius: 0;
		margin: 0 0 4px 12px; padding: 0;
	}

	.nav-backdrop {
		position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
		opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 90;
	}
	body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

	.nav-close {
		position: absolute; top: 14px; right: 14px;
		border: 0; background: none; font-size: 26px; color: var(--heading); cursor: pointer;
	}
}

@media (min-width: 981px) {
	.nav-close, .nav-backdrop { display: none; }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.banner__caption { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 14px 16px; }
	.banner__caption .caption-2 { font-size: .95rem; }
	.banner__nav { width: 38px; height: 38px; font-size: 17px; }
	.banner__pause { top: 12px; bottom: auto; right: 12px; }
	.layout { padding: 32px 0; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}