/*
Theme Name: AP Grading
Theme URI: https://www.apgrading.de
Author: AP Grading
Author URI: https://www.apgrading.de
Description: Modernes, wartbares Block-Theme für AP Grading (WooCommerce + Polylang). Sauberer Ersatz für das alte, hand-editierte twentytwenty-child. Markenfarben Schwarz/Gold, Schrift Inter. Vollständig im Site-Editor anpassbar.
Version: 1.0.62
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apgrading
Tags: full-site-editing, block-patterns, e-commerce, custom-colors, custom-logo, translation-ready, wide-blocks
*/

/* =========================================================================
   Ergänzendes CSS (nur was theme.json nicht abdeckt):
   - Header-/Navigations-Layout (Polylang-Classic-Menü via Shortcode)
   - Mobile-Navigation (Hamburger)
   - Sprachumschalter
   - kleine WooCommerce-Anpassungen
   theme.json bleibt die Quelle für Farben/Typografie/Abstände.
   ========================================================================= */

:root {
	/* Tatsächliche Header-Höhe: 12px + 44px Logo + 12px + 1px Border = 69px.
	   Wird für den Mobil-Nav-Offset (inset) und scroll-padding genutzt. */
	--apg-header-h: 69px;

	/* Semantische Status-Farben (Konto: Bestell-/Grading-Status-Badges & -Box).
	   Zentral definiert → einheitlich pflegbar und an einer Stelle WCAG-prüfbar.
	   Bewusst eigene Tokens (kein Editor-Palette-Eintrag), da rein funktional. */
	--apg-c-neutral-bg:  #ececec;  --apg-c-neutral-fg:  #333333;
	--apg-c-success-bg:  #e3f4e8;  --apg-c-success-fg:  #1c7a3e;
	--apg-c-progress-bg: #fbf2d8;  --apg-c-progress-fg: #8a6d10; --apg-c-progress-bd: #f0e2b8;
	--apg-c-info-bg:     #e7eefb;  --apg-c-info-fg:     #1f5fb0;
	--apg-c-pending-bg:  #fdeede;  --apg-c-pending-fg:  #9a5b16;
	--apg-c-error-bg:    #fde5e5;  --apg-c-error-fg:    #b3261e; --apg-c-error-bd:    #f4cccc;
	--apg-c-refund-bg:   #efe9f7;  --apg-c-refund-fg:   #6a3fb0;

	/* Wiederkehrende Container-Breite des „App"-Bereichs (Mein Konto, Login-Intro). */
	--apg-w-app: 1120px;
}

/* Anker-Sprünge (z. B. #ablauf aus Hero/FAQ) nicht unter den Sticky-Header
   schieben – sonst verschwindet die Ziel-Überschrift hinter dem Header. */
html { scroll-padding-top: calc(var(--apg-header-h) + 18px); }

/* ---------- Header ---------- */
.apg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.apg-header { padding-block: 12px; }
.apg-header__logo img { display: block; height: 44px; width: auto; }
.apg-header__right { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); }

/* ---------- Sektions-Vertikal-Padding: fluide Skalierung (above the fold + Scrolltiefe) ----------
   Zentraler Hebel für ALLE Pattern-gebauten Seiten in ALLEN 7 Sprachen:
   Startseite + Unterseiten (Ablauf, Grading-Standard, Kategorien, Über-uns,
   Händler, Pop-Report). Eine geteilte Regel statt pro Seite/Sprache.

   Die Sektionen setzen ihr Top-/Bottom-Padding fix über zwei Spacing-Tokens:
   - Hero-/Einstiegs-Sektionen: spacing-70 (= 6rem / 96px)
   - alle übrigen Sektionen:    spacing-60 (= 4rem / 64px)
   Beide werden NUR für dieses Sektions-Padding genutzt (nicht für Innen-Abstände),
   liegen inline auf den Sektions-Boxen und galten fix auf jedem Viewport. Auf
   Mobile summiert das (Sticky-Header 69px + ~10 Sektionen) zu unnötiger
   Scrolltiefe und drückt above-the-fold-Inhalte nach unten.

   Fix: die jeweilige Custom-Property NUR auf der betreffenden Sektions-Box fluid
   überschreiben (kein !important, da direkt am Element gesetzt). Ab ~1180px
   bleiben die vollen Desktop-Werte (96 / 64px, Premium-Whitespace) erhalten,
   darunter fließend bis 48 / 40px auf Mobile. Die Sektions-Rhythmik bleibt (alle
   skalieren gemeinsam); nur die Scrolltiefe sinkt. Der Attribut-Selektor trifft
   exakt die inline-gepolsterte Sektions-Box → WooCommerce (Shop/Produkt/Cart),
   Blog-Archive und Legal-Fließtext bleiben unberührt (kein passendes
   „entry-content > spacing-Box"-Pattern; .apg-main-Margins sind nicht betroffen). */
.entry-content > .wp-block-group[style*="--wp--preset--spacing--70"] {
	--wp--preset--spacing--70: clamp(3rem, 8vw, 6rem);
}
.entry-content > .wp-block-group[style*="--wp--preset--spacing--60"] {
	--wp--preset--spacing--60: clamp(2.5rem, 5.5vw, 4rem);
}

