/* ==========================================================================
   Kreislaufkraft · Feinschliff für kleine und mittlere Bildschirme
   --------------------------------------------------------------------------
   Sammelstelle für Regeln, die nur unter 768 Pixeln gelten und sich nicht
   sinnvoll pro Element in Elementor setzen lassen - etwa weil der betroffene
   Wert als Inline-Stil im Text eines Widgets steht.

   Seitenbezogene Korrekturen bleiben im Custom CSS der jeweiligen Seite.
   Hier steht nur, was überall gilt.
   ========================================================================== */

@media (max-width: 767px) {

	/* --- Kleine Beschriftungen ------------------------------------------ */
	/* Die Überzeilen-Pillen ("100% TORFFREI. 100% LEBEN.", "REZENSIONEN UND
	   BEWERTUNGEN") und die Rollen unter den Bewertungen stehen mit 10 Pixeln
	   im Markup - als Inline-Stil, deshalb braucht es hier !important. In
	   Grossbuchstaben und mit weiter Laufweite ist das am Telefon an der
	   Grenze des Lesbaren; 12 Pixel bleiben unauffällig und sind lesbar. */
	[style*="font-size: 10px"],
	[style*="font-size:10px"] {
		font-size: 12px !important;
	}

	[style*="font-size: 11px"],
	[style*="font-size:11px"] {
		font-size: 12px !important;
	}

	/* --- Antippbare Flaechen ------------------------------------------- */
	/* Empfohlen sind mindestens 40 Pixel Hoehe. Der Umschalter "Mehr..." auf
	   der Produktkarte war 13 Pixel hoch, die Titel- und Rubrikverweise in den
	   Karten 25 bis 36. Die Schrift bleibt gleich, nur die Flaeche waechst. */
	.kk-card-more .elementor-button {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	.kk-card .elementor-heading-title a,
	.e-loop-item .elementor-heading-title a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding-block: 0;
	}

	/* Der Klimabilanz-Rechner setzt seine Beschriftungen im Seiten-CSS der
	   Startseite mit !important auf 10 bis 11 Pixel. Dieselbe Gewichtung plus
	   eine Klasse mehr hebt sie auf die gleiche Groesse wie den Rest. */
	.kk-calc-control .kk-calc-control__label,
	.kk-calc-control .kk-calc-control__scale,
	.kk-calc-control .kk-calc-control__scale span,
	.kk-calc-card .kk-calc-card__label,
	.kk-calc-card .kk-calc-card__note,
	.kk-calc-hint .kk-calc-source {
		font-size: 12px !important;
	}

	/* Die weite Laufweite kostet bei 12 Pixeln zu viel Zeilenbreite - eine
	   Spur enger, damit "Hobbygärtnerin • Geprüfter Kauf" nicht dreizeilig
	   umbricht. */
	[style*="letter-spacing: 0.15em"],
	[style*="letter-spacing:0.15em"] {
		letter-spacing: 0.08em !important;
	}
}


/* ==========================================================================
   Magazin: der Aufmacher gilt auch auf mittleren Bildschirmen
   --------------------------------------------------------------------------
   Im Seiten-CSS von /magazin/ laeuft die erste Karte ueber die volle
   Rasterbreite - allerdings erst ab 1025 Pixeln. Zwischen 768 und 1024 stand
   sie als normale Karte in der Zweierspalte, und weil eine Ladung 13 Beitraege
   umfasst (1 Aufmacher + 12), blieb dort am Ende eine Karte allein stehen.

   Mit dem Aufmacher auch auf Tablet geht die Rechnung in beiden Rastern auf:
   12 folgende Karten sind vier volle Dreier- oder sechs volle Zweierzeilen.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-701 .elementor-loop-container > div.e-loop-item:first-of-type {
		grid-column: 1 / -1;
	}
}