/* ============================================================
   SUPPORT-HUB — scoped under .sh-page
   ============================================================ */
/* Probeweise: Secondary-Header (Support-Titel + Submenu) auf dieser Seite ausblenden */
.secondaryheader, section.submenu { display: none !important; }
/* Vertical rhythm (unified):
   - Title    → subtitle/description : 12px
   - Subtitle → content block         : 40px
   - Card h3  → card description      : 12px
   - Card p   → card CTA              : 16px
*/
.sh-page { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); }
.sh-section { padding: var(--pw-section-standard); }
.sh-section--alt { background: var(--pw-bg-alt); }
.sh-section__title { text-align: center; font-size: 30px; font-weight: 700; color: var(--pw-text); margin: 0 0 12px; letter-spacing: -0.02em; }
.sh-section__sub { text-align: center; font-size: 16px; color: var(--pw-text-secondary); margin: 0 auto 40px; max-width: 640px; }

/* ---- Hero ---- */
.sh-hero { position: relative; background: linear-gradient(180deg, var(--pw-bg-alt) 0%, #fff 100%); padding: var(--pw-section-hero); text-align: center; }
.sh-hero__bgimage { position: absolute; left: 8%; bottom: 0; width: 560px; height: auto; opacity: 0.08; pointer-events: none; user-select: none; z-index: 0; }
.sh-hero .pw-container { position: relative; z-index: 1; }
@media (max-width: 900px) { .sh-hero__bgimage { width: 340px; left: 2%; opacity: 0.1; } }
@media (prefers-color-scheme: dark) { .sh-hero__bgimage { opacity: 0.18; filter: invert(1); } }
.sh-hero__title { font-size: 44px; font-weight: 700; color: var(--pw-text); margin: 0 0 12px; letter-spacing: -0.03em; }
.sh-hero__sub { font-size: 18px; color: var(--pw-text-secondary); margin: 0 0 40px; }
/* Search bar inside hero */
.sh-search { display: flex; align-items: center; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-md); padding: 6px 6px 6px 18px; transition: border-color 0.2s, box-shadow 0.2s; }
.sh-search:focus-within { border-color: var(--pw-link); box-shadow: 0 0 0 4px rgba(42,127,191,0.12); }
.sh-search__icon { width: 20px; height: 20px; color: var(--pw-text-muted); flex-shrink: 0; }
.sh-search__input { flex: 1; padding: 12px 14px; font-size: 16px; border: none; outline: none; background: transparent; color: var(--pw-text); font-family: inherit; min-width: 0; }
.sh-search__input::placeholder { color: var(--pw-text-muted); }
.sh-search__submit { padding: 10px 22px; font-size: 15px; font-weight: 600; background: var(--pw-brand); color: #fff; border: none; border-radius: var(--pw-radius-sm); cursor: pointer; transition: background 0.2s; font-family: inherit; flex-shrink: 0; }
.sh-search__submit:hover { background: var(--pw-brand-hover); }

/* ---- Quick links (flat pill buttons under section title) ---- */
.sh-quick-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 40px; }
.sh-quick-link { padding: 12px 22px; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); color: var(--pw-text); font-size: 14px; font-weight: 600; background: #fff; transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.sh-quick-link:hover { border-color: var(--pw-brand); color: var(--pw-brand); transform: translateY(-1px); }
.sh-quick-link--primary { background: var(--pw-brand); color: #fff; border-color: var(--pw-brand); }
.sh-quick-link--primary:hover { background: var(--pw-brand-hover); border-color: var(--pw-brand-hover); color: #fff; }

/* ---- Task Tiles ---- */
.sh-tasks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-space-md); }
.sh-task { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.sh-task:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-md); border-color: var(--pw-border-light); color: inherit; }
.sh-task__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: #eaf3fa; display: flex; align-items: center; justify-content: center; color: var(--pw-link); }
.sh-task__icon svg { width: 24px; height: 24px; }
.sh-task__body h3 { font-size: 18px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-sm); }
.sh-task__body p { font-size: 14px; color: var(--pw-text-secondary); margin: 0; line-height: 1.5; }

