/*
Theme Name: Autenova Portal
Theme URI: https://autenova.com
Author: Autenova
Description: Block-Theme für das Autenova-Kundenportal. Übernimmt den Look der Autenova-Website (dunkler Hintergrund #020617, Geist, Markenblau #2866c3, helle Kopfleiste) und richtet WooCommerce darauf aus.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autenova-portal-theme
Tags: block-theme, e-commerce, dark
*/

/*
 * Almost everything visual lives in theme.json — this file only holds what the
 * global-styles system cannot express: WooCommerce's classic markup (it is not
 * all blocks), and the few components this shop adds itself.
 */

/* --------------------------------------------------------------- Schriften --- */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/geist-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------------ Layout --- */

body {
	-webkit-font-smoothing: antialiased;
}

/*
 * Kopf- und Fußbereich sind Zeile für Zeile nach der Autenova-Website gebaut
 * (~/git/autenova-website/src/components/{Header,Footer,LanguageSwitcher,MobileMenu}.tsx).
 * Dort stehen Tailwind-Klassen, hier die aufgelösten Werte — die Kommentare
 * nennen die Tailwind-Entsprechung, damit sich beide Seiten vergleichen lassen,
 * ohne die Utility-Namen im Kopf umrechnen zu müssen.
 *
 * Maße, die beide Seiten teilen: Inhaltsbreite 1152px (max-w-6xl), Innenabstand
 * 24px (px-6), Umbruchpunkt 768px (md).
 */

/*
 * Tailwind setzt `box-sizing: border-box` global (Preflight); WordPress tut das
 * nicht. Ohne diese Zeile ist `.as-header__inner` 1152 + 2×24 = 1200px breit
 * statt 1152 — und das Logo sitzt exakt 24px weiter links als auf autenova.com.
 * Ein Fehler, der nur im direkten Vergleich auffällt und sich sonst als
 * "irgendwie verrutscht" anfühlt.
 */
.as-header__inner,
.as-footer__inner,
.as-footer__bottom,
.as-header__end,
.as-lang,
.as-lang__item,
.as-cart {
	box-sizing: border-box;
}

:root {
	--as-max: 1152px;   /* max-w-6xl */
	--as-gutter: 24px;  /* px-6 */
	--as-slate-200: #e2e8f0;
	--as-slate-500: #64748b;
	--as-slate-600: #475569;
	--as-slate-700: #334155;
	--as-slate-800: #1e293b;
	--as-slate-900: #0f172a;
	--as-brand-600: #2866c3;
	--as-brand-400: #6a97dd;
}

/* --------------------------------------------------------------- Kopfleiste --- */

/* sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--as-slate-200);
}

/* mx-auto flex max-w-6xl items-center justify-between px-6 py-4 */
.as-header__inner {
	margin: 0 auto;
	display: flex;
	max-width: var(--as-max);
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px var(--as-gutter);
}

/* Das Logo trägt denselben doppelten Schlagschatten wie auf autenova.com:
   eine dunkle Kante nach oben, eine helle nach unten. Er ist das, was das
   Logo auf der hellen Leiste plastisch macht — ohne ihn wirkt es aufgeklebt. */
.as-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	text-decoration: none;
}

/* Der Namenszusatz neben dem Logo — er beantwortet „auf welcher der drei
   Autenova-Seiten bin ich?". Bewusst rechts NEBEN dem Logo und nicht an seiner
   Stelle: die linke Kante des Logos ist auf allen drei Seiten dieselbe, und das
   soll sie bleiben. */
.as-logo__divider {
	width: 1px;
	height: 26px;
	/* slate-300, nicht slate-200: auf der hellen Milchglasleiste liest sich
	   #e2e8f0 als Weiß, der Strich verschwindet also. */
	background: #cbd5e1;
}

.as-logo__name {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--as-slate-900);
	white-space: nowrap;
}

/* Auf schmalen Fenstern hat der Name Vorrang vor dem Warenkorb-Text, aber
   nicht vor dem Logo — beides zusammen passt unter 420px nicht mehr. */
@media (max-width: 420px) {
	.as-logo__divider,
	.as-logo__name { display: none; }
}

.as-logo img {
	height: 56px; /* h-14 */
	width: auto;
	filter:
		drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.45))
		drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
}

/* flex items-center gap-1 */
.as-header__end {
	display: flex;
	align-items: center;
	gap: 4px;
}

/*
 * Der Umschalter steckt in einem eigenen Wrapper. Bis zum 2026-08-26 war der
 * unter 768px versteckt und die Pille wanderte ins Mobilmenü; seit dessen
 * Wegfall steht sie auf JEDER Breite hier. Dieser Wrapper MUSS ein
 * Flex-Container sein, kein Block:
 *
 * Als Block hängt die Pille (`inline-flex`) in einer Textzeile und richtet sich
 * an deren Grundlinie aus statt mittig. Die Zeilenhöhe kommt aus der
 * Grundschrift — und die ist in theme.json fließend, wächst also mit der
 * Fensterbreite. Ergebnis: die Pille wanderte je nach Fensterbreite um ±0.5px
 * nach oben oder unten. Sichtbar wenig, aber es sitzt eben nicht fest, und
 * genau das fällt im Vergleich mit autenova.com auf.
 *
 * Als Flex-Container gibt es keine Textzeile und keine Grundlinie mehr — die
 * Pille wird zentriert, bei jeder Breite gleich.
 */
