/* APC Reviews — Frontend
   Farben aus der bestehenden APC-Gestaltung:
   Gold #e9c86a als Rahmen, Magenta #e0007a als Akzent, weiße Kacheln. */

.apc-reviews {
	--apc-gold: #e9c86a;
	--apc-magenta: #e0007a;
	--apc-ink: #1c1c1c;
	--apc-muted: #6b6b6b;
	--apc-line: #ece6d8;
	--apc-surface: #ffffff;

	margin: 2.5rem 0;
	color: var(--apc-ink);
}

/* ---------------------------------------------------------------- Sterne */

.apc-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	font-size: 1.05rem;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.apc-stars__empty {
	color: #dcd6c8;
}

.apc-stars__full {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--apc-gold);
}

/* ---------------------------------------------------------------- Siegel */

.apc-badge {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	background: var(--apc-surface);
	border: 1px solid var(--apc-gold);
	border-radius: 4px;
	overflow: hidden;
}

.apc-badge__score {
	flex: 0 0 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.45rem;
	padding: 1.75rem 1.25rem;
	border-right: 1px solid var(--apc-line);
	background: #fcfaf5;
}

.apc-badge__value {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.apc-badge__count {
	font-size: 0.8rem;
	color: var(--apc-muted);
}

.apc-badge__body {
	flex: 1 1 320px;
	padding: 1.5rem 1.75rem;
}

.apc-badge__headline {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	line-height: 1.3;
	position: relative;
	padding-left: 0.85rem;
}

.apc-badge__headline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 3px;
	background: var(--apc-magenta);
}

/* ------------------------------------------------------ Quellen-Aufstellung */

.apc-sources {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.apc-sources__item {
	border-top: 1px solid var(--apc-line);
}

.apc-sources__item:first-child {
	border-top: 0;
}

.apc-sources__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 1rem;
	padding: 0.6rem 0;
	text-decoration: none;
	color: inherit;
}

a.apc-sources__row:hover .apc-sources__label {
	color: var(--apc-magenta);
}

.apc-sources__label {
	font-weight: 600;
}

.apc-sources__rating {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.apc-sources__count {
	font-size: 0.8rem;
	color: var(--apc-muted);
	font-variant-numeric: tabular-nums;
	min-width: 3ch;
	text-align: right;
}

.apc-sources__count::after {
	content: " Bew.";
}

.apc-sources__item.is-excluded .apc-sources__rating,
.apc-sources__item.is-excluded .apc-sources__count {
	color: var(--apc-muted);
	font-weight: 400;
}

.apc-sources__note {
	display: block;
	font-size: 0.72rem;
	color: var(--apc-muted);
	font-weight: 400;
	margin-top: 0.1rem;
}

.apc-attribution {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	color: var(--apc-muted);
}

/* ------------------------------------------------------------ Kachelliste */

.apc-list {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--apc-columns, 3), minmax(0, 1fr));
	gap: 1.1rem;
}

.apc-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	background: var(--apc-surface);
	border: 1px solid var(--apc-line);
	border-top: 3px solid var(--apc-gold);
	border-radius: 3px;
	padding: 1.25rem 1.35rem;
}

.apc-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.apc-card__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 62ch;
}

.apc-card__meta {
	margin-top: auto;
	padding-top: 0.6rem;
	border-top: 1px solid var(--apc-line);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 0.8rem;
}

.apc-card__author {
	font-weight: 600;
}

.apc-card__source,
.apc-card__source a {
	color: var(--apc-muted);
	text-decoration: none;
}

.apc-card__source a:hover {
	color: var(--apc-magenta);
	text-decoration: underline;
}

.apc-reviews a:focus-visible {
	outline: 2px solid var(--apc-magenta);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- Mobil */

@media (max-width: 860px) {
	.apc-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.apc-badge__score {
		flex-basis: 100%;
		border-right: 0;
		border-bottom: 1px solid var(--apc-line);
	}

	.apc-badge__body {
		padding: 1.25rem;
	}

	.apc-list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------ Aufklapp-Schalter */

.apc-card__toggle {
	align-self: flex-start;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.82rem;
	color: var(--apc-magenta, #e0007a);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.apc-card__toggle:hover {
	text-decoration: none;
}

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

.apc-form {
	--apc-gold: #e9c86a;
	--apc-magenta: #e0007a;
	--apc-ink: #1c1c1c;
	--apc-muted: #6b6b6b;
	--apc-line: #ece6d8;

	max-width: 640px;
	margin: 2rem 0;
	color: var(--apc-ink);
}

.apc-form__subject {
	margin: 0 0 1.5rem;
	padding-left: 0.85rem;
	border-left: 3px solid var(--apc-magenta);
	font-size: 1.05rem;
}

.apc-form__error {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid #c0392b;
	background: #fdf3f2;
	font-size: 0.92rem;
}

.apc-form--done p {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--apc-gold);
	border-radius: 4px;
}

/* Kriterien */

.apc-form__criteria {
	display: grid;
	gap: 0;
	margin-bottom: 1.75rem;
	border-top: 1px solid var(--apc-line);
}

.apc-form__criterion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0.85rem 0;
	border: 0;
	border-bottom: 1px solid var(--apc-line);
}

.apc-form__criterion legend {
	float: left;
	padding: 0;
	font-weight: 600;
	color: var(--apc-ink);
}

/* Das Theme soll Beschriftungen im Widget nicht einfaerben. */
.apc-form label,
.apc-form legend,
.apc-form p,
.apc-reviews p,
.apc-reviews blockquote,
.apc-reviews li {
	color: var(--apc-ink);
}

/* Sterne: in umgekehrter Reihenfolge im DOM, damit ~ den Hover nach links füllt */

.apc-rate {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.apc-rate input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.apc-rate label {
	cursor: pointer;
	padding: 0.3rem 0.18em;
	font-size: 2.1rem;
	line-height: 1;
	color: #b9ae94;
	transition: color 0.12s, transform 0.08s;
}

.apc-rate label:active {
	transform: scale(0.92);
}

.apc-rate label:hover,
.apc-rate label:hover ~ label,
.apc-rate input:checked ~ label {
	color: var(--apc-gold);
}

.apc-rate input:focus-visible + label {
	outline: 2px solid var(--apc-magenta);
	outline-offset: 2px;
}

/* Felder */

.apc-form__block {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.apc-form__block legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.apc-form__block--privacy {
	padding: 1.1rem 1.25rem;
	background: #fcfaf5;
	border: 1px solid var(--apc-line);
	border-left: 3px solid var(--apc-gold);
	border-radius: 3px;
}

.apc-form__hint {
	margin: 0 0 0.7rem;
	font-size: 0.85rem;
	color: var(--apc-muted);
}

.apc-form__inline {
	display: block;
	margin-bottom: 0.4rem;
	cursor: pointer;
}

.apc-form__block:not(.apc-form__block--privacy) .apc-form__inline {
	display: inline-block;
	margin-right: 1.5rem;
}

.apc-form__field {
	margin: 0 0 1.25rem;
}

.apc-form__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.apc-form__optional {
	font-weight: 400;
	font-size: 0.82rem;
	color: var(--apc-muted);
}

.apc-form input[type="text"],
.apc-form input[type="email"],
.apc-form input[type="number"],
.apc-form textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #cfc7b5;
	border-radius: 3px;
}

.apc-form input:focus,
.apc-form textarea:focus {
	outline: 2px solid var(--apc-magenta);
	outline-offset: 1px;
	border-color: var(--apc-magenta);
}

.apc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}

.apc-form__field--consent label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.apc-form__field--consent input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

/* Honeypot: für Menschen unsichtbar, aber nicht display:none,
   damit Bots das Feld ausfüllen. */
.apc-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.apc-form__submit button {
	padding: 0.85rem 2rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--apc-magenta);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.apc-form__submit button:hover {
	background: #c30069;
}

@media (max-width: 600px) {
	.apc-form__grid {
		grid-template-columns: 1fr;
	}

	/* Label und Sterne bleiben nebeneinander: sechs Kriterien passen so
	   auf einen Bildschirm statt auf drei. */
	.apc-form__criterion {
		padding: 0.5rem 0;
		gap: 0.5rem;
	}

	.apc-form__criterion legend {
		font-size: 0.95rem;
	}

	.apc-rate label {
		font-size: 1.85rem;
		padding: 0.25rem 0.1em;
	}
}

@media (max-width: 360px) {
	.apc-rate label {
		font-size: 1.6rem;
	}
}

/* Auswahlfeld "Was möchtest du bewerten?" */

.apc-form__field--what select {
	width: 100%;
	padding: 0.65rem 0.75rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #cfc7b5;
	border-radius: 3px;
}

.apc-form__field--what select:focus {
	outline: 2px solid var(--apc-magenta);
	outline-offset: 1px;
	border-color: var(--apc-magenta);
}

.apc-form__criteria[hidden] {
	display: none;
}

/* ================================================================ Siegel
   Kompaktes Siegel im Stil der Bewertungsportale: Name, dunkles Titelband,
   verbale Einordnung, Note, Anzahl, Fusszeile mit Datum und Foto.
   Rueckseite per 3D-Drehung, schwebend mit ausfahrender Kundenstimme. */

.apc-seal {
	--apc-gold: #e9c86a;
	--apc-magenta: #e0007a;
	--apc-ink: #1c1c1c;
	--apc-muted: #6b6b6b;
	--apc-line: #ece6d8;
	--apc-dark: #1a0d1f;

	position: relative;
	width: 250px;
	max-width: 100%;
	margin: 2rem 0;
	color: var(--apc-ink);
	text-align: center;
	perspective: 1200px;
}

.apc-reviews--float {
	margin: 0 !important;
	height: 0;
}

/* Theme-Buttons zuruecksetzen: sonst Grossbuchstaben, Sperrung, Schatten */
.apc-seal button {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
	width: auto;
	line-height: 1.3;
}

/* --------------------------------------------------------- 3D-Drehung */

.apc-seal__inner {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.65s cubic-bezier(0.4, 0.15, 0.2, 1), height 0.35s ease;
}

.apc-seal.is-flipped .apc-seal__inner {
	transform: rotateY(180deg);
}

.apc-seal__face {
	overflow: hidden;
	background: #fff;
	border: 1px solid #ddd3bd;
	border-radius: 6px;
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* rotateY(0) gibt der Vorderseite eine eigene 3D-Ebene - sonst ignoriert
   Safari backface-visibility. */
.apc-seal__face--front {
	position: relative;
	transform: rotateY(0deg);
}

.apc-seal__face--back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-align: left;
	transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.apc-seal__inner {
		transition: none;
	}
}

/* ------------------------------------------------------------ Vorderseite */

.apc-seal .apc-seal__person {
	margin: 0;
	padding: 0.6rem 0.8rem 0.5rem;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.25;
}

.apc-seal__band {
	padding: 0.55rem 0.7rem 0.5rem;
	background: var(--apc-dark);
	border-bottom: 3px solid var(--apc-gold);
	text-align: center;
}

.apc-seal__band-title {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.apc-seal__band-sub {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--apc-gold);
}

.apc-seal__band--small {
	padding: 0.6rem 0.8rem;
}

.apc-seal__band--small .apc-seal__band-title {
	font-size: 0.76rem;
}

.apc-seal__body {
	padding: 0.85rem 0.9rem 0.8rem;
}

.apc-seal__verdict {
	margin: 0 0 0.38rem;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--apc-ink);
}