/* ---- How-To List ---- */
.sh-howto { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-space-sm) var(--pw-space-xl); max-width: 880px; margin: 0 auto; }
.sh-howto a { display: flex; align-items: center; justify-content: space-between; padding: var(--pw-space-md) 20px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm); color: var(--pw-text); font-size: 15px; font-weight: 500; transition: border-color 0.2s, transform 0.2s; }
.sh-howto a:hover { border-color: var(--pw-brand); transform: translateX(2px); color: var(--pw-text); }
.sh-howto a::after { content: '›'; font-size: 20px; color: var(--pw-text-muted); margin-left: 12px; flex-shrink: 0; }
.sh-howto a:hover::after { color: var(--pw-brand); }
.sh-howto-all { text-align: center; margin-top: 40px; }
.sh-howto-all a { display: inline-block; padding: 12px var(--pw-space-lg); background: #1d1d1f; color: #fff; border-radius: var(--pw-radius-sm); font-size: 15px; font-weight: 600; transition: background 0.2s; }
.sh-howto-all a:hover { background: var(--pw-brand); color: #fff; }

/* ---- Templates ---- */
.sh-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pw-space-md); }
.sh-template-card { display: block; padding: var(--pw-space-lg); background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.sh-template-card:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-md); color: inherit; }
.sh-template-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 var(--pw-space-sm); color: var(--pw-text); }
.sh-template-card p { font-size: 13px; color: var(--pw-text-secondary); margin: 0 0 var(--pw-space-md); line-height: 1.5; }
.sh-template-card span { font-size: 13px; font-weight: 600; color: var(--pw-link); }
.sh-template-card:hover span { color: var(--pw-brand); }
.sh-templates-all { text-align: center; margin-top: 40px; }
.sh-templates-all a { display: inline-block; padding: 12px var(--pw-space-lg); background: #1d1d1f; color: #fff; border-radius: var(--pw-radius-sm); font-size: 15px; font-weight: 600; transition: background 0.2s; }
.sh-templates-all a:hover { background: var(--pw-brand); color: #fff; }

/* ---- Trainings Calendar ---- */
.sh-tcal {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 0;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-md);
	max-width: 960px;
	margin: 0 auto;
	height: 370px;
}
@media (prefers-color-scheme: dark) { .sh-tcal { background: var(--pw-dark-2); border-color: rgba(255,255,255,0.08); } }
.sh-tcal__cal { padding: 28px; border-right: 1px solid var(--pw-border); overflow: hidden; border-radius: 16px 0 0 16px; }
@media (prefers-color-scheme: dark) { .sh-tcal__cal { border-right-color: rgba(255,255,255,0.08); } }
.sh-tcal__list { padding: var(--pw-space-lg) 28px; overflow-y: auto; }

.sh-tcal__label {
	font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 1.2px; color: var(--pw-text-muted); margin: 0 0 var(--pw-space-md);
}
.sh-tcal__label--ondemand { margin-top: 20px; padding-top: var(--pw-space-md); border-top: 1px solid var(--pw-border); }
@media (prefers-color-scheme: dark) { .sh-tcal__label--ondemand { border-top-color: rgba(255,255,255,0.08); } }

/* Compact training item (accordion) */
.sh-tcal__item {
	border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm);
	margin-bottom: var(--pw-space-sm); overflow: hidden;
}
@media (prefers-color-scheme: dark) { .sh-tcal__item { border-color: rgba(255,255,255,0.08); } }
.sh-tcal__item--ondemand { border-style: dashed; }
.sh-tcal__summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px var(--pw-space-md); cursor: pointer; list-style: none;
	gap: 12px;
}
.sh-tcal__summary::-webkit-details-marker { display: none; }
.sh-tcal__summary::marker { content: ''; }
.sh-tcal__item[open] .sh-tcal__summary { border-bottom: 1px solid #f0f0f2; }
@media (prefers-color-scheme: dark) { .sh-tcal__item[open] .sh-tcal__summary { border-bottom-color: rgba(255,255,255,0.06); } }

.sh-tcal__item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sh-tcal__item-date {
	font-size: 11px; font-weight: 700; color: var(--pw-brand);
	background: rgba(249,157,27,0.08); padding: 3px 7px; border-radius: 5px;
	white-space: nowrap; flex-shrink: 0;
}
.sh-tcal__item-date--ondemand { color: #085041; background: #E1F5EE; }
@media (prefers-color-scheme: dark) {
	.sh-tcal__item-date { background: rgba(249,157,27,0.15); }
	.sh-tcal__item-date--ondemand { background: rgba(8,80,65,0.2); color: #6ee7b7; }
}
.sh-tcal__item-title {
	font-size: 14px; font-weight: 600; color: var(--pw-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) { .sh-tcal__item-title { color: var(--pw-fg); } }

.sh-tcal__item-badges { display: flex; gap: 6px; flex-shrink: 0; }
.sh-tcal__badge {
	font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px;
	text-transform: uppercase; letter-spacing: 0.5px;
}
.sh-tcal__badge--de { background: #FAEEDA; color: #412402; }
.sh-tcal__badge--en { background: #E1F5EE; color: #085041; }
.sh-tcal__badge--fr { background: #E8E1F5; color: #2D1B69; }
.sh-tcal__badge--free { background: #e8fce8; color: #1a7a1a; }
@media (prefers-color-scheme: dark) {
	.sh-tcal__badge--de { background: rgba(250,238,218,0.12); color: #f5a060; }
	.sh-tcal__badge--en { background: rgba(225,245,238,0.12); color: #6ee7b7; }
	.sh-tcal__badge--free { background: rgba(26,122,26,0.12); color: #6ee7b7; }
}

/* Expanded detail */
.sh-tcal__detail { padding: 12px var(--pw-space-md) var(--pw-space-md); }
.sh-tcal__detail-sub { font-size: 13px; color: var(--pw-text-secondary); margin: 0 0 var(--pw-space-xs); }
.sh-tcal__detail-city { font-size: 13px; color: var(--pw-text-secondary); margin: 0 0 var(--pw-space-xs); }
.sh-tcal__detail-trainer { font-size: 12px; color: var(--pw-text-muted); margin: 0 0 10px; }
.sh-tcal__detail-trainer a { color: var(--pw-brand); }
.sh-tcal__detail-trainer a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
	.sh-tcal__detail-sub, .sh-tcal__detail-city { color: var(--pw-text-secondary); }
	.sh-tcal__detail-trainer { color: #777; }
}
.sh-tcal__detail-actions { display: flex; align-items: center; gap: 12px; margin-top: var(--pw-space-sm); }
.sh-tcal__btn {
	display: inline-flex; padding: 7px 14px; font-size: 12px; font-weight: 600;
	border-radius: 7px; background: var(--pw-brand); color: #fff;
	transition: background 0.15s;
}
.sh-tcal__btn:hover { background: var(--pw-brand-hover); color: #fff; }
.sh-tcal__link { font-size: 12px; font-weight: 500; color: var(--pw-brand); }
.sh-tcal__link:hover { text-decoration: underline; }

.sh-trainings-all { text-align: center; margin-top: 40px; }
.sh-trainings-all a { display: inline-block; padding: 12px var(--pw-space-lg); background: #1d1d1f; color: #fff; border-radius: var(--pw-radius-sm); font-size: 15px; font-weight: 600; transition: background 0.2s; }
.sh-trainings-all a:hover { background: var(--pw-brand); color: #fff; }
.sh-trainings-empty { max-width: 640px; margin: 0 auto; padding: var(--pw-space-lg); text-align: center; background: #fff; border: 1px dashed var(--pw-border-light); border-radius: var(--pw-radius-md); color: var(--pw-text-secondary); font-size: 15px; }

/* Calendar in support-hub — reuse schulungen snippets */
.sh-tcal .sc-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sh-tcal .sc-cal__month { font-size: 15px; font-weight: 600; color: var(--pw-text); }
@media (prefers-color-scheme: dark) { .sh-tcal .sc-cal__month { color: var(--pw-fg); } }
.sh-tcal .sc-cal__arrow {
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	border-radius: 8px; font-size: 18px; color: var(--pw-text-secondary); transition: background 0.15s;
}
.sh-tcal .sc-cal__arrow:hover { background: #f0f0f0; color: var(--pw-text); }
@media (prefers-color-scheme: dark) { .sh-tcal .sc-cal__arrow:hover { background: rgba(255,255,255,0.08); color: var(--pw-fg); } }

.sh-tcal .sc-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; }
.sh-tcal .sc-cal__wday { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--pw-text-muted); padding: 0 0 10px; text-align: center; }
.sh-tcal .sc-cal__cell { text-align: center; padding: 2px; vertical-align: middle; }
.sh-tcal .sc-cal__day {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 40px; font-size: 13px; font-weight: 400;
	color: var(--pw-text); border-radius: 8px; position: relative;
}
@media (prefers-color-scheme: dark) { .sh-tcal .sc-cal__day { color: var(--pw-fg); } }
.sh-tcal a.sc-cal__day:hover { background: #f0f0f0; color: var(--pw-text); }
@media (prefers-color-scheme: dark) { .sh-tcal a.sc-cal__day:hover { background: rgba(255,255,255,0.08); color: var(--pw-fg); } }
.sh-tcal .sc-cal__cell--past .sc-cal__day { color: var(--pw-border-light); }
@media (prefers-color-scheme: dark) { .sh-tcal .sc-cal__cell--past .sc-cal__day { color: #444; } }
.sh-tcal .sc-cal__cell--has .sc-cal__day { font-weight: 600; color: #412402; background: #FAEEDA; }
@media (prefers-color-scheme: dark) { .sh-tcal .sc-cal__cell--has .sc-cal__day { background: rgba(249,157,27,0.12); color: #f5a060; } }
.sh-tcal .sc-cal__cell--selected .sc-cal__day,
.sh-tcal .sc-cal__cell--selected a.sc-cal__day:hover { background: var(--pw-brand); color: #fff; font-weight: 600; }
.sh-tcal .sc-cal__cell--today .sc-cal__day { font-weight: 600; color: var(--pw-brand); }
.sh-tcal .sc-cal__cell--today.sc-cal__cell--has .sc-cal__day { color: #fff; background: var(--pw-brand); }
.sh-tcal .sc-cal__dot { display: none; }
.sh-tcal .sc-cal__dot--multi { display: none; }

@media (max-width: 768px) {
	.sh-tcal { grid-template-columns: 1fr; max-height: none; }
	.sh-tcal__cal { border-right: none; border-bottom: 1px solid var(--pw-border); }
	.sh-tcal__list { max-height: 400px; }
}

/* ---- Enterprise ---- */
.sh-enterprise { background: linear-gradient(135deg, #0a1628 0%, #1a2d4a 100%); color: #fff; }
.sh-enterprise .sh-section__title { color: #fff; }
.sh-enterprise .sh-section__sub { color: #a1a1a6; }
.sh-enterprise__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pw-space-md); max-width: 880px; margin: 0 auto 40px; }
.sh-enterprise__links a { display: block; padding: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; color: #fff; font-size: 15px; font-weight: 600; transition: background 0.2s, border-color 0.2s; }
.sh-enterprise__links a:hover { background: rgba(255,255,255,0.1); border-color: var(--pw-brand); color: #fff; }
.sh-enterprise__cta { text-align: center; }

/* ---- PM-Wissen (full section, not a tile) ---- */
.sh-knowledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-space-md); max-width: 880px; margin: 0 auto; }
.sh-knowledge-card { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.sh-knowledge-card:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-md); border-color: var(--pw-border-light); color: inherit; }
.sh-knowledge-card__tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--pw-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.sh-knowledge-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 var(--pw-space-sm); color: var(--pw-text); line-height: 1.35; }
.sh-knowledge-card p { font-size: 14px; color: var(--pw-text-secondary); margin: 0 0 20px; line-height: 1.55; flex: 1; }
.sh-knowledge-card__more { font-size: 13px; font-weight: 600; color: var(--pw-link); }
.sh-knowledge-card:hover .sh-knowledge-card__more { color: var(--pw-brand); }
.sh-knowledge-all { text-align: center; margin-top: 40px; }
.sh-knowledge-all a { display: inline-block; padding: 12px var(--pw-space-lg); background: #1d1d1f; color: #fff; border-radius: var(--pw-radius-sm); font-size: 15px; font-weight: 600; transition: background 0.2s; }
.sh-knowledge-all a:hover { background: var(--pw-brand); color: #fff; }
@media (max-width: 720px) {
	.sh-knowledge-grid { grid-template-columns: 1fr; }
}

/* ---- Contact ---- */
.sh-contact { text-align: center; max-width: 680px; margin: 0 auto; }
.sh-contact h3 { font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--pw-text); }
.sh-contact p { font-size: 15px; color: var(--pw-text-secondary); margin: 0 0 40px; }
.sh-contact__links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sh-contact__links a { padding: 12px 22px; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); color: var(--pw-text); font-size: 14px; font-weight: 600; transition: border-color 0.2s, color 0.2s; }
.sh-contact__links a:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
.sh-contact__links a.sh-contact__primary { background: var(--pw-brand); color: #fff; border-color: var(--pw-brand); }
.sh-contact__links a.sh-contact__primary:hover { background: var(--pw-brand-hover); border-color: var(--pw-brand-hover); color: #fff; }

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
	.sh-page { color: var(--pw-fg); }
	.sh-section__title { color: var(--pw-fg); }
	.sh-section__sub { color: var(--pw-text-secondary); }
	.sh-hero { background: linear-gradient(180deg, #0a0a0a 0%, #111 100%); }
	.sh-hero__title { color: var(--pw-fg); }
	.sh-hero__sub { color: var(--pw-text-secondary); }
	.sh-search { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-quick-link { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.sh-search__input { color: var(--pw-fg); }
	.sh-search__input::placeholder { color: var(--pw-text-secondary); }
	.sh-task { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-task:hover { border-color: #333; }
	.sh-task__icon { background: #1a2d4a; color: #53b5f3; }
	.sh-task__body h3 { color: var(--pw-fg); }
	.sh-task__body p { color: var(--pw-text-secondary); }
	.sh-howto a { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.sh-howto a:hover { color: var(--pw-fg); }
	.sh-template-card { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-template-card h3 { color: var(--pw-fg); }
	.sh-template-card p { color: var(--pw-text-secondary); }
	.sh-templates-all a, .sh-howto-all a { background: var(--pw-bg-alt); color: var(--pw-text); }
	.sh-templates-all a:hover, .sh-howto-all a:hover { background: var(--pw-brand); color: #fff; }
	.sh-knowledge-card { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-knowledge-card:hover { border-color: #333; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
	.sh-knowledge-card h3 { color: var(--pw-fg); }
	.sh-knowledge-card p { color: var(--pw-text-secondary); }
	.sh-knowledge-card__tag { color: var(--pw-text-secondary); }
	.sh-contact h3 { color: var(--pw-fg); }
	.sh-contact p { color: var(--pw-text-secondary); }
	.sh-contact__links a { border-color: var(--pw-dark-3); color: var(--pw-fg); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.sh-templates { grid-template-columns: repeat(2, 1fr); }
	.sh-trainings { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sh-section { padding: var(--pw-section-compact); }
	.sh-hero__title { font-size: 32px; }
	.sh-hero__sub { font-size: 16px; }
	.sh-tasks { grid-template-columns: 1fr; }
	.sh-howto { grid-template-columns: 1fr; }
	.sh-templates { grid-template-columns: 1fr; }
	.sh-enterprise__links { grid-template-columns: 1fr; }
	.sh-trainings { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ — Hub, Group, Detail
   Pattern: scoped under .sh-faq-page (Hub/Group) or .sh-faq-detail (Detail)
   ============================================================ */

/* ---- Breadcrumb ---- */
.sh-breadcrumb { margin: 0 0 var(--pw-space-xl); }
.sh-breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--pw-space-sm); align-items: center; font-size: 13px; color: var(--pw-text-muted); margin: 0; padding: 0; list-style: none; }
.sh-breadcrumb__list li { list-style: none; }
.sh-breadcrumb__list a { color: var(--pw-text-secondary); transition: color 0.2s; }
.sh-breadcrumb__list a:hover { color: var(--pw-brand); }
.sh-breadcrumb__sep { color: var(--pw-border-light); }
.sh-breadcrumb__current { color: var(--pw-text); font-weight: 500; }

/* Variante: im Hero unter dem Titel (zentriert, statt Beschreibungstext) */
.sh-breadcrumb--hero { margin: 0 0 0; }
.sh-breadcrumb--hero .sh-breadcrumb__list { justify-content: center; font-size: 14px; }

@media (prefers-color-scheme: dark) {
	.sh-breadcrumb__list { color: var(--pw-text-secondary); }
	.sh-breadcrumb__list a { color: var(--pw-text-secondary); }
	.sh-breadcrumb__sep { color: #444; }
	.sh-breadcrumb__current { color: var(--pw-fg); }
}

/* ---- FAQ Hub & Group (Akkordeon-Liste) ---- */
.sh-faq-page { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); }
/* Top-Padding fuer den Pageheader, analog zu .sh-faq-detail / .pw-grid-detail__container */
.sh-faq-page > .pw-container:first-child,
.sh-list-page > .pw-container:first-child,
.sh-relnotes-page > .pw-container:first-child,
.sh-doc-page > .pw-container:first-child,
.pw-grid-page > .pw-container:first-child,
.tools-page > .pw-container:first-child,
/* Erster Content-Container in diesen Templates: nur Bottom-Padding entfernen,
   das Top-Padding liefert die enthaltene .pw-pageheader (96px desktop). */
.lp-hub > .pw-container:first-child,
.lp-page > .pw-container:first-child,
.lp-lesson > .pw-container:first-child,
.mp-features-page > .pw-container:first-child,
.mp-detail-page > .pw-container:first-child { padding-bottom: 0; }

/* Lead-Text unter dem Pageheader (Sammelseiten / Hub-Pages) */
.sh-page__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--pw-text-secondary);
    margin: 0 0 var(--pw-space-xl);
    max-width: 760px;
}
.sh-page__lead p:last-child { margin-bottom: 0; }
.sh-page__lead a { color: var(--pw-link); }
.sh-page__lead a:hover { text-decoration: underline; }
.sh-page__search { margin: 0 0 40px; max-width: 560px; }
.sh-faq-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; font-size: 17px; color: var(--pw-text-secondary); line-height: 1.6; }
@media (prefers-color-scheme: dark) { .sh-faq-page { color: var(--pw-fg); } .sh-faq-intro { color: var(--pw-text-secondary); } }

/* Filter Pills */
.sh-faq-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto var(--pw-space-xl); }
.sh-faq-filter { padding: 10px 18px; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); color: var(--pw-text); font-size: 14px; font-weight: 600; background: #fff; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.sh-faq-filter:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
.sh-faq-filter--active { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
.sh-faq-filter--active:hover { background: var(--pw-brand-hover); border-color: var(--pw-brand-hover); color: #fff; }
@media (prefers-color-scheme: dark) {
	.sh-faq-filter { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.sh-faq-filter--active { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
}

/* Akkordeon-Gruppen */
.sh-faq-list { display: flex; flex-direction: column; gap: var(--pw-space-xl); padding-bottom: 64px; }
.sh-faq-group__title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-md); letter-spacing: -0.01em; }
.sh-faq-group__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--pw-radius-sm); background: #eaf3fa; display: flex; align-items: center; justify-content: center; color: var(--pw-link); }
.sh-faq-group__icon svg { width: 20px; height: 20px; }
.sh-faq-group__items { display: flex; flex-direction: column; gap: var(--pw-space-sm); }
@media (prefers-color-scheme: dark) {
	.sh-faq-group__title { color: var(--pw-fg); }
	.sh-faq-group__icon { background: #1a2d4a; color: #53b5f3; }
}

/* Einzel-Akkordeon-Item (<details>) */
.sh-faq-item { border: 1px solid var(--pw-border); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.sh-faq-item:hover { border-color: var(--pw-border-light); }
.sh-faq-item[open] { border-color: var(--pw-brand); box-shadow: 0 4px 16px rgba(249,157,27,0.06); }
.sh-faq-item__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-md); padding: 18px 22px; cursor: pointer; list-style: none; color: var(--pw-text); }
.sh-faq-item__summary::-webkit-details-marker { display: none; }
.sh-faq-item__summary::marker { content: ''; }
.sh-faq-item__question { font-size: 16px; font-weight: 600; line-height: 1.4; flex: 1; min-width: 0; }
.sh-faq-item__toggle { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pw-bg-alt); color: var(--pw-text-secondary); font-size: 16px; font-weight: 400; line-height: 1; transition: background 0.2s, color 0.2s, transform 0.2s; }
.sh-faq-item[open] .sh-faq-item__toggle { background: var(--pw-brand); color: #fff; transform: rotate(45deg); }
.sh-faq-item__body { padding: var(--pw-space-xs) 22px 22px; border-top: 1px solid #f0f0f2; color: var(--pw-text); font-size: 15px; line-height: 1.65; }
.sh-faq-item__body > *:first-child { margin-top: var(--pw-space-md); }
.sh-faq-item__body p { margin: 0 0 14px; }
.sh-faq-item__body a { color: var(--pw-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sh-faq-item__body a:hover { color: var(--pw-brand-hover); }
.sh-faq-item__body img { border-radius: 8px; margin: 12px 0; }
.sh-faq-item__body ul, .sh-faq-item__body ol { margin: 0 0 14px; padding-left: var(--pw-space-lg); list-style: revert; }
.sh-faq-item__body ul li, .sh-faq-item__body ol li { margin-bottom: 6px; }
@media (prefers-color-scheme: dark) {
	.sh-faq-item { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-faq-item:hover { border-color: #333; }
	.sh-faq-item[open] { border-color: var(--pw-brand); }
	.sh-faq-item__summary { color: var(--pw-fg); }
	.sh-faq-item__toggle { background: var(--pw-dark-3); color: var(--pw-text-secondary); }
	.sh-faq-item__body { color: var(--pw-fg); border-top-color: rgba(255,255,255,0.06); }
}

/* List-Variante (statt Akkordeon — verlinkte Items) */
.sh-faq-list--linked .sh-faq-item__summary { cursor: pointer; }
.sh-faq-list--linked .sh-faq-item:hover { transform: translateY(-1px); border-color: var(--pw-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.sh-faq-list--linked .sh-faq-item__toggle::before { content: '›'; font-size: 22px; }
.sh-faq-list--linked .sh-faq-item__toggle { transform: none; background: transparent; color: var(--pw-text-muted); }
.sh-faq-list--linked .sh-faq-item:hover .sh-faq-item__toggle { color: var(--pw-brand); }

/* ============================================================
   FAQ DETAIL — Single FAQ-Antwort
   ============================================================ */
.sh-faq-detail { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); max-width: 960px; margin: 0 auto; padding: var(--pw-space-3xl) var(--pw-space-lg) var(--pw-space-3xl); }
@media (max-width: 768px) { .sh-faq-detail { padding: var(--pw-space-2xl) 20px 60px; } }
@media (prefers-color-scheme: dark) { .sh-faq-detail { color: var(--pw-fg); } }
.sh-faq-detail__header { padding: 0 0 var(--pw-space-lg); }
.sh-faq-detail__title { font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0 0 var(--pw-space-md); letter-spacing: -0.02em; color: var(--pw-text); }
@media (prefers-color-scheme: dark) { .sh-faq-detail__title { color: var(--pw-fg); } }

/* Footer mit Aktualisierungsdatum + Tags am Artikel-Ende */
.sh-faq-detail__footer { margin-top: 56px; padding-top: var(--pw-space-lg); border-top: 1px solid var(--pw-border); display: flex; flex-direction: column; gap: 12px; }
.sh-faq-detail__updated { margin: 0; font-size: 13px; color: var(--pw-text-muted); }
.sh-faq-detail__tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--pw-space-sm); }
.sh-faq-detail__tags li { list-style: none; }
.sh-faq-detail__tag { display: inline-block; padding: var(--pw-space-xs) 10px; background: var(--pw-bg-alt); border-radius: var(--pw-radius-sm); font-size: 12px; font-weight: 500; color: var(--pw-text-secondary); }
@media (prefers-color-scheme: dark) {
	.sh-faq-detail__footer { border-top-color: var(--pw-dark-3); }
	.sh-faq-detail__updated { color: var(--pw-text-secondary); }
	.sh-faq-detail__tag { background: var(--pw-dark-3); color: var(--pw-text-secondary); }
}

/* Prose-Typografie (Links, Headings, p, img, Listen, blockquote) kommt aus global.css */
/* Float-Bleed verhindern: Heading nach Float-Bild bricht den Float */
.sh-faq-detail__content h2,
.sh-faq-detail__content h3,
.sh-faq-detail__content h4 { clear: both; }
.sh-faq-detail__content code { background: var(--pw-bg-alt); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 14px; }
.sh-faq-detail__content pre { background: var(--pw-dark-2); color: var(--pw-fg); padding: var(--pw-space-md) 20px; border-radius: var(--pw-radius-sm); overflow-x: auto; font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.sh-faq-detail__content pre code { background: transparent; color: inherit; padding: 0; }
@media (prefers-color-scheme: dark) {
	.sh-faq-detail__content code { background: var(--pw-dark-3); }
}

/* ---- Comparison Table (FAQ-Detail) ---- */
.sh-faq-detail__comparison { margin: var(--pw-space-xl) 0 var(--pw-space-sm); overflow-x: auto; }
.sh-faq-detail__comparison table.comparison { width: 100%; border: 1px solid var(--pw-border); }
@media (prefers-color-scheme: dark) {
	.sh-faq-detail__comparison table.comparison { border-color: var(--pw-dark-3); }
}

/* ---- Voting Widget ---- */
.sh-vote { margin: var(--pw-space-2xl) 0; padding: var(--pw-space-lg) 28px; background: var(--pw-bg-alt); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); text-align: center; }
.sh-vote__question { margin: 0 0 var(--pw-space-md); font-size: 16px; font-weight: 600; color: var(--pw-text); }
.sh-vote__buttons { display: flex; justify-content: center; gap: 12px; }
.sh-vote__btn { display: inline-flex; align-items: center; gap: var(--pw-space-sm); padding: 10px 20px; background: #fff; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); font-size: 14px; font-weight: 600; color: var(--pw-text); cursor: pointer; transition: border-color 0.2s, transform 0.2s, background 0.2s; font-family: inherit; }
.sh-vote__btn:hover { transform: translateY(-1px); }
.sh-vote__btn--up:hover { border-color: #1a7a1a; color: #1a7a1a; }
.sh-vote__btn--down:hover { border-color: #b00020; color: #b00020; }
.sh-vote__btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.sh-vote__thanks { margin-top: 12px; font-size: 14px; color: #1a7a1a; font-weight: 500; }
@media (prefers-color-scheme: dark) {
	.sh-vote { background: #0f0f0f; border-color: var(--pw-dark-3); }
	.sh-vote__question { color: var(--pw-fg); }
	.sh-vote__btn { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.sh-vote__thanks { color: #6ee7b7; }
}

/* ---- Share Widget ---- */
.sh-share { margin: var(--pw-space-xl) 0; display: flex; align-items: center; gap: 12px; padding: var(--pw-space-md) 20px; background: #fff; border: 1px solid var(--pw-border); border-radius: 12px; }
.sh-share__label { font-size: 13px; font-weight: 600; color: var(--pw-text-secondary); }
.sh-share__url { flex: 1; min-width: 0; font-size: 13px; color: var(--pw-text-muted); font-family: 'SF Mono', Menlo, Monaco, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-share__copy { flex-shrink: 0; padding: var(--pw-space-sm) var(--pw-space-md); background: var(--pw-brand); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; }
.sh-share__copy:hover { background: var(--pw-brand-hover); }
.sh-share__copy.is-copied { background: #1a7a1a; }
@media (prefers-color-scheme: dark) {
	.sh-share { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-share__url { color: var(--pw-text-secondary); }
}

/* ---- Related Posts ---- */
.sh-faq-detail__related { margin-top: 56px; padding-top: var(--pw-space-xl); border-top: 1px solid var(--pw-border); }
.sh-faq-detail__related-title { font-size: 18px; font-weight: 700; color: var(--pw-text); margin: 0 0 20px; }
.sh-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sh-related-card { display: flex; align-items: flex-start; gap: 12px; padding: var(--pw-space-md) 18px; background: #fff; border: 1px solid var(--pw-border); border-radius: 12px; color: inherit; transition: border-color 0.2s, transform 0.2s; }
.sh-related-card:hover { border-color: var(--pw-brand); transform: translateY(-2px); color: inherit; }
.sh-related-card__title { flex: 1; font-size: 14px; font-weight: 600; color: var(--pw-text); line-height: 1.4; }
.sh-related-card__arrow { flex-shrink: 0; color: var(--pw-text-muted); font-size: 18px; transition: color 0.2s; }
.sh-related-card:hover .sh-related-card__arrow { color: var(--pw-brand); }
@media (prefers-color-scheme: dark) {
	.sh-faq-detail__related { border-top-color: var(--pw-dark-3); }
	.sh-faq-detail__related-title { color: var(--pw-fg); }
	.sh-related-card { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-related-card__title { color: var(--pw-fg); }
}
@media (max-width: 640px) {
	.sh-related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUPPORT-LIST — Trainings/Events Hub
   ============================================================ */
.sh-list { display: flex; flex-direction: column; gap: 12px; max-width: 960px; margin: 0 auto; padding-bottom: 64px; }
.sh-list__item { display: flex; align-items: center; gap: var(--pw-space-md); padding: 20px var(--pw-space-lg); background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.sh-list__item:hover { border-color: var(--pw-brand); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); color: inherit; }
.sh-list__item-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #eaf3fa; display: flex; align-items: center; justify-content: center; color: var(--pw-link); }
.sh-list__item-icon svg { width: auto; height: auto; max-width: 24px; max-height: 24px; object-fit: contain; }
.sh-list__item-icon-glyph {
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-image: var(--sh-icon);
	mask-image: var(--sh-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.sh-list__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--pw-space-xs); }
.sh-list__item-title { display: block; font-size: 16px; font-weight: 600; color: var(--pw-text); margin: 0; line-height: 1.3; }
.sh-list__item-sub { display: block; font-size: 13px; color: var(--pw-text-secondary); margin: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-list__item-arrow { flex-shrink: 0; color: var(--pw-text-muted); font-size: 20px; transition: color 0.2s, transform 0.2s; }
.sh-list__item:hover .sh-list__item-arrow { color: var(--pw-brand); transform: translateX(2px); }
@media (prefers-color-scheme: dark) {
	.sh-list__item { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sh-list__item-icon { background: #1a2d4a; color: #53b5f3; }
	.sh-list__item-title { color: var(--pw-fg); }
	.sh-list__item-sub { color: var(--pw-text-secondary); }
}

/* ---- Responsive für FAQ/Detail/List ---- */
@media (max-width: 640px) {
	.sh-faq-detail__title { font-size: 28px; }
	.sh-faq-detail__content { font-size: 16px; }
	.sh-faq-item__summary { padding: var(--pw-space-md) 18px; }
	.sh-faq-item__body { padding: var(--pw-space-xs) 18px 18px; }
	.sh-vote { padding: 20px; }
	.sh-vote__buttons { flex-direction: column; }
	.sh-share { flex-direction: column; align-items: stretch; gap: var(--pw-space-sm); }
	.sh-share__url { font-size: 12px; }
}