/**
 * Hypnause Bausteine
 *
 * Styling für alle Shortcodes des Plugins:
 *   .hyp-trustbox    → [trustbox]
 *   .hyp-cta         → [cta]
 *   .hyp-verfuegbar  → [verfuegbarkeit]
 *   .hyp-cluster     → [cluster]
 *
 * Bewusst sparsam: Schriftart, Schriftgröße, Textfarbe und Linkfarbe erben die
 * Bausteine von Divi. Dadurch passen sie sich automatisch an, wenn das Theme
 * geändert wird, und sehen in Divi 5 genauso aus wie in Divi 4.
 *
 * Fest gesetzt sind nur Rahmen, Flächen, Rundungen und Umbruchverhalten.
 */

/* ==========================================================================
   TRUST-BOX  ->  [trustbox]
   ========================================================================== */

.hyp-trustbox {
	border: 2px solid #2b87da;
	border-radius: 10px;
	margin: 28px 0;

	/* Kein Innenabstand: Die graue Fläche läuft bis an den blauen Rahmen.
	   Sonst entsteht ein schmaler weißer Ring, der wie ein zweiter Rahmen
	   wirkt. overflow verhindert, dass die graue Ecke über die Rundung
	   hinausläuft. */
	padding: 0;
	overflow: hidden;
}

.hyp-trustbox__inner {
	display: flex;
	gap: 26px;
	align-items: flex-start;
	background: #f3f4f6;
	padding: 30px;
}

/* --- Foto ---------------------------------------------------------------- */

.hyp-trustbox__media {
	flex: 0 0 200px;
	margin: 0;
}

.hyp-trustbox__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: #cfe3f7;
}

/* --- Textspalte ---------------------------------------------------------- */

.hyp-trustbox__body {
	flex: 1 1 auto;
	min-width: 0;
}

.hyp-trustbox__title {
	margin: 0 0 16px;
	padding: 0;
}

.hyp-trustbox__quote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-style: normal;
}

.hyp-trustbox__quote p:last-child {
	margin-bottom: 0;
}

.hyp-trustbox__author {
	margin: 0 0 2px;
}

.hyp-trustbox__name {
	font-weight: 700;
}

/* E-E-A-T-Zeile: kleiner und zurückgenommen, damit sie den Namen nicht
   überstrahlt. Hier änderst du die Darstellung zentral für alle Seiten. */
.hyp-trustbox__credentials {
	margin: 0 0 10px;
	font-size: .85em;
	line-height: 1.5;
	opacity: .75;
}

.hyp-trustbox__link {
	margin: 0;
}

/* ==========================================================================
   CALL-TO-ACTION  ->  [cta]
   ========================================================================== */

.hyp-cta {
	background: #ececec;
	border-radius: 8px;
	margin: 28px 0;
	overflow: hidden;
}

/* --- Aktions-Variante: Satz + Button, zentriert --------------------------- */

.hyp-cta--aktion {
	padding: 26px 24px;
	text-align: center;
}

.hyp-cta__satz {
	margin: 0 0 18px;
	font-weight: 700;
	color: #2b87da;
}

.hyp-cta__aktion {
	margin: 0;
}

.hyp-cta__button {
	display: inline-block;
	padding: 12px 26px;
	background: #ffe800;
	color: #222;
	border: 2px solid #222;
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}

.hyp-cta__button:hover,
.hyp-cta__button:focus {
	background: #ffef4d;
	color: #222;
	text-decoration: none;
}

/* Sichtbarer Fokus für Tastaturbedienung — der gelbe Button allein gibt
   sonst keine erkennbare Rückmeldung. */
.hyp-cta__button:focus-visible {
	outline: 3px solid #2b87da;
	outline-offset: 3px;
}

/* Bewegung nur für Nutzer, die sie nicht abbestellt haben. */
@media (prefers-reduced-motion: no-preference) {

	.hyp-cta__button:hover {
		transform: translateY(-1px);
	}
}

/* --- Kontakt-Variante: Foto links, Text rechts ---------------------------- */

.hyp-cta--kontakt {
	padding: 0;
}

.hyp-cta__inner {
	display: flex;
	gap: 0;
	align-items: stretch;
}

.hyp-cta__media {
	flex: 0 0 34%;
	max-width: 340px;
	margin: 0;
	background: #cfe3f7;
}

.hyp-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.hyp-cta__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 30px;
	align-self: center;
}

.hyp-cta__titel {
	margin: 0 0 14px;
	padding: 0;
}

.hyp-cta__body p {
	margin: 0 0 14px;
}

.hyp-cta__body p:last-child {
	margin-bottom: 0;
}

/* Kontakt-Variante auf schmalen Geräten: Foto über den Text. */

@media (max-width: 600px) {

	.hyp-cta__inner {
		flex-direction: column;
	}

	.hyp-cta__media {
		flex: 0 0 auto;
		max-width: none;
	}

	.hyp-cta__media img {
		height: auto;
	}

	.hyp-cta__body {
		padding: 24px 20px;
	}

	.hyp-cta--aktion {
		padding: 22px 18px;
	}
}

/* ==========================================================================
   VERFÜGBARKEIT  ->  [verfuegbarkeit]
   ========================================================================== */

.hyp-verfuegbar {
	display: flex;
	gap: 12px;
	margin: 14px 0;
}

/* flex: 1 1 0 statt einer festen Breite — dadurch füllt ein einzelner Button
   die Zeile, zwei teilen sie sich exakt hälftig. Ohne Sonderfall im PHP. */