.apc-seal .apc-stars {
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}

.apc-seal__value {
	margin: 0.3rem 0 0;
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.apc-seal__value span {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--apc-muted);
}

.apc-seal .apc-seal__count {
	display: block;
	margin: 0.28rem 0 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--apc-ink);
	text-decoration: none;
}

.apc-seal a.apc-seal__count {
	color: var(--apc-ink);
	text-decoration: underline;
	text-decoration-color: var(--apc-gold);
	text-underline-offset: 3px;
}

.apc-seal a.apc-seal__count:hover {
	color: var(--apc-magenta);
}

.apc-seal__rec {
	margin: 0.65rem 0 0;
	padding: 0.35rem 0.4rem;
	background: #fcfaf5;
	border-radius: 3px;
	font-size: 0.74rem;
}

.apc-seal__rec strong {
	color: var(--apc-magenta);
	font-size: 0.86rem;
}

/* ------------------------------------------------------------- Fusszeile */

.apc-seal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding: 0.5rem 0.75rem;
	background: #faf7f0;
	border-top: 1px solid var(--apc-line);
	text-align: left;
}

.apc-seal__foot-text {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.apc-seal__date {
	font-size: 0.62rem;
	line-height: 1.3;
	color: var(--apc-muted);
}

.apc-seal__flip {
	align-self: flex-start;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--apc-magenta);
	text-decoration: none;
	cursor: pointer;
}

.apc-seal__flip:hover,
.apc-seal__flip:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.apc-seal__photo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------- Rueckseite */

.apc-seal__thead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.2rem 2.9rem;
	gap: 0.45rem;
	padding: 0.55rem 0.8rem 0.3rem;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apc-muted);
}

.apc-seal__thead span:nth-child(n+2) {
	text-align: right;
}

.apc-seal__sources {
	list-style: none;
	margin: 0;
	padding: 0 0.8rem 0.5rem;
}

.apc-seal__sources li {
	margin: 0;
	border-top: 1px solid var(--apc-line);
}

.apc-seal__sources li:first-child {
	border-top: 0;
}

/* Feste Spaltenbreiten: jede Zeile ist ein eigenes Raster, mit "auto"
   wuerde "159 Bew." die Note weiter nach links schieben als "29 Bew." */
.apc-seal__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.2rem 2.9rem;
	gap: 0.45rem;
	align-items: start;
	padding: 0.45rem 0;
	color: inherit;
	text-decoration: none;
	font-size: 0.74rem;
	line-height: 1.3;
}

a.apc-seal__row:hover .apc-seal__src-label {
	color: var(--apc-magenta);
}

.apc-seal__src-val,
.apc-seal__src-cnt {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.apc-seal__src-val {
	font-weight: 700;
}

.apc-seal__src-cnt {
	color: var(--apc-muted);
}

/* Quellen unterhalb der Mindestanzahl: sichtbar, aber erkennbar nicht in
   der Gesamtnote. Ohne diesen Hinweis gehen die Zahlen nicht auf. */
.apc-seal__sources li.is-excluded .apc-seal__src-val,
.apc-seal__sources li.is-excluded .apc-seal__src-cnt {
	opacity: 0.6;
}

.apc-seal__src-note {
	display: block;
	margin-top: 0.1rem;
	color: var(--apc-muted);
	font-size: 0.63rem;
	line-height: 1.25;
	-webkit-hyphens: none;
	hyphens: none;
}

/* Plattformnamen an Wortgrenzen umbrechen, lange Woerter silbentrennen
   statt sie mitten im Wort zu zerhacken. */
.apc-seal__src-label {
	overflow-wrap: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* -------------------------------------------------------------- Schwebend */

.apc-seal--float {
	/*
	 * Das schwebende Siegel ist kleiner als das im Inhalt: Am Rand soll es
	 * auffallen, ohne den Text zu verdraengen.
	 *
	 * Skaliert wird mit zoom, nicht mit transform. transform rastert das
	 * Element als Ebene - die Schrift wuerde weich - und macht es zum
	 * Bezugspunkt fuer alles darin, was position: fixed benutzt. zoom
	 * rechnet stattdessen das Layout neu: scharfe Schrift, unveraenderte
	 * Positionierung.
	 *
	 * Der Haken daran: zoom skaliert auch die Abstaende zum Rand mit. Aus
	 * eingestellten 20 px wuerden 17. Deshalb werden alle Positionswerte
	 * durch denselben Faktor geteilt - dann steht am Ende genau der
	 * Abstand da, den jemand eingetragen hat.
	 */
	--apc-seal-zoom: 0.85;

	position: fixed;
	/* --apc-bar-height setzt das Script, wenn der Balken am unteren Rand
	   steht. Ohne das säße das Siegel auf dem Balken. */
	bottom: calc(
		(var(--apc-seal-offset, 20px) + var(--apc-bar-height, 0px) + env(safe-area-inset-bottom, 0px))
		/ var(--apc-seal-zoom)
	);
	z-index: 9990;
	width: 220px;
	margin: 0;
	zoom: var(--apc-seal-zoom);
}

.apc-seal--right {
	right: calc(1rem / var(--apc-seal-zoom, 1));
}

.apc-seal--left {
	left: calc(1rem / var(--apc-seal-zoom, 1));
}

.apc-seal .apc-seal__min {
	position: absolute;
	top: -0.65rem;
	right: -0.65rem;
	z-index: 3;
	width: 1.7rem;
	height: 1.7rem;
	padding: 0;
	line-height: 1;
	background: #fff;
	color: var(--apc-muted);
	border: 1px solid var(--apc-line);
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
	cursor: pointer;
}

.apc-seal--left .apc-seal__min {
	right: auto;
	left: -0.65rem;
}

.apc-seal .apc-seal__min:hover {
	color: var(--apc-ink);
}

.apc-seal.is-minimized .apc-seal__inner {
	display: none;
}

.apc-seal.is-minimized .apc-seal__min {
	top: auto;
	bottom: 0;
	right: 0;
	left: auto;
	width: 3rem;
	height: 3rem;
	font-size: 1.3rem;
	color: var(--apc-gold);
	background: var(--apc-dark);
	border-color: var(--apc-gold);
}

.apc-seal--left.is-minimized .apc-seal__min {
	right: auto;
	left: 0;
}

/* ------------------------------------------- Ausfahrende Kundenstimme */

.apc-seal__peek {
	display: none;
}

@media (hover: hover) and (min-width: 760px) {
	.apc-seal__peek {
		display: block;
		position: absolute;
		bottom: 0;
		z-index: 1;
		width: 290px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	/* Das Innenpolster ueberbrueckt den Spalt zum Siegel: Die Maus verlaesst
	   den Hover-Bereich nicht, wenn sie hinueberwandert. */
	.apc-seal--right .apc-seal__peek {
		right: 100%;
		padding-right: 12px;
		transform: translateX(12px);
	}

	.apc-seal--left .apc-seal__peek {
		left: 100%;
		padding-left: 12px;
		transform: translateX(-12px);
	}

	.apc-seal--float:hover .apc-seal__peek,
	.apc-seal--float:focus-within .apc-seal__peek {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
	}

	.apc-seal.is-flipped .apc-seal__peek,
	.apc-seal.is-minimized .apc-seal__peek {
		display: none;
	}
}

.apc-seal__peek-box {
	overflow: hidden auto;
	max-height: min(70vh, 540px);
	background: #fff;
	border: 1px solid #ddd3bd;
	border-radius: 6px;
	box-shadow: 0 6px 26px rgba(0, 0, 0, 0.16);
	text-align: left;
}

.apc-seal .apc-seal__peek-head {
	margin: 0;
	padding: 0.6rem 0.95rem;
	background: var(--apc-dark);
	border-bottom: 3px solid var(--apc-gold);
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}

.apc-seal__quote {
	display: none;
	margin: 0;
	padding: 0.85rem 0.95rem 0.6rem;
	color: inherit;
	text-decoration: none;
}

a.apc-seal__quote {
	cursor: pointer;
	transition: background 0.15s ease;
}

a.apc-seal__quote:hover,
a.apc-seal__quote:focus-visible {
	background: #fcfaf5;
}

a.apc-seal__quote:hover .apc-seal__quote-more {
	text-decoration: underline;
}

.apc-seal__quote-more,
.apc-seal .apc-seal__quote-toggle {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--apc-magenta);
	cursor: pointer;
}

.apc-seal__quote.is-current {
	display: block;
}

.apc-seal__quote .apc-stars {
	font-size: 0.85rem;
}

.apc-seal__quote blockquote {
	margin: 0.4rem 0 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-size: 0.86rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--apc-ink);
}

.apc-seal__quote blockquote::before {
	content: "„";
}

.apc-seal__quote blockquote::after {
	content: "“";
}

.apc-seal__quote-meta {
	display: block;
	font-size: 0.74rem;
	line-height: 1.35;
	color: var(--apc-ink);
}

.apc-seal__quote-meta strong {
	display: block;
	font-weight: 600;
}

.apc-seal__quote-meta span {
	color: var(--apc-muted);
}

.apc-seal__peek-more {
	display: block;
	padding: 0.5rem 0.95rem 0.75rem;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--apc-magenta);
	text-align: right;
	text-decoration: none;
}

