/**
 * Rezeptbuch – Frontend-Styles v3
 * Theme: Canvasse / Manrope – Farben aus theme.json:
 *   base=#fff  contrast=#111  accent-1=#FFEE58  accent-2=#F6CFF4
 *   accent-3=#503AA8  accent-4=#686868  accent-5=#FBFAF3
 *   accent-6=rgba(currentColor,.2)
 */

/* ============================================================
   Custom Properties – konkrete Hex-Werte statt var()-Ketten,
   damit nichts vom Theme überschrieben/aufgelöst wird
   ============================================================ */
.rb-rezept,
.rb-archiv,
.rb-zutat-rezepte {
	/*
	 * Farb-Mapping gegen die tatsächlich definierten Theme-Presets:
	 *
	 *   --wp--preset--color--accent-3  → #182949  Dunkelblau  → rb-accent (Hauptakzent)
	 *   --wp--preset--color--accent-1  → #9dbb81  Grün        → rb-yellow (Highlight, kein Gelb)
	 *   --wp--preset--color--accent-2  → #d6c7c7  Altrosa     → rb-accent-2 (Pill-BG)
	 *   --wp--preset--color--accent-5  → #D7D3CC  Hellgrau    → rb-accent-soft + rb-cream
	 *   --wp--preset--color--accent-4  → #5F5F5F  Grau        → rb-muted
	 *   --wp--preset--color--contrast  → #191919  Fast-Schwarz→ rb-text
	 *   --wp--preset--color--base      → #DFDCD7  Sandton     → rb-white / Hintergrund
	 *   --wp--preset--color--white     → #ffffff  Weiß        → Karten-Hintergrund
	 *
	 * Hex-Wert als letzter Fallback falls Theme-Preset nicht vorhanden.
	 */

	/* Hauptakzent – Buttons, Links, Pills */
	--rb-accent:      var(--wp--preset--color--accent-3, #503AA8);

	/* Sanfter Akzent – Pill-Hintergrund, Badges */
	--rb-accent-2:    var(--wp--preset--color--accent-2, #F6CFF4);

	/* Dezente Hintergrundflächen */
	--rb-accent-soft: var(--wp--preset--color--accent-5, #F7F5FD);

	/* Highlight – im aktuellen Theme Grün statt Gelb */
	--rb-yellow:      var(--wp--preset--color--accent-1, #FFEE58);

	/* Karten-/Seitenhintergrund */
	--rb-cream:       var(--wp--preset--color--accent-5, #FBFAF3);

	/* Gedämpftes Grau – Meta, Labels */
	--rb-muted:       var(--wp--preset--color--accent-4, #686868);

	/* Haupttext */
	--rb-text:        var(--wp--preset--color--contrast, #111111);

	/* Heller Hintergrund – Karten */
	--rb-white:       var(--wp--preset--color--white, #ffffff);

	/* Border – Theme nutzt accent-6 (rgba(25,25,25,.2)) */
	--rb-border:      var(--wp--preset--color--accent-6, rgba(17,17,17,.12));

	/* Radien und Schatten bleiben Plugin-seitig definiert */
	--rb-radius-sm:   6px;
	--rb-radius:      12px;
	--rb-shadow-sm:   0 1px 4px rgba(0,0,0,.06);
	--rb-shadow:      0 6px 20px rgba(0,0,0,.09);
}

/* ============================================================
   Reset: Theme-Button-Styles innerhalb des Plugin-Wrappers
   neutralisieren (Theme setzt background:contrast auf ALLE buttons)
   ============================================================ */
/* Theme-Button-Reset: greift nur auf Buttons ohne Plugin-Klassen.
   Kein !important – spezifischere Selektoren weiter unten gewinnen normal. */
.rb-rezept button:not(.rb-portion-btn):not(.rb-portion-scale-btn):not(.rb-schritt-timer-btn):not([class*="rb-btn"]),
.rb-archiv button:not(.rb-portion-btn):not(.rb-portion-scale-btn):not(.rb-schritt-timer-btn):not([class*="rb-btn"]) {
	background: transparent;
	color: inherit;
	padding: 0;
	border: none;
	box-shadow: none;
	font-size: inherit;
	letter-spacing: inherit;
}

/* ============================================================
   Rezept-Wrapper
   ============================================================ */
.rb-rezept {
	max-width: 1100px;
	margin: 2rem auto 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--rb-text);
}

.rb-beschreibung {
	font-size: 1.05rem;
	color: var(--rb-muted);
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

/* ============================================================
   Meta-Leiste
   ============================================================ */
.rb-meta-leiste {
	display: flex;
	flex-wrap: wrap;
	background: var(--rb-white);
	border-radius: var(--rb-radius);
	border: 1px solid var(--rb-border);
	box-shadow: var(--rb-shadow-sm);
	margin-bottom: 2rem;
	overflow: hidden;
}

.rb-meta-item,
.rb-portionsrechner {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .9rem 1.25rem;
	border-right: 1px solid var(--rb-border);
	flex: 1 1 auto;
	min-width: 120px;
}

.rb-meta-item:last-child,
.rb-portionsrechner:last-child {
	border-right: none;
}

.rb-meta-icon {
	display: flex;
	align-items: center;
	color: var(--rb-accent);
	opacity: .8;
	flex-shrink: 0;
}

.rb-icon { display: block; flex-shrink: 0; }

.rb-meta-text,
.rb-portionsrechner-text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.rb-meta-label,
.rb-portionsrechner-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--rb-muted);
	line-height: 1.2;
}

.rb-meta-value {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--rb-text);
}

.rb-meta-item--gesamt .rb-meta-value { color: var(--rb-accent); }

.rb-temperatur-modus {
	font-size: .75rem;
	font-weight: 400;
	color: var(--rb-muted);
}

/* ============================================================
   Portionsrechner
   ============================================================ */
.rb-portionsrechner { gap: .65rem; }

.rb-portionsrechner-controls {
	display: flex;
	align-items: center;
	gap: .35rem;
}

/* Override des globalen Button-Resets für diese spezifischen Buttons */
.rb-portion-btn {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 1.5px solid var(--rb-accent);
	background: transparent;
	color: var(--rb-accent);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	padding: 0;
	box-shadow: none;
	flex-shrink: 0;
}

.rb-portion-btn:hover {
	background: var(--rb-accent);
	color: var(--rb-white);
}

.rb-portion-input {
	width: 3rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	border: none;
	border-bottom: 2px solid var(--rb-accent);
	padding: .1rem .15rem;
	background: transparent;
	color: var(--rb-text);
	font-family: inherit;
}

.rb-portion-input:focus { outline: none; }

.rb-portion-einheit {
	font-size: .85rem;
	color: var(--rb-muted);
	white-space: nowrap;
}

.rb-portionsrechner-skalierung {
	display: flex;
	gap: .3rem;
	margin-top: .35rem;
}

.rb-portion-scale-btn {
	padding: .15rem .5rem;
	border-radius: var(--rb-radius-sm);
	border: 1.5px solid var(--rb-accent);
	background: transparent;
	color: var(--rb-accent);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s, color .15s;
	box-shadow: none;
	white-space: nowrap;
}

.rb-portion-scale-btn:hover {
	background: var(--rb-accent);
	color: var(--rb-white);
}

/* ============================================================
   Mobile Sticky-Tabs
   ============================================================ */
.rb-mobile-tabs { display: none; }

@media (max-width: 799px) {
	.rb-mobile-tabs {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 20;
		background: var(--rb-white);
		border-bottom: 1px solid var(--rb-border);
		margin-bottom: 1.5rem;
		box-shadow: var(--rb-shadow-sm);
	}

	.rb-mobile-tab {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .4rem;
		padding: .75rem .5rem;
		text-decoration: none;
		color: var(--rb-muted);
		font-weight: 600;
		font-size: .9rem;
		border-bottom: 3px solid transparent;
		transition: color .15s, border-color .15s;
	}

	.rb-mobile-tab .rb-icon { opacity: .6; }

	.rb-mobile-tab.rb-mobile-tab--active {
		color: var(--rb-accent);
		border-bottom-color: var(--rb-accent);
	}

	.rb-mobile-tab.rb-mobile-tab--active .rb-icon { opacity: 1; }
}

/* ============================================================
   Zwei-Spalten-Grid
   ============================================================ */
.rb-inhalt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 800px) {
	.rb-inhalt-grid {
		grid-template-columns: minmax(240px, 320px) 1fr;
		gap: 3rem;
	}

	.rb-zutaten-bereich {
		position: sticky;
		top: 1rem;
	}
}

/* ============================================================
   Bereich-Titel
   ============================================================ */
.rb-bereich-titel {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--rb-accent-2);
	color: var(--rb-text);
}

.rb-bereich-icon { display: flex; color: var(--rb-accent); }

/* ============================================================
   Zutaten
   ============================================================ */
.rb-zutatengruppe { margin-bottom: 1.25rem; }

.rb-zutatengruppe-titel {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rb-accent);
	margin: 0 0 .5rem;
}

.rb-zutaten-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rb-zutat {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	padding: .42rem .55rem;
	border-radius: var(--rb-radius-sm);
	transition: background .15s;
	color: var(--rb-text);
}

.rb-zutat:nth-child(even) { background: var(--rb-cream); }

.rb-zutat.rb-zutat--highlight {
	background: var(--rb-accent-2);
	box-shadow: inset 3px 0 0 var(--rb-accent);
}

.rb-zutat-menge {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 2.5rem;
	text-align: right;
	flex-shrink: 0;
}

.rb-zutat-einheit {
	color: var(--rb-muted);
	min-width: 2rem;
	flex-shrink: 0;
}

.rb-zutat-name a {
	color: var(--rb-text);
	text-underline-offset: 2px;
	text-decoration-color: var(--rb-border);
}

.rb-zutat-name a:hover { text-decoration-color: var(--rb-accent); }

.rb-zutat-hinweis { color: var(--rb-muted); font-size: .85rem; }

/* ============================================================
   Schritte
   ============================================================ */
.rb-schritte-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}

.rb-schritt {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.1rem;
	background: var(--rb-white);
	border-radius: var(--rb-radius);
	box-shadow: var(--rb-shadow-sm);
	border: 1px solid transparent;
	cursor: default;
	transition: border-color .2s, box-shadow .2s;
}

.rb-schritt:hover {
	border-color: var(--rb-accent-2);
	box-shadow: var(--rb-shadow);
}

.rb-schritt.rb-schritt--done { opacity: .5; }
.rb-schritt.rb-schritt--done .rb-schritt-text { text-decoration: line-through; }

.rb-schritt-nummer {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--rb-accent);
	color: var(--rb-white);
	font-weight: 700;
	font-size: .85rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rb-schritt-inhalt {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.rb-schritt-text { line-height: 1.6; color: var(--rb-text); }

.rb-schritt-timer-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	border: 1.5px solid var(--rb-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--rb-accent);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.rb-schritt-timer-btn:hover,
.rb-schritt-timer-btn.rb-timer--running {
	background: var(--rb-accent);
	color: var(--rb-white);
}

.rb-schritt-timer-btn.rb-timer--done {
	background: #16a34a;
	border-color: #16a34a;
	color: var(--rb-white);
}

/* ============================================================
   Quelle
   ============================================================ */
.rb-quelle {
	margin-top: 1.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rb-border);
	font-size: .875rem;
	color: var(--rb-muted);
}

.rb-quelle-label { font-weight: 600; margin-right: .3rem; }
.rb-quelle a { color: var(--rb-accent); }

/* ============================================================
   Masonry-Grid & Karten (Archiv / Shortcodes)
   ============================================================ */

/* Standard-Grid (Shortcode [rezeptbuch_liste], Zutat-Seite) */
.rb-rezept-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

/* Masonry (CSS columns) für Archiv/Startseite */
.rb-archiv .rb-rezept-grid {
	display: block;
	columns: 2;
	column-gap: 1rem;
	margin: 0;
}

@media (min-width: 500px)  { .rb-archiv .rb-rezept-grid { columns: 2; } }
@media (min-width: 700px)  { .rb-archiv .rb-rezept-grid { columns: 3; } }
@media (min-width: 1000px) { .rb-archiv .rb-rezept-grid { columns: 4; } }
@media (min-width: 1280px) { .rb-archiv .rb-rezept-grid { columns: 5; } }

.rb-rezept-karte {
	display: flex;
	flex-direction: column;
	background: var(--rb-white);
	border-radius: var(--rb-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--rb-text);
	box-shadow: var(--rb-shadow-sm);
	border: 1px solid var(--rb-border);
	transition: box-shadow .22s, transform .22s;
}

.rb-archiv .rb-rezept-karte {
	break-inside: avoid;
	margin-bottom: 1rem;
	display: inline-flex;
	width: 100%;
}

.rb-rezept-karte:hover {
	box-shadow: var(--rb-shadow);
	transform: translateY(-3px);
}

.rb-rezept-karte-bild {
	overflow: hidden;
	flex-shrink: 0;
}

/* Standard aspect-ratio */
.rb-rezept-karte-bild { aspect-ratio: 4 / 3; }

/* Masonry: visueller Rhythmus durch wechselnde Proportionen */
.rb-archiv .rb-rezept-karte:nth-child(5n+1) .rb-rezept-karte-bild { aspect-ratio: 4/3; }
.rb-archiv .rb-rezept-karte:nth-child(5n+2) .rb-rezept-karte-bild { aspect-ratio: 3/4; }
.rb-archiv .rb-rezept-karte:nth-child(5n+3) .rb-rezept-karte-bild { aspect-ratio: 1/1; }
.rb-archiv .rb-rezept-karte:nth-child(5n+4) .rb-rezept-karte-bild { aspect-ratio: 5/3; }
.rb-archiv .rb-rezept-karte:nth-child(5n+5) .rb-rezept-karte-bild { aspect-ratio: 3/4; }

.rb-rezept-karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s;
}