.as-header__lang {
	display: flex;
	align-items: center;
}

/* Warenkorb: gleicher Ton und gleiche Größe wie die Navigationslinks, damit die
   rechte Seite nicht aus dem Autenova-Bild fällt. */
.as-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--as-slate-600);
	text-decoration: none;
	transition: color 0.15s, background-color 0.15s;
}

.as-cart:hover {
	color: var(--as-brand-600);
	background-color: #f1f5f9;
}

/* Auf der Kontoseite ist das Symbol eingefärbt. Seit dem Wegfall der
   Textnavigation (2026-08-26) ist das die EINZIGE Rückmeldung darüber, wo man
   steht — vorher gab es dieselbe Auskunft zusätzlich über
   `.as-nav__link.is-current`. Ohne sie wäre der Kopfbereich zustandslos. */
.as-cart.is-current {
	color: var(--as-brand-600);
}

/* Der Warenkorb zeigt nur das Symbol — auf allen Breiten.
 *
 * Der Text bleibt trotzdem im Dokument und wird NICHT mit `display: none`
 * entfernt: Das SVG daneben ist `aria-hidden`, der Text ist also die einzige
 * Beschriftung, die eine Vorleseanwendung findet. Weggeschaltet bliebe ein Link
 * ohne Namen — angesagt würde dann bestenfalls die Zieladresse.
 *
 * Also optisch verstecken, für Hilfsmittel lesbar lassen: aus dem Fluss nehmen,
 * auf einen Pixel schrumpfen, den Rest wegschneiden. `white-space: nowrap`
 * verhindert, dass der Text in der 1px-Box umbricht und manche Vorleser ihn
 * buchstabieren.
 */
.as-cart__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------- Anmeldung im Kopfbereich --- */

/* Der Vorname neben dem Symbol. Unter 640px weg — dort teilt sich die Leiste
   den Platz schon mit Logo, Warenkorb und Sprachumschalter; der Punkt am
   Symbol trägt die Auskunft dann allein. */
.as-account__name {
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.as-account__name { display: none; }
}

/* Der Punkt an der Ecke des Symbols. Als Pseudoelement auf einem eigenen
   Wrapper, nicht auf dem Link: Der Link ist ein Flex-Container mit mehreren
   Kindern, ein `::after` daran säße hinter dem Namen statt am Symbol. */
.as-account__symbol {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.as-account.is-angemeldet {
	color: var(--as-brand-600);
}

.as-account.is-angemeldet .as-account__symbol::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
	/* Ein Ring in der Farbe der Leiste trennt den Punkt vom Symbol darunter —
	   ohne ihn verschmilzt er mit der Schulter der Figur. */
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.as-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background: var(--as-brand-600);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

/* --------------------------------------------------------- Sprachumschalter --- */

/* inline-flex items-center rounded-full bg-slate-100 p-0.5 ring-1 ring-slate-200/70 */
.as-lang {
	display: inline-flex;
	align-items: center;
	padding: 2px;
	border-radius: 9999px;
	background: #f1f5f9;
	box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.7);
}

/* flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold */
.as-lang__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	color: var(--as-slate-500);
	transition: color 0.15s, background-color 0.15s;
}

.as-lang__item:hover {
	color: var(--as-slate-800);
}

/* bg-white text-slate-900 shadow-sm ring-1 ring-slate-200 */
.as-lang__item.is-active {
	background: #fff;
	color: var(--as-slate-900);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--as-slate-200);
}

/* h-2.5 w-4 overflow-hidden rounded-[2px] ring-1 ring-black/10 */
.as-lang__flag {
	display: inline-block;
	width: 16px;
	height: 10px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.as-lang__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Sprungziel-Link: unsichtbar, bis er den Fokus hat. */
.as-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: #fff;
	color: var(--as-slate-900);
	border-radius: 0 0 8px 0;
	font-size: 14px;
	font-weight: 500;
}

.as-skip:focus {
	left: 0;
}

/* ---------------------------------------------------------------- Fußzeile --- */

/* border-t border-slate-800 bg-slate-950 text-slate-400 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 96px;
	padding: 0;
	border-top: 1px solid var(--as-slate-800);
	background: #020617;
	color: #94a3b8;
}

/* mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 sm:flex-row sm:items-center sm:justify-between */
.as-footer__inner {
	margin: 0 auto;
	display: flex;
	max-width: var(--as-max);
	flex-direction: column;
	gap: 24px;
	padding: 40px var(--as-gutter);
}

@media (min-width: 640px) {
	.as-footer__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* text-lg font-bold text-white */
.as-footer__name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

/* mt-1 text-sm text-slate-400 */
.as-footer__tagline {
	margin: 4px 0 0;
	font-size: 14px;
	color: #94a3b8;
}

.as-footer__note {
	margin: 8px 0 0;
	font-size: 12px;
	color: #64748b;
	max-width: 34em;
}

/* flex flex-wrap gap-x-6 gap-y-2 text-sm */
.as-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: 14px;
}

.as-footer__links a {
	color: #94a3b8;
	text-decoration: none;
	transition: color 0.15s;
}

.as-footer__links a:hover {
	color: var(--as-brand-400);
}

