/**
 * Recyclinghof Arnstadt – ergänzende Stile
 *
 * Enthält nur, was sich in theme.json nicht abbilden lässt (Hover-Effekte,
 * Pseudo-Elemente, Sticky-Verhalten, Responsive-Feinschliff).
 * Farben und Abstände kommen konsequent aus den theme.json-Presets, damit
 * Änderungen im Website-Editor wirksam bleiben.
 */

/* ---------------------------------------------------------------------------
 * 1. Grundlagen
 * ------------------------------------------------------------------------- */

:root {
	--rc-sticky-offset: 96px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Sprungziele nicht unter dem klebenden Kopfbereich verstecken. */
:where(.wp-site-blocks) :where(h1, h2, h3, h4, h5, h6)[id],
:where(.wp-site-blocks) :where(div, section)[id] {
	scroll-margin-top: var(--rc-sticky-offset);
}

/* Sichtbarer Fokus für Tastaturbedienung. */
:where(.wp-site-blocks) a:focus-visible,
:where(.wp-site-blocks) button:focus-visible,
:where(.wp-site-blocks) summary:focus-visible,
:where(.wp-site-blocks) input:focus-visible,
:where(.wp-site-blocks) textarea:focus-visible,
:where(.wp-site-blocks) select:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Sichtbarkeitshelfer für Desktop-/Mobil-spezifische Leisten. */
@media (max-width: 781px) {
	.rc-nur-desktop {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.rc-nur-mobil {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Infoleiste + Kopfbereich
 * ------------------------------------------------------------------------- */

.rc-topbar {
	font-size: 14px;
}

.rc-topbar a,
.rc-topbar a:hover,
.rc-topbar a:focus {
	color: var(--wp--preset--color--on-dark);
}

.rc-topbar a:hover,
.rc-topbar a:focus {
	text-decoration: underline;
}

/* Klebender Kopfbereich. Der Gruppen-Block trägt die Position, hier nur der
   Feinschliff, den der Editor nicht anbietet. */
.rc-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.rc-header .wp-block-site-logo img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

@media (max-width: 781px) {
	.rc-header .wp-block-site-logo img {
		width: 38px;
		height: 38px;
	}
}

/* Hamburger-Icon in der Designfarbe. */
.rc-header .wp-block-navigation__responsive-container-open svg,
.rc-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--primary);
}

.rc-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-dark) !important;
	padding-top: clamp(4rem, 12vw, 6rem);
}

.rc-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--on-dark) !important;
	font-size: var(--wp--preset--font-size--large);
}

.rc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--on-dark);
}

/* CTA-Schaltfläche in der Navigation ("Kontakt"). */
.rc-nav-cta a,
.rc-nav-cta a:hover,
.rc-nav-cta a:focus {
	background: var(--wp--preset--color--accent);
	color: #fff;
	padding: 11px 22px;
	border-radius: var(--wp--custom--radius--klein);
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
}

.rc-nav-cta a:hover,
.rc-nav-cta a:focus {
	background: var(--wp--preset--color--accent-2);
}

/* ---------------------------------------------------------------------------
 * 3. Hero
 * ------------------------------------------------------------------------- */

.rc-hero :where(h1, h2, h3) {
	color: #fff;
}

.rc-hero__intro {
	max-width: 480px;
}

.rc-hero__bild img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

/* Telefon-Block: Icon-Kreis + zweizeilige Beschriftung. */
.rc-hero-tel__icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	transition: background 0.15s ease;
}

.rc-hero-tel:hover .rc-hero-tel__icon,
.rc-hero-tel:focus-within .rc-hero-tel__icon {
	background: rgba(255, 255, 255, 0.26);
}

.rc-hero-tel__label {
	margin: 0;
}

.rc-hero-tel__nummer {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.15;
}

.rc-hero-tel__nummer a,
.rc-hero-tel__nummer a:hover,
.rc-hero-tel__nummer a:focus {
	color: #fff;
	text-decoration: none;
}