.apc-seal__peek-more:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 600px) {
	.apc-seal--float {
		width: 200px;
	}

	.apc-seal--right {
		right: 0.75rem;
	}

	.apc-seal--left {
		left: 0.75rem;
	}
}

/* Für Screenreader — falls das Theme die Klasse nicht selbst definiert,
   stünde sonst neben jedem Stern der Text "5 von 5". */

.apc-form .screen-reader-text,
.apc-reviews .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Angebot und Datum auf den Bewertungskacheln */

.apc-card__group {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apc-muted);
}

.apc-card__date {
	display: block;
	margin-top: 0.1rem;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--apc-muted);
}

.apc-badge__rec {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: var(--apc-muted);
}

.apc-badge__rec strong {
	color: var(--apc-magenta);
	font-size: 0.9rem;
}

/* Zweite Absicherung, falls der pre-Rahmen nicht serverseitig entfernt
   werden konnte (z. B. bei Page-Buildern mit eigener Ausgabe). */

.apc-reviews,
.apc-form,
.apc-seal {
	white-space: normal;
	overflow-wrap: break-word;
}


/* ------------------------------------------------ Schrift absichern
   Unabhaengig davon, in welchem Block der Shortcode steckt: Die Schrift
   kommt aus dem body der Seite (per JS gesetzt), mit einer serifenlosen
   Systemschrift als Rueckfall. Monospace aus einem Code-Block kann so
   nicht mehr durchschlagen. */

.apc-reviews,
.apc-form,
.apc-seal {
	font-family: var(--apc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

.apc-reviews *,
.apc-form *,
.apc-seal * {
	font-family: inherit;
}

/* ------------------------------------------------ legend zuruecksetzen
   Browser setzen <legend> auf die Rahmenlinie des Kastens, Themes geben
   ihm oft grosse Schrift und eine Linie. Float nimmt es aus dieser
   Sonderbehandlung heraus - danach verhaelt es sich wie ein normales
   Element. */

.apc-form legend {
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: var(--apc-ink);
	background: none;
}

.apc-form__block legend {
	width: 100%;
	margin-bottom: 0.6rem;
}

.apc-form__block legend + * {
	clear: both;
}

/* Kriterien: Label links, Sterne rechts in einer Zeile */
.apc-form__criterion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.apc-form__criterion legend {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.98rem;
}

.apc-form__criterion .apc-rate {
	flex: 0 0 auto;
}


/* Browser ohne :has(): Das Script schaltet per Klasse um. */
/* "div" erhoeht die Spezifitaet: Der Inline-Style im Formular steht im
   Dokument spaeter und wuerde sonst bei Gleichstand gewinnen. */
@supports not selector(:has(*)) {
	.apc-form div.apc-form__criteria.is-active {
		display: grid;
	}

	.apc-form div.apc-form__criteria.is-preset:not(.is-active) {
		display: none;
	}

	.apc-form span.apc-form__prompt.is-active {
		display: block;
	}

	.apc-form span.apc-form__prompt.is-preset:not(.is-active) {
		display: none;
	}
}


/* Leitfrage ueber dem Textfeld */
.apc-form__prompt {
	display: block;
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--apc-muted);
}


/* ----------------------------------------- Ausgewaehlte Bewertung */

.apc-card.is-highlighted {
	grid-column: 1 / -1;
	border-color: var(--apc-gold);
	border-top-width: 4px;
	background: #fffdf8;
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
	scroll-margin-top: 120px;
}

.apc-reviews .apc-card__flag {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apc-magenta);
}

.apc-reviews .apc-card__text--full p {
	margin: 0 0 0.8em;
	color: var(--apc-ink);
}

.apc-card__text--full p:last-child {
	margin-bottom: 0;
}

/* ================================================================== Balken
   Schmale Leiste am unteren Bildschirmrand. Aufbau wie bei den bekannten
   Bewertungsplattformen: Marke, Note, Anzahl, wechselnde Kundenstimme,
   Weg zu allen Bewertungen.

   Das Siegel weicht ihm aus: Das Script schreibt die Hoehe des Balkens in
   --apc-bar-height, und .apc-seal--float rechnet sie in seinen Abstand ein. */

.apc-bar {
	--apc-gold: #e9c86a;
	--apc-magenta: #e0007a;
	--apc-ink: #1c1c1c;
	--apc-muted: #6b6b6b;
	--apc-line: #ece6d8;
	--apc-dark: #1a0d1f;

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9980;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: #fffdf8;
	border-top: 2px solid var(--apc-gold);
	box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.09);
	color: var(--apc-ink);
	font-family: var(--apc-font, inherit);
	font-size: 16px;
	line-height: 1.4;
}

.apc-bar[hidden] {
	display: none;
}

.apc-bar__inner {
	display: flex;
	align-items: center;
	/* "safe" verhindert, dass zentrierter Inhalt bei Platzmangel nach links
	   aus dem Freiraum herauslaeuft und unter dem Cookie-Symbol
	   verschwindet. Aeltere Browser ignorieren die zweite Zeile und
	   behalten das schlichte center. */
	justify-content: center;
	justify-content: safe center;
	gap: 0.85rem;
	max-width: 1180px;
	margin: 0 auto;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	padding-right: 0.9rem;
	/* --apc-bar-safe-left haelt links Platz frei, wenn dort ein Symbol
	   schwebt - meist der Schalter eines Cookie-Banners.

	   Bewusst als einzelne Eigenschaft statt in der Kurzschreibweise: Die
	   Regeln fuer schmale Bildschirme setzen nur noch die Seiten, die sie
	   wirklich meinen. Eine Kurzschreibweise dort hat den Freiraum still
	   ueberschrieben. */
	padding-left: max( 0.9rem, var( --apc-bar-safe-left, 0px ) );
}

/* ------------------------------------------------------------------ Marke */

.apc-bar__brand {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
}

.apc-bar__mark {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--apc-dark);
	color: var(--apc-gold);
	font-size: 0.95rem;
	line-height: 1;
}

/* Portraet statt Stern: ein Gesicht traegt mehr Vertrauen als ein Symbol.
   Der Goldrand stellt die Verbindung zum Siegel her. */
