/*
 * Optische Feinschliffe der Apotheken-Sites (siehe .claude/CLAUDE.md, "Optische Feinschliffe").
 * Schriften kommen lokal aus css/fonts.css (Lato für Text, Raleway für Überschriften).
 */

/* ---------- Typografie ---------- */

/* Fließtext etwas größer und dunkler (vorher 14px #555) */
#content {
	font-size: 15px;
	color: #444;
}

/* Überschriften in normaler Schreibung statt GROSSBUCHSTABEN mit Sperrung */
.heading-block h1,
.heading-block h2,
.heading-block h3,
.feature-box h3 {
	text-transform: none;
	letter-spacing: 0;
}
.heading-block h2 {
	font-size: 32px;
}
.feature-box h3 {
	font-size: 18px;
}

/* Funktion unter dem Namen (Mitarbeiter): Raleway statt nicht geladener Crete Round */
.team-title span {
	font-family: 'Raleway', sans-serif;
	font-style: normal;
	font-weight: 600;
}

/* ---------- Buttons: flach statt 3D, normale Schreibung ---------- */

.button,
.button.button-3d {
	border: 1px solid transparent;
	border-radius: 6px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	text-shadow: none;
	font-weight: 700;
	transition: background-color .15s, color .15s, border-color .15s;
}
.button.button-3d:hover {
	top: 0;
	box-shadow: none;
}
.button.button-xlarge {
	font-size: 18px;
	padding: 0 28px;
}

/* Hero: Vorbestellen ist die Hauptaktion (rot), Neuigkeiten sekundär (weiß mit Rand),
   Notdienst als kleinerer Hinweis-Button. Hover-Farben mit !important, weil mary.css
   .button.button-3d:hover und .button-white:hover mit !important festlegt. */
#slider .center.bottommargin .button {
	margin: 0 8px 12px;
}

/* Hero-Grafik (A und Mary) skaliert auf schmalen Bildschirmen mit */
#slider img[src*="hero-a-mary"] {
	max-width: 100%;
	height: auto;
}
#slider .button[href^="mailto:"] {
	background-color: #CD1719;
	border-color: #CD1719;
	color: #fff;
}
#slider .button[href^="mailto:"]:hover {
	background-color: #a8121a !important;
	border-color: #a8121a;
	color: #fff;
}
#slider .button[data-scrollto="#posts"] {
	background-color: #fff;
	border-color: #d6d1cb;
	color: #333;
}
#slider .button[data-scrollto="#posts"]:hover {
	background-color: #fff !important;
	border-color: #CD1719;
	color: #CD1719;
}
#slider .button.button-red {
	background-color: rgba(255, 255, 255, 0.92);
	border-color: #CD1719;
	color: #CD1719;
}
#slider .button.button-red:hover {
	background-color: #CD1719 !important;
	color: #fff;
}

/* ---------- Animationen ---------- */

/* Im Inhalt keine Scroll-Animationen mehr (fadeInUp/Left/Right, bounceIn, Verzögerungen bis 800ms):
   alles steht sofort da. Im Hero bleibt das dezente Einblenden. */
#content [data-animate],
#content .not-animated {
	opacity: 1 !important;
	animation: none !important;
}
[data-animate^="bounce"].animated {
	animation-name: fadeIn !important;
}
@media (prefers-reduced-motion: reduce) {
	.animated {
		animation: none !important;
		opacity: 1 !important;
	}
}

/* ---------- Infoleiste unter dem Hero ---------- */

/* Eigene Ebene wie #content: sonst schiebt sich der Parallax-Hero (#slider, z-index 2) beim Scrollen
   darüber, und der fixierte Footer (z-index 1) scheint durch */
.mary-infobar {
	position: relative;
	z-index: 2;
	background: #fff;
	border-bottom: 1px solid #ebe7e2;
	padding: 36px 0;
}
.mary-infobar .container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 40px;
}
.mary-infobar .container::before,
.mary-infobar .container::after {
	display: none;
}
.mary-infobar-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.mary-infobar-item > i {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	border-radius: 50%;
	background: #fdf2f2;
	color: #CD1719;
	font-size: 20px;
}
.mary-infobar h3 {
	font-size: 17px;
	margin: 4px 0 8px;
	text-transform: none;
	letter-spacing: 0;
}
.mary-infobar p {
	margin: 0 0 4px;
	font-size: 15px;
	color: #444;
}
.mary-infobar a {
	color: #CD1719;
}
.mary-infobar .mary-muted,
.mary-infobar .mary-muted a {
	font-size: 14px;
	color: #777;
}

/* Öffnungszeiten als zweispaltige Liste (Infoleiste und Footer) */
.mary-hours {
	display: grid;
	grid-template-columns: max-content max-content;
	gap: 2px 16px;
	margin: 0;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.mary-hours dt {
	font-weight: 700;
}
.mary-hours dd {
	margin: 0;
}

@media (max-width: 767px) {
	.mary-infobar .container {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Footer: hell, drei Spalten ---------- */

#footer.mary-footer {
	background: #f5f3f0;
	border-top: 0;
	color: #444;
	font-size: 15px;
}
.mary-footer-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 48px;
	padding: 56px 0 40px;
}
.mary-footer h3 {
	font-size: 17px;
	margin: 0 0 14px;
	text-transform: none;
	letter-spacing: 0;
}
.mary-footer h3 a {
	color: inherit;
}
.mary-footer p {
	margin: 0 0 12px;
}
.mary-footer a {
	color: #CD1719;
}
.mary-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mary-footer-links li {
	margin-bottom: 6px;
}
#footer.mary-footer #copyrights {
	background: #ebe7e2;
	padding: 18px 0;
	font-size: 14px;
	color: #666;
	text-align: center;
}
#footer.mary-footer #copyrights a {
	color: #555;
	margin: 0 12px;
}
#footer.mary-footer #copyrights a:hover {
	color: #CD1719;
}
@media (max-width: 767px) {
	.mary-footer-cols {
		grid-template-columns: minmax(0, 1fr);
		padding: 40px 0 24px;
	}
}