/* ---------- Footer ---------- */
.apg-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.apg-footer__logo img { height: 40px; width: auto; }
.apg-footer .apg-social a { color: var(--wp--preset--color--contrast); margin-right: 14px; opacity: .8; }
.apg-footer .apg-social a:hover { color: var(--wp--preset--color--gold-dark); opacity: 1; }
.apg-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
}
.apg-footer__bottom a { color: var(--wp--preset--color--muted); text-decoration: none; }
.apg-footer__bottom a:hover { color: var(--wp--preset--color--contrast); }
/* Footer-Menü (wp_nav_menu via [apg_menu location="footer"]) als schlichte Liste */
.apg-footer .apg-nav ul { flex-direction: column; align-items: flex-start; gap: 8px; }
.apg-footer .apg-nav a { color: var(--wp--preset--color--muted); font-weight: 500; }
.apg-footer .apg-nav a:hover { color: var(--wp--preset--color--contrast); }
/* USP-Leiste (oben im Footer) */
.apg-footer__usps {
	gap: 8px 28px;
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}
.apg-footer__usps p { margin: 0; }
/* Newsletter-Formular (apgrading-core) im Footer kompakt */
.apg-footer .apgc-form--newsletter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.apg-footer .apgc-form--newsletter .apgc-field { margin: 0; flex: 1 1 150px; }
.apg-footer .apgc-form--newsletter .apgc-field label { font-size: 0; }
.apg-footer .apgc-form--newsletter input[type="email"] {
	width: 100%; padding: 9px 12px; border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px; font-size: .95rem; background: #fff;
}
.apg-footer .apgc-form--newsletter .apgc-actions { margin: 0; }
.apg-footer .apgc-form--newsletter .apgc-submit { padding: 9px 18px; white-space: nowrap; }
.apg-footer .apgc-form--newsletter .apgc-status { flex-basis: 100%; font-size: .85rem; margin: 4px 0 0; }
.apg-footer .apgc-form .apgc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Zahlungsarten-Leiste */
.apg-footer__pay { gap: 8px 14px; margin-top: var(--wp--preset--spacing--40); }
.apg-footer__pay p { margin: 0; }
.apg-pay-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.apg-pay-icons svg { display: block; height: 29px; width: auto; }

/* ---------- Hauptnavigation (wp_nav_menu via [apg_menu]) ---------- */
.apg-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2rem);
}
.apg-nav li { position: relative; }
.apg-nav a {
	display: inline-block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.97rem;
	padding: 0.4rem 0;
	transition: color .15s ease;
}
.apg-nav a:hover,
.apg-nav .current-menu-item > a { color: var(--wp--preset--color--gold-dark); }

/* Untermenüs */
.apg-nav .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 12px 32px -12px rgba(24,24,27,.18);
	padding: 8px;
	display: none;
}
.apg-nav li:hover > .sub-menu,
.apg-nav li:focus-within > .sub-menu { display: flex; }
.apg-nav .sub-menu a { padding: 8px 12px; border-radius: 8px; width: 100%; }
.apg-nav .sub-menu a:hover { background: var(--wp--preset--color--surface); }

/* ---------- Sprachumschalter (Polylang) als kompakte Combobox ---------- */
/* Natives <details>/<summary>: zugeklappt = aktuelles Kürzel, aufgeklappt = Namen.
   Kein JS nötig (delay_js-fest); navigation.js schließt optional bei Außenklick/ESC. */
.apg-lang__combo { position: relative; }
.apg-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	list-style: none;            /* Standard-Dreieck entfernen */
	cursor: pointer;
	user-select: none;
	padding: 6px 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	transition: border-color .15s ease, color .15s ease;
}
.apg-lang__current::-webkit-details-marker { display: none; }   /* Safari/altes Chrome */
.apg-lang__current::marker { content: ""; }                      /* Firefox */
.apg-lang__current:hover,
.apg-lang__combo[open] .apg-lang__current {
	border-color: var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--gold-dark);
}
.apg-lang__current:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-dark);
	outline-offset: 2px;
}
.apg-lang__caret { width: 13px; height: 13px; transition: transform .15s ease; }
.apg-lang__combo[open] .apg-lang__caret { transform: rotate(180deg); }

.apg-lang__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 168px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 12px 32px -12px rgba(24, 24, 27, .18);
	z-index: 200;
}
.apg-lang__list .lang-item { margin: 0; }
.apg-lang__list a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	transition: background-color .15s ease, color .15s ease;
}
.apg-lang__list a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--gold-dark); }
.apg-lang__list .current-lang a { color: var(--wp--preset--color--gold-dark); font-weight: 600; }

/* ---------- Header-Icons (Warenkorb / Konto) ---------- */
/* Ersetzen die früheren Text-Menüpunkte „Warenkorb" / „Mein Konto".
   Als enges Paar in .apg-actions gruppiert (etwas dichter als der übrige
   Header-Abstand), damit sie als zusammengehörige Aktionen lesbar sind.
   position:relative erlaubt ein späteres Mengen-Badge ohne Umbau. */