.apc-bar__photo {
	display: block;
	width: 1.9rem;
	height: 1.9rem;
	flex-shrink: 0;
	border: 2px solid var(--apc-gold);
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.apc-bar__name {
	font-size: 0.88rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- Note */

.apc-bar__score {
	display: flex;
	align-items: center;
	gap: 0.42rem;
	flex-shrink: 0;
	padding-left: 0.85rem;
	border-left: 1px solid var(--apc-line);
	color: inherit;
	text-decoration: none;
}

a.apc-bar__score:hover .apc-bar__value {
	color: var(--apc-magenta);
}

.apc-bar__verdict {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.apc-bar__value {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.apc-bar .apc-stars {
	font-size: 0.98rem;
}

.apc-bar__count {
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--apc-muted);
}

/* ---------------------------------------------------------- Kundenstimme */

/* Alle Stimmen liegen uebereinander, nur die aktuelle ist sichtbar. So
   springt die Breite des Balkens beim Wechsel nicht. */
.apc-bar__quotes {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 34rem;
	/* Etwas mehr Abstand als bei den uebrigen Spalten: Der Zipfel der
	   Sprechblase ragt nach links heraus und soll den Trennstrich nicht
	   beruehren. */
	padding-left: 1.25rem;
	border-left: 1px solid var(--apc-line);
}

/* Unter dieser Breite ist ein Zitat kein Zitat mehr, sondern ein Wortrest.
   Dann lieber keines - der Breakpoint weiter unten blendet es aus. */
.apc-bar__quotes .apc-bar__quote {
	min-width: 0;
}

.apc-bar__quote {
	display: none;
	color: inherit;
	text-decoration: none;
}

/* Blase und Name nebeneinander. Stand der Name darunter, war der Balken
   zweizeilig und dadurch fast doppelt so hoch wie noetig. */
.apc-bar__quote.is-current {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

/* Sprechblase mit Zipfel nach links, zur Note hin. Der Zipfel besteht aus
   zwei uebereinanderliegenden Dreiecken: das hintere bildet den Rahmen,
   das vordere die Fuellung. */
.apc-bar__bubble {
	position: relative;
	display: block;
	min-width: 0;
	min-width: 15rem;
	padding: 0.22rem 0.6rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.85rem;
	background: #fff;
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.4;
}

/* Die Kuerzung steckt im inneren Element. Stuende overflow: hidden an der
   Blase selbst, wuerde es den Zipfel abschneiden - der ragt nach aussen. */
.apc-bar__bubble-text {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	/* Notnagel. Im Regelfall kuerzt das Script vorher und haengt " …" mit
	   Leerzeichen an, wie es im Deutschen gehoert. Greift hier doch der
	   Browser, setzt er sein eigenes Zeichen ohne Leerzeichen - das ist
	   nicht beeinflussbar: text-overflow mit eigener Zeichenkette kennt
	   nur Firefox, Chrome bis heute nicht. */
	text-overflow: ellipsis;
}

/* Anfuehrungszeichen kommen aus dem Stylesheet, damit im Element nur der
   reine Text steht und das Script daran kuerzen kann. */
.apc-bar__bubble-text::before {
	content: "„";
}

.apc-bar__bubble-text::after {
	content: "“";
}

.apc-bar__bubble::before,
.apc-bar__bubble::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-style: solid;
}

.apc-bar__bubble::before {
	left: -7px;
	margin-top: -6px;
	border-width: 6px 7px 6px 0;
	border-color: transparent var(--apc-line) transparent transparent;
}

.apc-bar__bubble::after {
	left: -6px;
	margin-top: -5px;
	border-width: 5px 6px 5px 0;
	border-color: transparent #fff transparent transparent;
}

a.apc-bar__quote:hover .apc-bar__bubble {
	border-color: var(--apc-gold);
	color: var(--apc-magenta);
}

a.apc-bar__quote:hover .apc-bar__bubble::before {
	border-right-color: var(--apc-gold);
}

.apc-bar__quote-author {
	flex-shrink: 0;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--apc-muted);
}

/* ------------------------------------------------------------ Abschluesse */

.apc-bar__more {
	flex-shrink: 0;
	padding-left: 0.85rem;
	border-left: 1px solid var(--apc-line);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--apc-magenta);
	text-decoration: none;
}

.apc-bar__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Theme-Buttons zuruecksetzen, wie beim Siegel. */
.apc-bar button {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
}

/* Der Knopf muss auffindbar sein, ohne sich in den Vordergrund zu draengen:
   heller Rahmen auf hellem Grund war praktisch unsichtbar.

   Er sitzt als normales Flex-Element am Ende, nicht absolut positioniert.
   Absolut wuerde er sich bei schmalen Fenstern mit dem mittig gesetzten
   Inhalt ueberlagern - der reservierte Innenabstand war nur zwei Pixel
   breiter als der Knopf selbst. */
.apc-bar .apc-bar__close {
	flex-shrink: 0;
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 1.55rem;
	height: 1.55rem;
	padding: 0;
	border: 1px solid #cfc7b6;
	border-radius: 50%;
	background: #fff;
	color: #5a5a5a;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

.apc-bar .apc-bar__close:hover,
.apc-bar .apc-bar__close:focus-visible {
	color: #fff;
	background: var(--apc-dark);
	border-color: var(--apc-dark);
}

/* ------------------------------------------------------- Schmalere Geraete
   Die Schwelle von 1200px ist ausgemessen, nicht geschaetzt: Darunter
   reicht der Platz fuer die Sprechblase nicht mehr, und der Browser
   schneidet das Zitat selbst ab - mit seinem eigenen Auslassungszeichen
   ohne Leerzeichen davor. Lieber gar kein Zitat als ein Wortrest. */

@media (max-width: 1200px) {
	.apc-bar__inner {
		gap: 0.6rem;
		padding-top: 0.28rem;
		padding-bottom: 0.28rem;
		padding-right: 0.7rem;
	}

	/* Zuerst faellt die Kundenstimme weg - sie braucht am meisten Platz und
	   ist als abgeschnittener Halbsatz ohnehin wertlos. */
	.apc-bar__quotes,
	.apc-bar__verdict {
		display: none;
	}
}

@media (max-width: 680px) {
	.apc-bar__name,
	.apc-bar__more {
		display: none;
	}

	/* Ohne Trennstrich und mit mittig gesetztem Inhalt: Auf schmalen
	   Bildschirmen liegt links haeufig der Schalter eines Cookie-Banners
	   auf dem Balken. Ein Mindest-Freiraum von 4rem laesst ihm Platz, auch
	   wenn im Backend nichts eingestellt ist. */
	.apc-bar__inner {
		gap: 0.55rem;
		padding-left: max( 4rem, var( --apc-bar-safe-left, 0px ) );
		padding-right: 0.5rem;
	}

	.apc-bar__score {
		padding-left: 0;
		border-left: 0;
	}

	.apc-bar__count {
		font-size: 0.76rem;
	}

	.apc-bar__photo {
		width: 2rem;
		height: 2rem;
	}
}

/* Auf sehr schmalen Geraeten wird der Platz knapp: Links haelt der Balken
   Raum fuer das Cookie-Symbol frei, rechts sitzt der Schliessen-Knopf.
   Dazwischen passt "546 Bewertungen" nicht mehr, ohne dass der Knopf aus
   dem Bild faellt.

   Das Wort verschwindet deshalb nur optisch - im Dokument bleibt es
   stehen, damit Screenreader weiterhin "546 Bewertungen" vorlesen und
   nicht eine nackte Zahl. */
@media (max-width: 420px) {
	.apc-bar__count-word {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.apc-bar__inner {
		gap: 0.45rem;
	}

	.apc-bar .apc-stars {
		font-size: 0.95rem;
	}
}

/* Wer weniger Bewegung moechte, bekommt keinen Einblend-Effekt. */
@media (prefers-reduced-motion: reduce) {
	.apc-bar {
		transition: none !important;
	}
}

/* ========================================================= Bewertungsseite
   Alle Bewertungen im Volltext, mit Filtern und Seitenwechsel. Aufbau wie
   auf den bekannten Bewertungsportalen: Kennzahlen oben, darunter die
   Filterleiste, dann die Liste, am Fuss die uebrigen Plattformen. */

.apc-page {
	--apc-gold: #e9c86a;
	--apc-magenta: #e0007a;
	--apc-ink: #1c1c1c;
	--apc-muted: #6b6b6b;
	--apc-line: #ece6d8;
	--apc-dark: #1a0d1f;

	color: var(--apc-ink);
	font-family: var(--apc-font, inherit);
}

/* ------------------------------------------------------------------ Kopf */

.apc-page__head {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	padding: 1.4rem 1.6rem;
	background: #fffdf8;
	border: 1px solid var(--apc-line);
	border-top: 3px solid var(--apc-gold);
	border-radius: 4px;
}

.apc-page__score {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	flex-shrink: 0;
}

.apc-page__value {
	font-size: 3.1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.apc-page__of {
	font-size: 1rem;
	color: var(--apc-muted);
}

.apc-page__summary {
	min-width: 0;
}

.apc-page__verdict {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.apc-page .apc-stars {
	font-size: 1.35rem;
}

.apc-page__count {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
}

.apc-page__scope {
	color: var(--apc-muted);
}

.apc-page__rec {
	margin: 0.45rem 0 0;
	font-size: 0.9rem;
}

.apc-page__rec strong {
	color: var(--apc-magenta);
}

/* --------------------------------------------------------------- Filter */

.apc-page__filters {
	margin: 1.4rem 0 1.1rem;
}

.apc-page__stars-filter,
.apc-page__group-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.apc-page__group-filter {
	padding-top: 0.6rem;
	border-top: 1px solid var(--apc-line);
}

.apc-page .apc-page__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--apc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--apc-ink);
	font-size: 0.85rem;
	line-height: 1.3;
	text-decoration: none;
}

.apc-page .apc-page__chip:hover {
	border-color: var(--apc-gold);
}

.apc-page .apc-page__chip.is-active {
	background: var(--apc-dark);
	border-color: var(--apc-dark);
	color: #fff;
	font-weight: 700;
}

.apc-page__chip-count {
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: #f4f0e6;
	color: var(--apc-muted);
	font-size: 0.74rem;
	font-variant-numeric: tabular-nums;
}

.apc-page__chip.is-active .apc-page__chip-count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* ---------------------------------------------------------------- Liste */

.apc-page__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Jede Bewertung in einem eigenen Kasten.

   Ein Trennstrich allein reicht bei langen Texten nicht: Wo eine Bewertung
   aufhoert und die naechste anfaengt, muss man dann suchen. Der Kasten
   zeigt es auf einen Blick. Der goldene Rand nimmt die Farbe des Siegels
   auf, damit Seite und Siegel als eines gelesen werden. */
.apc-page__item {
	margin-bottom: 0.9rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--apc-gold);
	border-radius: 0.7rem;
	background: #fff;
}

/* Die Liste traegt die Striche nicht mehr - der Kasten grenzt schon ab. */
.apc-page__item:first-child {
	border-top: 1px solid var(--apc-gold);
}

.apc-page__item-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.apc-page__item-verdict {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--apc-muted);
}

.apc-page__badge {
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: #fdf0f6;
	color: var(--apc-magenta);
	font-size: 0.72rem;
	font-weight: 700;
}

.apc-page .apc-page__item-title {
	margin: 0.55rem 0 0;
	font-size: 1.02rem;
	line-height: 1.35;
}

.apc-page .apc-page__text {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
	font-size: 0.95rem;
	line-height: 1.65;
}

.apc-page .apc-page__text p {
	margin: 0 0 0.7rem;
}

.apc-page .apc-page__text p:last-child {
	margin-bottom: 0;
}

/* Einzelbewertungen: zugeklappt, damit die Liste lesbar bleibt. <details>
   braucht dafuer kein Script. */
.apc-page__details {
	margin-top: 0.7rem;
}

/* display: inline-block nimmt dem summary sein Dreieck. Statt es
   zurueckzuholen, kommt ein eigenes davor - so dreht es sich beim
   Aufklappen mit und passt zur uebrigen Gestaltung. */
.apc-page__details summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--apc-magenta);
	list-style: none;
}

