/* component styles */

/* AgentNice Checkout Domain Field */
.an-domain-field {
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--surface);
	border-top: 3px solid var(--wp--preset--color--lime);
}

.an-domain-field label {
	display: block;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--off-white);
	margin-bottom: 0.75rem;
}

.an-domain-field input[type="text"] {
	width: 100%;
	background: var(--wp--preset--color--obsidian);
	border: 1px solid var(--wp--preset--color--gray);
	color: var(--wp--preset--color--off-white);
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: 1rem;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.an-domain-field input[type="text"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--lime);
}

.an-domain-field input[type="text"]::placeholder {
	color: var(--wp--preset--color--gray);
}

.an-domain-field .an-error {
	color: #ff5e5e;
	font-size: 0.85rem;
	margin-top: 0.5rem;
	min-height: 1.2em;
}

/* ---------------------------------------------------------
   Block Style Variation: XWide (1680px)
   Registriert in functions.php für core/group + core/columns.
   !important überschreibt die constrained-Layout-Default-
   Regel (contentSize 820px).
--------------------------------------------------------- */

.wp-block-group.is-style-xwide,
.wp-block-columns.is-style-xwide {
	max-width: 1680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

/* ---------------------------------------------------------
   Methodik-Sektion: Nummerierte Schritt-Kreise
--------------------------------------------------------- */

.methodik-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 2px solid var(--wp--preset--color--lime);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Personality-Block: Portrait mit Lime-Akzent-Block
   Erzwingt 4:5-Aspect-Ratio und platziert einen Lime-Akzent
   unten rechts am Bild.
--------------------------------------------------------- */

.dan-portrait {
	position: relative;
	max-width: 420px;
	margin: 0 auto;
}

.dan-portrait::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 60%;
	height: 8px;
	background: var(--wp--preset--color--lime);
	pointer-events: none;
}

.dan-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid rgba(226, 255, 94, 0.15);
}

/* ---------------------------------------------------------
   WooCommerce Cart-Block (page-cart)
   Passt den Woo-Default-Cart-Block an das Theme-Design an:
   - Links, Buttons, Text in Theme-Farben
   - Empty-Cart reduziert auf Icon + Titel (ohne "Neu im Shop")
--------------------------------------------------------- */

/* Abstand zum Header-Block */
.wp-block-woocommerce-cart {
	margin-top: 2rem;
}

/* Produkt-Namen und alle Links im Cart: off-white statt Woo-default-lila.
   :visited explizit setzen, sonst zeigen besuchte Produktlinks Browser-Default-Lila. */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-cart a:visited,
.wp-block-woocommerce-cart .wc-block-cart-item__product-name,
.wp-block-woocommerce-cart .wc-block-cart-item__product-name:visited,
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-components-product-name:visited {
	color: var(--wp--preset--color--off-white) !important;
	text-decoration: none;
}

.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-cart .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--lime) !important;
}

/* Spalten-Überschriften "PRODUKT / GESAMTSUMME / WARENKORB-SUMME" als Mono-Kicker */
.wp-block-woocommerce-cart .wc-block-cart-items__header-product,
.wp-block-woocommerce-cart .wc-block-cart-items__header-total,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	color: var(--wp--preset--color--gray);
	font-family: monospace;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Preise, Mengen, Totals-Labels in off-white */
.wp-block-woocommerce-cart .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart-item__total-price,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-formatted-money-amount {
	color: var(--wp--preset--color--off-white);
}

/* "Weiter zur Kasse"-Button: Lime-CTA. Mehrere Selektor-Varianten, weil Woo je
   nach Version wp-element-button, wc-block-components-button oder Link-basierte
   Buttons rendert. background-Shorthand zusätzlich zu background-color, um
   potentielle Gradient-Defaults zu überschreiben. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-checkout-button,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a,
.wp-block-woocommerce-cart .wc-block-cart__submit-container button {
	background: var(--wp--preset--color--lime) !important;
	background-color: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--obsidian) !important;
	border: none !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	transition: opacity 0.15s ease;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-checkout-button:hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block button:hover {
	opacity: 0.9;
}

/* Quantity-Selector: dezente Surface-Box */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--gray);
	border-radius: 2px;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
	color: var(--wp--preset--color--off-white);
}

/* Remove-Link (Papierkorb) */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--gray);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--lime);
}

