/**
 * CTA-Button-Design nach Kundenvorlage (27.08.2026).
 *
 * Drei Varianten: orange gefuellt, blau gefuellt, Textlink mit Pfeil.
 * Alle Masse stehen als Variablen in :root. Wer das Aussehen aller Buttons
 * aendern will, aendert genau diesen Block, nichts weiter.
 *
 * Greift ausschliesslich auf .boc-btn, also nur auf Buttons, die als
 * [boc_button] im Inhalt stehen. Slider-, Formular- und Navigationsbuttons
 * bleiben unberuehrt.
 *
 * Schriftgroesse: feste Breite, laengerer Text wird kleiner gesetzt. Den Wert
 * rechnet PHP aus den gemessenen Zeichenbreiten und setzt ihn als
 * --boc-btn-fs am Button. Der CSS-Ansatz container-fill-text stand zur
 * Debatte, kann Text aber nur vergroessern: die Restbreite, an der er misst,
 * ist bei zu langem Text null (nachgemessen am 27.08.).
 */

:root {
	/* Masse nah am bisherigen Bestand (Entscheidung 27.08.): der Button bleibt
	   so gross wie heute, neu sind Form, Farbe und Schriftschnitt. Die Vorlage
	   des Kunden ist eine Proportionsskizze; ihr Verhaeltnis von Schrift zu
	   Flaeche liesse die freigegebenen Texte nicht in eine Zeile. */
	--boc-btn-w: 250px;
	--boc-btn-h: 50px;
	--boc-btn-r: 10px;
	--boc-btn-pad: 18px;
	--boc-btn-abstand: 10px;

	/* Schriftgroesse: Standard, falls PHP keinen Wert setzt. Die Leiter der
	   moeglichen Groessen steht in inc/buttons/element.php. */
	--boc-btn-fs: 15px;
	--boc-btn-fs-min: 12px;
	--boc-btn-fw: 600;

	--boc-orange: #e56100;
	--boc-orange-hover: #c65300;
	--boc-blau: #095494;
	--boc-blau-hover: #073f70;
	--boc-btn-fokus: #1a1a1a;
}

/* --------------------------------------------------------------- Grundform */

.boc-btn.boc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--boc-btn-w);
	max-width: 100%;
	min-height: var(--boc-btn-h);
	margin: 0 var(--boc-btn-abstand) var(--boc-btn-abstand) 0;
	padding: 8px var(--boc-btn-pad);
	border: 0;
	border-radius: var(--boc-btn-r);
	box-shadow: none;
	background-image: none;
	color: #fff;
	/* Ueberschreibt .button { font-weight:100 !important } aus buttons-basis.css. */
	font-weight: var(--boc-btn-fw) !important;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color .18s ease, color .18s ease;
	/* Der Button ist sein eigener Container: steht er in einer schmaleren
	   Spalte als seiner Sollbreite, skaliert die Schrift im gleichen
	   Verhaeltnis mit, statt aus dem Button zu laufen. */
	container-type: inline-size;
}

.boc-btn.boc-btn:hover,
.boc-btn.boc-btn:focus-visible {
	box-shadow: none;
	text-decoration: none;
}

.boc-btn.boc-btn:focus-visible {
	outline: 2px solid var(--boc-btn-fokus);
	outline-offset: 3px;
}

/* Das Pfeil-Icon der alten Buttons hat hier nichts zu suchen. */
.boc-btn .icon-angle-right,
.boc-btn .icon-angle-left {
	display: none;
}

/* ---------------------------------------------------------------- Varianten */

.boc-btn--orange.boc-btn--orange {
	background-color: var(--boc-orange);
}

.boc-btn--orange.boc-btn--orange:hover,
.boc-btn--orange.boc-btn--orange:focus-visible {
	background-color: var(--boc-orange-hover);
	color: #fff;
}

.boc-btn--blau.boc-btn--blau {
	background-color: var(--boc-blau);
}

.boc-btn--blau.boc-btn--blau:hover,
.boc-btn--blau.boc-btn--blau:focus-visible {
	background-color: var(--boc-blau-hover);
	color: #fff;
}

/* Textlink mit Pfeil: keine Flaeche, keine feste Breite. Kein Container,
   weil sich seine Breite aus dem Inhalt ergibt. */
.boc-btn--link.boc-btn--link {
	container-type: normal;
	width: auto;
	min-height: 0;
	padding: 4px 0;
	border-radius: 0;
	background: none;
	color: var(--boc-orange);
	gap: .5em;
}

.boc-btn--link.boc-btn--link:hover,
.boc-btn--link.boc-btn--link:focus-visible {
	color: var(--boc-orange-hover);
}

/* Auf blauem Umfeld wird auch der Textlink blau: <div class="boc-blau"> ... */
.boc-blau .boc-btn--link.boc-btn--link {
	color: var(--boc-blau);
}

.boc-blau .boc-btn--link.boc-btn--link:hover {
	color: var(--boc-blau-hover);
}

.boc-btn__pfeil {
	flex: none;
	width: 1.5em;
	height: 1em;
	background-color: currentColor;
	/* Pfeil als Maske, damit er die Textfarbe uebernimmt. */
	-webkit-mask: var(--boc-btn-pfeil) no-repeat center / contain;
	mask: var(--boc-btn-pfeil) no-repeat center / contain;
}

:root {
	--boc-btn-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M0 8h29M22 1l7 7-7 7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- Schriftgroesse */

/* Die Groesse setzt PHP als --boc-btn-fs, gerechnet aus den gemessenen
   Zeichenbreiten (assets/css/zeichenbreiten.json). Der Wert hier ist nur die
   Absicherung, falls das Attribut fehlt. */
.boc-btn__text {
	display: block;
	/* --boc-btn-fs ist die von PHP berechnete Groesse bei voller Sollbreite,
	   --boc-btn-fs-cq derselbe Wert als Anteil der Buttonbreite. Ist der
	   Button schmaler (enge Spalte, Tabelle), greift der zweite Wert, aber
	   nie unter die Lesegrenze. Darunter bricht der Text lieber um: der
	   Button waechst dann in die Hoehe. */
	font-size: max(var(--boc-btn-fs-min), min(var(--boc-btn-fs, 15px), var(--boc-btn-fs-cq, 100cqi)));
	hyphens: auto;
	/* Notbremse fuer extrem schmale Behaelter (z. B. Tabellenzellen): lieber
	   mitten im Wort umbrechen als aus dem Button laufen. */
	overflow-wrap: anywhere;
}

.boc-btn--link .boc-btn__text {
	font-size: var(--boc-btn-fs, 15px);
}

/* -------------------------------------------------------------------- Mobil */

/* Bewusst keine Sonderbreite auf dem Handy (Entscheidung 27.08.): der Button
   behaelt seine 250px, damit er ueberall gleich aussieht. max-width haelt ihn
   in schmaleren Spalten trotzdem im Rahmen. */