/* =============================================================================
 * Hinweisbox „Probekiste derzeit nicht bestellbar" – /probekiste-bestellen/
 *
 * Markup: probekiste-hinweis-markup.html im Projektordner, eingefuegt in ein
 * Beaver-HTML-Modul ganz oben in der Textspalte. Geladen nur auf Seite 371
 * (functions-probekiste-snippet.php). Kein JavaScript, keine Webfonts.
 *
 * Angelehnt an die Aktion-Karte des Startseiten-Banners: Creme-Flaeche,
 * orange gefuellter Button, eckig, keine Rahmen.
 *
 * Farben: ausschliesslich aus assets/shared/aktion-farben.css (dieselben
 * Variablen wie home-banner.css). Weiss als Button-Schrift wie im Banner.
 *
 * Schrift: „Ubuntu Regular" / „Ubuntu Medium" / „Ubuntu Bold" sind site-weit
 * registriert (jeweils als eigene Familie mit Gewicht 400) – daher immer
 * font-weight 400, sonst legt der Browser kuenstliches Fett obendrauf.
 *
 * Button: Weiss auf Orange = 3,40:1, reicht nur fuer grosse Schrift
 * (WCAG: fett ab 18,66 px) – daher „Ubuntu Bold" 19 px wie im Banner.
 * Text #5c5c5c auf Creme #f2e7d3 = 5,46:1 (Werte seit 15.09.2026 zentral, Variante C).
 *
 * Mobile-first. Nebeneinander ab 769 px = Beaver-Breakpoint der Seite.
 * ========================================================================== */

.okph {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 20px;
	border: 0;
	border-radius: 0;
	background-color: var(--okaktion-creme);
	color: var(--okaktion-text);
	box-sizing: border-box;
}

.okph *,
.okph *::before,
.okph *::after {
	box-sizing: border-box;
}

.okph__inhalt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* Spezifitaet mit .okph davor: Astra setzt h2 auf 32 px / 1.3em und Abstaende. */
.okph .okph__titel {
	margin: 0;
	padding: 0;
	font-family: "Ubuntu Medium", "Ubuntu Regular", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.2;
	color: var(--okaktion-text);
}

.okph .okph__text {
	margin: 0;
	padding: 0;
	font-family: "Ubuntu Regular", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.45;
	color: var(--okaktion-text);
}

/* Link-Farben von Astra (#57b03c, Hover #e7622a) ueberschreiben. */
.okph a.okph__button,
.okph a.okph__button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 22px;
	border: 0;
	border-radius: 0;
	background-color: var(--okaktion-orange);
	box-shadow: none;
	color: #ffffff;
	font-family: "Ubuntu Bold", "Ubuntu Medium", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.okph a.okph__button:hover,
.okph a.okph__button:focus-visible {
	background-color: #ffffff;
	color: var(--okaktion-orange);
	text-decoration: none;
}

/* Spezifitaet bewusst hoch: Astra (a:focus-visible, dotted) und Beaver
   (:is(a[href]):focus) setzen eigene Fokusrahmen. */
.okph a.okph__button:focus-visible {
	outline: 3px solid var(--okaktion-text);
	outline-offset: 3px;
}

/* Ab 769 px (Beaver-Breakpoint): groesser, mehr Innenabstand, noch untereinander.
   Button neben dem Text erst ab 993 px (naechster Beaver-Breakpoint) – bei
   769 px blieben neben dem 302 px breiten Button nur 291 px fuer den Text
   (gemessen 15.09.2026, Titel zweizeilig). */
@media (min-width: 769px) {

	.okph {
		padding: 28px 32px;
	}

	.okph .okph__titel {
		font-size: clamp(22px, 2.3vw, 28px);
	}

	.okph .okph__text {
		font-size: 18px;
	}

	.okph a.okph__button {
		flex: none;
		padding-right: 34px;
		padding-left: 34px;
		white-space: nowrap;
	}
}

@media (min-width: 993px) {

	.okph {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.okph a.okph__button {
		transition: none;
	}
}