/* ==========================================================================
   Documentation — zweistufiges Akkordeon (Produkt → Handbuch-Eintrag)
   Basis: sh-page / sh-faq-item / pw-pageheader (analog Release Notes)
   Konsumiert: --pw-* aus global.css. Dark Mode kommt vollständig via
   Token-Cascade — kein eigener @media-Block nötig.
   ========================================================================== */

.sh-doc-page { padding: 0 0 var(--pw-space-3xl); }

@media (max-width: 768px) {
	.sh-doc-page { padding: 0 0 60px; }
}

/* --- App-Icon vor Produkt-Titel --- */
.sh-doc__app-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.sh-doc__app-icon img {
	width: 36px;
	height: 36px;
	display: block;
}

@media (max-width: 600px) {
	.sh-doc__app-icon img { width: 30px; height: 30px; }
}

/* --- Inner-Akkordeon-Liste (Manuals) --- */
.sh-doc__entries {
	margin-top: var(--pw-space-md);
}

/* --- Dezenter Open-State (kein oranger Rahmen, kein oranger Schatten) --- */
.sh-doc-page .sh-faq-item[open] {
	border-color: var(--pw-border-light);
	box-shadow: none;
}

/* --- Dezenter Toggle (statt orange-gefüllter Kreis) --- */
.sh-doc-page .sh-faq-item__toggle {
	width: 24px;
	height: 24px;
	background: transparent;
	color: var(--pw-text-muted);
	font-size: 18px;
	font-weight: 300;
}

.sh-doc-page .sh-faq-item:hover .sh-faq-item__toggle {
	color: var(--pw-text);
}

.sh-doc-page .sh-faq-item[open] .sh-faq-item__toggle {
	background: transparent;
	color: var(--pw-text-muted);
	transform: rotate(45deg);
}

/* --- Dokument-Card im Akkordeon-Body (HTML | DE | EN | …) ---
   Prose-Typografie (Link-Farbe, p-Abstand, Wipe-Underline) kommt aus global.css. */
.sh-doc__entry-text {
	margin: 0 0 20px;
}

.sh-doc__downloads {
	background: var(--pw-bg-alt);
	border-radius: var(--pw-radius-md);
	padding: 20px var(--pw-space-lg);
}

.sh-doc__downloads-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--pw-text);
	margin: 0 0 var(--pw-space-md);
}

.sh-doc__format-row {
	display: flex;
	align-items: center;
	gap: var(--pw-space-md);
	padding: 12px 0;
	border-top: 1px solid var(--pw-border);
}

.sh-doc__format-row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.sh-doc__format-row:last-child { padding-bottom: 0; }

.sh-doc__format-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--pw-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--pw-bg);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-sm);
	padding: var(--pw-space-xs) 10px;
	min-width: 64px;
	text-align: center;
	flex-shrink: 0;
}

.sh-doc__format-langs {
	display: flex;
	gap: var(--pw-space-sm);
	flex-wrap: wrap;
}

.sh-doc__lang-btn {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--pw-link);
	background: var(--pw-bg);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-sm);
	padding: var(--pw-space-xs) 12px;
	min-width: 44px;
	justify-content: center;
	letter-spacing: 0.04em;
	transition: border-color 0.15s, color 0.15s;
}

.sh-doc__lang-btn:hover {
	border-color: var(--pw-link);
	color: var(--pw-link);
}

.sh-doc__quickguide-link {
	margin: 0;
}

@media (max-width: 600px) {
	.sh-doc__downloads { padding: var(--pw-space-md) 18px; }
	.sh-doc__format-row { flex-wrap: wrap; gap: 10px; }
	.sh-doc__format-label { min-width: 56px; }
}