/* Ganze Pixel für Höhe/Innenabstand: sonst landet die starke Rundung auf
   Bruchpixeln und wirkt treppig. translateZ(0) erzwingt zusätzlich das
   Glätten durch die Grafikkarte. */
html.frontend .pp-cart-link {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9999;
	/* Erst sichtbar, wenn etwas im Warenkorb liegt (per JS). */
	display: none;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	background: #fff;
	color: #0a0a0a;
	border: 1px solid #0a0a0a;
	border-radius: 20px;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transform: translateZ(0);
	backface-visibility: hidden;
}

html.frontend .pp-cart-link.is-visible {
	display: inline-flex;
}

/* Einmaliges Aufpoppen beim Erscheinen. */
html.frontend .pp-cart-link.pp-cart-appear {
	animation: pp-cart-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1 both;
}

@keyframes pp-cart-pop {
	0% {
		opacity: 0;
		transform: translateZ(0) scale(0.5);
	}
	60% {
		opacity: 1;
		transform: translateZ(0) scale(1.12);
	}
	100% {
		opacity: 1;
		transform: translateZ(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.frontend .pp-cart-link.pp-cart-appear {
		animation: none;
	}
}

html.frontend .pp-cart-link:hover {
	background: #0a0a0a;
	color: #fff;
}

html.frontend .pp-cart-link:hover .pp-cart-count {
	background: #fff;
	color: #0a0a0a;
}

/* Nicht hinter der WordPress-Adminleiste verschwinden (32px, mobil 46px). */
html.frontend body.admin-bar .pp-cart-link {
	top: 48px;
}

@media screen and (max-width: 782px) {
	html.frontend body.admin-bar .pp-cart-link {
		top: 62px;
	}
}

html.frontend .pp-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 8px;
	background: #0a0a0a;
	color: #fff;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

/* Leerer Zähler (nichts im Warenkorb) soll keinen Punkt zeigen. */
html.frontend .pp-cart-count:empty {
	display: none;
}

/* Form und Abstände; die Farben kommen über die Theme-Klassen
   .brand-color-bg / .brand-highlight-color am Button. */
html.frontend .pp-add-to-cart-button,
html.frontend .pp-abo-button {
	border: none;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
	margin: 0.5rem 0;
}

html.frontend .pp-add-to-cart-button:disabled,
html.frontend .pp-abo-button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Fallback-Farben nur, wenn die Theme-Klasse fehlt. */
html.frontend .pp-add-to-cart-button:not(.brand-color-bg),
html.frontend .pp-abo-button:not(.brand-color-bg) {
	background: #0a7b74;
	color: #fff;
}

html.frontend .pp-add-to-cart-button:not(.brand-color-bg):hover,
html.frontend .pp-abo-button:not(.brand-color-bg):hover {
	background: #086159;
}

html.frontend .pp-abo-button:not(.brand-color-bg) {
	background: #14537d;
}

html.frontend .pp-abo-button:not(.brand-color-bg):hover {
	background: #0e3d5c;
}

html.frontend .pp-cart-subs-heading {
	margin-top: 2rem;
}

html.frontend .pp-sub-buttons {
	margin: 0.75rem 0 1.5rem;
}

/* Breite der PayPal-Buttons.
   Die Buttons selbst liegen in einem iframe von PayPal und sind per CSS von
   außen nicht erreichbar. Steuerbar ist nur die Breite der Container, in die
   das SDK den iframe rendert - danach richtet sich die Button-Breite.
   Hinweis: PayPal begrenzt die Buttons intern auf 750px. */
html.frontend #pp-paypal-buttons,
html.frontend .pp-sub-buttons,
html.frontend #pp-abo-modal-buttons,
html.frontend .paypal-buttons {
	max-width: 800px;
}

html.frontend .pp-error {
	color: #b32d2e;
}

html.frontend #pp-cart-page {
	max-width: 800px;
	margin: 2rem auto;
}

html.frontend .pp-cart-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid #e4e4e4;
}

html.frontend .pp-cart-item-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

html.frontend .pp-cart-item-name {
	flex: 1;
}

html.frontend .pp-cart-item-sub {
	font-size: 0.85rem;
	color: #555;
}

html.frontend .pp-cart-item-price {
	font-weight: 600;
	white-space: nowrap;
}

html.frontend .pp-cart-item-remove {
	background: none;
	border: none;
	color: #b32d2e;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.25rem;
}

html.frontend #pp-cart-total {
	text-align: right;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 1rem 0;
}

html.frontend #pp-cart-empty {
	color: #666;
}

html.frontend .pp-cart-success {
	color: #2e7d32;
	font-weight: 600;
}

html.frontend .pp-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

html.frontend .pp-modal {
	position: relative;
	background: #fff;
	border-radius: 0;
	padding: 2rem 1.75rem 1.75rem;
	width: 100%;
	max-width: 750px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

html.frontend .pp-modal .pp-billing-grid {
	grid-template-columns: 1fr;
}

html.frontend .pp-modal .pp-billing-form {
	margin: 1rem 0 0;
	padding: 0;
}

html.frontend .pp-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 0;
}

html.frontend .pp-modal-close:hover {
	color: #000;
}

