/*
Theme Name:   InstaBlogPin
Theme URI:    https://example.invalid/
Description:  Child-Theme von Twenty Twenty-Five für den glutenfrei-Blog. Mobile first, warme Farbwelt, lokal eingebundene Schriften (kein Google-Fonts-Aufruf).
Author:       InstaBlogPin
Version:      0.1.0
Template:     twentytwentyfive
Requires PHP: 8.1
Text Domain:  instablogpin
Tags:         blog, food, block-theme
*/

/* ==========================================================================
   Nur was sich nicht über theme.json ausdrücken lässt.
   Farben und Abstände kommen als var(--wp--preset--*) aus theme.json —
   niemals hier hart hineinschreiben, sonst laufen beide auseinander.
   ========================================================================== */

/* --- Bild-Platzhalter, solange keine echten Fotos da sind -------------- */
.ibp-platzhalter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--sand-dunkel);
	border-radius: 12px;
	color: var(--wp--preset--color--gedaempft);
	font-size: var(--wp--preset--font-size--klein);
	text-align: center;
}

/* --- Rezeptkarten im Raster ------------------------------------------- */
.ibp-karte {
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ibp-karte:hover {
	transform: translateY(-3px);
	border-color: #ddd0bd;
	box-shadow: 0 10px 24px -14px rgba(42, 36, 34, 0.45);
}

.ibp-karte img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ibp-karte:hover img {
	transform: scale(1.04);
}

/* Ohne diesen Ausschnitt waechst das Bild beim Hover ueber die runde
   Kartenkante hinaus — `overflow: hidden` der Karte greift nicht, solange
   der Bildblock selbst keinen eigenen Ausschnitt hat. */
.ibp-karte .wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}

/* Ruhigere Reihen ohne den Titel abzuschneiden: zwei Zeilen Mindesthoehe
   geben einzeiligen Titeln denselben Raum wie zweizeiligen. Gekuerzt wird
   nichts — welches Rezept hinter einer Karte steckt, muss lesbar bleiben.
   Lange Woerter wie „Buttermilchbroetchen" sprengen eine 280-px-Spalte,
   deshalb Silbentrennung statt Ueberlauf. */
.ibp-karte .wp-block-post-title {
	min-height: calc(2 * 1.25em);
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Eine Metazeile statt zweier Labelzeilen: „Mittagessen · Einfach" */
.ibp-kartenmeta {
	gap: 0 !important;
	align-items: baseline;
	flex-wrap: nowrap;
	min-width: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}

.ibp-kartenmeta > * {
	margin: 0;
	min-width: 0;
	white-space: nowrap;
}

/* Der zweite Eintrag (Aufwand) darf weichen, bevor er aus der Karte
   laeuft — die Mahlzeit ist beim Stoebern die nuetzlichere Angabe. */
.ibp-kartenmeta > *:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ibp-kartenmeta > * + *::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--wp--preset--color--linie);
}

.ibp-kartenmeta a {
	color: inherit;
	text-decoration: none;
}

.ibp-kartenmeta a:hover {
	text-decoration: underline;
}

/* Suchfeld: schmal und zentriert. Ueber die volle Rasterbreite wirkte es
   wie ein Formular und nahm dem Seitentitel den Rang. */
.ibp-suche-schmal {
	max-width: 420px;
	margin-inline: auto;
}

.ibp-suche-schmal .wp-block-search__input {
	border-radius: 999px;
}

/* Telefon: zwei Spalten. `minimumColumnWidth: 260px` ergaebe eine einzige
   Spalte — sechs Rezepte waeren dann ein sehr langer Scrollweg. */
@media (max-width: 599px) {
	.ibp-rezeptraster.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ibp-rezeptraster .wp-block-post-title {
		font-size: 0.875rem;
		line-height: 1.3;
	}

	/* In einer 169-px-Spalte passt „Kuchen & Suesses · Einfach" nicht in eine
	   Zeile und lief aus der Karte heraus. Mobil bleibt die Mahlzeit. */
	.ibp-rezeptraster .ibp-kartenmeta > * + * {
		display: none;
	}

	.ibp-rezeptraster .ibp-karte .wp-block-group {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.ibp-rezeptraster .ibp-karte {
		padding-bottom: 12px !important;
	}
}

.ibp-karte .wp-block-post-title a {
	text-decoration: none;
}

/* --- Meta-Zeile (Zeit, Schwierigkeit) --------------------------------- */
.ibp-meta {
	color: var(--wp--preset--color--gedaempft);
	font-size: var(--wp--preset--font-size--klein);
}

/* --- Taxonomie-Label über dem Titel ----------------------------------- */
.ibp-label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--olive);
}

.ibp-label--akzent {
	color: var(--wp--preset--color--akzent);
}

/* --- Rezeptfilter ------------------------------------------------------
   Kombinierbar: jeder Chip fuegt einen Filter hinzu oder nimmt ihn weg.
   Jeder Zustand hat eine eigene URL — teilbar, im Verlauf navigierbar,
   ohne JavaScript. ------------------------------------------------------- */