/* border-t border-slate-800 px-6 py-4 text-center text-xs */
.as-footer__bottom {
	border-top: 1px solid var(--as-slate-800);
	padding: 16px var(--as-gutter);
	text-align: center;
	font-size: 12px;
	color: #64748b;
}

/* ----------------------------------------------------------- WooCommerce --- */

/* Woo ships its own light-mode CSS; these are the places where it would print
   dark text on the dark background. Kept to a list rather than a blanket
   override so a Woo update changes layout, not legibility. */

.woocommerce,
.woocommerce-page,
.woocommerce .woocommerce-result-count,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce ul.order_details li,
.woocommerce .woocommerce-customer-details address,
.woocommerce-account .woocommerce-MyAccount-content {
	color: #e2e8f0;
}

/* ------------------------------------------------------------- Kundenkonto ---
 *
 * WooCommerce stellt die Kontonavigation als Spalte NEBEN den Inhalt (float,
 * 30 % / 68 %). Hier steht sie stattdessen als Reiterleiste UNTER der
 * Überschrift, quer über die volle Breite.
 *
 * Zwei Gründe: Der Kontobereich hat seit dem 2026-08-26 nur noch vier Punkte —
 * für eine eigene Spalte zu wenig, und die 30 % standen überwiegend leer.
 * Und auf dem Handy stapelt WooCommerce die Spalten ohnehin, sodass die
 * Navigation dort schon immer über dem Inhalt lag; jetzt sieht sie überall
 * gleich aus.
 *
 * Der aktive Punkt trägt einen Balken UNTEN statt links — bei einer Reiterleiste
 * ist das die gewohnte Stelle. Farbe allein wäre die einzige Auskunft für Leute,
 * die sie nicht unterscheiden können; der Balken trägt dieselbe Information
 * ohne Farbe. */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin: 0 0 28px;
	border-bottom: 1px solid var(--as-slate-800);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Die Listenpunkte selbst sind nur Halter — sie sollen keine eigene Höhe
   mitbringen. Als `list-item` taten sie das: gemessen 63px bzw. 79px, während
   der Link darin durchgehend 47px hoch war. Bei `align-items: flex-end` saßen
   die Reiter dadurch auf unterschiedlichen Höhen, sichtbar als ein
   verrutschtes „Dashboard". Als Flex-Container fällt die Eigenhöhe weg. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	display: flex;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	position: relative;
	display: block;
	padding: 10px 14px 12px;
	border-radius: 10px 10px 0 0;
	color: #cbd5e1;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

/* Der Balken als eigenes Element und nicht als `border-bottom`: Ein Rahmen
   folgt dem `border-radius` der Fläche und biegt sich an den Enden nach innen.
   Ein absolut gesetztes Kästchen hat gerade Kanten. `bottom: -1px` legt ihn
   genau auf die Trennlinie der Leiste, damit er sie überdeckt statt daneben zu
   liegen. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -1px;
	height: 2px;
	background: transparent;
	transition: background-color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: #0e1626;
	color: #f1f5f9;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #0e1626;
	color: #f1f5f9;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
	background: var(--as-brand-400);
}

/* „Abmelden" ist kein Bereich, sondern eine Handlung — in einer Reiterleiste
   heißt „abgesetzt" nicht „darunter", sondern „ganz rechts".
   
   Der Selektor nennt `ul li` mit, sonst verliert er: Die Regel für alle
   Listenpunkte oben zählt zwei Klassen plus zwei Elemente, diese hier zählte
   nur zwei Klassen — und `margin: 0` gewann. Gemessen wurde `margin-left: 0px`
   an einem Punkt, der „auto" tragen sollte. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-left: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--as-slate-500);
}

/* Auf sehr schmalen Geräten passen vier Reiter nicht nebeneinander. Statt sie
   umbrechen zu lassen — was die Leiste zweizeilig und unruhig macht — darf sie
   seitlich rollen. Die Trennlinie bleibt dabei stehen. */
@media (max-width: 480px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-left: 0;
	}
}

/* WooCommerce rahmt „Passwort ändern" als klassisches `fieldset` — auf dem
   dunklen Hintergrund ein weißer Kasten mitten im Formular. Dieselbe Fläche und
   derselbe Rahmen wie die Navigation daneben, damit die Kontoseite aus einem
   Guss ist. Gilt genauso für die Blöcke aus class-konto-adresse.php. */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	background: #0b1220;
	border: 1px solid var(--as-slate-800);
	border-radius: 14px;
	margin: 24px 0 0;
	padding: 16px 20px 20px;
}

.woocommerce-account .woocommerce-MyAccount-content legend {
	padding: 0 8px;
	color: #f1f5f9;
	font-weight: 600;
}

/* Unter 768px steht die Navigation über dem Inhalt statt daneben (WooCommerce
   stapelt die Spalten dort). Als Kartenblock mit Abstand darunter, sonst klebt
   sie an der Überschrift des Inhalts. */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 24px;
	}
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: #f1f5f9;
	font-weight: 600;
}

.woocommerce div.product .product_title {
	color: #f1f5f9;
}

/* Karten: Produkt-Kacheln, Warenkorb-Summen, Bestellübersicht. */
.woocommerce ul.products li.product,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .woocommerce-order,
.autenova-product-card {
	background: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 12px;
	padding: 20px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	color: #f1f5f9;
	font-size: 1.05rem;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	border-color: #1e293b;
}