.rc-hero-tel__nummer a:hover,
.rc-hero-tel__nummer a:focus {
	text-decoration: underline;
}

/* Sekundäre Schaltfläche auf dunklem Grund. */
.rc-button-ghost a.wp-block-button__link,
.rc-button-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.rc-button-ghost a.wp-block-button__link:hover,
.rc-button-ghost a.wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 4. Karten (Kategorien, Leistungen)
 * ------------------------------------------------------------------------- */

.rc-karte {
	position: relative;
	height: 100%;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.rc-karte:hover,
.rc-karte:focus-within {
	box-shadow: var(--wp--preset--shadow--karte-hover);
	transform: translateY(-2px);
}

/* Ganze Karte klickbar machen – ohne die Semantik zu zerstören.
   Der "Details"-Link spannt sich unsichtbar über die gesamte Karte. */
.rc-karte__link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rc-karte__link a,
.rc-karte__link a:hover,
.rc-karte__link a:focus {
	text-decoration: none;
	font-weight: 700;
	color: var(--wp--preset--color--link);
}

.rc-karte__link a:hover,
.rc-karte__link a:focus {
	color: var(--wp--custom--link-hover, #57751f);
}

/* Bildbereich mit Platzhaltermuster, solange kein Foto hinterlegt ist. */
.rc-karte__bild {
	margin: 0;
	height: 170px;
	background: var(--wp--preset--gradient--platzhalter);
	border-bottom: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

@media (min-width: 782px) {
	.rc-karte__bild {
		height: 130px;
	}
}

.rc-karte__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rc-karte__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}

.rc-karte__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-top: 1px solid var(--wp--preset--color--border-2);
	padding-top: 12px;
	margin-top: 6px;
}

.rc-preis {
	font-weight: 800;
	font-size: 20px;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

/* Kartenraster: gleich hohe Spalten. */
.rc-karten-raster.wp-block-columns {
	align-items: stretch;
}

.rc-karten-raster .wp-block-column {
	display: flex;
}

@media (max-width: 1023px) and (min-width: 782px) {
	.rc-karten-raster.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.rc-karten-raster.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 1.5rem) / 2) !important;
		flex-grow: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Pfeil-Listen ( › )
 * ------------------------------------------------------------------------- */

.rc-pfeilliste {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rc-pfeilliste li {
	position: relative;
	padding-left: 1.4em;
}

.rc-pfeilliste li::before {
	content: "\203A";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 800;
	font-size: 1.1em;
	line-height: inherit;
}

/* Häkchen- und Kreuz-Listen für Annahmebedingungen. */
.rc-liste-ja,
.rc-liste-nein {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rc-liste-ja li,
.rc-liste-nein li {
	position: relative;
	padding-left: 1.8em;
}

.rc-liste-ja li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 800;
}

.rc-liste-nein li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--signal);
	font-weight: 800;
}

/* ---------------------------------------------------------------------------
 * 6. Ablauf-Schritte
 * ------------------------------------------------------------------------- */

.rc-schritt {
	text-align: center;
}

.rc-schritt__nummer {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 800;
	font-size: 24px;
	line-height: 56px;
	text-align: center;
}

