/* ==========================================================================
   Kreislaufkraft · Kontoseite
   --------------------------------------------------------------------------
   Aufbau und Anordnung stehen in Elementor auf der Seite "My account", die
   Zahlen liefern die Shortcodes aus der functions.php. Hier steht das Aussehen.

   Drei Zustaende teilen sich dieselbe Seite:
     abgemeldet          nur das Anmeldeformular, ohne Seitenleiste
     Uebersicht          die eigenen Karten (Body traegt woocommerce-dashboard)
     Unterseiten         Bestellungen, Adressen, Kontodaten von WooCommerce
   Umgeschaltet wird ueber die Body-Klassen, die WooCommerce ohnehin setzt.
   ========================================================================== */

.kk-konto {
	--kk-konto-linie: #E8E4DB;
	--kk-konto-karte: #FFFFFF;
	--kk-konto-sand: #E5DDD5;
	--kk-konto-leise: rgba(0, 0, 0, .55);
	--kk-konto-radius: 24px;
}

/* --- Umschaltung der drei Zustaende ------------------------------------- */

/* Ohne Anmeldung gibt es kein Konto, also auch keine Seitenleiste. */
body:not(.logged-in) .kk-konto__seite,
body:not(.woocommerce-dashboard) .kk-konto-dash {
	display: none;
}

/* Auf der Uebersicht ersetzen die eigenen Karten den Werksinhalt. Auf allen
   Unterseiten bleibt WooCommerce sichtbar, nur ohne seine eigene Navigation:
   die steht links in der Seitenleiste. */
body.woocommerce-dashboard .kk-konto-woo {
	display: none;
}

.kk-konto-woo .woocommerce-MyAccount-navigation {
	display: none;
}

.kk-konto-woo .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
}

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

/* Die Seitenleiste haelt ihre 280 px. Ohne min-width: 0 rechnet die rechte
   Spalte mit der Mindestbreite ihres Inhalts und schiebt die Leiste zusammen. */
.kk-konto .kk-konto__seite {
	--flex-shrink: 0;
	flex-shrink: 0;
}

.kk-konto .kk-konto__inhalt {
	min-width: 0;
}

/* Solange zwei Spalten nebeneinander stehen, laeuft die Seitenleiste mit und
   bleibt 25 px unter dem Kopfbereich haengen. `--kk-header-h` misst dessen
   Hoehe zur Laufzeit - fest eingetragen waere sie falsch, sobald der Kopf
   umbricht. `align-self` ist noetig, weil ein Flex-Kind sonst auf die Hoehe
   der Zeile gestreckt wird und dann nichts zu kleben hat. Die Hoehenbremse
   faengt ab, dass eine wachsende Leiste unten unerreichbar wird. */
@media (min-width: 1025px) {
	.kk-konto .kk-konto__seite {
		--kk-konto-oben: calc(var(--kk-header-h, 96px) + 25px);
		position: sticky;
		top: var(--kk-konto-oben);
		align-self: flex-start;
		max-height: calc(100vh - var(--kk-konto-oben) - 25px);
		overflow-y: auto;
	}

	/* Angemeldet schiebt die Werkzeugleiste von WordPress den fixierten Kopf
	   um 32 px nach unten. Ohne diesen Zuschlag verschwindet die Leiste im
	   Redaktionsblick unter dem Kopf - fuer Besucher stimmte sie schon. */
	body.admin-bar .kk-konto .kk-konto__seite {
		--kk-konto-oben: calc(var(--kk-header-h, 96px) + 25px + 32px);
	}
}

/* --- Seitenleiste ------------------------------------------------------- */

.kk-konto-profil {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 28px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--kk-konto-linie);
}

.kk-konto-profil__initial {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 50%;
	color: var(--e-global-color-accent);
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h4, 18px);
	line-height: 1;
}

.kk-konto-profil__label {
	display: block;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
	margin-bottom: 4px;
}

.kk-konto-profil__name {
	display: block;
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h3, 24px);
	line-height: 1.15;
	color: #171717;
}

.kk-konto-profil__rolle {
	display: block;
	margin-top: 2px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	color: var(--kk-konto-leise);
}

/* Gruppentitel ueber den Navigationsbloecken */
.kk-konto-gruppe .elementor-heading-title {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .38);
}