/* Gutschein-Panel */
.wp-block-woocommerce-cart .wc-block-components-panel {
	border-top: 1px solid var(--wp--preset--color--gray);
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

.wp-block-woocommerce-cart .wc-block-components-panel__button {
	color: var(--wp--preset--color--off-white);
}

.wp-block-woocommerce-cart .wc-block-components-panel__button:hover {
	color: var(--wp--preset--color--lime);
}

/* Empty-Cart: "Neu im Shop"-Grid und Dots-Separator ausblenden */
.wp-block-woocommerce-empty-cart-block .wp-block-product-new,
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block .wp-block-heading.has-text-align-center:not(.wc-block-cart__empty-cart__title) {
	display: none;
}

/* Empty-Cart: Titel farblich angepasst, mehr Luft */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	color: var(--wp--preset--color--off-white);
	margin-top: 2rem;
	margin-bottom: 3rem;
}

/* ---------------------------------------------------------
   WooCommerce Checkout-Block (page-checkout)
   Passt den Woo-Default-Checkout-Block an das Theme-Design an:
   - Links, Buttons, Text in Theme-Farben
   - Form-Inputs in Surface-Look mit Lime-Focus
   - Section-Headings und Labels in off-white
--------------------------------------------------------- */

/* Abstand zum Header-Block */
.wp-block-woocommerce-checkout {
	margin-top: 2rem;
}

/* Alle Links im Checkout: off-white statt Woo-default-lila,
   :visited explizit setzen (Browser-Default überschreibt sonst) */
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-checkout a:visited {
	color: var(--wp--preset--color--off-white) !important;
	text-decoration: none;
}

.wp-block-woocommerce-checkout a:hover {
	color: var(--wp--preset--color--lime) !important;
}

/* Section-Headings ("Kontaktinformationen", "Versandadresse", etc.) */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-title {
	color: var(--wp--preset--color--off-white);
	font-weight: 700;
}

/* Section-Descriptions (kleiner Text unter Heading) */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--gray);
}

/* Form Labels */
.wp-block-woocommerce-checkout label,
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label {
	color: var(--wp--preset--color--off-white);
}

/* Text-Inputs (Name, Adresse, E-Mail, Telefon etc.) */
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"],
.wp-block-woocommerce-checkout input[type="password"],
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout .wc-block-components-text-input input {
	background-color: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--gray) !important;
	color: var(--wp--preset--color--off-white) !important;
	border-radius: 2px;
}

.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout textarea:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--lime) !important;
	outline: none;
}

/* Select-Dropdowns (Land/Region) */
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout .wc-block-components-select .wc-block-components-select__select {
	background-color: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--gray) !important;
	color: var(--wp--preset--color--off-white) !important;
	border-radius: 2px;
}

/* Preise, Totals-Labels, Order-Summary-Werte in off-white */
.wp-block-woocommerce-checkout .wc-block-components-product-price,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description {
	color: var(--wp--preset--color--off-white);
}

/* Produkt-Namen in der rechten Order-Summary */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__title {
	color: var(--wp--preset--color--off-white);
	font-weight: 700;
}

/* Panels (Gutschein-Eingabe etc.) */
.wp-block-woocommerce-checkout .wc-block-components-panel {
	border-top: 1px solid var(--wp--preset--color--gray);
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

.wp-block-woocommerce-checkout .wc-block-components-panel__button {
	color: var(--wp--preset--color--off-white);
}

.wp-block-woocommerce-checkout .wc-block-components-panel__button:hover {
	color: var(--wp--preset--color--lime);
}

/* Payment-Method-Optionen (Radio-Buttons) */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label {
	color: var(--wp--preset--color--off-white);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__description {
	color: var(--wp--preset--color--gray);
}

/* "Jetzt kaufen"-Button — Lime-CTA mit mehreren Selektor-Varianten,
   analog zum Cart-Submit-Button */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block button,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block a {
	background: var(--wp--preset--color--lime) !important;
	background-color: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--obsidian) !important;
	border: none !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	transition: opacity 0.15s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block button:hover,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block a:hover {
	opacity: 0.9;
}

/* Checkbox-Marks (AGB-Bestätigung, Rechnungsadresse etc.) in Lime bei Check */
.wp-block-woocommerce-checkout .wc-block-components-checkbox input:checked ~ .wc-block-components-checkbox__mark {
	background-color: var(--wp--preset--color--lime);
	border-color: var(--wp--preset--color--lime);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox__mark {
	border-color: var(--wp--preset--color--gray);
}

/* Validierungs-Fehler-Hinweise dezent rot (bestehende Convention aus an-domain-field) */
.wp-block-woocommerce-checkout .wc-block-components-validation-error {
	color: #ff5e5e;
}

/* ---------------------------------------------------------
   WooCommerce Mein-Konto (page-my-account)
   - Navigation: horizontal als Tab-Leiste oben statt Sidebar links
   - Links off-white, aktiver Tab Lime-underlined
   - Content-Bereich volle Breite darunter
   - Forms/Tables in Theme-Farben
--------------------------------------------------------- */

/* Abstand zum Header-Block */
.woocommerce-account .woocommerce {
    margin-top: 2rem;
}

/* Woo-Default ist ein zweispaltiges Grid (Sidebar + Content).
   Wir brechen das Grid auf und stapeln Navigation und Content vertikal. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    display: block;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--wp--preset--color--gray);
}

/* Navigation als horizontale Tab-Leiste */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
}

/* Tab-Links: Mono-Kicker-Ästhetik */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:visited {
    display: block;
    padding: 0.75rem 1.25rem;
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray) !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* überlagert den ul-border-bottom */
    transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--wp--preset--color--off-white) !important;
}

