/* ==========================================================================
   Schuhhaus Mayer – Modernes Theme-Overlay
   Wird NACH allen von WebSite X5 generierten Stylesheets geladen und
   modernisiert bewusst nur Optik/Interaktion (Farben, Typografie, Schatten,
   Übergänge). Layout, Positionierung und Breakpoints des Baukastens bleiben
   unangetastet, damit bei einem erneuten Export aus WebSite X5 nichts bricht
   und diese Datei einfach wieder verlinkt werden kann.
   ========================================================================== */

:root {
	--brand: #00897f;
	--brand-mid: #14a897;
	--brand-dark: #00655d;
	--brand-light: #e3f4f2;
	--ink: #37474f;
	--muted: #808080;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
	--radius: 10px;
}

/* -- Typografie ------------------------------------------------------- */
/* Ersetzt Trebuchet MS/Tahoma durch eine moderne, native Systemschrift.
   Nur font-family wird erzwungen – Größen/Zeilenhöhen bleiben wie vom
   Baukasten berechnet, damit sich am Seitenumbruch nichts verschiebt. */
body,
body :not(.swiper-button-prev):not(.swiper-button-next) {
	font-family: var(--font-sans) !important;
}
.swiper-button-prev, .swiper-button-next { font-family: swiper-icons !important; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.imHeading1, .imHeading2, .imHeading3, .imHeading4, .imHeading5, .imHeading6 {
	letter-spacing: -0.02em;
}

::selection { background: var(--brand); color: #fff; }

/* -- Fokus / Barrierefreiheit ------------------------------------------ */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -- Kopfbereich --------------------------------------------------------- */
#imHeaderBg, #imStickyBarGraphics {
	box-shadow: 0 1px 0 rgba(55, 71, 79, 0.08), 0 2px 12px rgba(55, 71, 79, 0.06);
}
/* Sticky-Leiste beim Scrollen: dezenter "Glass"-Effekt statt Vollton-Weiß */
#imStickyBarGraphics {
	background-color: rgba(255, 255, 255, 0.82) !important;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
}
/* Die Vorlage gibt dem Menü-Container in der Sticky-Leiste einen eigenen
   weißen Vollton-Hintergrund + weißen Rahmen – das überdeckt den Glass-
   Effekt rund um das Hamburger-Icon. Beides transparent machen, damit der
   Blur durchgehend sichtbar ist. */
#imStickyBar_imMenuObject_03_container {
	background-color: transparent !important;
	border-color: transparent !important;
}

/* -- Hauptnavigation ------------------------------------------------------ */
#imHeader_imMenuObject_02_container > ul > li > .label-wrapper .label,
#imHeader_imMenuObject_02_container > ul > li > .label-wrapper button {
	transition: color 0.2s ease;
	position: relative;
}
#imHeader_imMenuObject_02_container > ul > li > .label-wrapper .label::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--brand);
	transition: width 0.2s ease, inset-inline-start 0.2s ease;
}
#imHeader_imMenuObject_02_container > ul > li:hover > .label-wrapper .label,
#imHeader_imMenuObject_02_container > ul > .imMnMnCurrent > .label-wrapper .label {
	color: var(--brand) !important;
	/* Die Baukasten-Vorlage macht Menüpunkte beim Hover fett (font-weight),
	   was bei längeren Wörtern (z.B. "öffnungszeiten") zu abgeschnittenem
	   Text führt, weil die Zelle eine feste Breite hat. Echtes Fett ändert
	   die Zeichenbreite, ein simulierter "Fett"-Effekt per text-shadow
	   dagegen nicht – so bleibt der optische Effekt ohne Abschneiden. */
	font-weight: normal !important;
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor, 0 0.4px 0 currentColor, 0 -0.4px 0 currentColor;
}
#imHeader_imMenuObject_02_container > ul > li:hover > .label-wrapper .label::after,
#imHeader_imMenuObject_02_container > ul > .imMnMnCurrent > .label-wrapper .label::after {
	width: 100%;
	inset-inline-start: 0;
}

.hamburger-bar { transition: background-color 0.2s ease, transform 0.2s ease; }
.hamburger-button:hover .hamburger-bar { background-color: var(--brand); }
.hamburger-menu-background { transition: opacity 0.25s ease; }