.ibp-filter {
	/* Bewusst ohne Kasten: als weisse Box mit Rahmen wog der Filter im
	   Seitenkopf schwerer als die Rezepte darunter und schob sie auf dem
	   Telefon komplett aus dem ersten Bild. */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.ibp-filter__reihe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}


/* Ein Chip */
.ibp-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	background: var(--wp--preset--color--grund);
	/* Nicht `linie`: die Chip-Fuellung steht auf der weissen Filterbox und hebt
	   sich mit 1,07:1 praktisch nicht ab — der Rahmen ist das Einzige, was den
	   Chip als Bedienelement erkennbar macht, und braucht deshalb 3:1
	   (WCAG 1.4.11). `linie` schafft 1,20:1 und ist nur fuer Trennlinien da. */
	border: 1px solid var(--wp--preset--color--chiprand);
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--tinte) !important;
	text-decoration: none !important;
}

.ibp-filter__chip:hover {
	border-color: var(--wp--preset--color--tinte);
}

.ibp-filter__chip--an {
	background: var(--wp--preset--color--tinte);
	border-color: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--grund) !important;
}

.ibp-filter__chip--an:hover {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
}

/* Chips ohne Treffer: sichtbar, aber zurueckgenommen.
   Nicht ausblenden — sonst springt das Raster bei jedem Klick. */
.ibp-filter__chip--leer {
	opacity: 0.4;
}

.ibp-filter__weg {
	font-size: 1.05rem;
	line-height: 1;
	opacity: 0.75;
}

.ibp-filter__zahl {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gedaempft);
}

.ibp-filter__leeren {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--akzent) !important;
	margin-left: 4px;
}

/* Aufklappbare Zusatzfilter (Anlass, Schwierigkeit) -------------------
   <details> statt JavaScript: funktioniert ohne Skript, ist vom Browser
   korrekt an Screenreader gemeldet und behaelt den Zustand beim Zuruecknavigieren. */
.ibp-filter__mehr {
	text-align: center;
}

.ibp-filter__mehr-knopf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 4px;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	color: var(--wp--preset--color--gedaempft);
	cursor: pointer;
	list-style: none;
}

.ibp-filter__mehr-knopf::-webkit-details-marker {
	display: none;
}

.ibp-filter__mehr-knopf::after {
	content: "▾";
	font-size: 0.75em;
	transition: transform 0.15s ease;
}

.ibp-filter__mehr[open] .ibp-filter__mehr-knopf::after {
	transform: rotate(180deg);
}

.ibp-filter__mehr-knopf:hover {
	color: var(--wp--preset--color--akzent);
}

.ibp-filter__gruppen {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.ibp-filter__ueberschrift {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--text) !important;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--olive);
}

.ibp-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.ibp-filter__ergebnis {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
	text-align: center;
}

.ibp-filter__ergebnis strong {
	color: var(--wp--preset--color--tinte);
}

@media (min-width: 700px) {
	.ibp-filter__gruppen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
		align-items: start;
		justify-items: center;
	}
}

/* --- Block "Meine Tipps für dich" ------------------------------------- */
.ibp-tipps {
	background: var(--wp--preset--color--olive-hell);
	border: 1px solid #c3c9ae;
	border-radius: 14px;
}

/* --- Sprungziel Rezeptkarte ------------------------------------------- */
:target {
	scroll-margin-top: 1.5rem;
}

/* --- Sichtbarer Fokus, auch wenn das Eltern-Theme ihn wegnimmt --------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* --- Touch-Ziele: nichts unter 44px ----------------------------------- */
.wp-block-navigation a,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --- Links innerhalb von Karten ---------------------------------------
   Kartentitel und Taxonomie-Angaben sind technisch Links und erben sonst
   Akzentfarbe plus Unterstreichung. In einer Karte ist die ganze Flaeche
   der Klickbereich — die Farbe muss die Lesbarkeit fuehren, nicht die
   Linkhervorhebung. ----------------------------------------------------- */
.wp-block-post-template .wp-block-post-title a,
.ibp-karte .wp-block-post-title a {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

.wp-block-post-template .wp-block-post-title a:hover,
.ibp-karte .wp-block-post-title a:hover {
	color: var(--wp--preset--color--akzent);
	text-decoration: underline;
}

.ibp-label a,
.ibp-meta a {
	color: inherit;
	text-decoration: none;
}

.ibp-label a:hover,
.ibp-meta a:hover {
	text-decoration: underline;
}

/* Beitragsbild oben in der Karte buendig anschliessen */
.ibp-karte .wp-block-post-featured-image {
	margin: 0;
}

.ibp-karte .wp-block-post-featured-image img {
	border-radius: 0;
}

/* ==========================================================================
   Desktop
   Mobile first gebaut — hier nur, was ab Tablet/Desktop anders sein muss.
   ========================================================================== */

/* --- Kopfbereich ------------------------------------------------------- */
.ibp-kopf .wp-block-navigation__container {
	flex-wrap: nowrap;
}

.ibp-kopf .wp-block-navigation a {
	white-space: nowrap;
}

/* Die Suche im Kopf ist ein reiner Icon-Knopf und darf nicht mitwachsen */
.ibp-kopf-suche {
	flex-shrink: 0;
	margin: 0;
}

.ibp-kopf-suche .wp-block-search__inside-wrapper {
	width: auto;
}

.ibp-kopf-suche .wp-block-search__button {
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid #d8ccbd;
	border-radius: 22px;
	color: var(--wp--preset--color--tinte);
}

.ibp-kopf-suche .wp-block-search__button:hover {
	background: var(--wp--preset--color--karte);
	border-color: var(--wp--preset--color--tinte);
}

.ibp-kopf-suche .wp-block-search__button svg {
	fill: currentColor;
}

/* Zwischen 600 und 900 px klappt WordPress das Hamburger-Menue auf, aber
   Logo, Navigation und Suche passen dort noch nicht nebeneinander — ohne die
   folgenden Regeln laeuft der Kopf ueber (gemessen: 28 px bei 605 px Breite,
   Kopfhoehe 194 px statt 85). Deshalb in diesem Band: Suche und Zeile 2. */
@media (max-width: 899px) {
	.ibp-kopf .ibp-kopf-suche {
		display: none;
	}

	.ibp-kopf .alignwide {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--20);
	}

	.ibp-kopf .wp-block-site-title {
		font-size: var(--wp--preset--font-size--gross);
	}
}