.rc-schritt p:not(.rc-schritt__nummer) {
	max-width: 260px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * 7. Inhaltsverzeichnis (SEO-Text)
 * ------------------------------------------------------------------------- */

.rc-inhalt-nav {
	font-size: 15.5px;
}

@media (min-width: 782px) {
	.rc-inhalt-nav {
		position: sticky;
		top: var(--rc-sticky-offset);
	}
}

.rc-inhalt-nav ul,
.rc-inhalt-nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rc-inhalt-nav li {
	margin: 0;
}

.rc-inhalt-nav li + li {
	border-top: 1px solid var(--wp--preset--color--border-2);
}

.rc-inhalt-nav a {
	display: block;
	padding: 7px 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rc-inhalt-nav a:hover,
.rc-inhalt-nav a:focus {
	color: var(--wp--preset--color--accent-2);
	text-decoration: underline;
}

.rc-label {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-4);
}

/* ---------------------------------------------------------------------------
 * 8. Hinweisbox (EC-Karte o. Ä.)
 * ------------------------------------------------------------------------- */

.rc-hinweis {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	background: var(--wp--preset--color--base-2);
	border: 1px solid #d9e0c6;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	padding: 16px 22px;
}

.rc-hinweis > .rc-hinweis__icon {
	font-size: 24px;
	line-height: 1;
	flex: 0 0 auto;
	margin: 0;
}

.rc-hinweis > p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * 9. Preistabellen
 * ------------------------------------------------------------------------- */

.rc-preistabelle,
.wp-block-table.is-style-preistabelle {
	/* Auf kleinen Bildschirmen horizontal scrollen statt umbrechen. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rc-preistabelle table,
.wp-block-table.is-style-preistabelle table {
	border-collapse: collapse;
	width: 100%;
	background: var(--wp--preset--color--base-2);
}

.rc-preistabelle :is(th, td),
.wp-block-table.is-style-preistabelle :is(th, td) {
	border: 1px solid var(--wp--preset--color--border);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}

.rc-preistabelle thead th,
.wp-block-table.is-style-preistabelle thead th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.rc-preistabelle tbody tr:nth-child(even) td,
.wp-block-table.is-style-preistabelle tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--base-3);
}

.rc-preistabelle :is(td, th):last-child,
.wp-block-table.is-style-preistabelle :is(td, th):last-child {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
}

.rc-preistabelle thead th:last-child,
.wp-block-table.is-style-preistabelle thead th:last-child {
	color: var(--wp--preset--color--on-dark);
}

/* ---------------------------------------------------------------------------
 * 10. Fußbereich
 * ------------------------------------------------------------------------- */

.rc-footer a,
.rc-footer a:hover,
.rc-footer a:focus {
	color: var(--wp--preset--color--on-dark);
}

.rc-footer a:hover,
.rc-footer a:focus {
	text-decoration: underline;
}

.rc-footer :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.rc-footer-meta,
.rc-footer-meta a,
.rc-footer-meta a:hover,
.rc-footer-meta a:focus {
	color: var(--wp--preset--color--on-dark-4);
	font-size: 13.5px;
}

.rc-footer-meta .wp-block-navigation {
	font-size: 13.5px;
	font-weight: 400;
}

.rc-footer-meta .wp-block-navigation a,
.rc-footer-meta .wp-block-navigation a:hover,
.rc-footer-meta .wp-block-navigation a:focus {
	color: var(--wp--preset--color--on-dark-4) !important;
}

/* ---------------------------------------------------------------------------
 * 11. Diverses
 * ------------------------------------------------------------------------- */

/* Bild-Links ohne Unterstreichung, mit sanftem Hover. */
.rc-bildlink a,
.rc-bildlink a:hover,
.rc-bildlink a:focus {
	text-decoration: none;
	display: block;
}

.rc-bildlink img {
	display: block;
	width: 100%;
	transition: transform 0.3s ease;
}

.rc-anfahrt__karte img {
	height: 380px;
	object-fit: cover;
}

@media (max-width: 781px) {
	.rc-anfahrt__karte img {
		height: 220px;
	}
}

.rc-bildlink a:hover img,
.rc-bildlink a:focus img {
	transform: scale(1.02);
}

/* Fließtext-Spalte */
.rc-prosa {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast-2);
	text-wrap: pretty;
}

/* Abschnittsüberschrift zentriert mit Einleitung */
.rc-abschnitt-kopf {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Sicherstellen, dass Spalten auf Tablets sinnvoll umbrechen. */
@media (max-width: 900px) {
	.rc-2-spalten.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.rc-2-spalten.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}