/* Die Navigation ist eine Elementor-Symbolliste, damit sie im Editor
   bearbeitbar bleibt. Hier bekommt sie nur ihr Aussehen. */
.kk-konto-nav .elementor-icon-list-item {
	border-radius: 14px;
	transition: background-color .18s ease, color .18s ease;
}

.kk-konto-nav .elementor-icon-list-item > a {
	position: relative;
	padding: 12px 14px;
}

.kk-konto-nav .elementor-icon-list-item:hover {
	background: rgba(0, 0, 0, .03);
}

/* Aktive Seite: nur die getoente Flaeche, kein Balken am linken Rand mehr
   (auf Wunsch entfernt am 08.09.2026). Welcher Eintrag das ist, verraet die
   Body-Klasse von WooCommerce, deshalb kommt die Markierung ohne PHP und
   ohne JavaScript aus. */
/* Der Anker folgt dem Slug der Kontoseite (seit 07.09.2026 "mein-konto"). */
body.woocommerce-dashboard      .kk-konto-nav a[href$="/mein-konto/"],
body.woocommerce-orders         .kk-konto-nav a[href*="/orders"],
body.woocommerce-view-order     .kk-konto-nav a[href*="/orders"],
body.woocommerce-edit-address   .kk-konto-nav a[href*="/edit-address"],
body.woocommerce-edit-account   .kk-konto-nav a[href*="/edit-account"] {
	background: color-mix(in srgb, var(--e-global-color-accent) 9%, transparent);
	border-radius: 14px;
}

body.woocommerce-dashboard      .kk-konto-nav a[href$="/mein-konto/"] .elementor-icon-list-text,
body.woocommerce-orders         .kk-konto-nav a[href*="/orders"] .elementor-icon-list-text,
body.woocommerce-view-order     .kk-konto-nav a[href*="/orders"] .elementor-icon-list-text,
body.woocommerce-edit-address   .kk-konto-nav a[href*="/edit-address"] .elementor-icon-list-text,
body.woocommerce-edit-account   .kk-konto-nav a[href*="/edit-account"] .elementor-icon-list-text {
	color: var(--e-global-color-accent);
}

.kk-konto-abmelden {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--kk-konto-linie);
}

/* Abmelden ist der einzige Eintrag, der etwas beendet - er traegt deshalb die
   Fehlerfarbe der Marke statt des normalen Schwarz. Die Auswahlketten sind so
   lang, weil Elementor die Farben des Widgets mit vier Klassen schreibt und
   seine Datei nach dieser hier geladen wird. */
