/*
 * Bestellseite der neuen Welt (Baukasten).
 *
 * Praefix bk-. Eigene Datei statt eines Zusatzes in payment.css: Die alte Strecke steht auf einem
 * Bootstrap-Raster mit col-8/col-16, die neue auf Grid -- gemeinsame Regeln haetten hier nur
 * Ausnahmen erzeugt.
 *
 * Die Gestaltung folgt der Preisseite (css/pages/website/pricing2026Preview.less): dieselben
 * Design-Tokens, dieselben Karten, Radien und Knoepfe, derselbe Verlauf hinter dem Kopf. Wer von
 * "Professional starten" hierher kommt, soll keinen Bruch sehen. Die Werte stehen hier noch einmal
 * und nicht als Import, weil die Preisseite eine Vorschau ist und ihr Stylesheet mit ihr wandert.
 */

.bk {
	--bk-tinte: var(--brand-primary-900);
	--bk-still: var(--brand-primary-600);
	--bk-linie: var(--brand-primary-200);
	--bk-feldrand: var(--brand-primary-400);
	--bk-blau: var(--brand-tertiary-500);
	--bk-blau-dunkel: var(--brand-tertiary-700);
	--bk-blau-hell: var(--brand-tertiary-50);
	/* Die Farben der Bausteinliste (BausteinAuswahlPanel). Der Rahmen eine Stufe kraeftiger als
	   --bk-linie: Er trennt die Zeilen einer Liste, und die hellste Stufe verschwand dazwischen. */
	--konf-rahmen: var(--brand-primary-300);
	--konf-feldrand: var(--bk-feldrand);
	--konf-blau: var(--bk-blau);
	--konf-still: var(--bk-still);
	--konf-tinte: var(--bk-tinte);
	--konf-akzent: var(--bk-blau-dunkel);
	--konf-akzent-hell: var(--bk-blau-hell);

	/* Kein overflow: hidden wie auf der Preisseite -- es machte .bk zum Scroll-Container, und der
	   Bestellkasten klebte nicht mehr. Der Verlauf bleibt ohnehin innerhalb der Breite. */
	position: relative;
	/* flow-root, damit der Abstand ueber der Bestaetigung nicht aus .bk herausfaellt und ueber dem
	   Verlauf einen weissen Streifen laesst. */
	display: flow-root;
	padding: 0 0 96px;
	color: var(--bk-tinte);
	background: var(--background-0);
	font-size: 16px;
	line-height: 1.55;
}

/* Unter einem fremden Kopf, etwa dem der Preisseite im Angebotskonfigurator: Der Kopf bringt Verlauf und
   Hintergrund schon mit, ein zweiter Verlauf finge mitten auf der Seite neu an. Zwei Klassen, damit die Regeln
   gegen .bk und .bk::before darunter gewinnen. */
.bk.bk--eingebettet {
	background: transparent;
}

.bk.bk--eingebettet::before {
	content: none;
}

/* Der Verlauf der Preisseite, hinter Kopf und erstem Block. */
.bk::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1100px;
	background:
		radial-gradient(ellipse 72% 68% at 4% 2%, rgba(202, 222, 252, 0.62) 0%, rgba(222, 235, 253, 0.34) 40%, transparent 72%),
		radial-gradient(ellipse 68% 66% at 96% 4%, rgba(214, 239, 228, 0.58) 0%, rgba(232, 247, 239, 0.3) 42%, transparent 74%);
	content: '';
	pointer-events: none;
}

/* Im Dark Mode laegen die hellen Toene als grauer Schleier ueber dem Kopf: dieselben Ellipsen in Blau und Gruen,
   wie auf der Preisseite. */
[data-theme="dark"] .bk::before {
	background:
		radial-gradient(ellipse 72% 68% at 4% 2%, rgba(39, 106, 246, 0.26) 0%, rgba(39, 106, 246, 0.12) 40%, transparent 72%),
		radial-gradient(ellipse 68% 66% at 96% 4%, rgba(0, 162, 148, 0.2) 0%, rgba(0, 162, 148, 0.08) 42%, transparent 74%);
}

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

.bk > * {
	position: relative;
	width: min(1180px, calc(100% - 48px));
	margin-right: auto;
	margin-left: auto;
}

/* :where haelt die Spezifitaet bei null -- sonst schluege der Reset die Abstaende der Klassen
   darunter (etwa den zwischen den beiden Hinweisen unter dem Knopf). */
:where(.bk) :where(h1, h2, h3, p) {
	margin-top: 0;
}