/* Formularfelder: dunkel, sonst weiße Kästen im dunklen Layout. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"] {
	background: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 8px;
	color: #e2e8f0;
	padding: 10px 12px;
}

.woocommerce form .form-row label,
.woocommerce-page label {
	color: #cbd5e1;
}

/* Buttons in Markenblau. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: #2866c3;
	color: #ffffff;
	border-radius: 8px;
	font-weight: 500;
	padding: 12px 20px;

	/* Ohne diese beiden Zeilen trägt jeder Knopf einen hellblauen Ring und, wenn
	   er ein `<a>` ist, eine Unterstreichung. Beides kommt nicht von WooCommerce,
	   sondern von den Vorgaben des Blockthemas für Rahmen und Links — sichtbar
	   erst auf dunklem Grund, wo der Ring als zweite Kante um die Fläche steht. */
	border: 0;
	text-decoration: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: #3f79d1;
	color: #ffffff;
}

/* Hinweisboxen (Warenkorb-Meldungen). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #0b1220;
	border-top-color: #2866c3;
	color: #e2e8f0;
}

/* Variantenauswahl. */

/* Beschriftung und Auswahlfeld auf eine Mittellinie.
 *
 * WooCommerce stellt beide Zellen auf `vertical-align: top`. Das Auswahlfeld
 * ist durch sein Innenabstand aber deutlich höher als das Wort daneben —
 * „Lizenz" klebte damit an der Oberkante und sah aus wie eine Überschrift über
 * dem Feld statt wie seine Beschriftung.
 *
 * Beide Zellen, nicht nur die Beschriftung: Sonst richtet sich die eine an der
 * Mitte und die andere weiter an der Oberkante aus, und bei einer zweiten
 * Zeile (ein weiteres Attribut) fiele es wieder auseinander.
 *
 * SEIT DEM 2026-09-09 IST DIE BESCHRIFTUNG UNSICHTBAR (siehe unten), die Regel
 * bleibt aber stehen: Sie kostet nichts, und sobald ein Produkt ein zweites
 * Attribut bekommt und die Beschriftungen wieder gebraucht werden, sitzt die
 * Ausrichtung sofort. */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value {
	vertical-align: middle;
}

/* Das Wort „Lizenz" vor dem Auswahlfeld ist unsichtbar — auf Ansage.
 *
 * Die Optionen tragen seit demselben Tag Stufenname UND Preis („Standard ·
 * jährlich — 29,00 €"). Damit sagt das Feld selbst, worum es geht, und eine
 * Beschriftung davor benennt nur noch die Datenbankspalte. Auf dem Handy nimmt
 * sie zusätzlich Breite weg, die die längeren Optionen brauchen.
 *
 * ENTFERNT WIRD SIE NICHT, NUR VERSTECKT. Ein `display: none` nähme dem
 * Auswahlfeld seine einzige Beschriftung, und ein Formularfeld ohne Label ist
 * für einen Screenreader eine Blackbox — die Vorleserin sagte dann „Auswahlfeld"
 * und sonst nichts. Mit der Klammer-Technik unten bleibt `<label for>` im
 * Barrierebaum und verschwindet nur visuell.
 *
 * Der Zellenrest muss mit weg (`padding`, `width`), sonst bliebe eine leere
 * Spalte stehen und das Auswahlfeld begänne weiterhin auf halber Breite. */
.woocommerce div.product form.cart .variations th.label {
	padding: 0;
	width: 0;
}

.woocommerce div.product form.cart .variations th.label label {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Der „Zurücksetzen"-Link raus.
 *
 * Er war der eigentliche Grund für die schiefe Ausrichtung: Er steht UNTER dem
 * Auswahlfeld, macht die rechte Zelle zwei Zeilen hoch, und damit liegt deren
 * Mitte 16px tiefer als die der Beschriftung — `vertical-align: middle` allein
 * hat das nicht geheilt, weil es beide Zellen korrekt zentriert hat, nur eben
 * unterschiedlich hohe Inhalte.
 *
 * Dass er überhaupt sichtbar ist, ist ein Folgefehler: WooCommerce blendet ihn
 * normalerweise aus, bis eine Variante gewählt wurde. Das erledigt sein
 * Variantenskript — und genau das läuft auf dieser Seite nicht an (dieselbe
 * Ursache wie beim Kaufen-Knopf, siehe `Paddle_Checkout::skript()`).
 *
 * Er wird auch nicht gebraucht: Die Auswahl lässt sich über „Option auswählen"
 * zurücknehmen, und die Kasse löst die Variante ohnehin selbst auf.
 *
 * `!important` ist hier kein Faulheitszeichen: Sobald eine Stufe gewählt ist,
 * blendet WooCommerces Skript den Link mit jQuery `.show()` wieder ein — und
 * das schreibt `display: inline` als Inline-Stil ans Element. Gegen einen
 * Inline-Stil kommt eine Stilblattregel nicht an, egal wie spezifisch sie ist.
 * Ohne `!important` war die Ausrichtung beim Laden richtig und nach der ersten
 * Auswahl wieder schief — also genau dann falsch, wenn jemand hinsieht. */
.woocommerce div.product form.cart .variations .reset_variations {
	display: none !important;
}

.woocommerce div.product form.cart .variations label {
	color: #cbd5e1;
	margin-bottom: 0;
}

.woocommerce div.product form.cart .variations select {
	background: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 8px;
	color: #e2e8f0;
	padding: 10px 12px;
}

/* --------------------------------------------------- Eigene Komponenten --- */

/* Der Tagline-/Feature-Block in der Kurzbeschreibung (aus dem Katalog). */
.autenova-tagline {
	font-size: 1.15rem;
	color: #cbd5e1;
}

.autenova-features {
	list-style: none;
	margin: 1.2em 0;
	padding: 0;
}

.autenova-features li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.5em;
	color: #cbd5e1;
}