/* Aktiver Tab: Lime mit Underline-Akzent */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:visited {
    color: var(--wp--preset--color--lime) !important;
    border-bottom-color: var(--wp--preset--color--lime);
}

/* Content-Bereich: Text- und Link-Farben */
.woocommerce-account .woocommerce-MyAccount-content {
    color: var(--wp--preset--color--off-white);
}

.woocommerce-account .woocommerce-MyAccount-content p {
    color: var(--wp--preset--color--off-white);
}

.woocommerce-account .woocommerce-MyAccount-content a,
.woocommerce-account .woocommerce-MyAccount-content a:visited {
    color: var(--wp--preset--color--lime) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: var(--wp--preset--color--off-white) !important;
}

/* Headings im Content */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    color: var(--wp--preset--color--off-white);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Tables (Bestellübersicht, Downloads) */
.woocommerce-account .woocommerce-MyAccount-content table,
.woocommerce-account .woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: transparent;
    border: 1px solid var(--wp--preset--color--gray);
}

.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce table.shop_table th {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--gray);
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wp--preset--color--gray);
    font-weight: 400;
}

.woocommerce-account .woocommerce-MyAccount-content table td,
.woocommerce-account .woocommerce table.shop_table td {
    padding: 1rem;
    border-bottom: 1px solid var(--wp--preset--color--gray);
    color: var(--wp--preset--color--off-white);
}

.woocommerce-account .woocommerce-MyAccount-content table tr:last-child td,
.woocommerce-account .woocommerce table.shop_table tr:last-child td {
    border-bottom: none;
}

/* Form-Inputs (Adressen, Kontodetails, Login) */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-account select {
    background-color: var(--wp--preset--color--surface) !important;
    border: 1px solid var(--wp--preset--color--gray) !important;
    color: var(--wp--preset--color--off-white) !important;
    border-radius: 2px;
    padding: 0.6rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-account input:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
    border-color: var(--wp--preset--color--lime) !important;
    outline: none;
}

/* Form-Labels */
.woocommerce-account label {
    color: var(--wp--preset--color--off-white);
    display: block;
    margin-bottom: 0.4rem;
}

/* Form-Row-Spacing */
.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
    margin-bottom: 1rem;
}

/* Primary Buttons: Login, Register, Save Adresse, Save Details */
.woocommerce-account button.button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"],
.woocommerce-account .woocommerce-button,
.woocommerce-account a.button {
    background: var(--wp--preset--color--lime) !important;
    background-color: var(--wp--preset--color--lime) !important;
    color: var(--wp--preset--color--obsidian) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
    display: inline-block;
}

.woocommerce-account button.button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account a.button:hover {
    opacity: 0.9;
}

/* "View" / "Details"-Buttons in Tabellen etwas dezenter (Surface statt Lime) */
.woocommerce-account table.shop_table a.button,
.woocommerce-account table.shop_table .button {
    background: var(--wp--preset--color--surface) !important;
    background-color: var(--wp--preset--color--surface) !important;
    color: var(--wp--preset--color--off-white) !important;
    border: 1px solid var(--wp--preset--color--gray) !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.875rem !important;
}

.woocommerce-account table.shop_table a.button:hover,
.woocommerce-account table.shop_table .button:hover {
    border-color: var(--wp--preset--color--lime) !important;
    color: var(--wp--preset--color--lime) !important;
    opacity: 1;
}