.kk-konto .kk-konto__seite .kk-konto-nav--abmelden .elementor-icon-list-item .elementor-icon-list-text {
	color: var(--kk-status-fehler, #B4462E);
}

.kk-konto .kk-konto__seite .kk-konto-nav--abmelden .elementor-icon-list-item .elementor-icon-list-icon svg {
	fill: var(--kk-status-fehler, #B4462E);
}

.kk-konto .kk-konto-nav--abmelden .elementor-icon-list-item:hover {
	background: color-mix(in srgb, var(--kk-status-fehler, #B4462E) 8%, transparent);
}

/* --- Karten ------------------------------------------------------------- */

.kk-konto-karte {
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-radius: var(--kk-konto-radius);
	box-shadow: 0 2px 10px rgba(23, 23, 23, .05);
}

.kk-konto-eyebrow .elementor-heading-title {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
}

/* Begruessung. Statt des Models aus der Vorlage traegt die Flaeche den
   Sandton der Marke: ein Portraet gibt es hier nicht, und ein beliebiges
   Produktfoto haette an dieser Stelle nichts zu sagen. */
.kk-konto-hero {
	background: var(--kk-konto-sand);
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: var(--kk-konto-radius);
	overflow: hidden;
	position: relative;
}

.kk-konto-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 180px;
	height: 180px;
	background: color-mix(in srgb, var(--e-global-color-accent) 10%, transparent);
	border-bottom-left-radius: 100%;
	pointer-events: none;
}

/* --- Letzte Bestellung, Zahlen ----------------------------------------- */

.kk-konto-letzte__nr {
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h3, 24px);
	line-height: 1.2;
	color: #171717;
	margin: 0 0 6px;
}

.kk-konto-letzte__text {
	margin: 10px 0 20px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	line-height: 1.7;
	color: var(--kk-konto-leise);
}

.kk-konto-status {
	display: inline-block;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
}

.kk-konto-status--cancelled,
.kk-konto-status--failed,
.kk-konto-status--refunded {
	color: #B4462E;
}

.kk-konto-status--pending,
.kk-konto-status--on-hold {
	color: #A8760A;
}

/* Knopf im Kartenformat: gleiche Pillenform wie ueberall sonst. Der
   Elternteil steht mit in der Kette, weil die Linkfarbe des Kits sonst
   gewinnt und den Knopf gruen auf gruen faerbt. */
.kk-konto .kk-konto-knopf {
	display: inline-block;
	padding: 13px 26px;
	background: var(--e-global-color-accent);
	border-radius: 30px;
	color: #FFFFFF;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease;
}

.kk-konto .kk-konto-knopf:hover {
	background: #548A0B;
	color: #FFFFFF;
}

.kk-konto-textlink {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kk-konto-textlink:hover {
	color: #548A0B;
}

.kk-konto-leer {
	margin: 0 0 12px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	color: var(--kk-konto-leise);
}

/* --- Kacheln "Auf einen Blick" ----------------------------------------- */

.kk-konto-kachel {
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-radius: 16px;
}

.kk-konto-kachel .elementor-icon-box-title {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.kk-konto-kachel .elementor-icon-box-description {
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h4, 18px);
	color: #171717;
}

/* --- Bestellliste ------------------------------------------------------- */

.kk-konto-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kk-konto-liste__zeile {
	display: grid;
	grid-template-columns: 56px 1fr auto auto auto;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid #F3F0EA;
}

.kk-konto-liste__zeile:first-child {
	border-top: 0;
	padding-top: 0;
}

.kk-konto-liste__bild img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.kk-konto-liste__nr {
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-body, 15px);
	color: #171717;
}

.kk-konto-liste__nr small {
	display: block;
	margin-top: 2px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	color: var(--kk-konto-leise);
}

.kk-konto-liste__preis {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	color: #171717;
}

.kk-konto-liste__link {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* --- Adressen ----------------------------------------------------------- */

.kk-konto-adressen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 28px;
}

.kk-konto-adresse__titel {
	margin: 0 0 10px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #171717;
}

.kk-konto-adresse address {
	margin: 0 0 12px;
	font-style: normal;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	line-height: 1.8;
	color: #171717;
}

/* --- Empfehlungen ------------------------------------------------------- */

/* Das Produktraster des Shops rechnet mit der vollen Seitenbreite; in der
   Karte laufen die Spalten sonst nach rechts hinaus. minmax(0, 1fr) bindet
   sie an die Karte statt an die Bildbreite. */
.kk-konto-karte--empfehlung ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 20px;
	margin: 0;
}

.kk-konto-karte--empfehlung ul.products li.product {
	width: auto;
	margin: 0;
}

/* --- WooCommerce-Unterseiten im Kartenformat ---------------------------- */

.kk-konto-woo .woocommerce-MyAccount-content {
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-radius: var(--kk-konto-radius);
	box-shadow: 0 2px 10px rgba(23, 23, 23, .05);
	padding: 32px;
}

.kk-konto-woo table.woocommerce-orders-table,
.kk-konto-woo table.shop_table {
	border: 0;
	margin: 0;
}

.kk-konto-woo table.shop_table th,
.kk-konto-woo table.shop_table td {
	border: 0;
	border-bottom: 1px solid #F3F0EA;
	padding: 14px 8px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
}

.kk-konto-woo table.shop_table thead th {
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kk-konto-leise);
}

/* --- Anmeldung und Formulare -------------------------------------------- */

/* Abgemeldet steht nur das Anmeldeformular auf der Seite. Elementor faerbt
   die Knoepfe seines Konto-Widgets ueber eine sehr lange Auswahlkette, also
   ist die Kette hier ebenso lang. */

body:not(.logged-in) .kk-konto-woo .woocommerce > h2 {
	max-width: 460px;
	margin: 0 auto 16px;
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h2, 32px);
	font-weight: 500;
	color: #171717;
}

.kk-konto-woo form.woocommerce-form-login {
	max-width: 460px;
	margin: 0 auto;
	padding: 32px;
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-radius: var(--kk-konto-radius);
	box-shadow: 0 2px 10px rgba(23, 23, 23, .05);
}