.autenova-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #2866c3;
}

/* Einleitung über dem Produktraster — steht im Inhalt der Shop-Seite und wird
   vom Block `autenova-portal/shop-intro` dorthin gerendert (ein Archiv zeigt
   seinen Seiteninhalt nicht von selbst). */
/* UNBENUTZT (geprueft 2026-09-11): Die Klasse steht nur noch in alten
 * Beitragsrevisionen, auf keiner ausgelieferten Seite. Mit umbenannt, damit im
 * Portal-Theme nichts mehr "shop" heisst — wer sie braucht, findet sie; wer
 * aufraeumt, darf sie loeschen. */
.autenova-portal-intro-wrap {
	margin-bottom: 2.5rem;
}

.autenova-portal-intro-wrap h1 {
	margin-bottom: 0.5rem;
}

.autenova-portal-intro {
	font-size: 1.125rem;
	color: #cbd5e1;
	max-width: 46em;
}

/* Auf dem Handy eine Spalte — sonst steht die Kachel auf halber Breite.

   WooCommerce setzt für das Raster:

       repeat(auto-fill, minmax(max(150px, calc(33.33333% - .83333em)), 1fr))

   `auto-fill` legt so viele Spalten an, wie hineinpassen, UNABHÄNGIG davon,
   wie viele Produkte es gibt. Auf dem Desktop ist das richtig: 33 % sind dort
   breiter als 150px, also entstehen genau drei Spalten. Auf einem 375px
   breiten Bildschirm greift dagegen der 150px-Zweig, es passen zwei Spalten
   hinein — und das einzige Produkt bekommt die erste, während die zweite leer
   bleibt. Die Kachel wirkt dann schmal, obwohl daneben nichts steht.

   `auto-fit` statt `auto-fill` wäre die kürzere Antwort, aber die falsche: Es
   ließe eine einzelne Kachel auch auf dem Desktop über die volle Breite
   laufen. Gewollt ist die Spaltenzahl, nur nicht auf dem Handy.

   600px ist WooCommerces eigene Grenze für die Spaltenaufteilung (siehe
   `.is-flex-container` in product-template-style.css) — dieselbe Zahl, damit
   beide Layoutvarianten an derselben Stelle umschalten.

   Zum Selektor: WooCommerce schreibt `.wc-block-product-template__responsive`
   UND `.columns-3` in einen Selektor, das sind zwei Klassen. Eine Regel mit
   nur der ersten Klasse verliert dagegen, auch innerhalb einer Media Query —
   Media Queries erhöhen die Spezifität nicht. Deshalb hier zwei Klassen plus
   ein Attributselektor: `[class*="columns-"]` trifft jede Spaltenzahl, ohne
   sie einzeln aufzuzählen, und hebt die Spezifität über die von WooCommerce.
   Genau daran ist der erste Versuch gescheitert, sichtbar nur im Messwert. */
@media (max-width: 599px) {
	.wc-block-product-template.wc-block-product-template__responsive[class*="columns-"] {
		grid-template-columns: 1fr;
	}
}

/* Produktkachel: quadratisches Bild mit runden Ecken — die Bilder stehen auf
   Weiß (es sind Programmzeichen), und ohne Radius wirken sie auf dem dunklen
   Hintergrund wie ausgeschnittene Kästen. */
/* Die Produktkachel als Karte: umrandete Fläche, die sich vom Hintergrund
   abhebt. Ohne Rahmen schwebt das Produkt frei im Dunkeln und man sieht nicht,
   was zusammengehört — bei mehreren Produkten nebeneinander noch weniger.
   `wc-block-product` ist die Klasse, die das Block-Raster vergibt (nicht die
   klassische `li.product`, die weiter unten mitbedient wird). */
.wc-block-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: #0b1220;
	border: 1px solid var(--as-slate-800);
	border-radius: 14px;
	padding: 28px 24px 24px;
	transition: border-color 0.15s, background-color 0.15s;
}

.wc-block-product:hover {
	border-color: #334155;
	background: #0e1626;
}

/* Der Kaufen-Knopf sitzt unten bündig, auch wenn die Karten unterschiedlich
   viel Text tragen — sonst tanzen die Knöpfe auf verschiedenen Höhen. */
.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* Gut ein Drittel der Karteninnenbreite — das Zeichen ist eine Marke, kein
   Produktfoto, und in voller Spaltenbreite erschlägt es Titel und Preis. Als
   Prozentwert und nicht als Pixelzahl, damit es in jeder Spaltenzahl dasselbe
   Verhältnis behält. Der Prozentwert bezieht sich auf die Innenbreite der
   Karte, also ohne deren 24px Polsterung — bei 355px Kachel sind 72 % rund
   220px. Dieselbe Größe hat das Bild auf der Produktseite (siehe unten), damit
   das Zeichen beim Klick auf die Karte nicht seine Größe wechselt. */