.apc-page__details summary::-webkit-details-marker {
	display: none;
}

.apc-page__details summary::before {
	content: "›";
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.15s ease;
}

.apc-page__details[open] summary::before {
	transform: rotate( 90deg );
}

@media (prefers-reduced-motion: reduce) {
	.apc-page__details summary::before {
		transition: none;
	}
}

/* Zwei Spalten, damit Kriterium und Note beieinander stehen. In einer
   Spalte ueber die volle Breite lagen zwischen beiden mehrere Zentimeter
   Leerraum, und das Auge musste die Zeile suchen. */
.apc-page__criteria {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 0 1.6rem;
	margin: 0.6rem 0 0;
	padding: 0.7rem 0.9rem;
	background: #fcfaf5;
	border-radius: 4px;
	list-style: none;
}

.apc-page__criteria li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.22rem 0;
	font-size: 0.85rem;
}

.apc-page__criteria .apc-stars {
	font-size: 0.9rem;
}

.apc-page__criterion-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * Der letzte Punkt steht abgesetzt.
 *
 * Er laeuft ueber beide Spalten des Rasters, traegt einen goldenen Rahmen
 * und ist etwas kraeftiger gesetzt - so schliesst die Aufstellung mit
 * einer Zeile ab, statt einfach aufzuhoeren. Das Gesicht am Ende kommt
 * nur bei guter Note; bei einer schlechten waere es Hohn.
 */
/*
 * Der letzte Punkt bekommt einen Rahmen - sonst bleibt alles, wie es war.
 *
 * Er laeuft ausdruecklich NICHT ueber die volle Breite: Das Raster stellt
 * die Punkte je nach Platz ein- oder mehrspaltig, und diese Aufteilung
 * soll die Hervorhebung nicht durcheinanderbringen. Der Punkt steht, wo
 * er stuende, und ist nur deutlicher.
 *
 * Der Selektor nennt das li mit, weil .apc-page__criteria li sonst
 * gewinnt und das Raster bei drei Spalten bleibt - das Gesicht rutschte
 * dadurch in eine zweite Zeile.
 */
.apc-page__criteria li.apc-page__criteria-last {
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	/* Der negative Seitenrand haelt Text und Sterne auf einer Linie mit
	   den Zeilen darueber, obwohl der Rahmen Platz braucht. */
	margin: 0.15rem -0.5rem 0;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--apc-gold);
	border-radius: 0.45rem;
	background: #fffdf7;
}

.apc-page__criteria-last .apc-page__criterion {
	font-weight: 700;
}

.apc-page__criteria-last .apc-icon--zufrieden {
	width: 1.1rem;
	height: 1.1rem;
	margin-left: 0.15rem;
	color: var(--apc-gold);
}

.apc-page__meta {
	display: flex;
	flex-wrap: wrap;
	/* Ohne align-items streckt Flexbox jedes Kind auf volle Zeilenhoehe -
	   der Teilen-Knopf stand dadurch sichtbar neben der Textlinie. */
	align-items: center;
	gap: 0.3rem 0.9rem;
	margin-top: 0.75rem;
	font-size: 0.8rem;
	color: var(--apc-muted);
}

.apc-page__author {
	font-weight: 700;
	color: var(--apc-ink);
}

.apc-page__empty {
	padding: 1.6rem;
	background: #fcfaf5;
	border-radius: 4px;
	text-align: center;
}

/* --------------------------------------------------------- Seitenwechsel */

.apc-page__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1.3rem;
}

.apc-page .apc-page__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--apc-line);
	border-radius: 4px;
	background: #fff;
	color: var(--apc-ink);
	font-size: 0.86rem;
	text-decoration: none;
}

.apc-page .apc-page__page:hover {
	border-color: var(--apc-gold);
}

.apc-page .apc-page__page.is-active {
	background: var(--apc-dark);
	border-color: var(--apc-dark);
	color: #fff;
	font-weight: 700;
}

.apc-page__gap {
	padding: 0 0.2rem;
	color: var(--apc-muted);
}

/* ------------------------------------------------------- Andere Quellen */

.apc-page__other {
	margin-top: 2.2rem;
	padding-top: 1.3rem;
	border-top: 3px solid var(--apc-gold);
}

.apc-page .apc-page__other-head {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

.apc-page__other-note {
	margin: 0.3rem 0 0.9rem;
	font-size: 0.85rem;
	color: var(--apc-muted);
}

.apc-page__other-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apc-page__other-item + .apc-page__other-item {
	border-top: 1px solid var(--apc-line);
}

.apc-page .apc-page__other-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 0.8rem;
	padding: 0.65rem 0;
	color: inherit;
	text-decoration: none;
}

a.apc-page__other-row:hover .apc-page__other-label {
	color: var(--apc-magenta);
}

.apc-page__other-label {
	font-weight: 700;
	font-size: 0.92rem;
}

.apc-page__other-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.apc-page__other-count {
	min-width: 3.2rem;
	text-align: right;
	color: var(--apc-muted);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Profilkopf */

.apc-profile {
	margin: 0 0 1.6rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.9rem;
	background: #fff;

	/* Kein overflow: hidden.
	
	   Es war nur fuer die runden Ecken des Banners da - schnitt dabei aber
	   jede Erklaerungsblase ab, die aus dem Kasten ragt. Die Rundung sitzt
	   jetzt am Banner selbst, wo sie hingehoert. */
}

.apc-profile__banner {
	position: relative;
	border-radius: 0.85rem 0.85rem 0 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 170px;
	padding: 3.2rem 1.4rem 1.6rem;
	background: linear-gradient(120deg, #2b1c33, #5c1f4a 55%, #8c2060);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

/* Liegt ein Bild darunter, braucht der Text einen dunklen Grund - sonst
   haengt seine Lesbarkeit vom hochgeladenen Bild ab. */
.apc-profile__banner.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 10, 25, 0.82) 0%, rgba(20, 10, 25, 0.55) 55%, rgba(20, 10, 25, 0.2) 100%);
}

.apc-profile__actions {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.apc-profile .apc-profile__cta {
	display: inline-block;
	padding: 0.5rem 0.95rem;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 0.45rem;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}

.apc-profile .apc-profile__cta:hover {
	background: rgba(0, 0, 0, 0.6);
}

.apc-profile .apc-profile__cta--primary {
	border-color: var(--apc-magenta);
	background: var(--apc-magenta);
}

.apc-profile .apc-profile__cta--primary:hover {
	background: #b80064;
	border-color: #b80064;
}

.apc-profile__quote {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 42rem;
}

.apc-profile__quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.5;
}

.apc-profile__quote blockquote::before {
	content: "\201E";
}

.apc-profile__quote blockquote::after {
	content: "\201C";
}

.apc-profile__quote figcaption {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: 700;
}

.apc-profile__body {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 260px;
	gap: 1.6rem;
	padding: 1.4rem;
}