/* -- Aufklapp-Untermenü ("bei uns", "orthopädie") modernisieren ------------
   Im Original: eckige, flach am Menü klebende weiße Box ohne Schatten oder
   Abstand. Jetzt: schwebende Karte mit Abstand, runden Ecken, weichem
   Schatten und dezentem Hover statt der bisherigen kahlen Liste.
   Bewusst NUR in der normalen Desktop-Leiste (echtes Hover-Dropdown) – im
   Hamburger-Menü (mobil und die immer-Hamburger Sticky-Leiste) bleibt die
   Original-Optik, da dort eine schwebende Karte innerhalb der Liste nicht
   passt. Daher scoped auf #imHeader_imMenuObject_02_container (nicht die
   Sticky-Leiste) und nur ab 1150px (Breakpoint, ab dem die Leiste zum
   echten horizontalen Hover-Menü statt Hamburger wird). */
@media (min-width: 1150px) {
	#imHeader_imMenuObject_02_container .open-bottom {
		margin-top: 8px;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: var(--shadow-md);
		border: 1px solid rgba(55, 71, 79, 0.06);
		padding-block: 4px;
	}
	#imHeader_imMenuObject_02_container .open-bottom .label-wrapper {
		transition: background-color 0.15s ease;
		/* Die Vorlage gibt jeder Zeile eine feste Höhe von 34px mit
		   overflow:hidden – bei zweizeiligen Einträgen (z.B. "Elektronische
		   Fußdruckmessung") wirkt das dadurch beengt/abgeschnitten. Höhe
		   daher flexibel mit etwas Innenabstand statt starrer Fixhöhe.
		   display:flex + align-items:center statt der ursprünglichen
		   table/table-cell-Zentrierung, weil diese bei height:auto nicht
		   mehr korrekt vertikal zentriert (Inhalt hing oben, Rest der Höhe
		   blieb unten als Leerraum übrig). */
		height: auto !important;
		min-height: 34px !important;
		overflow: visible !important;
		padding-block: 4px !important;
		display: flex !important;
		align-items: center !important;
	}
	#imHeader_imMenuObject_02_container .open-bottom li:hover > .label-wrapper {
		background-color: var(--brand-light) !important;
	}
	#imHeader_imMenuObject_02_container .open-bottom li:hover > .label-wrapper .label {
		color: var(--brand) !important;
	}
	/* Zusätzlich zum overflow:hidden am Container bekommt der erste/letzte
	   Eintrag selbst passende runde Ecken – so bleibt die Hover-Markierung
	   auch am Rand innerhalb der Kartenform, statt eckig herauszuragen. */
	#imHeader_imMenuObject_02_container .open-bottom li:first-child > .label-wrapper {
		border-radius: 12px 12px 0 0;
	}
	#imHeader_imMenuObject_02_container .open-bottom li:last-child > .label-wrapper {
		border-radius: 0 0 12px 12px;
	}
}

/* -- Untermenü-Pfeil generell sichtbar machen -------------------------------
   Die Vorlage versteckt den Aufklapp-Button für Untermenüs ("bei uns",
   "orthopädie") komplett per CSS-Clipping ("screen-reader-only") – er ist
   nur für Screenreader da. Das betrifft auch die Sticky-Leiste, die IMMER
   ein Hamburger-Menü zeigt (auch am Desktop, unabhängig von der
   Bildschirmbreite) – daher hier bewusst ohne Breakpoint-Einschränkung,
   damit der Pfeil überall sichtbar ist, wo es einen Aufklapp-Button gibt. */