.autenova-product-thumb {
	max-width: 72%;
	margin-left: auto;
	margin-right: auto;
}

.autenova-product-thumb img {
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	width: 100%;
	height: auto;
}

.autenova-product-summary {
	color: #94a3b8;
}

/* Produktseite: das Zeichen füllt seine Spalte. Es war zwischendurch auf die
   Kartengröße gedeckelt — auf der Produktseite ist aber Platz, und dort ist das
   Bild der Hauptdarsteller und nicht ein Beiwerk neben dem Titel. */
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery img {
	height: auto;
	border-radius: 12px;
	background: #fff;
}

/* Die Leistungsübersicht der Stufen (aus dem Katalog, siehe Sync). Sie ist die
   Stelle, an der die Kaufentscheidung fällt — deshalb ruhig gesetzt, mit klarem
   Kontrast zwischen „enthalten" und „nicht enthalten", nicht mit Farbe allein. */
.autenova-comparison {
	margin-top: 2.5rem;
}

.autenova-comparison__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.autenova-comparison__table th,
.autenova-comparison__table td {
	padding: 10px 12px;
	border-bottom: 1px solid #1e293b;
	text-align: center;
	vertical-align: middle;
}

.autenova-comparison__table thead th {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #94a3b8;
	border-bottom-color: #334155;
}

.autenova-comparison__table tbody th {
	text-align: left;
	font-weight: 400;
	color: #cbd5e1;
}

.autenova-comparison__table .is-yes {
	color: #34d399;      /* emerald-400 */
	font-size: 1.1rem;
}

.autenova-comparison__table .is-no {
	/* Rot statt des zurückgenommenen Slate: die Tabelle IST die
	   Kaufentscheidung, und „fehlt" soll man auf einen Blick sehen, ohne die
	   Spaltenüberschrift dazuzulesen. Gilt auf der Chartwright-Website genauso
	   (chartwright-dark-theme.php) — dieselbe Tabelle, dieselbe Darstellung. */
	color: #f87171;      /* red-400 */
	font-size: 1.05rem;
}

.autenova-comparison__table tbody tr:last-child th,
.autenova-comparison__table tbody tr:last-child td {
	border-bottom: none;
	padding-top: 14px;
	font-weight: 600;
	color: #f1f5f9;
}

/* Auf schmalen Fenstern lieber schieben als stauchen — eine Tabelle mit vier
   Spalten wird sonst unlesbar. */
.autenova-comparison {
	overflow-x: auto;
}

.autenova-comparison__table {
	min-width: 30rem;
}

/* Die Verweise zurück auf die Produktseite (aus dem Katalog, siehe Sync). */
.autenova-product-links {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #1e293b;
}