.apc-profile__side {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

/* Das Portraet ragt in den Banner - wie auf den Profilseiten der Portale. */
.apc-profile__photo {
	position: relative;
	z-index: 1;
	width: 160px;
	height: 160px;
	margin-top: -5.5rem;
	border: 5px solid #fff;
	border-radius: 0.6rem;
	object-fit: cover;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.apc-profile__numbers .apc-page__score {
	padding: 0;
	border: 0;
}

.apc-profile__from,
.apc-profile__rate {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--apc-muted);
}

.apc-profile__trust {
	margin: 0;
	font-size: 0.82rem;
}

.apc-profile__trust a {
	color: var(--apc-magenta);
}

.apc-profile .apc-profile__rate-btn {
	display: block;
	padding: 0.6rem 1rem;
	border-radius: 0.45rem;
	background: var(--apc-magenta);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.apc-profile .apc-profile__rate-btn:hover {
	background: #b80064;
}

.apc-profile__name {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.2;
}

.apc-profile__role {
	margin: 0.3rem 0 0;
	color: var(--apc-muted);
	font-size: 0.92rem;
}

/* Luft zwischen Name und Text. Ohne sie klebt der erste Absatz am Namen,
   und beides liest sich als ein Block. */
.apc-profile__intro {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--apc-line);
}

.apc-profile__more > summary {
	display: inline-block;
	margin-top: 0.2rem;
	color: var(--apc-magenta);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.apc-profile__more > summary::-webkit-details-marker {
	display: none;
}

.apc-profile__more > summary::marker {
	content: "";
}

.apc-profile__more > summary::after {
	content: " ›";
}

.apc-profile__more[open] > summary::after {
	content: " ‹";
}

.apc-profile__more[open] > summary {
	margin-bottom: 0.5rem;
}

.apc-profile__intro p {
	margin: 0 0 0.7rem;
	font-size: 0.93rem;
	line-height: 1.6;
}

/* Hervorgehobene Bewertung rechts */

.apc-profile__highlight {
	padding: 0.9rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.6rem;
	background: #fcfaf5;
}

.apc-profile__highlight-date {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	color: var(--apc-muted);
}

.apc-profile__highlight-head {
	text-align: center;
}

.apc-profile__highlight-value {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
}

.apc-profile__highlight-verdict {
	margin: 0.2rem 0 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.apc-profile__highlight-rec {
	margin: 0.35rem 0 0;
	color: var(--apc-magenta);
	font-size: 0.8rem;
	font-weight: 700;
}

.apc-profile__highlight-criteria {
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
}

.apc-profile__highlight-criteria li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0;
}

.apc-profile__highlight-criteria .apc-stars {
	font-size: 0.85rem;
}

/* Derselbe Abschluss wie in der Liste an den Bewertungen: ein Rahmen,
   sonst bleibt alles an seinem Platz. */
.apc-profile__highlight-criteria li.apc-profile__highlight-last {
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	margin: 0.2rem -0.4rem 0;
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--apc-gold);
	border-radius: 0.4rem;
	background: #fffdf7;
}

.apc-profile__highlight-last span {
	font-weight: 700;
}

.apc-profile__highlight-last .apc-icon--zufrieden {
	width: 1rem;
	height: 1rem;
	margin-left: 0.1rem;
	color: var(--apc-gold);
}

.apc-profile__highlight-more {
	margin: 0.7rem 0 0;
	font-size: 0.82rem;
}

.apc-profile__highlight-more a {
	color: var(--apc-magenta);
}

/* ------------------------------------ Überschrift und Reihenfolge */

.apc-page__listhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.4rem 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--apc-line);
}

.apc-page .apc-page__listtitle {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.apc-page__listtitle-of {
	color: var(--apc-muted);
	font-weight: 400;
	font-size: 0.9rem;
}

.apc-page__sort {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.apc-page__sort-label {
	color: var(--apc-muted);
	font-size: 0.82rem;
}

.apc-page__sort-select {
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.4rem;
	background: #fff;
	font: inherit;
	font-size: 0.85rem;
}

.apc-page__sort-go {
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.4rem;
	background: #fff;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.apc-page__single-note {
	margin: 1.4rem 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--apc-line);
	font-size: 0.9rem;
	color: var(--apc-muted);
}

.apc-page__single-note a {
	color: var(--apc-magenta);
}

/* ------------------------------------------------------------- Teilen */

/*
 * SVG erbt fill nicht von color - der Vorgabewert ist schwarz. Ohne diese
 * Regel waren die Marken-Logos im Teilen-Fenster schwarz auf farbigem
 * Grund, auf der schwarzen X-Kachel also gar nicht zu sehen. Mit
 * currentColor folgen sie der Schriftfarbe ihres Kastens.
 */
.apc-icon {
	fill: currentColor;
}

.apc-share {
	display: inline-block;
}

/* Der Knopf: dezent, bis man ihn braucht. */
.apc-share__button {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.65rem;
	border: 1px solid var(--apc-line);
	border-radius: 999px;
	color: var(--apc-muted);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.apc-share__button::-webkit-details-marker,
.apc-share__button::marker {
	display: none;
	content: "";
}

.apc-share__button .apc-icon {
	width: 0.85em;
	height: 0.85em;
}

.apc-share__button:hover,
.apc-share__button:focus-visible,
.apc-share[open] .apc-share__button {
	border-color: var(--apc-magenta);
	background: rgba(214, 0, 122, 0.06);
	color: var(--apc-magenta);
}

/*
 * Das Fenster schwebt ueber der Seite, statt die Liste auseinanderzu-
 * schieben. Aufklappen nach unten laesst alles darunter springen, und auf
 * der letzten Bewertung einer Seite oeffnete es sich ins Nichts.
 *
 * Bewusst kein Hover-Menue: Auf dem Handy gibt es kein Hover. Ein Menue,
 * das nur mit Maus aufgeht, waere fuer die Haelfte der Besucher gar nicht
 * da - und die Haelfte, die tippt, bekaeme ein Menue, das beim ersten
 * Antippen aufgeht und beim zweiten der Aktion in die Quere kommt.
 */
.apc-share[open] .apc-share__panel {
	position: fixed;
	inset: 0;
	z-index: 99999;
	/* Das Theme setzt border-box nicht zwingend global. Ohne das hier
	   kommt der Innenabstand zur Breite dazu, und auf dem Handy steht
	   das Fenster rechts ueber dem Bildschirmrand. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: min(29rem, calc(100vw - 2rem));
	height: max-content;
	max-height: calc(100vh - 3rem);
	margin: auto;
	padding: 1.6rem 1.5rem 1.4rem;
	overflow-y: auto;
	border: 0;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1.5rem 3.5rem rgba(20, 16, 10, 0.28);
	text-align: left;
	animation: apc-share-auf 0.16s ease-out;
}

@keyframes apc-share-auf {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.apc-share[open] .apc-share__panel {
		animation: none;
	}
}

/* Der abdunkelnde Grund. Er gehoert zum <details>, damit er ohne
   JavaScript genauso erscheint und wieder verschwindet. */
.apc-share[open]::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(20, 16, 10, 0.55);
	animation: apc-share-grund 0.16s ease-out;
}

@keyframes apc-share-grund {
	from {
		opacity: 0;
	}
}

.apc-share__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--apc-muted);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.apc-share__close:hover,
.apc-share__close:focus-visible {
	background: rgba(20, 16, 10, 0.07);
	color: var(--apc-ink);
}

.apc-share__close .apc-icon {
	width: 0.95rem;
	height: 0.95rem;
}

.apc-share__title {
	margin: 0 0 1rem;
	padding-right: 2rem;
	color: var(--apc-ink);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.apc-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.3rem;
	padding: 0;
	list-style: none;
}

.apc-share__list li {
	margin: 0;
	padding: 0;
}

/* Die Kachel selbst: quadratisch, in der Farbe der Marke. Erkennbar
   ohne Beschriftung - genau dafuer gibt es Logos. */
.apc-share .apc-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 0.7rem;
	background: var(--apc-share-farbe, #555);
	color: #fff;
	text-decoration: none;
	transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s;
}

.apc-share .apc-share__link:hover,
.apc-share .apc-share__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1rem rgba(20, 16, 10, 0.22);
	filter: brightness(1.08);
	color: #fff;
}

.apc-share__link .apc-icon {
	width: 1.4rem;
	height: 1.4rem;
}

/* Der Name bleibt im Markup, damit Screenreader und die Suche ihn
   finden - sichtbar ist er nicht, das Logo genuegt. */
.apc-share__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Ohne Logo tritt der Name an seine Stelle. */
.apc-share__name--sichtbar {
	position: static;
	width: auto;
	height: auto;
	padding: 0 0.4rem;
	overflow: visible;
	clip-path: none;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
}