.kk-konto-woo .woocommerce label {
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kk-konto-leise);
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .login input.input-text,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce input.input-text,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce textarea {
	padding: 12px 18px;
	background: #FBFAF8;
	border: 1px solid var(--kk-konto-linie);
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	color: #171717;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce input.input-text:focus,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce textarea:focus {
	background: var(--kk-konto-karte);
	border-color: var(--e-global-color-accent);
	outline: none;
}

/* Das Auge zum Aufdecken des Passworts sitzt im Feld, es braucht Platz. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-password-input input.input-text {
	padding-right: 46px;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .login button.button,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce button.button,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a.button {
	padding: 13px 30px;
	background: var(--e-global-color-accent);
	color: var(--kk-konto-karte);
	border: 0;
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .18s ease;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .login button.button:hover,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .login button.button:focus,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce button.button:hover,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce button.button:focus,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a.button:hover,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a.button:focus {
	background: var(--kk-gruen-hell);
	color: var(--kk-konto-karte);
}

.kk-konto-woo .woocommerce label.woocommerce-form-login__rememberme {
	margin-left: 16px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-meta, 12px);
	letter-spacing: 0;
	text-transform: none;
	color: var(--kk-konto-leise);
}

.kk-konto-woo .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kk-konto-woo .woocommerce-LostPassword a {
	color: var(--e-global-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 1024px) {
	.kk-konto-karte--empfehlung ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kk-konto-liste__zeile {
		grid-template-columns: 48px 1fr auto;
		row-gap: 8px;
	}

	.kk-konto-liste__bild img {
		width: 48px;
		height: 48px;
	}

	.kk-konto-liste__link {
		grid-column: 2 / -1;
		justify-self: start;
	}
}

@media (max-width: 767px) {
	/* Auf dem Telefon steht die Navigation vor dem Inhalt. Als Reihe von
	   Chips braucht sie einen Bruchteil der Hoehe, die eine Liste faende. */
	.kk-konto-nav .elementor-icon-list-items {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.kk-konto-nav .elementor-icon-list-item {
		width: auto;
		background: var(--kk-konto-karte);
		border: 1px solid var(--kk-konto-linie);
	}

	.kk-konto-nav .elementor-icon-list-item > a {
		padding: 9px 14px;
	}

	.kk-konto-karte--empfehlung ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.kk-konto-profil {
		padding-bottom: 20px;
	}

	.kk-konto-letzte__nr {
		font-size: var(--kk-fs-h3, 24px);
	}

	.kk-konto .kk-konto-woo.elementor-widget .e-my-account-tab .woocommerce-MyAccount-content,
	.kk-konto-woo .woocommerce-MyAccount-content {
		padding: 28px 20px;
	}

	.kk-konto .kk-konto-woo__titel {
		font-size: var(--kk-fs-h3, 24px);
	}

	/* Vorname und Nachname stehen bei WooCommerce nebeneinander. Auf 375
	   Pixeln bleiben davon 114 Pixel je Feld - untereinander ist lesbarer. */
	.kk-konto .kk-konto-woo .woocommerce-MyAccount-content .form-row-first,
	.kk-konto .kk-konto-woo .woocommerce-MyAccount-content .form-row-last {
		float: none;
		width: 100%;
	}
}


/* ==========================================================================
   Anmelden und Registrieren (abgemeldet)
   --------------------------------------------------------------------------
   Der Bereich steht in Elementor als eigener Container .kk-login ganz oben
   auf der Seite und holt sich Anmeldung und Registrierung ueber den Shortcode
   [kk_konto_anmeldung] direkt von WooCommerce. Vorher rutschte das Formular
   in die Uebersichts-Spalte, die abgemeldet ausgeblendet ist, und war dort
   nur 62 Pixel breit.

   Welcher der beiden Bereiche erscheint, entscheiden allein die Body-Klassen:
     abgemeldet          .kk-login
     Passwort vergessen  das Werkslayout, denn nur dessen Widget kennt den
                         Endpunkt
     angemeldet          das Werkslayout
   ========================================================================== */

body.logged-in .kk-login,
body.woocommerce-lost-password .kk-login {
	display: none;
}

body:not(.logged-in):not(.woocommerce-lost-password) .kk-konto__raster {
	display: none;
}