.rb-rezept-karte:hover .rb-rezept-karte-bild img { transform: scale(1.05); }

.rb-rezept-karte-bild--placeholder {
	background: var(--rb-cream);
	min-height: 120px;
}

.rb-rezept-karte-inhalt {
	padding: .8rem .95rem .95rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}

.rb-rezept-karte-titel {
	font-size: .9rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
	color: var(--rb-text);
}

.rb-rezept-karte-kategorien {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-top: auto;
	padding-top: .35rem;
}

.rb-pill {
	display: inline-block;
	padding: .12rem .5rem;
	border-radius: 999px;
	background: var(--rb-accent-2);
	color: var(--rb-accent);
	font-size: .7rem;
	font-weight: 600;
}

/* ============================================================
   Archiv-Kopf & Filter (Startseite)
   ============================================================ */
.rb-archiv {
	/* Eigene Custom Properties für den Archiv-Kontext (Theme-Farben) */
	--rb-accent:      #503AA8;
	--rb-accent-2:    #F6CFF4;
	--rb-accent-soft: #F7F5FD;
	--rb-cream:       #FBFAF3;
	--rb-border:      rgba(17,17,17,.12);
	--rb-muted:       #686868;
	--rb-text:        #111111;
	--rb-white:       #ffffff;
	--rb-radius:      12px;
	--rb-shadow-sm:   0 1px 4px rgba(0,0,0,.06);
	--rb-shadow:      0 6px 20px rgba(0,0,0,.09);

	/* Aus dem Theme-contentSize-Container (645px) ausbrechen.
	   Gleiche Technik wie WordPress alignwide – negativer Margin
	   kombiniert mit Viewport-Breite. */
	width: min(1400px, 100vw);
	margin-left: max(calc(50% - 700px), calc(-1 * var(--wp--style--root--padding-left, 2rem)));
	margin-right: max(calc(50% - 700px), calc(-1 * var(--wp--style--root--padding-right, 2rem)));
	padding-left: clamp(1rem, 5vw, 3rem);
	padding-right: clamp(1rem, 5vw, 3rem);
	box-sizing: border-box;
}