.apg-header__right .apg-actions { display: flex; align-items: center; gap: 4px; }
.apg-cart,
.apg-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	position: relative;
	color: var(--wp--preset--color--contrast);
	transition: color .15s ease, background-color .15s ease;
}
.apg-cart svg,
.apg-account svg { display: block; width: 22px; height: 22px; }
/* Dezenter Hover-Hintergrund – rund beim Profil-Icon (passend zur runden Form),
   abgerundetes Quadrat beim Warenkorb. */
.apg-cart { border-radius: 10px; }
.apg-account { border-radius: 50%; }
.apg-cart:hover,
.apg-account:hover {
	color: var(--wp--preset--color--gold-dark);
	background: var(--wp--preset--color--surface);
}

/* ---------- Mobile-Navigation ---------- */
.apg-nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 10px;
	color: var(--wp--preset--color--contrast);
}
.apg-nav-toggle svg { display: block; width: 26px; height: 26px; }

@media (max-width: 860px) {
	.apg-nav-toggle { display: inline-flex; }
	.apg-nav {
		position: fixed;
		inset: var(--apg-header-h) 0 auto 0;
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding: 16px 20px 24px;
		display: none;
		box-shadow: 0 18px 32px -18px rgba(24,24,27,.25);
	}
	body.apg-nav-open .apg-nav { display: block; }
	.apg-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.apg-nav li { border-bottom: 1px solid var(--wp--preset--color--border); }
	.apg-nav a { padding: 12px 0; font-size: 1.05rem; }
	.apg-nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 8px 12px; }
}

/* ---------- WooCommerce-Feinschliff (an theme.json angelehnt) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { border-top-color: var(--wp--preset--color--gold); }
.woocommerce ul.products li.product .price { color: var(--wp--preset--color--contrast); font-weight: 600; }
a.button, button.button, .woocommerce a.button, .woocommerce button.button {
	/* display: im Block-Theme fehlt der .woocommerce-Wrapper um manche Buttons
	   (Germanized Order-Aktionen/Dokument-Downloads) → sie erbten kein
	   inline-block und wurden als inline gerendert, wodurch ihr vertikales
	   Padding benachbarte Buttons überlappte. */
	display: inline-block;
	vertical-align: top;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 10px;
	font-weight: 600;
}
a.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
	background: var(--wp--preset--color--gold-dark);
}
/* Bestell-Ansicht: Germanized Rechnungs-/Stornierungs-Buttons (Aktionen + Downloads)
   sauber inline-block + Abstand beim Umbruch (sonst überlappend, s. o.). */
.order-actions-button,
.button-document-download { display: inline-block; vertical-align: top; }
.woocommerce-order-details .order-actions-button,
.woocommerce-order-downloads .order-actions-button { margin-bottom: .4rem; }
.button-document-download { margin: 0 .5rem .5rem 0; }

/* ---------- FAQ / Details-Akkordeon ---------- */
.wp-block-details { background: var(--wp--preset--color--base); }
.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	position: relative;
	padding-right: 1.75rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4em;
	line-height: 1;
	color: var(--wp--preset--color--gold-dark);
}
.wp-block-details[open] summary::after { content: "\2013"; }
.wp-block-details summary:hover { color: var(--wp--preset--color--gold-dark); }
.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-dark);
	outline-offset: 3px;
	border-radius: 4px;
}
.wp-block-details > *:not(summary) { margin-top: .6rem; }

/* ---------- Lesbarkeit: Listen & Outline-Buttons ---------- */
/* Listen erben standardmäßig die dunkle Schriftfarbe (Lesbarkeits-Default mit
   niedriger Spezifität). Bewusst gedämpfte Listen (Patterns mit inline
   color:muted, z. B. Grading-Standard/Ablauf) bleiben erhalten – kein
   !important und kein li-Selektor überschreibt die Inline-Vorgabe mehr. */
.wp-block-list { color: var(--wp--preset--color--contrast); }
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* ---------- Siegelnummer-Check-Formular (.apg-check) ----------
   Kanonisch hier statt doppelt inline in den Patterns pop-report/page-pop-report. */
.apg-check { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 1.5rem auto 0; }
.apg-check input { flex: 1 1 240px; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: 10px; font-size: 1rem; color: var(--wp--preset--color--contrast); }
.apg-check button { padding: .85rem 1.6rem; border: 0; border-radius: 10px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 1rem; cursor: pointer; }
.apg-check button:hover { background: var(--wp--preset--color--gold-dark); color: #fff; }

/* ---------- Diverses ---------- */
.apg-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--wp--preset--color--contrast); color: #fff;
	padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 1000;
}
.apg-skip-link:focus { left: 0; }

/* =========================================================================
   „Mein Konto“ – UX-Überarbeitung (Maßnahmenliste 2026-06-28)
   Alles unter .woocommerce-account gescoped → wirkt nur im Konto-Bereich.
   ========================================================================= */