.kk-login {
	padding-block: clamp(24px, 5vw, 64px);
}

.kk-login__kopf {
	align-items: center;
	text-align: center;
}

.kk-login__kopf .elementor-widget-text-editor {
	max-width: 52ch;
}

/* --- Die beiden Formulare als Bento ------------------------------------- */

/* WooCommerce liefert zwei float-Spalten aus. Als Raster stehen sie gleich
   hoch nebeneinander und brauchen kein clearfix. */
.kk-login__formulare #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

/* Das clearfix der Float-Spalten muss weg: im Raster zaehlt jedes
   Pseudoelement als eigene Zelle. Mit ihnen landete die Anmeldung in der
   zweiten Spalte und die Registrierung eine Zeile tiefer. */
.kk-login__formulare #customer_login::before,
.kk-login__formulare #customer_login::after {
	content: none;
}

.kk-login__formulare #customer_login > div {
	float: none;
	width: auto;
	margin: 0;
	padding: 36px;
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-radius: var(--kk-konto-radius);
	box-shadow: 0 2px 10px rgba(23, 23, 23, .05);
}

/* Die Registrierung ist der ruhigere der beiden Wege: heller Grund, damit
   die Anmeldung als erster Blickpunkt bleibt. */
.kk-login__formulare #customer_login > .u-column2 {
	background: #FBFAF8;
}

.kk-login__formulare #customer_login h2 {
	margin: 0 0 6px;
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h3, 24px);
	font-weight: 500;
	line-height: 1.2;
	color: #171717;
}

.kk-login__formulare form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.kk-login__formulare .woocommerce-form-row {
	margin-bottom: 14px;
	padding: 0;
}

.kk-login__formulare label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kk-konto-leise);
}

.kk-login__formulare input.input-text,
.kk-login__formulare input[type="password"],
.kk-login__formulare input[type="email"],
.kk-login__formulare input[type="text"] {
	width: 100%;
	padding: 12px 18px;
	background: #FBFAF8;
	border: 1px solid var(--kk-konto-linie);
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	color: #171717;
}

.kk-login__formulare #customer_login > .u-column2 input.input-text {
	background: var(--kk-konto-karte);
}

.kk-login__formulare input.input-text:focus {
	border-color: var(--e-global-color-accent);
	outline: none;
}

/* Das Auge zum Aufdecken des Passworts sitzt im Feld und braucht Platz. */
.kk-login__formulare .woocommerce-password-input {
	position: relative;
	display: block;
}

.kk-login__formulare .woocommerce-password-input input.input-text {
	padding-right: 46px;
}

.kk-login__formulare button.button,
.kk-login__formulare .button {
	display: inline-block;
	margin: 4px 0 0;
	padding: 13px 30px;
	background: var(--e-global-color-accent);
	color: var(--kk-konto-karte);
	border: 0;
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease;
}

/* Die Textfarbe steht hier noch einmal, obwohl die gefuellte Stufe in
   kk-woocommerce.css sie schon setzt: sonst haengt Weiss allein an der
   Ladereihenfolge der beiden Dateien. */
.kk-login__formulare button.button:hover,
.kk-login__formulare button.button:focus {
	background: var(--kk-gruen-hell);
	color: #FFFFFF;
}

.kk-login__formulare .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: var(--kk-fs-meta, 12px);
	letter-spacing: 0;
	text-transform: none;
	color: var(--kk-konto-leise);
}

.kk-login__formulare .woocommerce-form-login__rememberme input {
	margin: 0;
}