html.frontend .pp-modal-title {
	margin: 0 0 0.5rem;
}

html.frontend .pp-modal-info {
	margin: 0 0 1.5rem;
	color: #444;
}

html.frontend .pp-abo-modal-buttons {
	min-height: 45px;
}

html.frontend .pp-cart-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2.5rem 0;
}

html.frontend .pp-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid rgba(10, 123, 116, 0.2);
	border-top-color: #0a7b74;
	border-radius: 50%;
	animation: pp-spin 0.8s linear infinite;
}

@keyframes pp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Wird an Stelle von style="display:none" im Markup verwendet. */
html.frontend .pp-hidden {
	display: none;
}

html.frontend .pp-billing-form {
	width: 100%;
	margin: 1.5rem 0;
	padding: 0;
	border: none;
	border-radius: 0;
	color: #0a0a0a;
}

/* Überschriften der Formularabschnitte (als <strong> ausgegeben). */
html.frontend .pp-billing-heading {
	display: block;
	margin-top: 2em;
	margin-bottom: 1em;
}

/* Eine Zeile je Feld: Beschriftung links, Eingabefeld rechts.
   Die feste Breite der Beschriftungsspalte sorgt dafür, dass alle
   Eingabefelder links bündig untereinander beginnen. */
html.frontend .pp-billing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin-top: 1em;
}

html.frontend .pp-billing-grid label {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	align-items: center;
	gap: 0 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #0a0a0a;
}

/* Schriftgröße aller Formularfelder explizit setzen. */
html.frontend .pp-billing-grid input,
html.frontend .pp-billing-grid select,
html.frontend .pp-billing-grid textarea,
html.frontend .pp-start-term {
	font-size: 1rem;
}

html.frontend .pp-billing-grid input,
html.frontend .pp-billing-grid textarea {
	padding: 0.2em 0.5em;
}

html.frontend .pp-billing-grid select {
	padding: 0.2em 0.5em;
	border: 1px solid #0a0a0a;
	border-radius: 0;
	background: transparent;
	font-weight: 400;
	color: #0a0a0a;
}

html.frontend .pp-billing-grid select:focus {
	outline: none;
	border-color: #0a0a0a;
	box-shadow: inset 0 0 0 1px #0a0a0a;
}

html.frontend .pp-billing-error {
	margin: 1rem 0 0;
	color: #b32d2e;
	font-weight: 600;
}

html.frontend .pp-checkout-text {
	margin: 1.5rem 0 0;
}

html.frontend .pp-checkout-text-body {
	color: #0a0a0a;
}

html.frontend .pp-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: #0a0a0a;
	cursor: pointer;
}

html.frontend .pp-consent-cb {
	flex: none;
	width: auto;
	margin-top: 0.2rem;
}

html.frontend .pp-consent-text p:first-child {
	margin-top: 0;
}

html.frontend .pp-consent-text p:last-child {
	margin-bottom: 0;
}

html.frontend .pp-shipping-section {
	margin: 1rem 0 0;
}

html.frontend .pp-shipping-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #0a0a0a;
	cursor: pointer;
}

html.frontend .pp-shipping-toggle input {
	width: auto;
}

html.frontend .pp-next-step-button {
	display: block;
	width: 100%;
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	background: transparent;
	color: #0a0a0a;
	border: 1px solid #0a0a0a;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

html.frontend .pp-next-step-button:hover {
	background: #0a0a0a;
	color: #fff;
}

html.frontend .pp-back-step {
	display: inline-block;
	margin-bottom: 1rem;
	color: #0a0a0a;
	text-decoration: underline;
	font-weight: 400;
}

html.frontend .pp-back-step:hover {
	text-decoration: underline;
}

html.frontend .pp-sub-button-label {
	margin: 1.25rem 0 0.5rem;
	font-weight: 600;
}

/* Kauf auf Rechnung */
html.frontend .pp-invoice-wrap {
	margin-top: 1.25rem;
}

html.frontend .pp-invoice-hint {
	margin: 0 0 0.75rem;
	text-align: center;
	color: #666;
	font-size: 0.9rem;
}

html.frontend .pp-invoice-button {
	display: block;
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: transparent;
	color: #0a0a0a;
	border: 1px solid #0a0a0a;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

html.frontend .pp-invoice-button:hover {
	background: #0a0a0a;
	color: #fff;
}

html.frontend .pp-invoice-button:disabled {
	opacity: 0.5;
	cursor: default;
}

html.frontend .pp-abo-widget {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

html.frontend .pp-start-term {
	padding: 0.2em 0.5em;
	border: 1px solid #0a0a0a;
	border-radius: 0;
	background: transparent;
	color: #0a0a0a;
}

html.frontend .pp-start-term:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px #0a0a0a;
}

html.frontend .pp-modal-start {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.25rem;
	font-weight: bold;
	letter-spacing: 0.02em;
	color: #0a0a0a;
}

html.frontend .pp-modal-start .pp-start-term {
	width: 100%;
	/* Das Auswahlfeld selbst soll nicht fett werden. */
	font-weight: normal;
}

/* Schmale Bildschirme: Beschriftung wieder über das Feld. */
@media (max-width: 600px) {
	html.frontend .pp-billing-grid label {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
}