.rb-archiv-kopf {
	margin-bottom: 1.25rem;
}

.rb-archiv-titel {
	font-size: .85rem;
	color: var(--rb-muted);
	margin: 0;
}

/* Pagination */
.rb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin: 2rem 0 1rem;
}

.rb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .6rem;
	border-radius: var(--rb-radius-sm);
	border: 1.5px solid var(--rb-border);
	background: var(--rb-white);
	color: var(--rb-muted);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}

.rb-pagination .page-numbers:hover {
	border-color: var(--rb-accent);
	color: var(--rb-accent);
}

.rb-pagination .page-numbers.current {
	border-color: var(--rb-accent);
	background: var(--rb-accent);
	color: var(--rb-white);
}

.rb-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.rb-keine-rezepte {
	color: var(--rb-muted);
	text-align: center;
	padding: 3rem 0;
}

/* ============================================================
   Zutat-Einzelseite
   ============================================================ */
.rb-zutat-rezepte {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rb-border);
}

.rb-zutat-rezepte-titel {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--rb-text);
}

.rb-zutat-rezepte-titel .rb-icon { color: var(--rb-accent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
	.rb-meta-leiste {
		flex-direction: column;
	}

	.rb-meta-item,
	.rb-portionsrechner {
		border-right: none;
		border-bottom: 1px solid var(--rb-border);
		min-width: 0;
	}

	.rb-meta-item:last-child,
	.rb-portionsrechner:last-child {
		border-bottom: none;
	}

	.rb-archiv-kopf {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Zutatenwolke [rezeptbuch_zutatenwolke] ─────────────────────── */
.rb-zutatenwolke {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.6em;
	line-height: 1.6;
}

.rb-zutat-cloud-item {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease;
	white-space: nowrap;
}

.rb-zutat-cloud-item:hover,
.rb-zutat-cloud-item:focus {
	text-decoration: underline;
	opacity: 0.75;
}

/* ── Tipps-Bereich ──────────────────────────────────────────────── */
.rb-tipps-bereich {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--rb-accent-soft);
	border-left: 4px solid var(--rb-accent);
	border-radius: var(--rb-radius-sm);
}

.rb-tipps-titel {
	margin-top: 0;
	margin-bottom: .75rem;
	font-size: 1rem;
	color: var(--rb-accent);
}

.rb-tipps-inhalt {
	font-size: .95rem;
	color: var(--rb-text);
	line-height: 1.65;
}

.rb-tipps-inhalt p { margin: 0 0 .6em; }
.rb-tipps-inhalt p:last-child { margin-bottom: 0; }

.rb-tipps-inhalt em {
	font-style: italic;
	font-weight: 600;
}