.kk-login__formulare .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kk-login__formulare .woocommerce-LostPassword a {
	color: var(--e-global-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Der Datenschutzhinweis unter der Registrierung ist Beiwerk, kein Fliesstext. */
.kk-login__formulare .woocommerce-privacy-policy-text p,
.kk-login__formulare .woocommerce-form-register__submit + p {
	margin: 14px 0 0;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	line-height: 1.7;
	color: var(--kk-konto-leise);
}

.kk-login__formulare .woocommerce-privacy-policy-text a {
	color: var(--e-global-color-accent);
}

/* Meldungen (falsches Passwort, Konto angelegt) stehen ueber den Karten. */
.kk-login__formulare .woocommerce-error,
.kk-login__formulare .woocommerce-message,
.kk-login__formulare .woocommerce-info {
	margin: 0 0 20px;
	padding: 14px 20px;
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-left: 3px solid var(--e-global-color-accent);
	border-radius: 14px;
	list-style: none;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-meta, 12px);
	line-height: 1.7;
}

/* --- Unterseiten: Bestellungen, Adressen, Kontodaten -------------------- */

/* WooCommerce stellt den Inhalt als 75-Prozent-Spalte neben seine eigene
   Navigation. Die steht hier links in der Seitenleiste und ist ausgeblendet;
   ohne diese Regel bliebe ihr Viertel als Leerraum stehen und die Karte
   klebte am rechten Rand. Die Kette ist so lang, weil Elementors Konto-Widget
   dieselbe Eigenschaft mit vier Klassen setzt. */
.kk-konto .kk-konto-woo.elementor-widget .e-my-account-tab .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin: 0;
	/* Elementor setzt hier eine eigene Polsterung, die oben und unten auf null
	   steht - Ueberschrift und Knopf klebten dadurch an der Kartenkante. */
	padding: 44px 48px;
}

/* Elementors Konto-Widget legt um seinen Inhalt noch einen eigenen Kasten und
   umrandet jede Adresse ein zweites Mal. Zusammen mit der Karte ergab das
   doppelte und dreifache Rahmen. Die Karte bleibt, die Kaesten darin gehen. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce-MyAccount-content-wrapper,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce table.shop_table,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce address,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-Address address {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Elementor faerbt die Verweise der Endpunkt-Seiten hellblau - "Adresse
   bearbeiten", "Adresse hinzufuegen". Sie folgen hier dem Markengruen. Die
   Knoepfe weiter unten bleiben davon unberuehrt, ihre Ketten sind laenger. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .shop_table.woocommerce-orders-table a:not(.button),
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .shop_table.order_details a:not(.button) {
	color: var(--e-global-color-accent);
}

/* Der Bearbeiten-Verweis stand absolut positioniert im Rahmen der Adresse.
   Ohne den Rahmen fehlte ihm der Platz und er lag ueber der Anschrift - er
   reiht sich jetzt unter die Ueberschrift ein. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 14px;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-Address-title .edit {
	position: static;
	margin: 0;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-Address-title h2,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h3, 24px);
	font-weight: 500;
	line-height: 1.2;
}

/* WooCommerce misst die Hoehe der Anschrift per Skript und schreibt sie ins
   Attribut. Ohne den Rahmen stimmt der Wert nicht mehr. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-Address address {
	height: auto !important;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	font-style: normal;
	line-height: 1.9;
	color: #171717;
}

/* Die Zwischenueberschriften kommen von WooCommerce ("Bestelldetails",
   "Rechnungsadresse") und standen in Roboto - der Schrift, die Elementors
   Kit ab Werk mitbringt. Auf dieser Seite schreibt Fraunces alle
   Ueberschriften. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce h1,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce h2,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce h3,
.kk-konto .kk-konto-woo .woocommerce-MyAccount-content h2,
.kk-konto .kk-konto-woo .woocommerce-MyAccount-content h3 {
	margin: 34px 0 16px;
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h3, 24px);
	font-weight: 500;
	line-height: 1.2;
	color: #171717;
}

/* Ueberschrift ueber der Karte, aus der functions.php. */
.kk-konto .kk-konto-woo__titel {
	margin: 0 0 18px;
	font-family: var(--kk-font-display, Fraunces, Georgia, serif);
	font-size: var(--kk-fs-h2, 32px);
	font-weight: 500;
	line-height: 1.15;
	color: #171717;
}

/* Verweise in den Tabellen - "Anzeigen", "Adresse bearbeiten" - sind
   Nebenwege und stehen deshalb als Umriss, nicht als gefuellter Knopf.
   Elementor faerbt genau diese Knoepfe ueber sechs Klassen hellblau ein,
   .shop_table steht deshalb mit in der Kette. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .shop_table a.button,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a.button {
	padding: 9px 20px;
	background: transparent;
	border: 1px solid var(--kk-konto-linie);
	border-radius: 30px;
	color: #171717;
	font-size: var(--kk-fs-overline, 11px);
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .shop_table a.button:hover,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .shop_table a.button:focus,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a.button:hover,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce a.button:focus {
	background: color-mix(in srgb, var(--e-global-color-accent) 8%, transparent);
	border-color: var(--e-global-color-accent);
	color: var(--e-global-color-accent);
}

/* Die Bestelltabelle bekommt Luft und bricht das Datum nicht mehr um. */
.kk-konto .kk-konto-woo table.shop_table td,
.kk-konto .kk-konto-woo table.shop_table th {
	white-space: nowrap;
}

