/**
 * Die Rezepte - Uebersicht, Einzelansicht, Formular.
 *
 * DIE FARBEN KOMMEN VON DER SEITE
 *
 * Jede Farbe holt sich ihren Wert aus einer Variablen des Themes und
 * hat einen Rueckfall. So sehen die Rezepte aus wie die uebrigen
 * Kaesten der Seite und wandern mit, wenn jemand am Design dreht -
 * ohne dass hier etwas nachgezogen werden muss.
 *
 * Die Reihenfolge ist immer dieselbe:
 *   1. was im Plugin eingestellt wurde   --smr-kachel, --smr-text ...
 *   2. was das GLX Theme ausgibt         --glx-*
 *   3. was das alte Stilblatt hat        --sms-*
 *   4. ein fester Wert
 */

.smr-uebersicht,
.smr-rezept,
.smr-formular {

	/* DER GROSSE KASTEN - die aeusserste Ebene. */
	--smr-box: var(--smr-f-box, transparent);
	--smr-box-text: var(--smr-f-box-text, var(--glx-box-schrift,
		var(--sms-tinte, #1c1917)));
	--smr-kante: var(--smr-f-box-rand, var(--glx-box-rand,
		var(--sms-rand, #cbc7b2)));

	/* Ueberschriften folgen der Schrift des Kastens. */
	--smr-titel: var(--smr-f-titel, var(--smr-box-text));

	/* DIE KACHELN - eine Ebene weiter innen.
	 *
	 * Sie fallen auf den grossen Kasten zurueck, nicht direkt auf das
	 * Theme. Wer nur den Kasten faerbt, bekommt Kacheln, die dazu
	 * passen. Die Kachel hat allerdings eine eigene Vorgabe, solange
	 * der Kasten durchsichtig ist - sonst haette sie gar keine
	 * Flaeche. */
	--smr-flaeche: var(--smr-f-kachel, var(--glx-box-grund,
		var(--sms-creme, #e6e4d6)));
	--smr-schrift: var(--smr-f-text, var(--smr-box-text));

	/* DIE BEDIENTEILE. */
	--smr-feld: var(--smr-f-feld, var(--glx-feld-grund, #fbfaf4));

	/* Die Schrift IN den Feldern - ausdruecklich nicht die Schrift
	   der Kacheln. Genau die stand hier vorher, und damit wurde der
	   getippte Text weiss, sobald jemand die Kacheln dunkel machte. */
	--smr-feld-text: var(--smr-f-feld-text, var(--smr-box-text));
	--smr-ton: var(--smr-f-akzent, var(--glx-knopf-grund,
		var(--sms-moos-tief, #1a4017)));
	--smr-ton-auf: var(--smr-f-knopf-auf, var(--smr-ton));
	--smr-ton-text: var(--smr-f-knopf-text, #ffffff);
}

/* Der grosse Kasten bekommt die Flaeche wirklich.
 *
 * Hier stand bisher gar nichts - deshalb kam das helle Grau des
 * Themes durch, und es gab nichts, womit man das haette aendern
 * koennen. Gordon am 12.09.2026: "Die Content Boxen sind alle in
 * diesem hellen Grau. Warum? Ich hab gesagt, ich muss das einstellen
 * koennen im Adminbereich."
 *
 * transparent als Rueckfall: Wer nichts einstellt, sieht genau das,
 * was er bisher sah. */
.smr-uebersicht,
.smr-rezept,
.smr-formular {
	background: var(--smr-box);
	color: var(--smr-box-text);
}

/* ==================================================== Uebersicht == */

.smr-gruppe { margin: 0 0 34px; }

/* DIE UEBERSCHRIFTEN.
 *
 * Hier fehlte die Farbe ganz. Kein Wert, keine Variable, nichts - die
 * Ueberschrift erbte die Farbe des Themes und blieb gruen, egal was
 * eingestellt wurde. Gordon am 12.09.2026: "Die Ueberschriften hab
 * ich in Weiss eingestellt, ist immer noch gruen." Er hatte recht:
 * Es gab nichts, was auf die Einstellung gehoert haette.
 *
 * Das h2 davor hebt das Gewicht auf 0,2,1 und schlaegt damit die
 * Ueberschriftenregel des Themes (.entry-content h2, 0,1,1). */
.smr-uebersicht h2.smr-gruppe-titel,
.smr-rezept .smr-teil h2,
.smr-formular h2 {
	color: var(--smr-titel);
}

.smr-gruppe-titel {
	margin: 0 0 14px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.smr-zahl {
	font-size: .6em;
	font-weight: 400;
	opacity: .55;
}

/* Die Kacheln.
 *
 * Gordon: "nicht drei Kategorien nebeneinander, sondern alle
 * Kategorien untereinander" - die GRUPPEN stehen also untereinander.
 * Die Rezepte INNERHALB einer Gruppe duerfen nebeneinander stehen,
 * sonst waere die Seite wieder fuenfzig Kilometer lang.
 *
 * auto-fill mit einer Mindestbreite statt einer festen Spaltenzahl:
 * So passt es sich der Breite an, ohne dass es dafuer Abfragen
 * braucht. */
.smr-kacheln {
	display: grid;
	/* 160 statt 210 Punkte Mindestbreite.
	 *
	 * Gordon am 12.09.2026: Es muessen vier mindestens nebeneinander.
	 * Gerechnet bei 12 Punkten Abstand: vier passen ab 688 Punkten
	 * Breite, fuenf ab 860. Bei 210 waren es erst ab 852 vier - auf
	 * einem schmaleren Theme also drei. */
	/* Die Breite kommt aus den Einstellungen.
	   Stand hier als feste 160 - eine Zahl, die ich gesetzt hatte und
	   die niemand aendern konnte. Alles Weitere ergibt sich daraus:
	   wie viele nebeneinander passen und wie gross die Vorschaubilder
	   werden, denn das Bild fuellt die Box im Verhaeltnis 4 zu 3. */
	grid-template-columns: repeat(auto-fill,
		minmax(var(--smr-box-breite, 160px), 1fr));
	gap: 12px;
}

/* WARUM HIER .smr-uebersicht DAVORSTEHT.
 *
 * Die Kachel ist ein Link: <a class="smr-kachel">. Jedes Theme hat
 * eine Regel fuer seine Linkfarbe - .entry-content a, .hentry a,
 * aehnliches. Deren Gewicht ist 0,1,1: eine Klasse und ein Element.
 * Meines waere mit .smr-kachel allein nur 0,1,0 gewesen, und ein
 * Klassenname plus Element schlaegt einen Klassennamen allein, ganz
 * gleich, welche Datei spaeter geladen wird.
 *
 * Die Folge: Die Schriftfarbe aus den Einstellungen kam nie an. Die
 * Kachelschrift blieb in der Linkfarbe des Themes. Gordon am
 * 12.09.2026: "Ich stelle die Schriftfarbe auf weiss, sie bleibt in
 * gruen." Das Gruen war das Gruen von Silbermuschel.
 *
 * .smr-uebersicht a.smr-kachel hat Gewicht 0,2,1 und liegt darueber.
 * Kein !important: Das waere der Holzhammer, hinter dem spaeter
 * niemand mehr etwas aendern kann - auch das Theme nicht, wenn es
 * mal soll. */
.smr-uebersicht a.smr-kachel,
.smr-uebersicht a.smr-kachel:link,
.smr-uebersicht a.smr-kachel:visited {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--smr-schrift);
	background: var(--smr-flaeche);
	border: 1px solid var(--smr-kante);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

/* Farbe und Flaeche stehen hier noch einmal, obwohl sie sich nicht
   aendern: Themes setzen fast immer eine eigene Hoverfarbe fuer Links.
   Ohne diese zwei Zeilen spraenge die Schrift beim Ueberfahren zurueck
   auf die Themefarbe - der Fehler waere nur verschoben. */
.smr-uebersicht a.smr-kachel:hover,
.smr-uebersicht a.smr-kachel:focus {
	color: var(--smr-schrift);
	background: var(--smr-flaeche);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6);
	outline: none;
}

/* Das Bild ist BEWUSST klein.
 *
 * Gordon: "mit Miniaturbild und nicht mit Riesenmonsterbild". Ein
 * festes Seitenverhaeltnis haelt die Kacheln auf einer Linie, auch
 * wenn die Bilder unterschiedlich hoch sind. */
.smr-bild {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--smr-feld);
}

.smr-bild img {
	/* contain statt cover, und keine erzwungene Groesse.
	 *
	 * cover fuellt die Flaeche, koste es was es wolle - bei einer
	 * Datei von 142 Punkten in einer Box von 240 heisst das
	 * anderthalbfach hochgerechnet. Gemessen und von Gordon gesehen:
	 * "die Bilder alle, wenn die so grossgezogen werden, riesig
	 * verschwommen."
	 *
	 * So bleibt jedes Bild hoechstens so gross wie seine Datei und
	 * sitzt in der Mitte der Flaeche. Wer groessere Fotos hochlaedt,
	 * fuellt die Box ganz - das liegt dann an der Datei und nicht mehr
	 * am Stilblatt. */
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: auto;
	transition: transform .3s ease;
}

/* Die Bildflaeche zentriert, was sie bekommt. */
.smr-bild {
	display: grid;
	place-items: center;
}

/* Beim Ueberfahren wird es groesser - Gordon: "was vielleicht per
   Mouseover einfach groesser wird". Auf dem Handy gibt es kein
   Ueberfahren; dort fuehrt der Klick ohnehin zum Rezept. */
/* Beim Ueberfahren ein wenig groesser - aber nicht gigantisch.
   Das Bild waechst INNERHALB seines Rahmens; die Kachel selbst
   bleibt, wo sie ist, sonst ruckelte das ganze Raster. */
.smr-uebersicht a.smr-kachel:hover .smr-bild img,
.smr-uebersicht a.smr-kachel:focus .smr-bild img {
	transform: scale(1.09);
}

.smr-ohne-bild {
	display: grid;
	place-items: center;
	font-size: 2.6rem;
	opacity: .35;
}

.smr-text {
	display: block;
	padding: 11px 13px 13px;
}

.smr-titel {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.smr-kurz {
	display: block;
	margin-top: 4px;
	font-size: .86em;
	opacity: .75;
	line-height: 1.4;
}

.smr-zeit {
	display: inline-block;
	margin-top: 7px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .76em;
	border: 1px solid var(--smr-ton);
	color: var(--smr-ton);
}

/* ========================================================= Suche == */

/* Schmaler und mittig.
 *
 * Gemessen am 12.09.2026: Das Feld nahm 100 % der Inhaltsbreite und
 * war 69 Punkte hoch. Gordon: "Warum ist die Suche so gigantisch
 * breit? Das langt doch, wenn die oben in der Mitte um die Haelfte
 * angezeigt wird."
 *
 * 460 Punkte sind bei 900 Punkten Inhalt gut die Haelfte. Auf einem
 * schmalen Bildschirm nimmt sie weiterhin, was da ist - min() sorgt
 * dafuer, dass nichts ueber den Rand haengt. */
.smr-suche {
	position: relative;
	margin: 0 auto 22px;
	max-width: min(460px, 100%);
}

.smr-suche-feld {
	display: flex;
	align-items: center;
	gap: 7px;
	/* Von 9 auf 5 Punkte: Das Feld war 69 Punkte hoch, also so hoch
	   wie eine halbe Kachel. Ein Suchfeld ist ein Werkzeug, das man
	   ab und zu braucht - nicht die Hauptsache der Seite. */
	padding: 5px 6px 5px 14px;
	background: var(--smr-feld);
	border: 1.5px solid var(--smr-kante);
	border-radius: 999px;
}

.smr-suche-feld:focus-within { border-color: var(--smr-ton); }

.smr-lupe {
	flex: 0 0 auto;
	width: 17px;
	height: 18px;
	opacity: .6;
}

.smr-lupe svg { width: 100%; height: 100%; }

.smr-suche input {
	flex: 1 1 auto;
	min-width: 0;
	/* Die Schrift kam vom Theme und war dort 17 Punkte gross - in
	   einem Suchfeld eine Nummer zu viel. */
	font-size: .95rem;
	padding: 4px 0;
	border: 0;
	background: none;
	font: inherit;
	/* Steht auf --smr-feld, nicht auf einer Kachel - siehe oben. */
	color: var(--smr-feld-text);
	outline: none;
	padding: 0;
}

/* Die Vorschlaege.
 *
 * Sie liegen UEBER dem Inhalt statt ihn wegzuschieben - sonst huepfte
 * die Seite bei jedem Tastendruck. */
.smr-vorschlaege {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--smr-flaeche);
	border: 1px solid var(--smr-kante);
	border-radius: 14px;
	box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .8);
	max-height: 60vh;
	overflow-y: auto;
}

.smr-vorschlaege li { margin: 0; }

/* li a statt nur a: Gewicht 0,1,2 statt 0,1,1.
   Bei 0,1,1 stuende es gleichauf mit der Linkregel des Themes, und
   allein die Ladereihenfolge entschiede - heute zu unseren Gunsten,
   morgen vielleicht nicht mehr. Siehe die Kachelregel weiter oben. */
.smr-vorschlaege li a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--smr-schrift);
}

.smr-vorschlaege li a:hover,
.smr-vorschlaege li a:focus,
.smr-vorschlaege .smr-dran a {
	background: color-mix(in srgb, var(--smr-ton) 14%, transparent);
	/* Die Schriftfarbe MUSS hier mit.
	 *
	 * Stand sie nicht da, galt weiter, was das Theme fuer einen
	 * ueberfahrenen Link vorsieht - bei Silbermuschel ein helles Grau,
	 * und damit war der Vorschlag genau in dem Moment nicht mehr zu
	 * lesen, in dem man ihn anklicken wollte. Gordon am 12.09.2026:
	 * "dann ist der Text zum Beispiel in grau, wenn ich mit der Maus
	 * druebergehe."
	 *
	 * Flaeche und Schrift gehoeren zusammen. Wer nur eine von beiden
	 * setzt, baut frueher oder spaeter Grau auf Grau. */
	color: var(--smr-feld-text);
	outline: none;
}

.smr-v-bild {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--smr-feld);
}

.smr-v-text { min-width: 0; }

.smr-v-titel {
	display: block;
	font-weight: 600;
	line-height: 1.25;
}

/* Wo das gesuchte Wort steckt.
 *
 * "Labskaus" bei der Suche nach "Kartoffel" sieht ohne Erklaerung wie
 * ein Fehler aus. */
.smr-v-fund {
	display: block;
	font-size: .8em;
	opacity: .68;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.smr-suche-hinweis {
	margin: 8px 2px 0;
	font-size: .86em;
	opacity: .7;
}

/* ================================================= Einzelansicht == */

.smr-rezept { margin: 22px 0 0; }

/* DAS BILD STEHT AN DER SEITE.
 *
 * Vorher lag es oben ueber der ganzen Breite. Ein Bild an dieser
 * Stelle MUSS gross sein, sonst steht es verloren in einer leeren
 * Zeile - und "gross" heisst bei einer Datei von 142 Punkten
 * zwangslaeufig hochgerechnet und unscharf. Gordon am 12.09.2026:
 * "riesig verschwommen. Das Bild soll dezent an der Seite irgendwo
 * sein und in der Originalgroesse."
 *
 * Rechts daneben darf es klein sein: Der Text fliesst daran vorbei,
 * und 142 Punkte sehen dort richtig aus statt kuemmerlich. Damit
 * loest sich die Unschaerfe nicht durch einen Trick, sondern dadurch,
 * dass gar nicht mehr gezogen werden muss.
 *
 * float statt Raster: Bei float fliesst der Text UM das Bild herum -
 * bei einem Raster bliebe neben einem kleinen Bild eine leere Spalte
 * stehen, ueber die ganze Hoehe des Rezepts. */
.smr-rezept-bild {
	float: right;
	margin: 0 0 14px 20px;
	border-radius: 14px;
	overflow: hidden;
	max-width: 45%;
	shape-margin: 14px;
}

/* Nach dem Bild geht es wieder ueber die ganze Breite weiter -
   sonst rutschte der Druckknopf neben das Bild. */
.smr-drucken { clear: both; }

.smr-rezept-bild img {
	/* width:auto, NICHT 100%.
	 *
	 * Gemessen am 12.09.2026: Die Datei ist 142 Punkte breit, gezeigt
	 * wurde sie mit 342 - zweieinhalbfach hochgerechnet und
	 * entsprechend unscharf. Gordon: "gigantisch gross, megaunscharf,
	 * weil das gar nicht so gross sein braucht."
	 *
	 * So wird das Bild hoechstens so gross wie seine Datei und
	 * hoechstens so breit wie der Platz. Kleine Bilder bleiben klein
	 * und scharf. */
	width: auto;
	max-width: 100%;
	/* Nach unten begrenzt.
	 *
	 * Ohne diese Grenze fuellte ein Hochformatfoto den halben
	 * Bildschirm, und die Zutaten standen ausser Sicht. Gordon am
	 * 12.09.2026: „ein gigantisch grosses Bild". */
	max-height: var(--smr-bild-hoehe, 360px);
	/* contain statt cover: cover schneidet ab, was nicht ins
	   Seitenverhaeltnis passt. Solange das Bild nicht mehr gestreckt
	   wird, gibt es nichts zuzuschneiden - und ein Rezeptfoto, dem
	   der Rand fehlt, hilft niemandem. */
	object-fit: contain;
	height: auto;
	display: block;
	margin: 0 auto;
}

.smr-rezept-kurz {
	font-size: 1.06em;
	opacity: .85;
	margin: 0 0 12px;
}

.smr-eckdaten {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 20px;
}

.smr-eck {
	padding: 4px 13px;
	border-radius: 999px;
	border: 1px solid var(--smr-kante);
	font-size: .88em;
}

.smr-eck-wort {
	opacity: .6;
	margin-right: 3px;
}

.smr-teil { margin: 0 0 22px; }

.smr-teil h2 {
	margin: 0 0 9px;
	font-size: 1.15em;
}

.smr-zutaten,
.smr-schritte {
	margin: 0;
	padding-left: 1.3em;
	line-height: 1.65;
}

.smr-zutaten li { margin: 0 0 3px; }
.smr-schritte li { margin: 0 0 9px; }

.smr-drucken { margin: 26px 0 0; }

.smr-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	background: transparent;
	color: var(--smr-ton);
	border: 1.5px solid var(--smr-ton);
	transition: background .18s ease, color .18s ease;
}

.smr-knopf:hover,
.smr-knopf:focus {
	background: var(--smr-ton-auf);
	color: var(--smr-ton-text);
	outline: none;
}

.smr-knopf svg {
	width: 1.15em;
	height: 1.15em;
}

/* Der Herkunftsvermerk steht nur auf dem Papier. */
.smr-herkunft { display: none; }

/* ====================================================== Formular == */

/* Das Formular ist ein grosser Kasten, keine Kachel.
   Bisher lag hier var(--smr-flaeche) - dieselbe Variable wie auf den
   Kacheln. Wer die Kacheln gruen wollte, faerbte das Formular mit. */
.smr-formular {
	background: var(--smr-box);
	border: 1px solid var(--smr-kante);
	border-radius: 16px;
	padding: 22px;
	/* --smr-box-text, nicht --smr-schrift.
	   --smr-schrift ist die Schrift der Boxen DARIN. Stand die auf
	   weiss - weil die Boxen dunkel sind -, waren auch die
	   Beschriftungen im Formular weiss, auf hellem Grund. Gordon am
	   12.09.2026: "Da kann ich nix einstellen." */
	color: var(--smr-box-text);
}

.smr-formular h2 { margin: 0 0 16px; }

.smr-feld { margin: 0 0 18px; }

/* Beschriftungen, Hilfetexte und die Ueberschrift des Formulars
   hatten gar keine Farbregel und erbten, was gerade kam. Jetzt haengen
   sie an der Schrift des Rahmens, in dem sie stehen. */
.smr-formular .smr-feld label,
.smr-formular .smr-absenden {
	color: var(--smr-box-text);
}

.smr-formular .smr-hilfe {
	color: var(--smr-box-text);
	opacity: .75;
}

.smr-feld label {
	display: block;
	font-weight: 600;
	margin: 0 0 5px;
}

.smr-feld input[type=text],
.smr-feld input[type=file],
.smr-feld select,
.smr-feld textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid var(--smr-kante);
	border-radius: 10px;
	background: var(--smr-feld);
	color: var(--smr-feld-text);
	font: inherit;
}

.smr-feld textarea {
	resize: vertical;
	line-height: 1.5;
}

.smr-hilfe {
	display: block;
	margin: 4px 0 0;
	font-size: .84em;
	opacity: .7;
	line-height: 1.45;
}

.smr-meldung {
	padding: 12px 16px;
	border-radius: 12px;
	margin: 0 0 18px;
	border-left: 4px solid;
}

.smr-meldung.gut     { border-color: #3c7a4f; background: rgba(60,122,79,.12) }
.smr-meldung.warnung { border-color: #c9a227; background: rgba(201,162,39,.12) }
.smr-meldung.fehler  { border-color: #c0392b; background: rgba(192,57,43,.12) }

/* Auch ein Kasten, keine Kachel - siehe oben. */
.smr-hinweis-kasten {
	padding: 14px 18px;
	border-radius: 12px;
	/* Ein Kasten, keine Box darin - siehe das Formular. */
	background: var(--smr-box);
	border: 1px solid var(--smr-kante);
}

.smr-leer {
	opacity: .7;
	font-style: italic;
}

/* ========================================================= Papier == */

@media print {

	/* Nur das Rezept - alles andere WEG, nicht bloss unsichtbar.
	 *
	 * Hier stand erst visibility:hidden plus position:absolute fuer
	 * das Rezept. Das holte es zwar nach oben, aber ein absolut
	 * positioniertes Element kann nicht auf mehrere Seiten umbrechen:
	 * Was nicht auf die erste passt, faellt weg. Bei dreissig
	 * Schritten war das die Haelfte.
	 *
	 * display:none nimmt einem Element seinen Platz. Damit steht das
	 * Rezept von selbst oben und fliesst ueber so viele Seiten, wie
	 * es braucht. Die Kette vom body bis zum Rezept markiert das
	 * Skript. */
	body.smr-druckt .smr-weg { display: none !important; }

	/* Die Kette selbst darf keine Raender oder Hintergruende mehr
	   beitragen - sonst stuende das Rezept in einem Kasten, der auf
	   Papier nichts zu suchen hat. */
	body.smr-druckt .smr-kette {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		width: auto !important;
		max-width: none !important;
		float: none !important;
		position: static !important;
	}

	body.smr-druckt .smr-drucken { display: none !important; }

	.smr-herkunft {
		display: block !important;
		margin-top: 20px;
		padding-top: 8px;
		border-top: 1px solid #999;
		color: #555;
	}

	/* Eine Ueberschrift soll nicht allein am Seitenende stehen. */
	.smr-rezept h1, .smr-rezept h2 { break-after: avoid; }
	.smr-zutaten li, .smr-schritte li { break-inside: avoid; }

	/* ---------------------------------------------------------------
	   DAS REZEPT AUF EINE SEITE

	   Bis hierher wurde nur ausgeblendet, was nicht zum Rezept
	   gehoert. Was uebrigblieb, behielt jeden Abstand, der fuer einen
	   Bildschirm gedacht war - und am Bildschirm ist Luft Ruhe,
	   auf Papier ist sie eine weitere Seite.

	   Nachgerechnet fuer ein Rezept mit 15 Zutaten und 12 Schritten,
	   bei 11 Punkt Schrift auf A4 (nutzbar rund 250 mm Hoehe):

	                       vorher              nachher
	     Zutaten      15 x 24 pt = 360     zweispaltig = 113
	     Schritte     12 x 42 pt = 504     12 x 26 pt  = 312
	     Abschnitte    3 x 22 pt =  66      3 x  9 pt  =  27
	     Ueberschr.    3 x 14 pt =  42      3 x  8 pt  =  24
	     Eckdaten            20 pt                8 pt
	     Bild               270 pt              142 pt
	     --------------------------------------------------
	     zusammen          1262 pt              626 pt

	   Eine A4-Seite fasst 708 Punkte (250 mm nutzbar). Aus 1,8 Seiten
	   werden 0,9 - mit Bild. Ohne Bild sind es 484 Punkte, also gut
	   zwei Drittel einer Seite.

	   Die Zutaten stehen ausserdem zweispaltig. Eine Zutat ist selten
	   laenger als eine halbe Zeile - nebeneinander halbiert das den
	   Platz, ohne dass etwas enger zu lesen waere.
	   --------------------------------------------------------------- */

	body.smr-druckt .smr-rezept { margin: 0 !important; }

	body.smr-druckt .smr-teil { margin: 0 0 9pt !important; }

	body.smr-druckt .smr-teil h2 {
		margin: 0 0 4pt !important;
		font-size: 1.1em !important;
	}

	body.smr-druckt .smr-zutaten,
	body.smr-druckt .smr-schritte {
		line-height: 1.3 !important;
		padding-left: 1.1em !important;
	}

	body.smr-druckt .smr-zutaten li { margin: 0 !important; }
	body.smr-druckt .smr-schritte li { margin: 0 0 3pt !important; }

	/* Zweispaltig - siehe die Rechnung oben. */
	body.smr-druckt .smr-zutaten {
		columns: 2;
		column-gap: 14pt;
	}

	body.smr-druckt .smr-eckdaten {
		margin: 0 0 8pt !important;
		gap: 6pt !important;
	}

	body.smr-druckt .smr-eck {
		padding: 1pt 7pt !important;
		border: 0 !important;
	}

	body.smr-druckt .smr-rezept-kurz { margin: 0 0 6pt !important; }

	/* Das Bild in Millimetern, nicht in Bildschirmpunkten: Auf Papier
	   ist ein Punkt etwas anderes als am Schirm, und 360 davon waren
	   fast ein Drittel der Seite. */
	body.smr-druckt .smr-rezept-bild { margin: 0 0 6pt !important; }
	body.smr-druckt .smr-rezept-bild img {
		max-height: 50mm !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/* Keine einzelne Zeile allein auf einer neuen Seite. */
	body.smr-druckt .smr-rezept { orphans: 3; widows: 3; }

	/* Und kein Rand, den der Browser selbst noch beisteuert. */
	@page { margin: 14mm; }
}

@media (max-width: 600px) {
	/* "Neben" hat auf einem Handy keinen Sinn: Fuer Bild UND Text
	   nebeneinander ist kein Platz, und was uebrig bliebe, waere eine
	   Textspalte von drei Woertern Breite. Also wieder oben - aber
	   immer noch hoechstens so gross wie die Datei. */
	.smr-rezept-bild {
		float: none;
		max-width: 100%;
		margin: 0 0 14px;
	}

	/* Auf dem Handy zwei nebeneinander: Bei 375 Punkten Breite
	   minus Raender bleiben etwa 340 - zwei zu 130 passen,
	   drei nicht mehr. */
	/* Auf dem Handy hoechstens 130 Punkte, auch wenn mehr eingestellt
	   ist: Bei 375 Punkten Breite passen sonst nur noch eine Box
	   nebeneinander, und eine Liste aus einer Spalte ist wieder die
	   fuenfzig Kilometer lange Seite, die weg sollte. */
	.smr-kacheln { grid-template-columns: repeat(auto-fill,
		minmax(min(var(--smr-box-breite, 130px), 130px), 1fr)); }
	.smr-formular { padding: 16px 14px; }
}


/* ============================================== Fremdes Bild weg ==

   An der Seite gemessen: Auf jeder Einzelrezeptseite stand ueber dem
   Rezept ein 145 Punkte hoher Kasten mit

       background-image: pattern-light.svg   (Twenty Fourteen)
       background-color: #b2b2b2

   Das ist der Platzhalter des Eltern-Themes fuer das Beitragsbild -
   ein graues Schraffurmuster, in dessen Mitte das Foto klein
   herumsteht. Gordon am 12.09.2026: "das Bild oben drueber steht in
   einer schraffierten Flaeche".

   Auf einer Rezeptseite hat es nichts zu suchen: Das Rezept bringt
   sein Bild selbst mit, in der Groesse, die hier eingestellt ist.
   Deshalb wird der Kasten des Eltern-Themes dort ausgeblendet - und
   nur dort, ueber die Klasse, die WordPress am <body> setzt.

   Wer das Bild oben doch haben will, schaltet in den Einstellungen
   "Bild im Rezept zeigen" ein; dann zeigt es das Plugin selbst, ohne
   Schraffur. */
body.single-smr_rezept .post-thumbnail {
	display: none;
}


/* ========================================== Inhalt unter dem Menue ==

   An der Seite gemessen, bei 1280 x 1000:

       Bild ausgeblendet:               40 Punkte Ueberlappung
       Theme-Bild wieder eingeblendet:  40 Punkte Ueberlappung
       margin-top des Beitrags auf 0:  -32 Punkte, also Luft

   Das Bild ist nicht die Ursache - ich hatte das vermutet und lag
   falsch. Es ist ein margin-top: -72px, das Twenty Fourteen jedem
   Beitrag mitgibt. Gedacht ist es fuer sein eigenes Aufmacherband;
   ohne dieses Band zieht es den Inhalt schlicht 72 Punkte zu weit
   nach oben, bei einem festen Kopf also unter das Menue. Gordon am
   12.09.2026: "es ist immer noch alles unters Menue geschoben".

   Auf einer Rezeptseite gibt es dieses Band nicht, also gehoert der
   Ausgleich dort auch nicht hin.

   Nur die eigenen Seiten: single-smr_rezept setzt WordPress am <body>,
   und nur dort greift diese Regel. Auf den uebrigen Seiten steht
   derselbe Fehler - der gehoert ins Theme, nicht in ein Plugin. */
body.single-smr_rezept .site-content .hentry {
	/* !important, und hier ausnahmsweise zu Recht.
	 *
	 * An der Seite gemessen: Die Regel passt auf das Element und wirkt
	 * trotzdem nicht. Die Ladereihenfolge ist

	 *     2: rezepte.css     <- dieses Plugin
	 *     5: style.css       <- Twenty Fourteen
	 *     6: style.css       <- Silbermuschel
	 *
	 * WordPress laedt Theme-Stilblaetter grundsaetzlich nach denen der
	 * Plugins. Bei gleichem Gewicht gewinnt die spaetere Regel, und
	 * daran kann ein Plugin nichts aendern - mehr Gewicht hilft nur
	 * bis zum naechsten Theme, das eine Klasse mehr schreibt.
	 *
	 * Mit !important gemessen: hentry bei y=187, Kopf endet bei 155,
	 * also 32 Punkte Luft. Vorher 40 Punkte Ueberlappung. */
	margin-top: 0 !important;
}


/* ================================================= Der Dateiknopf ==

   input[type=file] besteht aus zwei Teilen: dem Knopf und dem
   Dateinamen daneben. Das Feld hatte eine Regel, der Knopf darin
   nicht - also zeichnete ihn der Browser in seinem eigenen Grau,
   mitten in einer Seite, die sonst nichts Graues hat. Gordon am
   12.09.2026: "Der Button durchsuchen hat 'n Standarddesign. Hat nix
   mit der Homepage zu tun."

   Er sieht jetzt aus wie die uebrigen Knoepfe der Rezepte und folgt
   denselben drei Einstellungen. */
.smr-feld input[type=file]::file-selector-button {
	font: inherit;
	cursor: pointer;
	margin: 0 10px 0 0;
	padding: 7px 15px;
	border-radius: 999px;
	background: transparent;
	color: var(--smr-ton);
	border: 1.5px solid var(--smr-ton);
	transition: background .18s ease, color .18s ease;
}

.smr-feld input[type=file]:hover::file-selector-button,
.smr-feld input[type=file]::file-selector-button:hover {
	background: var(--smr-ton-auf);
	color: var(--smr-ton-text);
}


/* ================================================ Der Suchknopf ==

   Gehoert zum Formular, das aus dem Suchfeld geworden ist. Er sitzt
   IM Feld, rechts neben dem Text - so bleibt die Zeile eine Zeile,
   und auf dem Handy rutscht nichts um. */
.smr-suche-los {
	flex: 0 0 auto;
	margin: 0;
	padding: 5px 13px;
	white-space: nowrap;
	border-radius: 999px;
	font: inherit;
	/* An der Seite gemessen: Mit .92em war der Knopf 139 Punkte breit -
	   fuer ein Wort. Das Theme schreibt in Comic Sans, und die traegt
	   breit auf. Mit .8em sind es rund 95. */
	font-size: .8em;
	cursor: pointer;
	background: transparent;
	color: var(--smr-ton);
	border: 1.5px solid var(--smr-ton);
	transition: background .18s ease, color .18s ease;
}

.smr-suche-los:hover,
.smr-suche-los:focus {
	background: var(--smr-ton-auf);
	color: var(--smr-ton-text);
	outline: none;
}

/* „alle zeigen" neben der Trefferzahl - klein und zurueckhaltend,
   es ist ein Rueckweg und keine Aufforderung. */
.smr-zurueck {
	font-size: .58em;
	font-weight: 400;
	opacity: .75;
}

.smr-uebersicht a.smr-zurueck,
.smr-uebersicht a.smr-zurueck:visited {
	color: var(--smr-titel);
}

@media (max-width: 600px) {
	.smr-suche-los { padding: 6px 12px; font-size: .86em; }
}


/* ============================================== Der Loeschknopf ==

   Sieht aus wie die uebrigen Knoepfe, nur in Warnrot statt in der
   Akzentfarbe - und ohne eigenes Einstellungsfeld. Rot ist hier keine
   Geschmacksfrage: Es ist der einzige Knopf auf der Seite, der etwas
   wegnimmt, und das soll man sehen, bevor man klickt.

   Er steht deshalb auch ein Stueck abseits vom Druckknopf. */
.smr-weg-knopf {
	/* margin-left:auto schiebt den Knopf an den rechten Rand.
	   Das ist richtig, solange beide in EINER Zeile stehen - sobald
	   umgebrochen wird, steht er allein in der zweiten Zeile ganz
	   rechts. Genau so sah es auf Gordons Handy aus. Deshalb faellt
	   es auf schmalen Schirmen weg, weiter unten. */
	margin-left: auto;
	color: #c0392b;
	border-color: #c0392b;
}

.smr-weg-knopf:hover,
.smr-weg-knopf:focus {
	background: #c0392b;
	color: #fff;
}

.smr-drucken {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}


/* =================================================== Die Rueckfrage ==

   Statt window.confirm(), das als Systemfenster in Systemfarben
   erscheint und lange Texte abschneidet. Gordon am 12.09.2026:
   "Warum dieser Standard Scheiss? Warum nicht im Homepage Design?"

   Die Farben kommen aus denselben Einstellungen wie alles andere -
   wer die Boxen umfaerbt, faerbt den Dialog mit. */
.smr-frage {
	max-width: min(420px, calc(100vw - 32px));
	padding: 22px 24px;
	border: 1px solid var(--smr-kante, #cbc7b2);
	border-radius: 16px;
	background: var(--smr-box, var(--smr-flaeche, #e6e4d6));
	color: var(--smr-box-text, #1c1917);
	font: inherit;
	box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .55);
}

/* Der Schleier dahinter. ::backdrop gehoert zum <dialog> und laesst
   sich nur so erreichen. */
.smr-frage::backdrop {
	background: rgba(0, 0, 0, .45);
}

.smr-frage-text {
	margin: 0 0 18px;
	font-size: 1.05em;
	line-height: 1.45;
}

.smr-frage-knoepfe {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin: 0;
	flex-wrap: wrap;
}

/* Der Knopf, der etwas wegnimmt, ist rot - wie der Loeschknopf auf
   der Seite. Der zum Abbrechen bleibt in der gewoehnlichen Farbe:
   Was nichts anrichtet, muss nicht warnen. */
.smr-frage-ja {
	color: #c0392b;
	border-color: #c0392b;
}

.smr-frage-ja:hover,
.smr-frage-ja:focus {
	background: #c0392b;
	color: #fff;
}

@media (max-width: 480px) {
	/* Auf dem Handy nebeneinander zu eng - dann untereinander, und
	   der ungefaehrliche Knopf unten, wo der Daumen liegt. */
	.smr-frage-knoepfe { flex-direction: column-reverse; }
	.smr-frage-knoepfe .smr-knopf { width: 100%; text-align: center; }
}


/* ====================================== Die Knoepfe auf dem Handy ==

   Gerechnet fuer 390 Punkte Bildschirmbreite, rund 340 nutzbar:

       "Rezept drucken"  ~210  +  "Rezept löschen"  ~150  +  12
       = 372   ->  passt nicht, es bricht um

       "Drucken"         ~150  +  "Löschen"         ~110  +  12
       = 272   ->  passt

   Also faellt das Wort "Rezept" weg. Man steht ohnehin IM Rezept -
   was sonst sollte gedruckt oder geloescht werden. Gordon am
   12.09.2026: "Das langt, wenn er steht, drucken."

   Und das margin-left:auto geht mit: Es schiebt den Loeschknopf nach
   rechts, und beim Umbruch stuende er allein in der zweiten Zeile. */
@media (max-width: 560px) {

	.smr-lang { display: none; }

	.smr-drucken {
		gap: 10px;
		flex-wrap: nowrap;
	}

	.smr-weg-knopf {
		margin-left: 0;
	}

	.smr-drucken .smr-knopf {
		padding: 8px 14px;
		font-size: .92em;
	}
}