/* Auf dem Telefon kein Overlay-Menue mehr (`overlayMenu: never` im
   Kopf-Template): die drei wichtigen Ziele stehen nebeneinander da, wie am
   Rechner auch. Ein Menue hinter zwei Strichen kostet einen Extra-Klick und
   verbirgt genau die Navigation, die hier aus drei Woertern besteht.

   Kontakt bleibt drin (passt in die Zeile), nur die Suche faellt weg --
   die ist ohnehin schon ab 899 px ausgeblendet und steht im Fussbereich. */
@media (max-width: 599px) {
	.ibp-kopf .wp-block-site-tagline {
		font-size: 0.5625rem;
	}

	/* Die Unterzeile passt auf dem Telefon mal in eine, mal in zwei Zeilen —
	   je nachdem, ob die Schrift beim ersten Zeichnen schon da ist. Der Kopf
	   sprang dadurch um eine Zeilenhoehe. Zwei Zeilen fest reservieren: der
	   Platz steht dann von Anfang an und bleibt gleich, egal welche Schrift
	   gerade greift. */
	.ibp-kopf .wp-block-site-tagline {
		min-height: 3.4em;
	}

	/* Unter den Navigationspunkten stand zu viel Luft: die Links sind 44 px
	   hoch (Touch-Ziel, bleibt so), darunter kamen nochmal 14 px Innenabstand
	   des Kopfes. Der Abstand ueber der Trennlinie reicht mit 4 px. */
	/* ⚠️ `!important`: beide Werte stehen als Inline-Stil im Block-Markup
	   (`padding` am Kopf, `gap` an der Reihe). Gegen einen Inline-Stil
	   kommt keine Klassenregel an. */
	.ibp-kopf {
		padding-bottom: 4px !important;
	}

	.ibp-kopf .alignwide {
		row-gap: 6px !important;
	}

	/* Die vier Punkte gleichmaessig ueber die Breite verteilen statt
	   linksbuendig zu stapeln. Dafuer muss die Navigation erst einmal die
	   volle Zeilenbreite bekommen -- sie sitzt in `.ibp-kopf-rechts`, das
	   am Rechner rechtsbuendig steht. */
	.ibp-kopf .ibp-kopf-rechts {
		flex: 1 1 100%;
	}

	.ibp-kopf .wp-block-navigation,
	.ibp-kopf .wp-block-navigation__container {
		width: 100%;
		gap: var(--wp--preset--spacing--10);
		justify-content: space-between;
	}

	/* Unter der Schrift blieb weiter viel Luft. Sie kommt aus den Links
	   selbst: 44 px hoch als Touch-Ziel, die Schrift darin misst 15 px --
	   also je ~14 px ueber und unter dem Text. Die 44 px bleiben (sonst
	   wird das Ziel auf dem Telefon zu klein), stattdessen wird der Block
	   optisch zusammengezogen. Die Trefferflaeche ragt dann in den
	   Innenabstand des Kopfes hinein, wo ohnehin nichts liegt. */
	.ibp-kopf .wp-block-navigation {
		margin-top: 0;
		margin-bottom: -10px;
	}

	.ibp-kopf .wp-block-navigation a {
		font-size: 0.9375rem;
		font-weight: 700;
	}
}

@media (min-width: 600px) {
	/* Karten duerfen ab Tablet etwas mehr Luft im Text haben */
	.ibp-karte .wp-block-post-title {
		font-size: var(--wp--preset--font-size--titel-s);
	}
}


/* --- Hero der Startseite ----------------------------------------------
   Der Hero laeuft ueber die volle Breite, damit er dieselbe linke Kante hat
   wie alles darunter. Text ist zentriert, darf aber nicht ueber 1180 px
   laufen — eine Zeile dieser Laenge waere unlesbar. Deshalb begrenzt und
   ueber auto-Raender mittig gestellt. ------------------------------------- */
.ibp-hero > p {
	max-width: 62rem;
	margin-inline: auto;
}