.apc-share__link--facebook { --apc-share-farbe: #1877f2; }
.apc-share__link--x        { --apc-share-farbe: #000; }
.apc-share__link--linkedin { --apc-share-farbe: #0a66c2; }
.apc-share__link--xing     { --apc-share-farbe: #006567; }
.apc-share__link--whatsapp { --apc-share-farbe: #25d366; }
.apc-share__link--mail     { --apc-share-farbe: #6b6257; }

.apc-share__copy-label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--apc-muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.apc-share__copy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.apc-share__copy-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.5rem;
	background: #fbfaf8;
	color: var(--apc-muted);
	font-size: 0.85rem;
}

.apc-share__copy-go {
	flex: 0 0 auto;
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--apc-magenta);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s;
}

.apc-share__copy-go:hover,
.apc-share__copy-go:focus-visible {
	filter: brightness(1.1);
}

.apc-share__copy-go.is-done {
	background: #1a7f47;
}

/* Auf dem Handy von unten hereinfahren: Der Daumen erreicht den unteren
   Rand, die Mitte des Bildschirms nicht. */
@media (max-width: 600px) {
	.apc-share[open] .apc-share__panel {
		inset: auto 0 0;
		width: 100vw;
		max-width: 100%;
		max-height: 85vh;
		margin: 0;
		border-radius: 1rem 1rem 0 0;
		animation: apc-share-hoch 0.18s ease-out;
	}

	@keyframes apc-share-hoch {
		from {
			transform: translateY(100%);
		}
	}

	/* Auf schmalen Schirmen wachsen die Kacheln mit der Breite, statt in
	   eine zweite Zeile umzubrechen. Bei 360 px passten sechs feste
	   Quadrate um wenige Pixel nicht mehr nebeneinander - fuenf standen
	   oben, eines allein darunter. */
	.apc-share__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(2.3rem, 1fr));
		gap: 0.45rem;
	}

	.apc-share .apc-share__link {
		width: 100%;
		height: auto;
		max-width: 3.2rem;
		aspect-ratio: 1;
	}

	/* Auf dem Handy untereinander statt nebeneinander. Zwei Felder in
	   einer Zeile lassen auf 360 px fuer beide zu wenig uebrig, und ein
	   Knopf ueber die volle Breite trifft der Daumen ohnehin besser. */
	.apc-share__copy-field,
	.apc-share__copy-go {
		flex: 1 1 100%;
	}

	.apc-share__copy-go {
		padding: 0.7rem 1.1rem;
	}
}

/* Begrüßung, wenn jemand über einen persönlichen Einladungslink kommt. */
.apc-form__invite {
	margin: 0 0 1.2rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--apc-gold);
	border-left-width: 4px;
	border-radius: 0.5rem;
	background: #fdfaf3;
	font-size: 0.92rem;
	line-height: 1.55;
}

.apc-form__invite strong {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--apc-ink);
}

/* --------------------------------------------------- Vertrauenshinweis */

.apc-trust--page {
	margin: 1.8rem 0 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.6rem;
	background: #fcfaf5;
}

.apc-page .apc-trust__head {
	margin: 0 0 0.6rem;
	font-size: 0.98rem;
}

.apc-trust__list {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--apc-muted);
}

.apc-trust__list li + li {
	margin-top: 0.35rem;
}

.apc-trust__more {
	margin: 0.7rem 0 0;
	font-size: 0.85rem;
}

.apc-trust__more a {
	color: var(--apc-magenta);
}

/* Im Siegel und am Formular ist kein Platz fuer vier Saetze - dort steht
   nur die Zeile, der Text haengt im "i". */
.apc-trust--seal,
.apc-trust--form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	margin: 0;
	font-size: 0.74rem;
	color: var(--apc-muted);
}

.apc-trust--form {
	justify-content: flex-start;
	margin-top: 0.8rem;
	font-size: 0.82rem;
}

.apc-trust--seal {
	padding: 0 0.6rem 0.3rem;
}

.apc-trust--seal a {
	color: var(--apc-magenta);
	text-decoration: none;
}

.apc-trust--seal a:hover {
	text-decoration: underline;
}

/* Kennzeichnung nachtraeglich geaenderter Texte */

.apc-page__edited {
	color: #a8621b;
	font-weight: 600;
}

/* -------------------------------------------------------- Erklärungen */

/* Ein Auslöser mit Erklärungsblase. Ohne JavaScript: Der Text steht im
   Markup und wird nur ein- und ausgeblendet. tabindex am Element macht ihn
   auch ohne Maus erreichbar - ein reines title-Attribut erscheint auf
   Tastatur und Touch gar nicht. */
.apc-tip {
	position: relative;
	cursor: help;
}

.apc-tip__text {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	z-index: 30;
	width: max-content;
	max-width: min(20rem, 80vw);
	padding: 0.6rem 0.75rem;
	border-radius: 0.5rem;
	background: #1f1f24;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;

	/* Die Blase hängt mittig unter dem Auslöser. Liegt sie dabei aus dem
	   Bild, verschiebt das Script sie über --apc-tip-shift zurück - mit
	   reinem CSS lässt sich nicht erkennen, wie viel Platz rechts noch
	   ist. Ohne Script bleibt es bei der Mitte. */
	transform: translateX(calc(-50% + var(--apc-tip-shift, 0px)));
}

.apc-tip__text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - var(--apc-tip-shift, 0px));
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #1f1f24;
}

/*
 * Aufklappen nur dort, wo es hingehoert.
 *
 * :hover galt bis 1.43 fuer alle Geraete. Auf einem Touchscreen bleibt
 * hover nach dem Antippen haengen - das Geraet hat keinen Zeiger, den es
 * wegbewegen koennte. Zusammen mit :focus, das ein Tippen auf das
 * Element ebenfalls setzt, blieb die Blase stehen und liess sich kaum
 * wieder schliessen.
 *
 * Deshalb: hover nur bei echtem Zeiger, :focus-visible fuer die Tastatur
 * (es feuert beim Tippen und Klicken bewusst nicht), und fuer Touch die
 * Klasse is-open, die das Script beim Antippen umlegt.
 */
@media (hover: hover) and (pointer: fine) {
	.apc-tip:hover .apc-tip__text {
		opacity: 1;
		visibility: visible;
	}
}

.apc-tip:focus-visible .apc-tip__text,
.apc-tip.is-open .apc-tip__text {
	opacity: 1;
	visibility: visible;
}

/* Das kleine "i" */

.apc-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	margin-left: 0.25rem;
	border-radius: 50%;
	background: var(--apc-line);
	color: var(--apc-muted);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.apc-info:hover,
.apc-info:focus-visible {
	background: var(--apc-magenta);
	color: #fff;
	outline: none;
}

.apc-info__mark {
	pointer-events: none;
}

/* Das Kennzeichen "Empfiehlt weiter" ist zugleich sein eigener Auslöser. */

.apc-page .apc-page__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.apc-page__badge-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: rgba(224, 0, 122, 0.18);
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* ------------------------------------------------ Uebertragene Texte */

.apc-page__other-transfer {
	display: inline-block;
	margin: 0 0 0.6rem;
	color: var(--apc-magenta);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.apc-page__other-transfer:hover {
	text-decoration: underline;
}

.apc-page__active-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.8rem;
	font-size: 0.88rem;
}

.apc-page .apc-page__chip--clear {
	background: var(--apc-magenta);
	border-color: var(--apc-magenta);
	color: #fff;
}

/* ----------------------------------------------------------------- Mobil */

@media (max-width: 600px) {
	.apc-page__head {
		gap: 1rem;
		padding: 1.1rem;
	}

	.apc-page__value {
		font-size: 2.5rem;
	}

	.apc-page .apc-page__other-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.3rem 0.7rem;
	}

	/* Sterne in der Quellenliste kosten auf schmalen Geraeten Platz, den
	   die Zahlen besser brauchen. */
	.apc-page__other-row .apc-stars {
		display: none;
	}

	/* Auf schmalen Geraeten wird die Blase zur Leiste am unteren Rand.

	   Neben dem "i" ist kein Platz: Steht das Symbol weit rechts, laeuft
	   eine mittig ausgerichtete Blase aus dem Bild - und wo genau es steht,
	   haengt vom Umbruch des Textes ab, laesst sich in CSS also nicht
	   vorhersagen. Am unteren Rand ist sie immer vollstaendig sichtbar.

	   position: fixed setzt voraus, dass kein uebergeordnetes Element eine
	   Transformation traegt. Das gilt hier; transform wird zudem
	   ausdruecklich zurueckgesetzt, sonst waere die Blase selbst der
	   Bezugspunkt. */
	.apc-tip__text {
		position: fixed;
		top: auto;
		right: 1rem;
		bottom: 1rem;
		left: 1rem;
		width: auto;
		max-width: none;
		/* Die Verschiebung des Scripts gilt hier nicht - die Leiste sitzt
		   ohnehin am Bildschirmrand. */
		transform: none;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	}

	/* Ohne Bezug zum Symbol ergibt der Zipfel keinen Sinn mehr. */
	.apc-tip__text::after {
		display: none;
	}

	/* Die Leiste am unteren Rand sagt selbst, wie man sie wieder loswird.
	   Ein Kreuz waere ein zweites Ziel neben einem, das ohnehin schon die
	   ganze Breite hat - antippen genuegt. */
	.apc-tip.is-open .apc-tip__text::before {
		content: "Zum Schließen antippen";
		display: block;
		margin-bottom: 0.35rem;
		opacity: 0.65;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Genug Flaeche, dass der Daumen sie sicher trifft - und eine
	   Obergrenze: Eine lange Erklaerung waechst sonst ueber den oberen
	   Bildschirmrand hinaus, und der Anfang des Textes ist weg. */
	.apc-tip__text {
		max-height: 45vh;
		padding: 0.9rem 1rem;
		overflow-y: auto;
		cursor: pointer;
		overscroll-behavior: contain;
	}

	/* Profilkopf einspaltig. Das Portraet ragt nicht mehr in den Banner -
	   dafuer ist dort kein Platz. */
	.apc-profile__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.1rem;
	}

	.apc-profile__photo {
		width: 110px;
		height: 110px;
		margin-top: -3.4rem;
	}

	.apc-profile__banner {
		min-height: 0;
		padding: 3.6rem 1rem 1.4rem;
	}

	.apc-profile__actions {
		top: 0.6rem;
		right: 0.6rem;
		left: 0.6rem;
		justify-content: center;
	}

	.apc-page__listhead {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Auf schmalen Geraeten kostet der Innenabstand zu viel Textbreite. */
	.apc-page__item {
		padding: 0.9rem;
	}

	.apc-page__item--short {
		padding: 0.7rem 0.9rem;
	}

}