.toggle-submenu.screen-reader-only {
	position: static;
	clip: auto;
	overflow: visible;
	width: 24px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	white-space: normal;
	font-size: 0 !important;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.toggle-submenu.screen-reader-only::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-inline-end: 2px solid var(--muted);
	border-block-end: 2px solid var(--muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.toggle-submenu.screen-reader-only:hover::after,
.toggle-submenu.screen-reader-only:focus-visible::after {
	border-color: var(--brand);
}
.toggle-submenu.screen-reader-only[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* -- Links --------------------------------------------------------------- */
.imCssLink:link, .imCssLink {
	transition: color 0.2s ease, opacity 0.2s ease;
}
.imCssLink:hover, .imCssLink:active {
	color: var(--brand) !important;
}

/* -- "Mehr erfahren"-Link Verkaufsraum: als runder Button statt >> Text << -- */
.cb1:has(> a.verkaufsraum-cta) {
	background-color: transparent !important;
}
a.verkaufsraum-cta.imCssLink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--brand-mid) !important;
	color: #fff !important;
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: var(--shadow-sm);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.verkaufsraum-cta.imCssLink::after {
	content: "\2192";
	transition: transform 0.2s ease;
}
a.verkaufsraum-cta.imCssLink:hover,
a.verkaufsraum-cta.imCssLink:active {
	background-color: var(--brand) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
a.verkaufsraum-cta.imCssLink:hover::after {
	transform: translateX(4px);
}

/* -- Urlaubs-Öffnungszeiten (oeffnungszeiten-1.html): Karten statt Textmarker -
   Ersetzt die alten Textmarker-Hervorhebungen (gelb/rot/orange hinterlegter
   Text) durch zwei moderne Info-Karten. */
.vacation-notice {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-block: 24px;
}
.vacation-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(55, 71, 79, 0.08);
	padding: 24px 28px;
	width: 260px;
	text-align: center;
}
.vacation-card__title {
	font-weight: 700;
	font-size: 1.15em;
	color: var(--ink);
	margin-bottom: 4px;
}
.vacation-card__date {
	font-weight: 700;
	font-size: 1.3em;
	color: var(--brand);
	margin-bottom: 14px;
}
.vacation-card__hours {
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 14px;
}
.vacation-card--primary .vacation-card__hours {
	margin-bottom: 16px;
}
.vacation-card__closed {
	display: inline-block;
	background: #fdecea;
	color: #c62828;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 0.9em;
}

/* -- Bilder: dezent abgerundet & mit weichem Schatten --------------------- */
#imContent .imObjectImage img,
#imContent img.imResponsiveImage,
.imGalleryObject img {
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
#imContent .imObjectImage:hover img {
	box-shadow: var(--shadow-md);
}

/* -- Zurück-nach-oben-Button ----------------------------------------------- */
#imPageToTop {
	background-color: var(--brand) !important;
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
#imPageToTop:hover {
	background-color: var(--brand-dark) !important;
	transform: translateY(-3px);
}
/* Das mitgelieferte page-to-top.png ist selbst ein grauer Kreis und würde die
   Markenfarbe verdecken – stattdessen zeichnen wir den Pfeil per CSS. */
#imPageToTop_img { opacity: 0; }
#imPageToTop::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 9px solid #fff;
}

/* -- Cookie-Hinweis (fest oben angeheftete Leiste) -------------------------- */
#cookie-law-message {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
#cookie-law-message .imCloseInn {
	background-color: var(--brand) !important;
	border-radius: 999px;
	padding: 8px 18px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
#cookie-law-message .imCloseInn:hover {
	background-color: var(--brand-dark) !important;
	opacity: 1;
	transform: translateY(-1px);
}

/* -- Social-Icons (Instagram etc.) ---------------------------------------- */
#imContent a[href*="instagram"] img,
#imContent a[href*="facebook"] img {
	transition: transform 0.2s ease;
}
#imContent a[href*="instagram"]:hover img,
#imContent a[href*="facebook"]:hover img {
	transform: scale(1.08);
}

/* -- Feinschliff Scrollverhalten ------------------------------------------- */
html { scroll-behavior: smooth; }

/* -- Sanftes Einblenden von Inhaltsblöcken beim Scrollen -------------------
   Die Klasse "im-reveal" wird nur per JS (res/scroll-reveal.js) gesetzt –
   ohne JavaScript bleiben alle Inhalte ganz normal sofort sichtbar. */
[id^="imCell_"].im-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
[id^="imCell_"].im-reveal.im-reveal-visible {
	opacity: 1;
	transform: none;
}

/* -- Tastile Rückmeldung beim Klicken -------------------------------------- */
a.verkaufsraum-cta.imCssLink:active,
#imPageToTop:active,
#cookie-law-message .imCloseInn:active {
	transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[id^="imCell_"].im-reveal { opacity: 1 !important; transform: none !important; }
	* { transition-duration: 0.001ms !important; }
}