/* Der Einleitungstext im Hero: breiter und enger gesetzt, damit er weniger
   Hoehe frisst. Bei 1180 px Breite laufen ~105 Zeichen in eine Zeile —
   fuer einen kurzen Einleitungsabsatz vertretbar, fuer Fliesstext nicht. */
.ibp-hero > p.ibp-hero-text {
	max-width: 70rem;
	line-height: 1.5;
}

.ibp-hero > h1 {
	max-width: none;
}



/* --- Detailseiten: volle Breite, Fliesstext trotzdem lesbar -------------
   Der Container laeuft auf 1180 px, damit die linke Kante dieselbe ist wie
   im Kopf, im Fuss und auf allen anderen Seiten. Nur der laufende Text wird
   begrenzt — per max-width OHNE auto-Raender, also linksbuendig. Mit
   contentSize wuerde WordPress ihn stattdessen zentrieren, und die
   Einrueckung waere zurueck. --------------------------------------------- */
.ibp-lesetext > p,
.ibp-lesetext > h2,
.ibp-lesetext > h3,
.ibp-lesetext > h4,
.ibp-lesetext > ul,
.ibp-lesetext > ol,
.ibp-lesetext > .wp-block-details,
.ibp-lesetext > blockquote {
	max-width: 68ch;
}

.ibp-einstieg > .wp-block-post-title {
	max-width: 24ch;
}

/* Bilder, Tipps-Block und Pin-Kasten duerfen die volle Breite nutzen */
.ibp-lesetext > .wp-block-image img {
	width: 100%;
	max-height: 34rem;
	object-fit: cover;
}

/* Seitentitel zentriert und ueber die volle Breite (Ueber mich, Kontakt) */
.ibp-einstieg > .wp-block-post-title.has-text-align-center {
	max-width: none;
}

/* WordPress setzt in einem constrained-Layout auf JEDES Kind
   margin-left/right: auto. Das zentriert die oben begrenzten Textbloecke
   wieder und erzeugt genau die Einrueckung, die weg soll. Hier zurueckgesetzt. */