/* ------------------------------------------- Bewerter kontaktieren */

.apc-contact__button {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.4rem;
	color: var(--apc-magenta);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.apc-contact__button::-webkit-details-marker {
	display: none;
}

.apc-contact__button::marker {
	content: "";
}

.apc-contact__button:hover {
	border-color: var(--apc-magenta);
}

.apc-contact__panel {
	width: 100%;
	max-width: 30rem;
	margin-top: 0.5rem;
	padding: 0.9rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.6rem;
	background: #fcfaf5;
	text-align: left;
}

.apc-contact__note {
	margin: 0 0 0.8rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--apc-muted);
}

.apc-contact__field {
	margin: 0 0 0.6rem;
}

.apc-contact__field label {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.82rem;
	font-weight: 600;
}

.apc-contact__field input,
.apc-contact__field textarea {
	width: 100%;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.4rem;
	background: #fff;
	font: inherit;
	font-size: 0.85rem;
}

.apc-contact__hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	color: var(--apc-muted);
}

.apc-contact__submit {
	margin: 0;
}

.apc-contact__submit button {
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: 0.4rem;
	background: var(--apc-magenta);
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.apc-contact__status {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 0.5rem;
	font-size: 0.88rem;
}

.apc-contact__status--ok {
	border: 1px solid #b9dfc0;
	background: #f1f9f2;
}

.apc-contact__status--warn {
	border: 1px solid #e8cf9a;
	background: #fdf7ea;
}

/* ------------------------------------------------- Video und Fotos */

.apc-media {
	margin: 0.8rem 0;
}

.apc-media__video {
	position: relative;
	max-width: 32rem;
	aspect-ratio: 16 / 9;
	border-radius: 0.6rem;
	overflow: hidden;
	background: linear-gradient(120deg, #2b1c33, #5c1f4a 55%, #8c2060);
	background-size: cover;
	background-position: center;
}

.apc-media__video video,
.apc-media__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Liegt ein eigenes Vorschaubild darunter, braucht der Text einen dunklen
   Grund - sonst haengt seine Lesbarkeit vom Bild ab. */
.apc-media__video--youtube.has-poster::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 8, 20, 0.45);
}

.apc-media__play {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.apc-media__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	padding-left: 0.2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1c1c1c;
	font-size: 1.3rem;
}

.apc-media__play:hover .apc-media__play-icon {
	background: #fff;
}

.apc-media__play-text {
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
}

.apc-media__play-note {
	max-width: 22rem;
	font-size: 0.72rem;
	line-height: 1.4;
	opacity: 0.85;
}

.apc-media__images {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.7rem 0 0;
	padding: 0;
	list-style: none;
}

.apc-media__images img {
	display: block;
	width: 7rem;
	height: 7rem;
	border-radius: 0.5rem;
	object-fit: cover;
}

.apc-media__images a:hover img {
	opacity: 0.88;
}

@media (max-width: 600px) {
	.apc-media__images img {
		width: 5.2rem;
		height: 5.2rem;
	}

	.apc-media__play-note {
		font-size: 0.68rem;
	}
}

/* ---------------------------------------- Bewertung ohne Text, Google */

.apc-page__notext {
	margin: 0.3rem 0 0;
	color: var(--apc-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* Ohne Zitat braucht die Zeile weniger Luft. */
.apc-page__item--short {
	padding: 0.8rem 1.2rem;
}

.apc-page__google {
	margin: 1.2rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--apc-line);
	border-radius: 0.6rem;
	background: #fcfaf5;
}

.apc-page .apc-page__google-head {
	display: flex;
	align-items: center;
	margin: 0 0 0.3rem;
	font-size: 0.98rem;
}

.apc-page__list--google {
	margin: 0;
}

.apc-page__list--google .apc-page__item:last-child {
	margin-bottom: 0;
}

/* Leere Absätze direkt an der eigenen Ausgabe.

   Ein Netz für den Fall, dass weder der PHP-Filter noch das Script
   greifen - etwa wenn ein Optimierungs-Plugin JavaScript zurückhält.
   :empty erfasst nur wirklich leere Absätze, ein <p>&nbsp;</p> bleibt
   stehen. Angefasst wird ausschließlich, was direkt angrenzt. */
p:empty + .apc-page,
p:empty + .apc-form,
p:empty + .apc-profile,
p:empty + .apc-seal,
p:empty + .apc-list {
	margin-top: 0;
}

.apc-page + p:empty,
.apc-form + p:empty,
.apc-profile + p:empty,
.apc-seal + p:empty,
.apc-list + p:empty,
.apc-page ~ p:empty:last-child {
	display: none;
}

/* Der Stilblock zur Umschaltung der Kriterien steht im Formular. Wickelt
   ihn ein Theme in einen Absatz, bekommt dieser Abstände - sichtbar als
   schmaler Streifen. */
.apc-form style,
.apc-form p:empty {
	display: none;
}

/* Datei-Auswahl im Bewertungsformular */

.apc-form input[type="file"] {
	display: block;
	width: 100%;
	padding: 0.5rem;
	border: 1px dashed var(--apc-line);
	border-radius: 0.4rem;
	background: #fcfaf5;
	font: inherit;
	font-size: 0.88rem;
}

.apc-form__hint {
	display: block;
	margin-top: 0.3rem;
	color: var(--apc-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

.apc-form__capture {
	margin-top: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--apc-magenta);
	border-radius: 0.4rem;
	background: #fff;
	color: var(--apc-magenta);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.apc-form__filecheck {
	margin: 0.4rem 0 0;
	padding: 0.4rem 0.6rem;
	border-radius: 0.4rem;
	background: #f1f9f2;
	border: 1px solid #b9dfc0;
	font-size: 0.82rem;
}

.apc-form__filecheck.is-bad {
	background: #fdf0f0;
	border-color: #e5b4b4;
}

/* Hochkant aufgenommene Videos.

   Ein festes 16:9 schnitte ein Handyvideo oben und unten ab oder liesse
   breite schwarze Balken stehen. Die Hoehe wird deshalb begrenzt, das
   Verhaeltnis ergibt sich aus dem Video selbst. */
.apc-media__video video {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	background: #000;
}

.apc-media__video:has(video) {
	aspect-ratio: auto;
	max-height: 70vh;
}

/* Eingeklappter Bewertungstext auf der Seite.

   Der Verlauf am unteren Rand zeigt, dass der Text weitergeht - ohne ihn
   sieht eine abgeschnittene Zeile nach einem Fehler aus. */
.apc-page__text.is-collapsed {
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.apc-page__toggle {
	display: inline-block;
	margin: 0.3rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--apc-magenta);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.apc-page__toggle:hover {
	text-decoration: underline;
}

.apc-page__toggle::after {
	content: " ›";
}

.apc-page__toggle[aria-expanded="true"]::after {
	content: " ‹";
}

/* Antwort des Betreibers.

   Eingerückt und abgesetzt: Sie ist nicht Teil der Bewertung. Sähe sie
   gleich aus, läse man sie als Worte des Kunden - und die Zusage, Texte
   nicht zu verändern, wäre hinfällig. */
.apc-page__reply {
	margin: 0.9rem 0 0;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--apc-magenta);
	border-radius: 0 0.5rem 0.5rem 0;
	background: #faf7f9;
}

.apc-page__reply-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
}

.apc-page__reply-date {
	color: var(--apc-muted);
	font-size: 0.8rem;
}

.apc-page__reply-text p {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.55;
}

.apc-page__reply-text p:last-child {
	margin-bottom: 0;
}

/* Solange das Teilen-Fenster offen ist, steht die Seite dahinter still. */
html.apc-share-offen,
html.apc-share-offen body {
	overflow: hidden;
}

/* Das Fenster bekommt beim Öffnen den Fokus, damit Screenreader dort
   beginnen. Ein Rahmen darum wäre dabei nur Zierde ohne Bedeutung. */
.apc-share__panel:focus {
	outline: none;
}

/* --------------------------------------------- Noch nicht eingetragen */

/*
 * Platzhalter fuer ein leeres Pflichtfeld. Sichtbar nur fuer angemeldete
 * Betreiber - fuer Besucher gibt field_or_hint() gar nichts aus.
 *
 * Unterstrichen und gestrichelt, damit es sich klar von echtem Inhalt
 * abhebt: Niemand soll den Platzhalter fuer einen schlecht gewaehlten
 * Namen halten.
 */
.apc-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	vertical-align: baseline;
	font-style: italic;
	font-weight: 400;
	opacity: 0.75;
}

.apc-hint .apc-hint__link,
.apc-hint__link:visited {
	color: inherit;
	text-decoration: underline dashed;
	text-underline-offset: 0.2em;
}

.apc-hint .apc-hint__link:hover,
.apc-hint .apc-hint__link:focus-visible {
	text-decoration: underline solid;
}

/*
 * Ein Ring statt einer gefuellten Flaeche: Bei background: currentColor
 * haette der Kreis dieselbe Farbe wie der Buchstabe darauf, und das "i"
 * waere nicht zu sehen. Der Ring nimmt die Textfarbe und funktioniert so
 * auf hellem wie auf dunklem Grund - der Platzhalter steht in beidem.
 */
.apc-hint__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.75em;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}