/* ---------- Kopf ---------- */

.bk-kopf {
	padding: 56px 0 36px;
	text-align: center;
}

.bk-kopf__titel {
	max-width: 880px;
	margin: 0 auto 14px;
	color: var(--bk-tinte);
	font-size: clamp(36px, 4.2vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.bk-kopf__text {
	max-width: 720px;
	margin: 0 auto;
	color: var(--bk-still);
	font-size: 18px;
}

/* ---------- Bestaetigung nach dem Kauf ---------- */

.bk-bestaetigung {
	max-width: 760px;
	margin-top: 64px;
	padding: 44px 40px;
	border: 1px solid var(--bk-linie);
	border-radius: 18px;
	background: var(--background-0);
	box-shadow: var(--shadow-medium);
	text-align: center;
}

.bk-bestaetigung__haken {
	display: inline-grid;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	place-items: center;
	border-radius: 50%;
	background: var(--accent-success-100);
	color: var(--accent-success-700);
	font-size: 26px;
	font-weight: 700;
}

.bk-bestaetigung .bk-kopf__text {
	margin-bottom: 28px;
}

.bk-bestaetigung__offen,
.bk-warnung {
	margin: 0 0 28px;
	padding: 14px 18px;
	border: 1px solid var(--accent-error-200);
	border-radius: 12px;
	background: var(--accent-error-100);
	color: var(--accent-error-700);
	font-size: 14px;
	text-align: left;
}

.bk-bestaetigung__offen a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Ein Hinweis in einem Block, etwa "Dieses Angebot ist abgelaufen" in der Angebotsansicht. */
.bk-warnung {
	margin-bottom: 18px;
}

/* Die Bestätigung in einem Block, etwa nach "Angebot anfordern": gruen und mit Haken, damit sie nicht wie ein
   Hinweistext aussieht. */
.bk-erfolg {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px 20px;
	border: 1px solid var(--accent-success-200);
	border-radius: 14px;
	background: var(--accent-success-100);
	color: var(--accent-success-700);
	font-size: 16px;
	font-weight: 600;
}

.bk-erfolg__haken {
	display: inline-grid;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 50%;
	background: var(--accent-success-600);
	color: var(--brand-primary-0);
	font-size: 16px;
	font-weight: 700;
}

/* Der Hinweis zum Angebot aus dem Link, zwischen Kopf und Bestellung; ohne Abstand saesse er auf den Karten.
   Die Seitenraender bleiben auto wie bei jedem Kind von .bk: Ein "margin: 0 0 24px" nahm sie ihm, auch ueber
   .bk-warnung, und der Hinweis klebte links statt ueber dem Raster zu stehen. */
.bk > .bk-angebotshinweis {
	margin: 0 auto 24px;
}

.bk-angebotshinweis a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Raster ---------- */

.bk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
	gap: 28px;
	align-items: start;
}

.bk-inhalt {
	display: grid;
	gap: 20px;
	min-width: 0;
}

/* Die rechte Spalte fuellt die Zeilenhoehe, damit die Karte darin kleben kann. */
.bk-spalte {
	align-self: stretch;
	height: 100%;
}

/* ---------- Bloecke links ---------- */

.bk-block {
	padding: 28px;
	border: 1px solid var(--bk-linie);
	border-radius: 18px;
	background: var(--background-0);
	box-shadow: var(--shadow-light);
}

.bk-block__titel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	color: var(--bk-tinte);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Kopfzeile eines Blocks mit einem Umschalter rechts neben dem Titel (Waehrung in "Dein Paket"). */
.bk-block__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0 0 22px;
}

.bk-block__kopf .bk-block__titel {
	margin: 0;
}