.ibp-lesetext > p,
.ibp-lesetext > h2,
.ibp-lesetext > h3,
.ibp-lesetext > h4,
.ibp-lesetext > ul,
.ibp-lesetext > ol,
.ibp-lesetext > .wp-block-details,
.ibp-lesetext > blockquote,
.ibp-einstieg > .wp-block-post-title:not(.has-text-align-center) {
	/* WordPress setzt die automatischen Raender im constrained-Layout mit
	   !important — ohne !important gewinnt hier keine eigene Regel, egal wie
	   spezifisch. Auch margin-inline hilft nicht. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* --- Signet im Kopf -------------------------------------------------- */
/* Das Logo liegt als Inline-SVG im Header (nicht als Site-Logo aus der
   Mediathek): WordPress laesst SVG-Uploads standardmaessig nicht zu, und
   inline bleibt es scharf, faerbbar und ohne zweiten Request. */
.ibp-kopf .ibp-signet {
	display: flex;
	flex-shrink: 0;
	line-height: 0;
}

.ibp-kopf .ibp-signet svg {
	width: 52px;
	height: 52px;
	display: block;
}

@media (max-width: 599px) {
	.ibp-kopf .ibp-signet svg {
		width: 42px;
		height: 42px;
	}
}

/* ==========================================================================
   WP Recipe Maker — Rezeptkarte an die Markenfarben angleichen

   Farben und Schriften der Karte stehen seit 19.09.2026 im eigenen Template
   (wprm-templates/recipe/instablogpin/) — nicht mehr hier. Was hier bleibt,
   sind die Stellen, die das Template nicht ausdruecken kann: Rahmen der
   Karte, Beschriftung der Knoepfe, Marker und Sterne.

   ⚠️ Haengt an WPRM-Klassennamen. Nach einem groesseren Plugin-Update
   kurz pruefen, ob die Karte noch in unseren Farben erscheint.
   ========================================================================== */

.wprm-recipe-container .wprm-recipe {
	border-color: var(--wp--preset--color--tinte) !important;
	border-radius: 14px;
	overflow: hidden;
}

/* Zeit- und Mengenangaben */
.wprm-recipe-container .wprm-recipe-times-container,
.wprm-recipe-container .wprm-recipe-meta-container {
	border-color: var(--wp--preset--color--linie) !important;
}

/* Knoepfe "Drucken" und "Merken" */
.wprm-recipe-container .wprm-recipe-link {
	/* Dieselben 44 px Touchziel wie ueberall sonst im Theme; WPRM liefert 38. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-color: var(--wp--preset--color--tinte) !important;
	border-radius: 8px;
	color: var(--wp--preset--color--tinte) !important;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
}

.wprm-recipe-container .wprm-recipe-link:hover {
	background-color: var(--wp--preset--color--akzent) !important;
	border-color: var(--wp--preset--color--akzent) !important;
	color: var(--wp--preset--color--karte) !important;
}

/* Schrittnummern und Aufzaehlungspunkte */
.wprm-recipe-container .wprm-recipe-instruction::marker,
.wprm-recipe-container .wprm-recipe-ingredient::marker {
	color: var(--wp--preset--color--akzent);
}

/* Bewertungssterne */
.wprm-recipe-container .wprm-rating-star svg * {
	fill: var(--wp--preset--color--akzent) !important;
	stroke: var(--wp--preset--color--akzent) !important;
}

/* Die Karte steht auf voller Breite wie der uebrige Inhalt */
.ibp-lesetext > .wprm-recipe-container {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Instagram-Beitrag auf der Rezeptseite ---------------------------
   Der Beitrag steht direkt in der Seite. ⚠️ Die Anfrage an Meta geht damit
   beim Seitenaufruf raus, nicht erst auf Klick — Nutzer-Entscheidung vom
   19.09.2026, siehe Blog/CLAUDE.md. --------------------------------------- */
.ibp-einbettung {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* `wpautop` legt leere Absaetze in die Shortcode-Ausgabe. */
.ibp-einbettung p:empty {
	display: none;
}

/* Nur Profilzeile und Beitrag zeigen.
   Instagram kennt keinen Parameter, der die Aktionsleiste („Gefaellt 2 Mal",
   Herz, Kommentarfeld) weglaesst, und in einen fremden iframe kommt kein CSS
   hinein. Also ein Fenster, das den Rest abschneidet: der Rahmen bleibt in
   voller Hoehe, sichtbar ist nur sein oberer Teil.

   Gemessen bei 352 px Breite: Profilzeile 54 px, Beitrag 450 px. Die beiden
   verhalten sich unterschiedlich — der Beitrag waechst mit der Breite, die
   Profilzeile bleibt gleich hoch. Ein einziges Seitenverhaeltnis fuer beides
   war deshalb falsch: bei 542 px sass der Schnitt 28 px zu tief und die Zeile
   „Mehr auf Instagram ansehen" blieb sichtbar. Jetzt traegt `aspect-ratio`
   nur den Beitrag (Inhaltsbox), die Profilzeile kommt als fester Innenabstand
   oben dazu.

   ⚠️ Haengt am Layout von Instagram. Aendert Meta die Hoehe der Profilzeile,
   sitzt der Schnitt falsch: dann hier nachmessen. */
.ibp-einbettung__fenster {
	position: relative;
	box-sizing: content-box;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 352 / 450;
	padding-top: 54px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 14px;
	background: #fff;
}

.ibp-einbettung__rahmen {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 900px;
	border: 0;
	background: #fff;
}

@media (max-width: 540px) {
	.ibp-einbettung__fenster {
		border-radius: 10px;
	}
}

/* Der Instagram-Beitrag sitzt **im** Kartenkopf, nicht daneben: rechts in der
   Flaeche, die neben Titel, Knoepfen, Zeiten und Pillen ohnehin leer blieb.

   Auf dem Telefon steht er ueber dem Rezept — dieselbe Reihenfolge wie vorher
   (Beitragsbild, Instagram, Rezept), nur beginnt der Kartenrahmen jetzt eine
   Zeile frueher.

   1100 px ist die Schwelle: darunter bliebe der linken Spalte zu wenig fuer
   die drei Zeitangaben nebeneinander. 320 px Mindestbreite rechts, weil
   Instagrams Rahmen darunter seinen eigenen Inhalt abschneidet. */
.instablogpin-kopf {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.instablogpin-kopf__rechts {
	order: -1;
}

/* Zeiten und Pillen stehen unter beiden Spalten auf voller Kartenbreite —
   sie gehoeren zum Rezept als Ganzem, nicht in die Textspalte. */
.instablogpin-kopf__unten {
	order: 1;
}

/* Im Kartenkopf ist der Beitrag genauso gross wie das Rezeptfoto links:
   300 x 300 mit demselben Eckenradius. Dafuer wird nicht der Rahmen skaliert,
   sondern das Fenster quadratisch gesetzt — Profilzeile oben, vom Beitrag der
   obere Teil. Instagram rendert das Medium proportional zur Rahmenbreite,
   der Rest liegt unter der Kante. */
.instablogpin-kopf__rechts .ibp-einbettung {
	margin: 0;
	display: flex;
	justify-content: center;
}

/* Beide Kacheln im Kartenkopf sind gleich gross und hochkant: 300 x 438.
   Die Hoehe ist nicht gegriffen — Instagram rendert das Medium proportional
   zur Rahmenbreite (450/352), bei 300 px sind das 384 px, dazu 54 px
   Profilzeile. Bei genau 438 px ist der Beitrag also vollstaendig zu sehen
   und nur die Aktionsleiste liegt unter der Kante. */
/* Die Masse selbst setzt WPRM inline (`size="300x438!"` im Template) — ein
   Inline-Stil schlaegt jede Klassenregel, deshalb stehen sie dort und nicht
   hier. Hier bleibt der Zuschnitt: ohne `object-fit` verzerrt das Bild. */
.instablogpin-kopf__links .wprm-recipe-image img {
	max-width: 100%;
	object-fit: cover;
}

/* Die Bildspalte ist genau so breit wie die Kachel, sonst zentriert WPRMs
   `margin: 0 auto` das Foto darin und es steht nicht an der Kartenkante. */
.instablogpin-kopf__links .instablogpin-header-columns > .wprm-layout-column:first-child {
	flex: 0 0 206px;
	max-width: 206px;
}

.instablogpin-kopf__links .wprm-recipe-image img {
	margin-inline: 0 !important;
}

/* Unter 1100 px steht der Beitrag im Kartenkopf wie alles andere: mit
   Innenabstand, nicht bis an die Kante. Dieselbe Technik wie in der
   Desktop-Spalte — der Rahmen wird in 352 px gerendert und heruntergerechnet,
   sonst bricht Instagram unter rund 320 px seine Profilzeile dreizeilig um.

   `--ibp-ig-breite` ist eine reine Zahl, damit sie zweimal dienen kann: als
   Breite (`* 1px`) und als Teiler im Massstab. Die Hoehe ergibt sich aus
   504/352 — Profilzeile (54) plus vollstaendiges Medium (450). Die Stufen
   liegen unter der verfuegbaren Innenbreite (Viewport minus 40 px Seitenrand
   minus 80 px Kartenabstand). */
@media (max-width: 1099px) {
	.instablogpin-kopf__rechts {
		--ibp-ig-breite: 270;
	}

	.instablogpin-kopf__rechts .ibp-einbettung__fenster {
		width: calc(var(--ibp-ig-breite) * 1px);
		height: calc(var(--ibp-ig-breite) * 504px / 352);
		aspect-ratio: auto;
		padding-top: 0;
		margin-inline: auto;
	}

	.instablogpin-kopf__rechts .ibp-einbettung__rahmen {
		width: 352px;
		height: 900px;
		transform: scale(calc(var(--ibp-ig-breite) / 352));
		transform-origin: top left;
	}
}

@media (max-width: 379px) {
	.instablogpin-kopf__rechts {
		--ibp-ig-breite: 235;
	}
}

@media (min-width: 480px) and (max-width: 1099px) {
	.instablogpin-kopf__rechts {
		--ibp-ig-breite: 340;
	}
}

@media (min-width: 1100px) {
	.instablogpin-kopf {
		display: grid;
		/* Rechts genau die Breite des Rezeptfotos. */
		grid-template-columns: minmax(0, 1fr) 206px;
		gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.instablogpin-kopf__rechts {
		order: 0;
	}

	.instablogpin-kopf__rechts .ibp-einbettung {
		justify-content: flex-end;
	}

	/* `margin-inline: auto` am Fenster schlaegt `justify-content` — ohne das
	   Zuruecksetzen sass die Kachel mittig in ihrer Spalte statt an der
	   Kartenkante. */
	.instablogpin-kopf__rechts .ibp-einbettung__fenster {
		margin-inline: 0;
	}

	/* Genauso gross wie das Rezeptfoto links: 206 x 300, hochkant.

	   ⚠️ Der Rahmen wird **nicht** auf 206 px gesetzt, sondern in 352 px
	   gerendert und heruntergerechnet (206/352 = 0,585). Grund: unter rund
	   320 px bricht Instagram seine eigene Profilzeile drei- statt einzeilig
	   um und schneidet Inhalt ab — das laesst sich von aussen nicht steuern.
	   Skaliert entspricht die sichtbare Hoehe 300/0,585 = 513 px des Rahmens,
	   also Profilzeile (54) plus vollstaendiges Medium (450). */
	.instablogpin-kopf__rechts .ibp-einbettung__fenster {
		width: 206px;
		height: 300px;
		aspect-ratio: auto;
		padding-top: 0;
		border-radius: 20px;
		border: 0;
	}

	.instablogpin-kopf__rechts .ibp-einbettung__rahmen {
		width: 352px;
		height: 900px;
		transform: scale(0.5852);
		transform-origin: top left;
	}

	.instablogpin-kopf__unten {
		grid-column: 1 / -1;
	}
}



/* --- Nur fuer Screenreader ------------------------------------------- */
/* Nicht `display:none` und nicht `visibility:hidden` — beides nimmt das
   Element auch aus der Vorlesereihenfolge. Diese Fassung laesst es dort,
   macht es aber unsichtbar. */
.ibp-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- „Meine Erfahrungen mit dem Rezept" in der Rezeptkarte -------------
   Kein abgesetzter Kasten: der Abschnitt sieht aus wie „Zubereitung" und
   „Zutaten" — Ueberschrift, darunter der Inhalt. Vorher hob ihn ein weisser
   Kasten mit Terrakotta-Kante heraus; das machte ihn wichtiger als das
   Rezept selbst. Einzige Auszeichnung ist Leonies Portraet neben der
   Ueberschrift: es zeigt, dass hier eine Person spricht. */
.ibp-rezept-erfahrungen {
	margin: var(--wp--preset--spacing--40) 0;
}

.ibp-rezept-erfahrungen .wprm-recipe-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px !important;
}

.ibp-rezept-erfahrungen__portraet {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ibp-rezept-erfahrungen__liste {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.ibp-rezept-erfahrungen__liste li {
	margin: 0 0 0.5em;
}

.ibp-rezept-erfahrungen__liste li:last-child {
	margin-bottom: 0;
}

/* Der Hauptteil der Karte ist einspaltig: Zutaten, Erfahrungen, Zubereitung
   und Hinweise stehen in Lesereihenfolge untereinander. Zweispaltig liefe
   die Reihenfolge ueber Kreuz — Erfahrungen links unten, Zubereitung rechts
   oben. */
.wprm-recipe-container .instablogpin-hauptteil > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* --- Portraet als Kopfbild auf „Ueber mich" ---------------------------
   Das Foto ist hochkant, der Kopfbereich aber ein liegender Streifen
   (`.ibp-lesetext > .wp-block-image img` begrenzt auf 34rem). Ohne
   `object-position` schneidet der Browser mittig — und damit das Gesicht
   an. 30 % von oben haelt es im Bild. */
.ibp-portraet-header img {
	object-position: center 30%;
}

/* --- Signet als Wasserzeichen in Kopfbildern ---------------------------
   Startseite und „Ueber mich". Das Zeichen sitzt unten rechts im Bild und
   ist zurueckgenommen — es soll das Foto markieren, nicht damit konkurrieren.

   Als `background-image` und nicht als <img>: so haengt es am Bildrahmen,
   braucht keine Aenderung am Blockinhalt und wird von Screenreadern nicht
   als eigener Inhalt gemeldet. Die Mono-Fassung scheidet aus — sie faerbt
   ueber `currentColor`, und das greift in einem Hintergrundbild nicht. */
.ibp-bild-signet {
	position: relative;
}

.ibp-bild-signet::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 72px;
	height: 72px;
	background: url("assets/logo/lmw-signet.svg") center / contain no-repeat;
	/* Weiss statt der Markenfarben: das Signet ist dunkelgruen und verschwand
	   auf den dunklen Kuechenfotos. `brightness(0) invert(1)` faerbt jede
	   Fuellung des SVG weiss — die Mono-Fassung hilft hier nicht, sie faerbt
	   ueber `currentColor`, und das greift in einem Hintergrundbild nicht. */
	filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(28, 23, 21, 0.7));
	opacity: 0.9;
	pointer-events: none;
}

@media (max-width: 599px) {
	.ibp-bild-signet::after {
		right: 10px;
		bottom: 10px;
		width: 52px;
		height: 52px;
	}
}

/* --- Kontaktformular -------------------------------------------------
   Eigener Baustein (mu-plugins/instablogpin-kontakt.php), kein Plugin.
   Feldhoehen und Rundungen folgen den Chips im Rezeptfilter. ---------- */
.ibp-kontakt__form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.ibp-kontakt__feld {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.ibp-kontakt__feld label {
	font-weight: 600;
}

.ibp-kontakt__feld input[type="text"],
.ibp-kontakt__feld input[type="email"],
.ibp-kontakt__feld textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
}

.ibp-kontakt__feld textarea {
	resize: vertical;
}

.ibp-kontakt__feld input:focus-visible,
.ibp-kontakt__feld textarea:focus-visible,
.ibp-kontakt__knopf:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

.ibp-kontakt__hinweis {
	font-size: 0.875rem;
	color: var(--wp--preset--color--gedaempft);
}

/* Einwilligung: Kaestchen neben dem Text, nicht darueber. */
.ibp-kontakt__feld--kasten {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ibp-kontakt__feld--kasten input {
	margin-top: 0.25rem;
}

.ibp-kontakt__knopf {
	padding: 0.8rem 1.6rem;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--grund);
	background: var(--wp--preset--color--tinte, #2A2422);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.ibp-kontakt__knopf:hover {
	opacity: 0.88;
}

/* Der Honigtopf muss fuer Menschen unsichtbar sein, aber fuer Skripte
   ausfuellbar bleiben. `display:none` wuerde manche Bots abhalten, den Rest
   aber auch -- deshalb aus dem Sichtfeld schieben statt entfernen. */
.ibp-kontakt__honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ibp-kontakt__meldung {
	padding: 0.9rem 1.1rem;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--linie);
}

.ibp-kontakt__meldung--erfolg {
	background: var(--wp--preset--color--olive-hell, #eef1e6);
}

.ibp-kontakt__meldung--fehler {
	background: var(--wp--preset--color--sand, #f6efe6);
}

/* --- Instagram-Kachelwand (Zwei-Klick) -------------------------------
   Vorschau sind eigene Bilder -- bis zum Klick geht keine Anfrage an Meta
   raus. Erst der Knopf setzt `src` auf den iframes. -------------------- */
.ibp-instawand__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--20);
	list-style: none;
}

.ibp-instawand__kachel {
	margin: 0;
}

.ibp-instawand__bild {
	display: block;
	width: 100%;
	/* ⚠️ `height: auto` ist hier nicht kosmetisch: die `width`- und
	   `height`-Attribute im <img> wirken als Praesentationshinweis und
	   setzen eine feste Hoehe (200 bzw. 300 px). Ohne diese Zeile gewinnt
	   das gegen `aspect-ratio`, und die Kacheln stehen unterschiedlich
	   hoch im Raster. */
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}

/* Der Profil-Link ist der Handlungsaufruf der Kachelwand und steht auf
   „Ueber mich" an der Stelle, an der vorher ein Knopf sass. Also auch als
   Knopf gestalten -- in `currentColor`, damit er im hellen Kasten auf der
   Kontaktseite genauso sitzt wie im dunklen auf „Ueber mich". */
.ibp-instawand__profil {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
}

.ibp-instawand__profil a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.ibp-instawand__profil a:hover {
	opacity: 0.8;
}

.ibp-instawand__hinweis {
	font-size: 0.875rem;
	opacity: 0.85;
}

.ibp-instawand__knopf {
	padding: 0.7rem 1.4rem;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
}

.ibp-instawand__knopf:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ibp-instawand__einbettungen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Gleiches Fenster-Prinzip wie bei der Rezeptseite: die Aktionsleiste von
   Instagram laesst sich nicht abschalten, also wird sie abgeschnitten. */
.ibp-instawand__fenster {
	position: relative;
	box-sizing: content-box;
	width: 100%;
	aspect-ratio: 352 / 450;
	padding-top: 54px;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
}

.ibp-instawand__rahmen {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 900px;
	border: 0;
	background: #fff;
}

/* --- Kaesten auf die Breite des Lesetexts bringen ---------------------
   `.ibp-lesetext > p` bricht bei 68ch (~750 px), Gruppenbloecke liefen
   dagegen auf die volle Containerbreite (984 px). Auf „Ueber mich" und
   „Kontakt" standen die Kaesten dadurch rechts ueber dem Text hinaus.

   ⚠️ 68ch geht hier nicht: `ch` haengt an der Schriftgroesse des Elements,
   und in einem Kasten mit eigener Schriftgroesse ergaebe das eine andere
   Breite als beim Absatz daneben. Deshalb ein fester Wert, der dem
   gemessenen Textumbruch entspricht. --------------------------------- */
.ibp-lesetext > .wp-block-group {
	max-width: 47rem;
}

/* --- Grundsatz-Karten auf „Ueber mich" --------------------------------
   Symbol links, Text rechts. Die Nummerierung („01 — ") ist entfallen,
   das Symbol traegt die Unterscheidung. --------------------------------- */
.ibp-grundsatz {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: var(--wp--preset--spacing--20);
}

.ibp-grundsatz__symbol {
	grid-row: 1 / span 2;
	width: 2.25rem;
	height: 2.25rem;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--akzent);
}

.ibp-grundsatz > h3,
.ibp-grundsatz > p {
	grid-column: 2;
	margin: 0;
}

/* WordPress setzt im `constrained`-Layout auf jedes Kind
   `margin-left/right: auto !important`. Im Flusslayout ist das harmlos, im
   Rasterlayout nicht: eine auto-Marge laesst das Element auf Inhaltsbreite
   schrumpfen und zentriert es in seiner Spalte. Der lange Absatz fuellt die
   Spalte ohnehin und faellt nicht auf -- die kurze Ueberschrift stand
   dadurch mittig ueber linksbuendigem Text.

   ⚠️ Das `!important` hier ist kein Nachlaessigkeitsfehler: es ueberschreibt
   ein `!important` aus WordPress' eigenem Layout-CSS, anders geht es nicht. */
.ibp-grundsatz > * {
	margin-inline: 0 !important;
	justify-self: stretch;
}

.ibp-grundsatz > p {
	margin-top: 0.4rem;
}

@media (max-width: 599px) {
	.ibp-grundsatz {
		grid-template-columns: 1fr;
		row-gap: 0.2rem;
	}

	.ibp-grundsatz__symbol {
		grid-row: auto;
		width: 2rem;
		height: 2rem;
	}

	.ibp-grundsatz > h3,
	.ibp-grundsatz > p {
		grid-column: 1;
	}
}

/* --- Aufbau-Hinweis auf den Uebersichtsseiten --------------------------
   Keine eigene Breite noetig: der Kasten ist `alignwide` und steht damit
   genauso breit wie das Rezeptraster darunter. Der Text darin begrenzt sich
   ueber das `constrained`-Layout der Gruppe selbst auf 680 px.
   (Eine `max-width` hier waere wirkungslos -- `.is-layout-constrained >
   .alignwide` aus WordPress ist spezifischer.) */

/* --- Telefon: Innenabstaende der Kaesten halbieren ---------------------
   Gemessen auf 375 px Breite: 20 px Seitenrand der Seite, darin die
   Rezeptkarte mit 40 px Innenabstand, darin die Zutatenliste mit weiteren
   20 px. Der Text begann damit 80 px vom Bildschirmrand entfernt — bei
   375 px Gesamtbreite geht so mehr als ein Drittel fuer Luft drauf.

   Die Werte stehen teils als Inline-Stil im Block-Markup (WordPress) und
   teils in WP Recipe Makers eigenem Stylesheet. Beides ist aus einer
   Klassenregel nur mit `!important` erreichbar. ------------------------- */
@media (max-width: 599px) {
	/* Rezeptkarte: 40 -> 20 px */
	.wprm-recipe .wprm-layout-container.wprm-padding-40 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Zutaten-/Zubereitungskasten innerhalb der Karte: 20 -> 10 px */
	.wprm-recipe .wprm-internal-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Creme-, Sand- und Tintekaesten in Beitraegen und auf Seiten:
	   20 bzw. 28 -> 12 px */
	.ibp-lesetext > .wp-block-group,
	.ibp-beispielhinweis,
	.ibp-aufbau,
	.ibp-grundsatz,
	main .wp-block-group.has-background {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
}