/* Woo-Notice-Box oberhalb Inhalt (Success/Error) */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--off-white);
    border-left: 3px solid var(--wp--preset--color--lime);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

.woocommerce-account .woocommerce-error {
    border-left-color: #ff5e5e;
}

/* Login-Formular: Single-column forcen */
.woocommerce-account .u-columns,
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
    width: 100% !important;
    float: none !important;
    max-width: 480px;
}

/* Responsive: Auf Mobile bleibt die Tab-Leiste horizontal mit Scroll */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------
   WooCommerce Bestellbestätigung (order-confirmation)
   Deckt beide Render-Varianten ab:
   - Neuer Block: .wc-block-order-confirmation-*
   - Klassisch: .woocommerce-order, .woocommerce-order-overview
--------------------------------------------------------- */

/* Übergreifender Link-Fix: jede gefundene Woo-Tabelle/Order-Struktur.
   Produktname-Links in Order-Details-Tabellen waren lila im Screenshot. */
.woocommerce-order a,
.woocommerce-order a:visited,
.wc-block-order-confirmation a,
.wc-block-order-confirmation a:visited,
table.woocommerce-table a,
table.woocommerce-table a:visited,
table.woocommerce-table--order-details a,
table.woocommerce-table--order-details a:visited {
    color: var(--wp--preset--color--off-white) !important;
    text-decoration: none;
}

.woocommerce-order a:hover,
.wc-block-order-confirmation a:hover,
table.woocommerce-table a:hover {
    color: var(--wp--preset--color--lime) !important;
}

/* Order-Overview-Liste (die horizontale Zeile mit Bestellnummer/Datum/E-Mail/Summe/Zahlungsmethode) */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order ul.order_details,
.wc-block-order-confirmation-status {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 2rem 0;
    border-top: 1px solid var(--wp--preset--color--gray);
    border-bottom: 1px solid var(--wp--preset--color--gray);
}

.woocommerce-order ul.order_details li,
.woocommerce-order .woocommerce-order-overview li {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--wp--preset--color--gray);
    border-left: none;
    margin: 0;
    text-transform: none;
    color: var(--wp--preset--color--off-white);
    font-size: 1rem;
    font-weight: 700;
}

.woocommerce-order ul.order_details li:last-child {
    border-right: none;
}

/* Label oberhalb (BESTELLNUMMER, DATUM etc.) als Mono-Kicker */
.woocommerce-order ul.order_details li strong {
    display: block;
    font-weight: 400;
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray);
    margin-top: 0.5rem;
    order: -1;
}

/* Order-Details-Tabelle (Produkt/Gesamtsumme/Zwischensumme etc.) */
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order .woocommerce-table--order-details,
.woocommerce-order table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: transparent;
    border: 1px solid var(--wp--preset--color--gray);
}

.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table thead th {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--gray);
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wp--preset--color--gray);
    font-weight: 400;
}

.woocommerce-order table.woocommerce-table--order-details td,
.woocommerce-order table.shop_table td,
.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td {
    padding: 1rem;
    border-bottom: 1px solid var(--wp--preset--color--gray);
    color: var(--wp--preset--color--off-white);
    background: transparent;
}

.woocommerce-order table.woocommerce-table--order-details tr:last-child td,
.woocommerce-order table.shop_table tr:last-child td,
.woocommerce-order table.shop_table tr:last-child th {
    border-bottom: none;
}

/* "Vielen Dank" und Notice-Texte */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status__title {
    color: var(--wp--preset--color--off-white);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* Headings im Bestätigungsbereich */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order .wc-bacs-bank-details-heading,
.wc-block-order-confirmation h2,
.wc-block-order-confirmation h3 {
    color: var(--wp--preset--color--off-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* Bankverbindung — Empfängername */
.woocommerce-order .wc-bacs-bank-details-account-name {
    color: var(--wp--preset--color--off-white);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 1rem 0;
}

/* Bankverbindung — Key/Value-Liste (Bank, IBAN, BIC etc.) */
.woocommerce-order .wc-bacs-bank-details {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0 0 2rem 0;
    border: 1px solid var(--wp--preset--color--gray);
}

.woocommerce-order .wc-bacs-bank-details li {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--wp--preset--color--gray);
    color: var(--wp--preset--color--off-white);
}

.woocommerce-order .wc-bacs-bank-details li:last-child {
    border-right: none;
}

.woocommerce-order .wc-bacs-bank-details li strong {
    display: block;
    font-weight: 400;
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray);
    margin-bottom: 0.25rem;
}

/* Customer-Details-Block (Rechnungs- und Lieferadresse als zwei Spalten) */
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order .woocommerce-columns--addresses {
    margin-top: 2rem;
}

.woocommerce-order .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .woocommerce-order .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }
}