.hyp-verfuegbar__item {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	/* Knapper als zuvor: erzwingt sonst bei "Also in English" einen
	   Zeilenumbruch, wodurch die beiden Buttons ungleich hoch wirken. */
	padding: 10px 12px;
	border-radius: 4px;
	color: #fff;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;

	/* Silbentrennung unterdrücken — "Eng-lish" mitten im Button sieht
	   nach Fehler aus, nicht nach Gestaltung. */
	hyphens: none;
}

/* Das Icon darf nie schrumpfen und nie mit umbrechen. */
.hyp-verfuegbar__icon {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
}

/* Emoji oder Textzeichen statt SVG: braucht eigene Maße. */
.hyp-verfuegbar__icon--text {
	width: auto;
	height: auto;
	font-size: 1.05em;
	line-height: 1;
}

.hyp-verfuegbar__item--online {
	background: #1275bc;
}

.hyp-verfuegbar__item--english {
	background: #6cb2d8;
}

/* Nur Links reagieren — ein Hinweis ohne URL darf sich nicht anfassbar anfühlen. */
a.hyp-verfuegbar__item:hover,
a.hyp-verfuegbar__item:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.08);
}

a.hyp-verfuegbar__item:focus-visible {
	outline: 3px solid #2b87da;
	outline-offset: 3px;
}

/* Nebeneinander bleibt es bis 480 px — zwei kurze Beschriftungen passen dort
   noch. Darunter untereinander, sonst bricht der Text mitten im Wort. */
@media (max-width: 480px) {

	.hyp-verfuegbar {
		flex-direction: column;
	}
}

/* ==========================================================================
   THEMENCLUSTER  ->  [cluster]
   ========================================================================== */

.hyp-cluster {
	border-radius: 10px;
	padding: 10px 24px;
	margin: 28px 0;
}

.hyp-cluster__titel {
	margin: 0 0 6px;
	padding: 0;
}

.hyp-cluster__liste, .hyp-cluster__liste ul {
	margin: 0;
	padding: 0!important;
	list-style: none;
}

/* Divi setzt eigene Aufzählungspunkte über `ul li:before`. Ohne dieses
   Zurücksetzen erscheinen zwei Marker nebeneinander. Das !important ist hier
   nötig, weil Divis Regel spezifischer ist als jede Klasse, die wir vergeben
   können — es ist eng auf diese eine Liste begrenzt. */
.hyp-cluster .hyp-cluster__liste li::before,
.hyp-cluster .hyp-cluster__liste li::marker {
	content: none !important;
	display: none !important;
}

.hyp-cluster__liste li {
	margin: 0;
	padding: 0;
	line-height: 1.35;
}

/* Der Link füllt die ganze Zeile: größere Klickfläche, sauberere Trennlinien
   und keine Einrückung durch Aufzählungszeichen. */
.hyp-cluster__liste a {
	display: block;
	position: relative;
	padding: 11px 22px 11px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}

.hyp-cluster__liste li:last-child a {
	/*border-bottom: 0;
	padding-bottom: 0;*/
}

/* Pfeil rechts, im Ruhezustand unsichtbar. Der Platz ist über das
   padding-right bereits reserviert — dadurch springt beim Hover nichts. */
.hyp-cluster__liste a::after {
	content: "›";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translate(-4px, -50%);
	opacity: 0;
	font-size: 1.25em;
	line-height: 1;
	transition: opacity .15s ease, transform .15s ease;
}

.hyp-cluster__liste a:hover::after,
.hyp-cluster__liste a:focus-visible::after {
	opacity: .6;
	transform: translate(0, -50%);
}

.hyp-cluster__liste a:hover,
.hyp-cluster__liste a:focus-visible {
	text-decoration: none;
	padding-left: 4px;
}

.hyp-cluster__liste a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Die seitenweiten Links abgesetzt und etwas leiser — sie sind Wegweiser,
   keine Themenseiten. */
.hyp-cluster__liste--service {
	margin-top: 34px;
	padding-top: 14px;
	/*border-top: 1px solid rgba(0, 0, 0, .12); */
}

.hyp-cluster__liste--service a {
	border-bottom: 0;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: .93em;
	opacity: .8;
}

.hyp-cluster__liste--service a:hover,
.hyp-cluster__liste--service a:focus-visible {
	opacity: 1;
}

/* Bewegung nur, wenn sie nicht abbestellt wurde. */
@media (prefers-reduced-motion: reduce) {

	.hyp-cluster__liste a,
	.hyp-cluster__liste a::after {
		transition: none;
	}

	.hyp-cluster__liste a:hover,
	.hyp-cluster__liste a:focus-visible {
		padding-left: 0;
	}
}

/* ==========================================================================
   TRUST-BOX: Responsive
   ========================================================================== */

/* --- Tablet ---------------------------------------------------------------
   Bis hinunter zu 600 px bleibt das Foto NEBEN dem Text. Es schrumpft dabei
   prozentual mit, statt auf einer festen Breite zu beharren. Dadurch entfällt
   der frühe Umbruch, bei dem ein kleines Foto einsam über dem Text steht. */

@media (max-width: 980px) {

	.hyp-trustbox__inner {
		gap: 22px;
		padding: 24px;
	}

	.hyp-trustbox__media {
		flex: 0 1 28%;
		max-width: 190px;
		min-width: 115px;
	}
}

/* --- Smartphone -----------------------------------------------------------
   Erst unterhalb von 600 px wird gestapelt, und dann nimmt das Foto die volle
   Breite ein. Weil auf Tablets gar nicht mehr umgebrochen wird, wird es dabei
   nie unangenehm groß. */

@media (max-width: 600px) {

	.hyp-trustbox__inner {
		flex-direction: column;
		gap: 20px;
		padding: 20px;
	}

	.hyp-trustbox__media {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		min-width: 0;
	}
}