/* ---------- Services (Feature-Boxen aus dem Seiteninhalt) ---------- */

/* Raster statt Floats: gleiche Abstände, Texte laufen nicht mehr in die nächste Zeile */
.entry-content .container:has(> .col_one_third) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: auto !important;
	margin: 32px 0 0;
	padding: 0;
}
.entry-content .container:has(> .col_one_third)::before,
.entry-content .container:has(> .col_one_third)::after,
.entry-content .container:has(> .col_one_third) > .clear {
	display: none;
}
.entry-content .container:has(> .col_one_third) > .col_one_third {
	float: none;
	width: auto;
	margin: 0 !important; /* responsive.css setzt mobil margin-bottom: 50px !important; Abstand kommt vom gap */
}
@media (max-width: 991px) {
	.entry-content .container:has(> .col_one_third) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.entry-content .container:has(> .col_one_third) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karten mit leichtem Anheben beim Hover */
.entry-content .feature-box.fbox-outline {
	height: 100%;
	box-sizing: border-box;
	padding: 32px 24px 28px;
	background: #fff;
	border: 1px solid #ebe7e2;
	border-bottom: 1px solid #ebe7e2 !important; /* Boxen tragen .nobottomborder */
	border-radius: 10px;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.entry-content .feature-box.fbox-outline:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	border-color: #f0d4d4 !important;
}

/* Icons: zartrosé Kreis mit rotem Symbol statt rotem Kreis mit Außenring;
   beim Hover Apotheken-Rot statt Dunkelgrau (#333 aus mary.css) */
.entry-content .feature-box.fbox-center .fbox-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	padding: 0;
	border: 0;
}
.entry-content .feature-box.fbox-center .fbox-icon a {
	pointer-events: none;
}
.entry-content .feature-box.fbox-center .fbox-icon i {
	width: 64px;
	height: 64px;
	line-height: 64px !important;
	font-size: 26px;
	border-radius: 50%;
	background-color: #fdf2f2 !important;
	color: #CD1719 !important;
	box-shadow: none !important;
	transition: background-color .2s, color .2s;
}
.entry-content .feature-box.fbox-center .fbox-icon i::after {
	display: none;
}
.entry-content .feature-box.fbox-center.fbox-effect:hover .fbox-icon i {
	background-color: #CD1719 !important;
	color: #fff !important;
}

/* Texte: Lato statt dünner Raleway Light */
.entry-content .feature-box.fbox-center h3 {
	font-size: 18px;
	margin: 0;
}
.entry-content .feature-box.fbox-center:not(.fbox-bg) h3::after {
	display: none;
}
.entry-content .feature-box h3 span.subtitle {
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #555;
	margin-top: 10px;
}

/* Intro "Unser Versprechen" als ruhige Fläche statt Kasten mit überstehendem Icon */
.entry-content .feature-box.fbox-bg.fbox-center {
	margin-top: 8px;
	padding: 32px 40px;
	background: #fdf2f2;
	border: 0;
	border-radius: 10px;
}
.entry-content .feature-box.fbox-bg.fbox-center .fbox-icon {
	position: static;
	margin: 0 auto 14px;
}
.entry-content .feature-box.fbox-bg .fbox-icon i {
	background-color: #fff !important;
}
.entry-content .feature-box.fbox-bg p {
	font-size: 16px;
	color: #444;
	max-width: 70ch;
	margin: 12px auto 0;
}

/* ---------- Inhalt ---------- */

/* Hinweisbox auf der Startseite: Farbe steht als Inline-Style im Seiteninhalt */
.entry-content .section[style*="#ffc0c0"] {
	background-color: #fdf2f2 !important;
	border-left: 5px solid #CD1719;
	border-radius: 4px;
	padding: 20px 24px;
}

/* Porträt im Willkommensblock größer, mit leichtem Schatten */
.entry-content .col_two_fifth.center img {
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Verschachtelter .container im Willkommensblock war breiter als seine .section und wurde abgeschnitten.
   !important, weil responsive.css die .container-Breiten mit !important festlegt. */
.entry-content .section > .container {
	width: auto !important;
	margin-left: 0;
	margin-right: 0;
}

/* Bilder und Tabellen (z. B. Kundenkarte, Impressum) nicht breiter als der Inhaltsbereich */
.entry-content img {
	max-width: 100%;
	height: auto;
}
.entry-content table td {
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	/* Hero-Buttons untereinander in voller Breite */
	#slider .center.bottommargin br {
		display: none;
	}
	#slider .center.bottommargin .button {
		display: block;
		width: 100%;
		max-width: 340px;
		margin: 0 auto 12px;
		box-sizing: border-box;
	}

	/* Kundenkarte: Karten-Collage (Inline-Styles im Seiteninhalt) ragte rechts heraus
	   und überlappte den folgenden Absatz */
	#content img[style*="left: 250px"] {
		left: auto !important;
		right: 0;
	}
	#content div[style*="height: 280px"] {
		margin-bottom: 90px;
	}
}

@media (max-width: 479px) {
	/* Theme setzt .container hier fest auf 310px !important (40px Rand je Seite bei 390px) */
	#content .container,
	.mary-infobar .container,
	#footer .container {
		width: auto !important;
		margin-left: 0;
		margin-right: 0;
	}
}