.woocommerce-order address {
    color: var(--wp--preset--color--off-white);
    font-style: normal;
    line-height: 1.7;
    padding: 1.25rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--gray);
    border-radius: 2px;
}

/* Hinweis-Text über dem Ganzen dezenter */
.woocommerce-order > p:first-child,
.woocommerce-order .woocommerce-notice--success {
    color: var(--wp--preset--color--gray);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* Paragrafen im Bestätigungsbereich */
.woocommerce-order p,
.wc-block-order-confirmation p {
    color: var(--wp--preset--color--off-white);
}


/* Contact Form ---------------------------------- */

/* Form-Spalte: Surface-Card-Look */
.kontakt-form-column {
    background-color: var(--wp--preset--color--surface);
    padding: 2.5rem 2rem;
    border-radius: 2px;
}

@media (max-width: 781px) {
    .kontakt-form-column {
        padding: 1.75rem 1.25rem;
    }
}

/* Form-Layout: vertikaler Block mit gleichmäßigem Gap */
.wpcf7-form > p {
    margin: 0 0 1.5rem;
}

.wpcf7-form > p:last-of-type {
    margin-bottom: 0;
}

/* Labels */
.wpcf7-form label {
    display: block;
    color: var(--wp--preset--color--off-white);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

/* Inputs / Select / Textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    background-color: var(--wp--preset--color--obsidian);
    border: 1px solid var(--wp--preset--color--gray);
    color: var(--wp--preset--color--off-white);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--wp--preset--color--lime);
    outline: none;
    box-shadow: 0 0 0 1px var(--wp--preset--color--lime);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--wp--preset--color--gray);
    opacity: 0.7;
}

.wpcf7-form textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
}

/* Select: Custom-Dropdown-Pfeil (CSS-only, kein Asset) */
.wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--wp--preset--color--gray) 50%),
        linear-gradient(135deg, var(--wp--preset--color--gray) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* DSGVO-Checkbox: horizontales Layout */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
    display: block;
}

.wpcf7-form .wpcf7-list-item {
    display: block;
    margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--wp--preset--color--gray);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 0;
}

.wpcf7-form .wpcf7-list-item label a {
    color: var(--wp--preset--color--off-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wpcf7-form .wpcf7-list-item label a:hover {
    color: var(--wp--preset--color--lime);
}

.wpcf7-form input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--wp--preset--color--lime);
    cursor: pointer;
}

/* Submit-Button: Lime-CTA, Pattern-treu zum CTA-Banner */
.wpcf7-form .wpcf7-submit {
    display: inline-block;
    background-color: var(--wp--preset--color--lime);
    color: var(--wp--preset--color--obsidian);
    border: none;
    border-radius: 0;
    padding: 0.9rem 2rem;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    margin-top: 0.5rem;
}

.wpcf7-form .wpcf7-submit:hover {
    opacity: 0.85;
}

.wpcf7-form .wpcf7-submit:active {
    transform: translateY(1px);
}

.wpcf7-form .wpcf7-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inline-Validierungs-Tooltip */
.wpcf7-form .wpcf7-not-valid-tip {
    color: #ff6b6b;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.4rem;
}

.wpcf7-form .wpcf7-not-valid {
    border-color: #ff6b6b !important;
}

/* Response-Output (Success / Error / Spam) */
.wpcf7 form .wpcf7-response-output {
    border: 1px solid var(--wp--preset--color--gray);
    background-color: var(--wp--preset--color--obsidian);
    color: var(--wp--preset--color--off-white);
    border-radius: 2px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--wp--preset--color--lime);
    color: var(--wp--preset--color--lime);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* Spinner während Submit */
.wpcf7 .wpcf7-spinner {
    background-color: var(--wp--preset--color--lime);
}

/* Honeypot: alle gängigen Plugin-Varianten verstecken */
.wpcf7-form .wpcf7-honeypot,
.wpcf7-form input[name^="honeypot"],
.wpcf7-form .honeypot,
.wpcf7-form .honeypot-input,
.wpcf7-form .wpa-hp-input,
.wpcf7-form-control-wrap[data-name^="honeypot"] {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
}