/*
 * Seite «Hilfe» (/hilfe/) – Ergänzungen zu basis.css.
 * Nur Klassen mit Präfix .stx-hilfe-, Werte aus dem Entwurf Version 13 (Hilfe_v13.html).
 */

/* Markierung aller Abschnitte der Hilfe-Seite; der Entwurf gestaltet sie nicht eigens. */
.stx-hilfe-seite {
	box-sizing: border-box;
}

/* ---------- Kopf-Panel (karierte Fläche) ---------- */

.stx-raster.stx-hilfe-panel {
	max-width: 1232px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stx-hilfe-panel .stx-h1 {
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: wrap; /* Entwurf ohne «balance» */
}

.stx-hilfe-panel .stx-lead {
	color: var(--wp--preset--color--muted, #555C66);
	max-width: 62ch;
	line-height: 1.6;
}

/* Themen-Sprungmarken */
.wp-block-list.stx-hilfe-themen {
	list-style: none;
	margin: 0;
	padding: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-list.stx-hilfe-themen > li {
	margin: 0;
	padding: 0;
}

.wp-block-list.stx-hilfe-themen a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--wp--preset--color--weiss, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3E6EA);
	color: var(--wp--preset--color--ink, #12161C);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

/* ---------- Abschnitte ---------- */

.stx-abschnitt.stx-hilfe-abschnitt--lizenz {
	padding: clamp(48px, 10vw, 72px) 20px 24px;
}

.stx-abschnitt.stx-hilfe-abschnitt--vorlage {
	padding: 48px 24px 96px;
}

.stx-abschnitt.stx-hilfe-abschnitt--frage {
	padding: clamp(48px, 10vw, 80px) clamp(10px, 2.5vw, 16px);
}

.stx-inhalt.stx-hilfe-spalte {
	max-width: 880px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ---------- Anleitungen (Artikel) ---------- */

.stx-hilfe-artikel {
	border: 1px solid var(--wp--preset--color--line, #E3E6EA);
	border-radius: 12px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 16px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.stx-hilfe-artikel.stx-hilfe-artikel--weit {
	gap: 20px;
}

.stx-hilfe-artikel strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #12161C);
}

/* Titel mit Ort-Etikett rechts */
.stx-hilfe-kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.stx-hilfe-kopfzeile > * {
	margin: 0;
}

.stx-hilfe-kopfzeile .stx-hilfe-ort {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--blau-dunkel, #155DB4);
	background: #E4EEFB;
	border-radius: 999px;
	padding: 4px 12px;
	overflow-wrap: normal;
}

.stx-hilfe-kopfzeile .stx-hilfe-ort.stx-hilfe-ort--excel {
	color: #286A2A;
	background: #E6F0E7;
}

/* Kasten «Gut zu wissen» */
.stx-hilfe-gut {
	background: var(--wp--preset--color--surface, #F5F6F8);
	border-radius: 8px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 16px;
}

.stx-hilfe-gut .stx-hilfe-gut__titel {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #12161C);
}

.wp-block-list.stx-hilfe-gut__liste {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wp-block-list.stx-hilfe-gut__liste > li {
	margin: 0;
}

/* Zwei Wege (A/B) und «Auf dem neuen Rechner» */
.stx-hilfe-wege {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
}

.stx-hilfe-weg {
	border: 1px solid var(--wp--preset--color--line, #E3E6EA);
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.wp-block-list.stx-hilfe-nummern {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 16px;
}

.wp-block-list.stx-hilfe-nummern > li {
	margin: 0;
}

/* ---------- Aufklapper «Alle Felder mit Vorgabe anzeigen» ---------- */

.wp-block-details.stx-hilfe-aufklapp {
	border-top: 1px solid var(--wp--preset--color--line, #E3E6EA);
	padding-top: 14px;
}

.wp-block-details.stx-hilfe-aufklapp > summary {
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--blau-dunkel, #155DB4);
}

.wp-block-table.stx-tabelle.stx-hilfe-felder {
	margin: 0;
	padding-top: 12px;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow-wrap: normal;
}

.wp-block-table.stx-tabelle.stx-hilfe-felder table {
	width: 100%;
	min-width: 460px;
	border: 0;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.6;
}

.wp-block-table.stx-tabelle.stx-hilfe-felder thead {
	border-bottom: 0;
}

.wp-block-table.stx-tabelle.stx-hilfe-felder th,
.wp-block-table.stx-tabelle.stx-hilfe-felder td {
	border: 0;
	text-align: left;
	letter-spacing: normal;
	text-transform: none;
	background: none;
}

.wp-block-table.stx-tabelle.stx-hilfe-felder thead th {
	padding: 8px 0 8px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #555C66);
	border-bottom: 1px solid var(--wp--preset--color--line, #E3E6EA);
}

.wp-block-table.stx-tabelle.stx-hilfe-felder tbody td {
	padding: 7px 0 7px 16px;
	font-size: 16px;
	color: var(--wp--preset--color--text, #2A3038);
	border-bottom: 1px solid #EEF0F3;
}

.wp-block-table.stx-tabelle.stx-hilfe-felder thead th:first-child,
.wp-block-table.stx-tabelle.stx-hilfe-felder tbody td:first-child {
	padding-left: 0;
}

.wp-block-table.stx-tabelle.stx-hilfe-felder tbody tr:last-child td {
	border-bottom: 0;
}

/* ---------- Abschluss «Ihre Frage ist nicht dabei?» ---------- */

.stx-raster.stx-hilfe-frage {
	max-width: 1232px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: center;
	justify-content: space-between;
}

.stx-hilfe-frage__text {
	flex: 1 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.stx-hilfe-gedaempft {
	color: var(--wp--preset--color--muted, #555C66);
}

/* Kleine Knöpfe (Höhe 44) wie im Entwurf */
.wp-block-buttons.stx-hilfe-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.wp-block-buttons.stx-hilfe-knoepfe > .wp-block-button {
	margin: 0;
}

.wp-block-buttons.stx-hilfe-knoepfe .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.wp-block-buttons.stx-hilfe-knoepfe .is-style-outline > .wp-block-button__link {
	border: 1px solid #7A8491;
	background: var(--wp--preset--color--weiss, #FFFFFF);
	color: var(--wp--preset--color--ink, #12161C);
	padding: 0 20px;
}

.wp-block-buttons.stx-hilfe-knoepfe .is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons.stx-hilfe-knoepfe .is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--ink, #12161C);
	color: var(--wp--preset--color--ink, #12161C);
}