.bk-block__nr {
	display: inline-grid;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	background: var(--bk-blau);
	color: var(--brand-primary-0);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

/* Der Grundvertrag: die hervorgehobene Karte der Preisseite. */
.bk-basis {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 18px;
	padding: 22px 24px;
	border: 2px solid var(--bk-blau);
	border-radius: 16px;
	background: var(--background-0);
}

.bk-basis__marke {
	display: block;
	margin-bottom: 1px;
	color: var(--bk-still);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bk-basis__titel {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.bk-basis__text {
	max-width: 60ch;
	margin: 0;
	color: var(--bk-still);
	font-size: 14px;
}

.bk-basis__preis {
	color: var(--bk-tinte);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* Auswahlkacheln fuer Zahlweise und Zahlungsart. */
/* Eine Zeile der Angebotsansicht: Baustein mit Beschreibung links, Monatsbetrag rechts, wie die Bausteinzeile
   der Bestellseite, nur ohne Wahl. */
.bk-position {
	display: flex;
	gap: 16px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	padding: 16px 20px;
	border: 1px solid var(--bk-linie);
	border-radius: 16px;
	background: var(--background-0);
	box-shadow: var(--shadow-light);
}

.bk-position__name {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 700;
}

.bk-position__text {
	margin: 0;
	color: var(--bk-still);
	font-size: 14px;
}

.bk-position__betrag {
	color: var(--bk-blau-dunkel);
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bk-kacheln {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}

/* Zwei mal zwei statt vier nebeneinander: "SEPA-Lastschriftverfahren" passt in eine Viertelspalte
   nicht hinein. */
.bk-kacheln--vier {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: 0;
}

.bk-wahl {
	display: block;
	height: 100%;
	padding: 14px 18px;
	border: 1px solid var(--bk-feldrand);
	border-radius: 12px;
	background: var(--background-0);
	color: var(--bk-tinte);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.bk-wahl:hover,
.bk-wahl:focus {
	border-color: var(--bk-blau);
	color: var(--bk-tinte);
	text-decoration: none;
}

.bk-wahl:focus-visible {
	outline: 3px solid var(--brand-tertiary-100);
	outline-offset: 2px;
}

.bk-wahl.active {
	border-color: var(--bk-blau);
	background: var(--bk-blau-hell);
	box-shadow: inset 0 0 0 1px var(--bk-blau);
}

.bk-kachel__name {
	display: block;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.bk-kachel__hinweis {
	display: block;
	margin-top: 2px;
	color: var(--accent-success-700);
	font-size: 13px;
	font-weight: 700;
}

/* Das Onboarding-Paket: eine eigene Gruppe "Einmalig" in der Zeilenform der Bausteinliste. Die Stile der Zeile
   bringt BausteinAuswahlPanel mit, das auf derselben Seite steht. Die Zeile ist ein label: Die ganze Flaeche
   schaltet den Haken, und Toenung und Beschriftung folgen ihm per :has, ohne Rundlauf zum Server. */
.bk .bk-onboarding {
	margin-top: 28px;
}

.bk-onboarding__zeile {
	margin: 0;
	font-weight: inherit;
	cursor: pointer;
}

.bk-onboarding__zeile .konf-zeile__name,
.bk-onboarding__zeile .konf-zeile__text {
	display: block;
}

.bk-onboarding__zeile:has(input:checked) {
	background: var(--konf-akzent-hell);
}

/* Ein Schluessel fuer Gruppentitel und Takt: "Einmalig" oben, "einmalig" unter dem Preis. */
.bk-onboarding__takt {
	text-transform: lowercase;
}

.bk-onboarding__schalter input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--bk-blau);
	cursor: pointer;
}

.bk-onboarding__schalter:has(input:checked) {
	border-color: var(--konf-blau);
	color: var(--konf-akzent);
}

.bk-onboarding__an,
.bk-onboarding__schalter:has(input:checked) .bk-onboarding__aus {
	display: none;
}

.bk-onboarding__schalter:has(input:checked) .bk-onboarding__an {
	display: inline;
}

/* Kaestchen mit Text daneben, ohne die Bootstrap-Einrueckung von form-check. */
.bk-haken {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.bk-haken input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--bk-blau);
}

/* Formularfelder: Bootstrap bleibt, nur Rahmen, Radius und Fokus wie auf der Preisseite. */
.bk label {
	color: var(--bk-tinte);
	font-size: 13px;
	font-weight: 600;
}

.bk .form-control {
	height: auto;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--bk-feldrand);
	border-radius: 10px;
	background-color: var(--background-0);
	color: var(--bk-tinte);
	font-size: 15px;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Der Browser-Pfeil des Auswahlfelds passt nicht zu Rahmen und Radius: eigener Pfeil in der
   Farbe der stillen Texte (--bk-still), wie ihn .fpkDropDown-button auf den Einstellungsseiten
   zeichnet. Als Hintergrundbild, weil ein <select> kein ::after hat. */
.bk select.form-control {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238191AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	appearance: none;
}

.bk .form-control:focus {
	border-color: var(--bk-blau);
	box-shadow: 0 0 0 3px var(--brand-tertiary-100);
}

.bk .form-control.is-invalid {
	border-color: var(--accent-error-500);
}

.bk .form-control.is-invalid:focus {
	box-shadow: 0 0 0 3px var(--accent-error-200);
}

.bk-reihe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.bk-feld--schmal {
	max-width: 280px;
}

.bk-feld--kurz {
	max-width: 160px;
}

.bk-bankdaten {
	margin-top: 18px;
	padding: 20px;
	border: 1px solid var(--bk-linie);
	border-radius: 14px;
	background: var(--background-1);
}

.bk-hinweis {
	margin: 0 0 8px;
	color: var(--bk-still);
	font-size: 13px;
}

/* Die Zusammenfassung eines Blocks, den ein Bestandskunde nicht mehr ausfuellen muss: Was am
   Konto steht, und daneben der Weg, es doch zu aendern. */
.bk-kurz {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--background-1);
}

.bk-kurz__text {
	flex: 1 1 auto;
	margin: 0;
	line-height: 1.5;
	text-align: left;
	white-space: pre-line;
}

.bk-kurz__link {
	flex: 0 0 auto;
	color: var(--bk-blau-dunkel);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.bk-kurz__link:hover,
.bk-kurz__link:focus {
	color: var(--bk-blau);
}

/* ---------- Bausteine (BausteinAuswahlPanel) ----------
   Aussehen und Aufbau der Liste bringt das Panel selbst mit, die Farben kommen oben aus .bk. Hier steht
   nur der Abstand zur Zahlweise darueber. */

.bk .konf-gruppe:first-child {
	margin-top: 28px;
}

/* ---------- Segment-Umschalter (Waehrung) ----------
   Wie der Waehrungsumschalter der Preisseite (pricing2026-period--compact): ein Rahmen mit
   Innenabstand, darin Knoepfe, von denen der gewaehlte blau gefuellt ist. */

.bk-segment {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px;
	border: 1px solid var(--bk-linie);
	border-radius: 14px;
	background: var(--background-0);
}

.bk-segment__knopf {
	/* Block, nicht inline: Der Link steht in einem <wicket:container>, der im Entwicklungsmodus im
	   Markup bleibt. Dann ist er kein Flex-Kind mehr, und der senkrechte Innenabstand eines
	   Inline-Elements traegt nicht zur Hoehe bei -- oben und unten fielen verschieden aus. */
	display: block;
	min-width: 44px;
	padding: 6px 10px;
	/* Konzentrisch zum Rahmen: aussen 14px minus 3px Innenabstand. */
	border-radius: 11px;
	color: var(--bk-still);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.55;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.bk-segment__knopf:hover,
.bk-segment__knopf:focus-visible {
	color: var(--bk-blau-dunkel);
	text-decoration: none;
}

.bk-segment__knopf:focus-visible {
	outline: 3px solid var(--brand-primary-200);
	outline-offset: 2px;
}

.bk-segment__knopf.active,
.bk-segment__knopf.active:hover {
	background: var(--bk-blau);
	color: var(--brand-primary-0);
	box-shadow: var(--shadow-light);
}

/* ---------- Bestellkasten rechts ---------- */

.bk-uebersicht {
	position: sticky;
	top: 90px;
	padding: 28px;
	border: 2px solid var(--bk-blau);
	border-radius: 18px;
	background: var(--background-0);
	box-shadow: var(--shadow-medium);
}

.bk-uebersicht__titel {
	margin: 0 0 16px;
	color: var(--bk-still);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bk-uebersicht__posten {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	font-size: 14px;
}

.bk-uebersicht__posten > span:last-child,
.bk-uebersicht__zeile > span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bk-uebersicht__posten--rabatt {
	color: var(--accent-success-700);
	font-weight: 600;
}

.bk-uebersicht__trenner {
	margin: 14px 0;
	border: 0;
	border-top: 1px solid var(--bk-linie);
}

.bk-uebersicht__zeile {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
	font-size: 15px;
	font-weight: 600;
}

.bk-uebersicht__zeile--still {
	color: var(--bk-still);
	font-size: 13px;
	font-weight: 400;
}

.bk-uebersicht__summe {
	margin: 4px 0 22px;
}

.bk-uebersicht__summe > span:first-child {
	display: block;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.bk-uebersicht__periode {
	color: var(--bk-still);
	font-size: 13px;
}

/* Bei jaehrlicher Zahlung unter der grossen Zahl: was die Zahlweise gegenueber monatlich spart. */
.bk-uebersicht__ersparnis {
	display: flex;
	gap: 6px;
	align-items: baseline;
	margin-top: 8px;
	color: var(--accent-success-700);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.bk-uebersicht__ersparnis::before {
	content: "\2713";
}

/* Steht unter der grossen Zahl, wenn diese nur die anteilige erste Rechnung ist. */
.bk-uebersicht__folge {
	display: block;
	margin-top: 8px;
	color: var(--bk-still);
	font-size: 13px;
	line-height: 1.45;
}

/* Zwei Klassen: Im Angebotskonfigurator steht der Kasten in der Preisseite, und deren ".pricing2026-page p" nahm
   dem Hinweis unter dem Knopf sonst den Abstand. */
.bk-uebersicht .bk-uebersicht__hinweis {
	margin: 16px 0 0;
	color: var(--bk-still);
	font-size: 12px;
	line-height: 1.45;
}

.bk-uebersicht__hinweis a {
	color: var(--bk-blau-dunkel);
}

.bk-paypal:not(:empty) {
	margin-top: 4px;
}

/* ---------- Knopf wie pricing2026-button--primary ---------- */

.bk-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 24px;
	border: 1px solid var(--bk-blau);
	border-radius: 11px;
	background: var(--bk-blau);
	color: var(--brand-primary-0);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--shadow-light);
	transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.bk-knopf:hover,
.bk-knopf:focus {
	transform: translateY(-1px);
	background: var(--bk-blau-dunkel);
	color: var(--brand-primary-0);
	text-decoration: none;
}

.bk-knopf:focus-visible {
	outline: 3px solid var(--brand-tertiary-100);
	outline-offset: 2px;
}

.bk-knopf:active {
	transform: translateY(0);
}

.bk-knopf[disabled] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* Waehrend die Bestellung laeuft: gesperrt, aber nicht ausgegraut, mit drehendem Ring vor dem Text. */
.bk-knopf--laedt,
.bk-knopf--laedt:hover,
.bk-knopf--laedt:focus {
	background: var(--bk-blau-dunkel);
	cursor: progress;
	transform: none;
}

.bk-knopf--laedt[disabled] {
	opacity: 0.9;
	cursor: progress;
}

.bk-knopf--laedt::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	border: 2px solid rgb(255 255 255 / 35%);
	border-top-color: var(--brand-primary-0);
	border-radius: 50%;
	animation: bk-knopf-dreht 700ms linear infinite;
}

@keyframes bk-knopf-dreht {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bk-knopf--laedt::before {
		animation-duration: 1.5s;
	}
}

.bk-knopf--breit {
	width: 100%;
}

/* ---------- Meldungen ---------- */

.bk-meldungen ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

/* Wicket haengt die Art der Meldung als Klasse an das li -- ohne die Unterscheidung stand die
   Bestellbestaetigung in einem roten Fehlerkasten. */
.bk-meldungen li {
	margin-bottom: 8px;
	padding: 10px 14px;
	border: 1px solid var(--bk-linie);
	border-radius: 10px;
	background: var(--background-1);
	font-size: 14px;
	line-height: 1.4;
}

.bk-meldungen li.feedbackPanelERROR,
.bk-meldungen li.feedbackPanelFATAL {
	border-color: var(--accent-error-200);
	background: var(--accent-error-100);
	color: var(--accent-error-700);
}

.bk-meldungen li.feedbackPanelINFO,
.bk-meldungen li.feedbackPanelSUCCESS {
	border-color: var(--accent-success-100);
	background: var(--accent-success-100);
	color: var(--accent-success-700);
}

@media (hover: none) {
	.bk-knopf:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bk-knopf,
	.bk-wahl,
	.bk .form-control {
		transition: none;
	}

	.bk-knopf:hover,
	.bk-knopf:focus {
		transform: none;
	}
}

@media (max-width: 991px) {
	.bk-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bk-spalte {
		height: auto;
	}

	.bk-uebersicht {
		position: static;
	}
}

@media (max-width: 767px) {
	.bk > * {
		width: calc(100% - 32px);
	}

	.bk-kopf {
		padding: 36px 0 24px;
	}

	.bk-kopf__text {
		font-size: 16px;
	}

	.bk-block,
	.bk-uebersicht {
		padding: 20px;
	}

	.bk-bestaetigung {
		margin-top: 32px;
		padding: 32px 20px;
	}

	.bk-reihe,
	.bk-kacheln {
		grid-template-columns: minmax(0, 1fr);
	}

	.bk-feld--schmal,
	.bk-feld--kurz {
		max-width: none;
	}

	.bk-position {
		padding: 14px 16px;
	}

	.bk-position {
		flex-direction: column;
		align-items: flex-start;
	}
}