/* ---- Breite + 2-Spalten-Layout (Desktop): Navi links, Inhalt nutzt Rest ---- */
.woocommerce-account .woocommerce {
	max-width: var(--apg-w-app);
	margin-inline: auto;
}
@media (min-width: 783px) {
	.woocommerce-account .woocommerce {
		display: flex;
		align-items: flex-start;
		gap: 2.5rem;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
		flex: 0 0 248px;
		margin: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
	}
}

/* ---- Navigation als echtes Menü: Box, aktiver Zustand, Fokus, Icons ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 9px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	width: 18px; height: 18px; flex: 0 0 18px;
	background-color: currentColor;
	-webkit-mask: var(--apg-ico) no-repeat center / contain;
	        mask: var(--apg-ico) no-repeat center / contain;
	opacity: .75;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: rgba(0,0,0,.04); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-dark);
	outline-offset: 1px;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a::before { opacity: 1; }
/* Endpoint-Icons (mask, erben Linkfarbe) */
.woocommerce-MyAccount-navigation-link--dashboard a       { --apg-ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>'); }
.woocommerce-MyAccount-navigation-link--orders a          { --apg-ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>'); }
.woocommerce-MyAccount-navigation-link--edit-address a    { --apg-ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>'); }
.woocommerce-MyAccount-navigation-link--edit-account a    { --apg-ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>'); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --apg-ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/></svg>'); }

/* ---- Mobil-Akkordeon der Konto-Navigation (Desktop bleibt Sidebar) ---- */
.apg-acct-nav__toggle {
	display: none; list-style: none; cursor: pointer;
	align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 16px; font-weight: 700; color: var(--wp--preset--color--contrast);
}
.apg-acct-nav__toggle::-webkit-details-marker { display: none; }   /* Safari/altes Chrome */
.apg-acct-nav__toggle::marker { content: ""; }
.apg-acct-nav__caret { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .15s ease; }
.apg-acct-nav[open] .apg-acct-nav__caret { transform: rotate(180deg); }
@media (min-width: 783px) {
	/* Desktop: Akkordeon-Kopf weg, Liste immer sichtbar (auch wenn <details> zu).
	   Modernes Chrome versteckt geschlossenen <details>-Inhalt via ::details-content
	   (content-visibility) – daher zusätzlich überschreiben; ältere Browser nutzen
	   den display-Override auf der Liste. */
	.apg-acct-nav__toggle { display: none; }
	.apg-acct-nav > ul { display: block !important; }
	.apg-acct-nav::details-content { content-visibility: visible !important; }
}
@media (max-width: 782px) {
	.apg-acct-nav__toggle { display: flex; }
	/* Card-Rahmen auf das <details> verlagern, ul-Rahmen wird zum Trenner */
	.woocommerce-account .woocommerce-MyAccount-navigation .apg-acct-nav {
		border: 1px solid var(--wp--preset--color--border); border-radius: 14px;
		background: var(--wp--preset--color--base); margin: 0 0 1.25rem; overflow: hidden;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		border: 0; border-radius: 0; margin: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
}

/* ---- A11y: Inhalts-Links im Konto unterstreichen (Kontrast-Sicherheit) ---- */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button):not(.apg-tile):not(.apg-tracking__btn) { text-decoration: underline; }
/* Custom-Buttons (Bestellung ansehen / Sendung verfolgen) wie Theme-Buttons:
   nie unterstrichen, volle Button-Optik (wp-element-button liefert das Padding). */
.woocommerce-account .woocommerce-MyAccount-content a.button { text-decoration: none; }
.apg-card__links .button { display: inline-block; }

/* ---- Bug-Fix: überlappende Adress-Überschriften (Desktop) ---- */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 1.25rem;
	overflow-wrap: anywhere;
}
.woocommerce-account .woocommerce-Addresses.col2-set { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; flex: 1 1 280px; }

/* ---- Status-Badges (Bestellliste + Detail) ---- */
.apg-status {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: .82em; font-weight: 700; line-height: 1.5; white-space: nowrap;
	background: var(--apg-c-neutral-bg); color: var(--apg-c-neutral-fg);
}
.apg-status--completed { background: var(--apg-c-success-bg); color: var(--apg-c-success-fg); }
.apg-status--package-received,
.apg-status--pre-screening,
.apg-status--authentication,
.apg-status--grading-regular,
.apg-status--grading-forensic,
.apg-status--encapsulation,
.apg-status--shipping-preparat { background: var(--apg-c-progress-bg); color: var(--apg-c-progress-fg); }
.apg-status--processing { background: var(--apg-c-info-bg); color: var(--apg-c-info-fg); }
.apg-status--pending,
.apg-status--on-hold    { background: var(--apg-c-pending-bg); color: var(--apg-c-pending-fg); }
.apg-status--cancelled,
.apg-status--failed     { background: var(--apg-c-error-bg); color: var(--apg-c-error-fg); }
.apg-status--refunded   { background: var(--apg-c-refund-bg); color: var(--apg-c-refund-fg); }

/* ---- Grading-Status-Tracker (Stepper) ---- */
.apg-order-status { margin: 0 0 1.75rem; }
.apg-tracker { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 1rem; }
.apg-step { flex: 1 1 0; min-width: 84px; text-align: center; position: relative; padding-top: 26px; }
.apg-step::before {
	content: ""; position: absolute; top: 8px; left: 50%; right: -50%; height: 3px;
	background: var(--wp--preset--color--border);
}
.apg-step:last-child::before { display: none; }
.apg-step__dot {
	position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--wp--preset--color--base); border: 3px solid var(--wp--preset--color--border);
	z-index: 1;
}
.apg-step__label { font-size: .76rem; line-height: 1.25; color: var(--wp--preset--color--muted, #55555f); display: block; padding: 0 4px; }
.apg-step.is-done::before { background: var(--wp--preset--color--gold); }
.apg-step.is-done .apg-step__dot { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); }
.apg-step.is-active .apg-step__dot { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.apg-step.is-active .apg-step__label { color: var(--wp--preset--color--contrast); font-weight: 700; }
.apg-statusbox {
	padding: 12px 16px; border-radius: 12px;
	background: var(--apg-c-progress-bg); color: var(--apg-c-progress-fg);
	border: 1px solid var(--apg-c-progress-bd);
}
.apg-statusbox.is-neg { background: var(--apg-c-error-bg); color: var(--apg-c-error-fg); border-color: var(--apg-c-error-bd); }

/* ---- DHL-Sendungsverfolgung ---- */
.apg-tracking {
	display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
	margin: 0 0 1rem; padding: 12px 16px; border: 1px solid var(--wp--preset--color--border); border-radius: 12px;
}
.apg-tracking__no { font-size: .95rem; }
.apg-tracking__btn { margin: 0; }

/* ---- Dashboard-Cockpit ---- */
.apg-dash__hi { font-size: 1.45rem; font-weight: 700; margin: 0 0 1.25rem; }
.apg-card {
	border: 1px solid var(--wp--preset--color--border); border-radius: 16px;
	padding: 20px; margin: 0 0 1.5rem; background: var(--wp--preset--color--base);
}
.apg-card__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 1rem; }
.apg-card__no { color: var(--wp--preset--color--muted, #55555f); font-weight: 600; }
.apg-card__links { margin: .5rem 0 0; }
.apg-card__links .button { margin: 0; }
.apg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.apg-tile {
	display: flex; flex-direction: column; gap: 4px; text-decoration: none !important;
	border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: 16px 18px;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
}
.apg-tile:hover { border-color: var(--wp--preset--color--gold); }
.apg-tile__t { font-weight: 700; }
.apg-tile__s { font-size: .85rem; color: var(--wp--preset--color--muted, #55555f); }
.apg-tile--cta { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); }
.apg-tile--cta .apg-tile__s { color: rgba(255,255,255,.8); }
.apg-tile--addr { cursor: default; }

/* ---- Login/Registrierung: Value-Prop + Trust ---- */
.apg-login-intro { max-width: var(--apg-w-app); margin: 0 auto 1.75rem; }
.apg-login-intro__lead { font-size: 1.05rem; margin: 0 0 .75rem; }
.apg-login-intro__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.apg-login-intro__trust li { position: relative; padding-left: 22px; font-weight: 600; font-size: .92rem; }
.apg-login-intro__trust li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
	background-color: var(--wp--preset--color--gold-dark);
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg>') no-repeat center / contain;
}

/* ---- Reibung raus: USt-ID aus Registrierung, Newsletter aus Adressformular ----
   (Newsletter-Opt-in bleibt in Registrierung + Konto-Details als Verwaltung). */
.woocommerce-gzdp-register-vat-id-form-row { display: none; }
.woocommerce-account .woocommerce-address-fields .noptin-integration-subscription-checkbox { display: none; }
.woocommerce-account .woocommerce-address-fields p:has(> .noptin-integration-subscription-checkbox) { display: none; }

/* === Ablauf / how-it-works pages — 2026-06-28, entkoppelt 2026-06-28 (P2) ===
   Stabile Klasse .apg-page-ablauf (body_class-Filter in inc/setup.php) statt der
   früheren 6 fragilen .page-id-…-Selektoren.
   (a) Tablet 2x2 step grid instead of a cramped 4-in-a-row (600–1024px)
   (b) Stronger step-card border for WCAG 1.4.11 non-text contrast (~3:1 vs #fff) */
.apg-page-ablauf .wp-block-columns.alignwide > .wp-block-column.has-border-color {
	border-color: #8e8e93 !important;
}
@media (min-width: 600px) and (max-width: 1024px) {
	.apg-page-ablauf .wp-block-columns.alignwide:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
	}
}

/* === Ablauf follow-ups — added 2026-06-28 (B icons, C sr-only) === */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.apg-step-ico, .apg-pack-ico { display: inline-block; color: var(--wp--preset--color--gold-dark, #8a6d10); }
.apg-page-ablauf .apg-step-ico {
	width: 30px; height: 30px; margin-bottom: 6px;
}
.apg-pack-ico { width: 34px; height: 34px; margin-bottom: 6px; }
.apg-pack-steps .wp-block-column { text-align: center; }

/* === Über-uns: Vergleichstabelle (AP vs PSA/CGC) — added 2026-06-28 === */
.apg-compare table { border-collapse: collapse; width: 100%; }
.apg-compare th, .apg-compare td { padding: .65em .85em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wp--preset--color--border, #e5e5ea); }
.apg-compare thead th { border-bottom-width: 2px; font-size: .95rem; }
.apg-compare thead th:nth-child(2) { color: var(--wp--preset--color--gold-dark, #8a6d10); }
.apg-compare tbody td:first-child { font-weight: 600; }
.apg-compare tbody td:nth-child(2) { background: rgba(212, 175, 55, .08); }
.apg-compare tbody td:nth-child(3) { color: var(--wp--preset--color--muted, #55555f); }
@media (max-width: 600px) { .apg-compare th, .apg-compare td { padding: .5em .55em; font-size: .9rem; } }

/* ============================================================
   Seite „Grading-Standard": UX-/A11y-Optimierungen (2026-06-28)
   ============================================================ */
/* 4 Kriterien-Karten: 2×2 über den gesamten Tablet-Bereich (bis iPad-Querformat
   1024px) statt 4-breit, darunter 1-breit. Vermeidet das gequetschte 4-in-einer-
   Reihe im Band 901–1024px. */
@media (max-width: 1024px) {
	.apg-crit { flex-wrap: wrap !important; }
	.apg-crit > .wp-block-column { flex-basis: calc(50% - 10px) !important; flex-grow: 0; }
}
@media (max-width: 480px) {
	.apg-crit > .wp-block-column { flex-basis: 100% !important; }
}
/* „Centering"-Schritt (Bild zuerst im DOM): auf Mobile Überschrift/Text vor Bild */
@media (max-width: 781px) {
	.wp-block-columns.apg-rev { flex-direction: column-reverse !important; flex-wrap: nowrap !important; }
}
/* Schritt „Forensische Analyse": bewusste, kontraststarke Hervorhebung statt nur 1px-Gold (WCAG 1.4.11) */
.wp-block-group.has-gold-border-color { border-left-width: 4px !important; background: rgba(212, 175, 55, .06); }
/* Noten-Legende dezent abheben */
.apg-legend { background: var(--wp--preset--color--surface); }

/* ============================================================
   Grading-Standard Runde 2: Breadcrumb, Sprungnav, Sticky-CTA,
   Mobile-Skala, WebP-figure (2026-06-28)
   ============================================================ */
.apg-jumpnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px auto 6px; }
.apg-jumpnav a { font-size: .9rem; font-weight: 500; line-height: 1; padding: 9px 18px; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.apg-jumpnav a:hover, .apg-jumpnav a:focus-visible { border-color: var(--wp--preset--color--gold); background: rgba(212,175,55,.10); color: var(--wp--preset--color--gold-dark); }
/* Sprung-Anker: der Offset wird jetzt global über html{scroll-padding-top}
   (s. o.) gelöst – der frühere per-Seite top:-90px-Hack entfällt, sonst würde
   sich beides addieren und die Ziel-Überschrift zu tief springen. */
.apg-anchor { display: block; visibility: hidden; pointer-events: none; }

/* ---------- Sticky-CTA (Mobile) – EINE kanonische Definition ----------
   Gilt für BEIDE Kontexte mit der Klasse .apg-sticky-cta:
   (a) Grading-Standard-Seiten (Markup im Seiteninhalt) und
   (b) Warenkorb/Produkt (per inc/woocommerce-conversion.php injiziert).
   Früher zusätzlich als Inline-<style> in conversion.php dupliziert (dunkler
   Button, abweichender Breakpoint 768, globales body-Padding) – jetzt hier
   gebündelt. Breakpoint an den WP-Stack-Wert (782px) angeglichen.
   body-Padding via :has() statt page-id-Kopplung → greift genau dort, wo eine
   Sticky-Bar im DOM ist, und nur dann (kein Phantom-Padding auf anderen Seiten). */
.apg-sticky-cta { display: none; }
@media (max-width: 782px) {
	.apg-sticky-cta {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.96);
		-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.apg-sticky-cta__btn {
		display: block; text-align: center;
		background: var(--wp--preset--color--gold); color: var(--wp--preset--color--contrast);
		font-weight: 700; padding: 13px 16px; border-radius: 10px; text-decoration: none;
	}
	body:has(.apg-sticky-cta) { padding-bottom: 78px; }
}

/* ============================================================
   Grading-Skala — HTML/CSS-Komponente (ersetzt das Skalen-Bild)
   2026-06-28 · nutzt Design-Tokens (theme.json), kein JS
   ============================================================ */
.apg-scale {
	position: relative;
	max-width: 760px;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: clamp(22px, 4vw, 40px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 18px 40px -22px rgba(24, 24, 27, .25);
}
/* AP-Logo: dezenter Brand-Akzent oben rechts, via CSS-Maske in Markenfarbe einfärbbar (crisp, kein Extra-Request im Markup) */
.apg-scale__logo {
	position: absolute;
	top: clamp(18px, 3.4vw, 26px);
	right: clamp(18px, 3.4vw, 26px);
	width: 66px; height: 21px;
	background: var(--wp--preset--color--gold-dark);
	opacity: .65;
	-webkit-mask: url(/wp-content/themes/apgrading/assets/images/logo.svg) right center / contain no-repeat;
	        mask: url(/wp-content/themes/apgrading/assets/images/logo.svg) right center / contain no-repeat;
}
/* --- Visueller Skalen-Balken --- */
.apg-scale__bar { position: relative; margin: 4px 0 var(--wp--preset--spacing--50); padding-top: 34px; }
.apg-scale__track {
	position: relative; height: 12px; border-radius: 999px;
	background: linear-gradient(90deg, #f1f1f4 0%, var(--wp--preset--color--border) 64%);
}
.apg-scale__zone {
	position: absolute; top: 0; bottom: 0; left: 68.4%; right: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold-dark), var(--wp--preset--color--gold));
}
.apg-scale__track::after { /* Peak-Marker bei 10 */
	content: ""; position: absolute; top: 50%; right: 0; transform: translate(45%, -50%);
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--wp--preset--color--gold);
	border: 3px solid var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px var(--wp--preset--color--gold-dark);
}
.apg-scale__marks { position: relative; height: 1.3em; margin-top: 10px; font-size: .8rem; color: var(--wp--preset--color--muted); }
.apg-scale__mark { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.apg-scale__mark--lo  { left: 0; transform: none; }
.apg-scale__mark--mid { left: 47.4%; }
.apg-scale__mark--9   { left: 89.5%; }
.apg-scale__mark--hi  { left: auto; right: 0; transform: none; font-weight: 700; color: var(--wp--preset--color--gold-dark); }
.apg-scale__flag { /* „Subgrades ab 7,0" an der Grenze des Gold-Bereichs (68,4 %) */
	position: absolute; top: 0; left: 68.4%; transform: translateX(-50%);
	font-size: .72rem; font-weight: 600; line-height: 1; white-space: nowrap;
	color: var(--wp--preset--color--gold-dark);
	background: rgba(212, 175, 55, .12);
	border: 1px solid rgba(212, 175, 55, .42);
	padding: 6px 11px; border-radius: 999px;
}
.apg-scale__flag::after {
	content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
	width: 1px; height: 18px; background: rgba(212, 175, 55, .5);
}
/* --- Label über den Tier-Karten --- */
.apg-scale__label {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
/* --- Tier-Karten (Note → Bedeutung) --- */
/* box-sizing absichern, falls global nicht border-box gesetzt ist */
.apg-scale, .apg-scale * { box-sizing: border-box; }
.apg-scale__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
/* Badge ÜBER dem Text (vertikal): so bestimmt nur das längste Wort die min-content-
   Breite, nicht Badge+Text in Summe – verhindert Überlauf bei langen Komposita
   (z. B. „Wiederverkaufswert"). min-width:0 lässt Grid-/Flex-Items schrumpfen. */
.apg-scale__tier {
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	min-width: 0;
	padding: 16px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 13px;
}
.apg-scale__tier dt {
	display: grid; place-items: center;
	min-width: 50px; height: 42px; padding: 0 12px;
	border-radius: 11px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	font-size: 1.25rem; font-weight: 800; line-height: 1;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.apg-scale__tier dd {
	margin: 0; min-width: 0;
	font-size: .92rem; line-height: 1.5; color: var(--wp--preset--color--muted);
	overflow-wrap: break-word;   /* nur als Sicherheitsnetz; normale Wörter umbrechen an Leerzeichen */
}
.apg-scale__tier--top { background: rgba(212, 175, 55, .08); border-color: rgba(212, 175, 55, .5); }
.apg-scale__tier--top dt { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold-dark); color: #18181b; }
/* --- Nutzen-Satz --- */
.apg-scale__benefit {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: .95rem; line-height: 1.5; color: var(--wp--preset--color--contrast);
}
/* --- Responsive --- */
@media (max-width: 720px) {
	.apg-scale__tiers { grid-template-columns: 1fr; }
	.apg-scale__logo { width: 56px; height: 18px; }
}
@media (max-width: 430px) {
	.apg-scale__mark--mid { display: none; }
	.apg-scale__flag { font-size: .68rem; padding: 5px 9px; }
}

/* =========================================================================
   Blog: Archiv-Karten · Einzelbeitrag · CTA · Related · Autor-Box (2026-06-28)
   ========================================================================= */

/* ---------- Breadcrumb (sichtbar, Yoast) ---------- */
.apg-breadcrumb { font-size: .85rem; color: var(--wp--preset--color--muted); margin: 0 0 1rem; }
.apg-breadcrumb a { color: var(--wp--preset--color--gold-dark); text-decoration: none; }
.apg-breadcrumb a:hover { color: var(--wp--preset--color--contrast); text-decoration: underline; }

/* ---------- Archiv-Header ---------- */
.apg-blog > .wp-block-query-title { margin-bottom: .25rem; }
.apg-blog__intro { max-width: 640px; }
.apg-blog__search { max-width: 440px; }

/* ---------- Archiv-Karten-Grid ---------- */
.apg-blog-cards.is-layout-grid { gap: 2.5rem 2rem; }
.apg-blog-cards .wp-block-post { position: relative; display: flex; flex-direction: column; }
.apg-blog-cards .wp-block-post-featured-image { margin: 0 0 .9rem; }
.apg-blog-cards .wp-block-post-featured-image img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border); transition: border-color .15s;
}
.apg-card-meta { color: var(--wp--preset--color--muted); font-size: .85rem; align-items: center; }
.apg-card-meta a { color: var(--wp--preset--color--muted); text-decoration: none; position: relative; z-index: 1; }
.apg-card-meta a:hover { color: var(--wp--preset--color--gold-dark); }
.apg-blog-cards .wp-block-post-title { line-height: 1.25; letter-spacing: -.01em; }
.apg-blog-cards .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
/* ganze Karte klickbar via Titel-Link-Overlay */
.apg-blog-cards .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.apg-blog-cards .wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--gold-dark); }
.apg-blog-cards .wp-block-post:hover .wp-block-post-featured-image img { border-color: var(--wp--preset--color--gold); }
.apg-blog-cards .wp-block-post-title a:focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 3px; }
.apg-blog-cards .wp-block-post-excerpt { margin-top: .4rem; line-height: 1.5; }
.apg-blog-cards .wp-block-post-excerpt__more-text { display: none; }

/* ---------- Einzelbeitrag ---------- */
.apg-post-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
	color: var(--wp--preset--color--muted); font-size: .9rem; margin: .4rem 0 1.5rem; }
.apg-post-meta a { color: var(--wp--preset--color--muted); text-decoration: none; }
.apg-post-meta a:hover { color: var(--wp--preset--color--gold-dark); }
.apg-post-meta__sep { opacity: .5; }
.apg-single .wp-block-post-content { font-size: 1.05rem; line-height: 1.7; }
.apg-single .wp-block-post-content > h2 { margin-top: 2.2rem; }
.apg-single .wp-block-post-content > h3 { margin-top: 1.6rem; }

/* Tabellen im Beitrag: responsiv + gestylt (theme.json-Tokens) */
.apg-single .wp-block-table { overflow-x: auto; }
.apg-single .wp-block-table table { border-collapse: collapse; width: 100%; }
.apg-single .wp-block-table th { background: var(--wp--preset--color--surface-dark); color: #fff; text-align: left; }
.apg-single .wp-block-table th,
.apg-single .wp-block-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.apg-single .wp-block-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--surface); }

/* ---------- In-Article-CTA ---------- */
.apg-post-cta { margin: 2.5rem 0; padding: 1.75rem; border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--gold); border-radius: 14px; background: var(--wp--preset--color--surface); }
.apg-post-cta__h { margin: 0 0 .4rem; font-size: 1.4rem; }
.apg-post-cta__p { margin: 0 0 1rem; color: var(--wp--preset--color--muted); }
.apg-post-cta__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.apg-btn { display: inline-block; border-radius: 10px; font-weight: 600; padding: .8rem 1.5rem; text-decoration: none; }
.apg-btn--primary { background: var(--wp--preset--color--contrast); color: #fff; }
.apg-btn--primary:hover { background: var(--wp--preset--color--gold-dark); color: #fff; }
.apg-btn--ghost { border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--contrast); }
.apg-btn--ghost:hover { border-color: var(--wp--preset--color--gold-dark); color: var(--wp--preset--color--gold-dark); }

/* ---------- Related Posts ---------- */
.apg-related { margin: 3rem 0 0; }
.apg-related__h { font-size: 1.5rem; margin: 0 0 1.2rem; }
.apg-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.apg-rel__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.apg-rel__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--wp--preset--color--border); transition: border-color .15s; }
.apg-rel__title { margin: .6rem 0 .2rem; font-weight: 600; line-height: 1.3; }
.apg-rel__card:hover .apg-rel__title { color: var(--wp--preset--color--gold-dark); }
.apg-rel__card:hover .apg-rel__img { border-color: var(--wp--preset--color--gold); }
.apg-rel__date { font-size: .8rem; color: var(--wp--preset--color--muted); }

/* ---------- Autor-/Redaktions-Box ---------- */
.apg-author { display: flex; gap: 1rem; align-items: flex-start; margin: 2.5rem 0 0; padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border); border-radius: 14px; background: var(--wp--preset--color--surface); }
.apg-author__avatar { border-radius: 50%; width: 64px; height: 64px; flex: 0 0 auto; }
.apg-author__name { font-weight: 700; margin: 0 0 .3rem; }
.apg-author__bio { margin: 0 0 .5rem; color: var(--wp--preset--color--muted); font-size: .95rem; line-height: 1.55; }
.apg-author__link { color: var(--wp--preset--color--gold-dark); font-weight: 600; text-decoration: none; }
.apg-author__link:hover { text-decoration: underline; }

/* ---------- Blog Responsive ---------- */
@media (max-width: 900px) {
	.apg-blog-cards.is-layout-grid,
	.apg-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.apg-blog-cards.is-layout-grid,
	.apg-related__grid { grid-template-columns: 1fr; }
	.apg-author { flex-direction: column; }
	.apg-post-cta { padding: 1.25rem; }
}