.autenova-product-links h3 {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.autenova-product-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

/* "Meine Produkte" im Kundenkonto. */
.autenova-product-card {
	margin-bottom: 24px;
}

.autenova-product-card h3 {
	margin-top: 0;
	color: #f1f5f9;
}

.autenova-product-card h3 small {
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	color: #94a3b8;
	margin-top: 4px;
}

.autenova-product-details {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 12px;
}

.autenova-product-details th {
	text-align: left;
	font-weight: 500;
	color: #94a3b8;
	padding: 6px 12px 6px 0;
	white-space: nowrap;
	vertical-align: top;
	width: 1%;
}

.autenova-product-details td {
	padding: 6px 0;
	color: #e2e8f0;
}

.autenova-license-key {
	display: inline-block;
	background: #020617;
	border: 1px solid #1e293b;
	border-radius: 6px;
	padding: 6px 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.95em;
	letter-spacing: 0.05em;
	color: #f1f5f9;
	user-select: all;
}

.autenova-product-order {
	font-size: 0.85rem;
	color: #94a3b8;
	margin-bottom: 0;
}

/* Platzhalterhinweis auf den Rechtsseiten — soll unübersehbar sein, solange
   die Texte nicht geprüft sind. */
.autenova-placeholder-notice {
	background: #422006;
	border: 1px solid #a16207;
	border-radius: 8px;
	color: #fef3c7;
	padding: 14px 18px;
	margin-bottom: 28px;
}

/* Der Stand unten rechts auf dem Impressum — dieselbe Zurückhaltung wie auf
   autenova.com: klein, gedämpft, rechtsbündig, deutlich nach dem Text. */
.autenova-stand {
	margin-top: 64px;
	text-align: right;
	font-size: 0.85rem;
	color: #64748b;
}

/* ------------------------------- Widerrufs- und Kündigungsformular --- */
/*
 * Dieselben Farben und Radien wie die WooCommerce-Felder darüber (#0b1220 auf
 * #1e293b, 8px) — das Formular steht auf einer eigenen Seite und würde sonst
 * wie ein Fremdkörper wirken.
 *
 * Es ist bewusst schmal: Ein Widerrufsformular soll man in einem Blick erfassen,
 * nicht überfliegen müssen.
 */
.autenova-erklaerung,
.autenova-support {
	max-width: 34rem;
	margin: 1.5rem 0 0;
}

.autenova-feld {
	margin: 0 0 1.25rem;
	border: 0;
	padding: 0;
}

.autenova-erklaerung label,
.autenova-claim label,
.autenova-support label {
	display: block;
	margin-bottom: 0.35rem;
	color: #cbd5e1;
	font-weight: 500;
}

.autenova-erklaerung input[type="text"],
.autenova-erklaerung input[type="email"],
.autenova-erklaerung textarea,
.autenova-support input[type="text"],
.autenova-support input[type="email"],
.autenova-claim input[type="text"],
.autenova-claim input[type="email"],
.autenova-support textarea {
	width: 100%;
	background: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 8px;
	color: #e2e8f0;
	padding: 10px 12px;
	font: inherit;
}

.autenova-erklaerung input:focus,
.autenova-erklaerung textarea:focus,
.autenova-claim input:focus,
.autenova-support input:focus,
.autenova-support textarea:focus {
	outline: 2px solid #2866c3;
	outline-offset: 1px;
	border-color: #2866c3;
}

/* Das Sternchen: rot, und der Grund steht als Titel dran — sonst ist es für
 * eine Vorleseanwendung nur ein Zeichen ohne Bedeutung. */
.autenova-pflicht {
	color: #f87171;
	text-decoration: none;
	border: 0;
	font-weight: 700;
	margin-left: 0.15em;
}

.autenova-fussnote {
	font-size: 0.875rem;
	color: #94a3b8;
	margin: 0 0 1.25rem;
}

.autenova-hinweis {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: #94a3b8;
}

.autenova-optional {
	color: #94a3b8;
	font-weight: 400;
}

/* Auswahlfelder brauchen die Beschriftung daneben, nicht darüber. */
.autenova-erklaerung label.autenova-wahl {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	margin-bottom: 0.4rem;
}

.autenova-erklaerung legend {
	color: #cbd5e1;
	font-weight: 500;
	margin-bottom: 0.5rem;
	padding: 0;
}

.autenova-absenden {
	background: #2866c3;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 500;
	padding: 12px 20px;
	cursor: pointer;
}

.autenova-absenden:hover { background: #1f56a8; }

/* Meldungen. Der Hinweis auf eine nicht gefundene Bestellung ist bewusst NICHT
 * rot: Es ist kein Fehler der Kundin, und Rot liest sich wie eine Abweisung. */
.autenova-erklaerung-fehler,
.autenova-erklaerung-hinweis,
.autenova-erklaerung-bestaetigt {
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	max-width: 34rem;
}

.autenova-erklaerung-fehler {
	background: rgba(248, 113, 113, 0.1);
	border-left: 3px solid #f87171;
}

.autenova-erklaerung-hinweis {
	background: rgba(251, 191, 36, 0.1);
	border-left: 3px solid #fbbf24;
}

.autenova-erklaerung-bestaetigt {
	background: rgba(52, 211, 153, 0.1);
	border-left: 3px solid #34d399;
}

.autenova-erklaerung-hinweis p:last-child,
.autenova-erklaerung-fehler p:last-child { margin-bottom: 0; }

/* --------------------------------------------------- Support-Formular --- */

/* Es teilt sich die Felder mit dem Widerrufsformular (siehe oben) — dieselben
 * Klassen, dieselbe Optik. Hier steht nur, was dort nicht vorkommt.
 *
 * Warum nicht ein eigener Satz Regeln: Zwei Formulare, die fast gleich aussehen,
 * laufen mit der Zeit auseinander, und der Unterschied wirkt dann wie Absicht. */

.autenova-support textarea {
	/* 500 Zeichen passen bequem hinein — hoeher waere eine Einladung, mehr zu
	 * schreiben, als das Feld annimmt. */
	min-height: 8rem;
	resize: vertical;
	line-height: 1.55;
}

/* Platzhalter deutlich schwächer als der eingegebene Text. Ein Platzhalter, der
 * aussieht wie ein Wert, wird für einen gehalten und nicht überschrieben. */
.autenova-support ::placeholder {
	color: #64748b;
	opacity: 1;
}

.autenova-support-senden {
	margin: 1.75rem 0 0;
}

/* Derselbe Knopf wie in der Kasse (`.woocommerce button.button` weiter oben),
 * nur ohne WooCommerce-Klassen am Element — das Formular ist keins.
 *
 * `.autenova-claim` teilt sich die Regel seit dem 2026-09-11. Sein Knopf trug
 * nur `class="button"` und hing damit an WooCommerces Styling — das greift im
 * Kundenkonto nur, wo ein `.woocommerce`-Vorfahr steht, und sah deshalb anders
 * aus als jeder andere Knopf im Portal. Eine gemeinsame Regel statt einer
 * zweiten Kopie: Zwei Knopfstile, die fast gleich aussehen, laufen auseinander,
 * und der Unterschied wirkt dann wie Absicht. */
.autenova-support button[type="submit"],
.autenova-claim button[type="submit"] {
	background: var(--as-brand-600);
	border: 0;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 12px 22px;
	transition: background 0.15s ease;
}

.autenova-support button[type="submit"]:hover,
.autenova-claim button[type="submit"]:hover {
	background: var(--as-brand-400);
}

.autenova-support button[type="submit"]:focus-visible,
.autenova-claim button[type="submit"]:focus-visible {
	outline: 2px solid var(--as-brand-400);
	outline-offset: 2px;
}

/* Meldung nach dem Absenden. Aufbau wie bei den Erklärungen, damit beide
 * Formulare dieselbe Sprache sprechen. */
.autenova-support-box {
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	max-width: 34rem;
}

.autenova-support-box p:last-child {
	margin-bottom: 0;
}

.autenova-support-box h2 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}

.autenova-support-ok {
	background: rgba(52, 211, 153, 0.1);
	border-left: 3px solid #34d399;
}

.autenova-support-fehler {
	background: rgba(248, 113, 113, 0.1);
	border-left: 3px solid #f87171;
}

/* Ein beendeter Kauf bleibt sichtbar, tritt aber zurueck.
 *
 * Gedaempft, nicht versteckt: Wer nach einer Erstattung ins Konto sieht, sucht
 * den Beleg, dass es den Kauf gab — und nicht eine leere Seite. Die Karte darf
 * dabei nur nicht aussehen wie eine gueltige Lizenz.
 *
 * Kein `opacity` auf der ganzen Karte: Das nimmt auch dem Hinweistext den
 * Kontrast, und ausgerechnet der soll gelesen werden. */
.autenova-product-card--beendet {
	border-left: 3px solid #64748b;
}

.autenova-product-card--beendet h3 {
	color: #94a3b8;
}

.autenova-product-beendet {
	background: rgba(148, 163, 184, 0.12);
	border-radius: 6px;
	color: #cbd5e1;
	font-size: 0.9rem;
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
}

/* Der Kuendigen-Link auf der Produktkarte.
 *
 * Bewusst ein Link und kein Knopf: Der einzige Knopf auf einer Karte soll der
 * sein, den die Kundin sucht (Download, Rechnung). Kuendigen ist kein Ziel,
 * sondern ein Ausweg — erreichbar, aber nicht einladend. */
/* Der Abzug der angenommenen Nutzungsbedingungen. Dieselbe Machart wie die
   Vereinbarung darunter, aber zurueckhaltender: Er gilt fuer jeden Kauf und
   steht damit auf jeder Karte. */
.autenova-product-agb {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid #1e293b;
	border-radius: 4px;
}

.autenova-product-agb summary {
	cursor: pointer;
	color: #94a3b8;
	font-size: 14px;
}

.autenova-product-agb__stand {
	margin: 8px 0 4px;
	font-size: 13px;
	opacity: .8;
}

/* Der Abzug selbst ist ein langer Rechtstext. Er bekommt eine eigene Hoehe mit
   Bildlauf, damit er die Karte nicht auf mehrere Bildschirme streckt. */
.autenova-product-agb__text {
	max-height: 22em;
	overflow-y: auto;
	padding: 10px 12px;
	background: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.6;
}

.autenova-product-agb__text h2,
.autenova-product-agb__text h3 {
	font-size: 1em;
	margin: 1em 0 .3em;
}

/* Die individuelle Vereinbarung auf der Produktkarte.
   Zugeklappt, weil ein Vertragstext nichts ist, was man im Vorbeigehen liest —
   aufgeklappt schoebe er Schluessel, Laufzeit und Download nach unten. */
.autenova-product-vereinbarung {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--as-brand-400, #6a97dd);
	background: rgba(40, 102, 195, .08);
	border-radius: 4px;
}

.autenova-product-vereinbarung summary {
	cursor: pointer;
	font-weight: 600;
	color: #cbd5e1;
}

.autenova-product-vereinbarung summary code {
	margin-left: 6px;
	font-weight: 400;
	font-size: .85em;
	opacity: .8;
}

.autenova-product-vereinbarung__stand {
	margin: 8px 0 4px;
	font-size: 13px;
	opacity: .8;
}

.autenova-product-vereinbarung pre {
	margin: 0;
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.55;
	color: #e2e8f0;
}

.autenova-product-kuendigen {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
}

.autenova-product-kuendigen a {
	color: #94a3b8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.autenova-product-kuendigen a:hover,
.autenova-product-kuendigen a:focus-visible {
	color: #e2e8f0;
}

/* Die Erklaerung unter einer Auswahlmoeglichkeit.
 *
 * Eingerueckt auf die Hoehe der Beschriftung, damit sie zur Option darueber
 * gehoert und nicht zur naechsten darunter — bei zwei Optionen untereinander
 * ist das der ganze Unterschied zwischen lesbar und verwirrend. */
.autenova-wahl-hinweis {
	display: block;
	margin: 0.15rem 0 0.9rem 1.65rem;
	max-width: 32rem;
	line-height: 1.45;
}

/* Der Download neben der Rechnung — ein Symbol.
 *
 * Kleiner und leiser als „Rechnung" selbst: Die meisten wollen sie ansehen; wer
 * sie ablegen will, sucht gezielt. Zwei gleich laute Links nebeneinander waeren
 * eine Frage, die niemand gestellt hat.
 *
 * `vertical-align` statt Flexbox: Der Link steht mitten in einem Fliesstext
 * („Bestellung #… vom … · Rechnung"), und ein Flex-Element risse die Zeile
 * auseinander. */
.autenova-rechnung-dl {
	display: inline-block;
	vertical-align: -2px;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.autenova-rechnung-dl:hover,
.autenova-rechnung-dl:focus-visible {
	opacity: 1;
}

/* Nur fuer Vorleseanwendungen: optisch weg, im Barrierebaum da. Dieselbe
 * Klammer-Technik wie bei `.as-cart__label` — ein Symbol-Link ohne Text waere
 * ein Link ohne Namen. */
.autenova-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}