.kk-konto .kk-konto-woo table.shop_table td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

/* Formulare auf "Adressen" und "Kontodaten": zwei Spalten, wo WooCommerce
   ohnehin zwei vorsieht, sonst eine. */
.kk-konto .kk-konto-woo .woocommerce-MyAccount-content form .woocommerce-form-row {
	margin-bottom: 16px;
}

/* Elementor setzt Feldform und Trennlinie ueber Ketten mit sechs Klassen -
   .form-row und .woocommerce-EditAccountForm stehen deshalb mit drin. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .form-row input.input-text,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .form-row textarea,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .form-row select {
	padding: 12px 18px;
	background: #FBFAF8;
	border: 1px solid var(--kk-konto-linie);
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
	color: #171717;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .form-row input.input-text:focus {
	background: var(--kk-konto-karte);
	border-color: var(--e-global-color-accent);
	outline: none;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-EditAccountForm fieldset,
.kk-konto .kk-konto-woo .woocommerce-MyAccount-content fieldset {
	margin: 28px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--kk-konto-linie);
}

.kk-konto .kk-konto-woo .woocommerce-MyAccount-content legend {
	padding: 0;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kk-konto-leise);
}

/* Die Adressen stehen nebeneinander, solange Platz ist. */
.kk-konto .kk-konto-woo .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.kk-konto .kk-konto-woo .woocommerce-Addresses::before,
.kk-konto .kk-konto-woo .woocommerce-Addresses::after {
	content: none;
}

.kk-konto .kk-konto-woo .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	margin: 0;
}

@media (max-width: 767px) {
	/* Steht bewusst hier und nicht im Abschnitt "Schmale Fenster" weiter oben:
	   der kommt in der Datei frueher, und bei gleicher Spezifitaet gewinnt die
	   spaetere Regel. */
	.kk-konto .kk-konto-woo.elementor-widget .e-my-account-tab .woocommerce-MyAccount-content {
		padding: 28px 20px;
	}

	.kk-konto .kk-konto-woo .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	.kk-konto .kk-konto-woo table.shop_table td,
	.kk-konto .kk-konto-woo table.shop_table th {
		white-space: normal;
	}
}

/* --- Passwort vergessen ------------------------------------------------- */

/* Diese eine Unterseite faerbt Elementor selbst ein - und zwar hellblau, ueber
   eine Kette mit sechs Klassen. Die Regeln weiter oben haben eine Klasse
   weniger und verlieren deshalb. Hier steht dieselbe Laenge, damit der Knopf
   gruen bleibt wie alle anderen. */
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-ResetPassword .button {
	padding: 13px 30px;
	background: var(--e-global-color-accent);
	color: var(--kk-konto-karte);
	border: 0;
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-overline, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-ResetPassword .button:hover,
.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-ResetPassword .button:focus {
	background: var(--kk-gruen-hell);
}

.kk-konto .kk-konto-woo .e-my-account-tab .woocommerce .woocommerce-ResetPassword input.input-text {
	padding: 12px 18px;
	background: #FBFAF8;
	border: 1px solid var(--kk-konto-linie);
	border-radius: 30px;
	font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace);
	font-size: var(--kk-fs-body-s, 13px);
}

/* --- Kontakt und haeufige Fragen ---------------------------------------- */

.kk-login__hilfe-karte {
	flex: 1 1 0;
	background: var(--kk-konto-karte);
	border: 1px solid var(--kk-konto-linie);
	border-radius: var(--kk-konto-radius);
	box-shadow: 0 2px 10px rgba(23, 23, 23, .05);
}

.kk-login__hilfe-karte .elementor-widget-text-editor {
	margin-bottom: 4px;
}

@media (max-width: 767px) {
	.kk-login__formulare #customer_login {
		grid-template-columns: minmax(0, 1fr);
	}

	.kk-login__formulare #customer_login > div {
		padding: 24px 20px;
	}

	.kk-login__hilfe-karte {
		padding: 24px 20px;
	}
}