/*
 * Seite «Für Ihre IT» (/fuer-ihre-it/) – Ergänzungen zu basis.css.
 * Nur Klassen mit Präfix .stx-it-, Werte aus dem Entwurf Version 13 (IT_v13.html).
 */

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

.stx-raster.stx-it-kopf {
	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-it-kopf .stx-h1 {
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: wrap; /* Entwurf ohne «balance»: «Informationen für / Ihre IT» */
}

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

/* Sprungmarken «Auf dieser Seite» */
.wp-block-list.stx-it-sprung {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-list.stx-it-sprung > li {
	margin: 0;
	padding: 0;
}

.wp-block-list.stx-it-sprung a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 34px;
	padding: 0 12px;
	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: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

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

.stx-abschnitt.stx-it-abschnitt {
	padding: clamp(52px, 11vw, 80px) 20px;
}

/* Letzter Abschnitt: nur Linie oben, die Fusszeile bringt ihre eigene */
.stx-abschnitt.stx-it-dokumente {
	border-bottom: 0;
}

/* Software-Beispiele (Pfad, Servername) */
.stx-it-seite code {
	font-family: 'IBM Plex Mono', Consolas, monospace;
	font-size: 14px;
	background: none;
	padding: 0;
	border: 0;
	color: inherit;
	overflow-wrap: anywhere;
}

/* Titel links, Inhalt rechts (Voraussetzungen, Netzwerk, Ablage) */
.stx-it-zweispaltig {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}

.stx-it-zweispaltig > * {
	flex: 3 1 640px;
	min-width: 0;
}

/* Titel darf nicht schmaler als sein längstes Wort werden («Systemvoraussetzungen») */
.stx-it-zweispaltig > :first-child {
	flex: 1 1 280px;
	min-width: auto;
}

/* ---------- Tabelle Systemvoraussetzungen ---------- */

.wp-block-table.stx-tabelle.stx-it-system {
	margin: 0;
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line, #E3E6EA);
	border-radius: 12px;
	background: none;
	box-shadow: none;
}

.wp-block-table.stx-tabelle.stx-it-system table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 16px;
}

.wp-block-table.stx-tabelle.stx-it-system th,
.wp-block-table.stx-tabelle.stx-it-system td {
	border: 0;
	border-bottom: 1px solid #EEF0F3;
	padding: 14px 20px;
	text-align: left;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	background: none;
}

.wp-block-table.stx-tabelle.stx-it-system th {
	width: 32%;
	vertical-align: top;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #12161C);
}

.wp-block-table.stx-tabelle.stx-it-system td {
	color: var(--wp--preset--color--text, #2A3038);
}

.wp-block-table.stx-tabelle.stx-it-system tr:last-child > * {
	border-bottom: 0;
}

/* ---------- Installation und Rechte ---------- */

.stx-it-stapel {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.stx-it-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 20px;
}

.stx-it-karten > .stx-karte {
	background: var(--wp--preset--color--weiss, #FFFFFF);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.stx-it-karten .stx-kartentitel {
	line-height: 1.6;
}

/* ---------- Netzwerk und Lizenzierung ---------- */

.stx-it-begriffe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px 32px;
}

.stx-it-punkt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px solid var(--wp--preset--color--line, #E3E6EA);
	padding-top: 14px;
	min-width: 0;
}

.stx-it-punkt .stx-it-begriff {
	margin: 0;
	font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--ink, #12161C);
}

/* ---------- Welche Daten an wen gehen ---------- */

.stx-it-daten-stapel {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.stx-it-einleitung {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 760px;
}

.wp-block-table.stx-tabelle.stx-it-daten {
	margin: 0;
	overflow-x: auto;
	background: var(--wp--preset--color--weiss, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3E6EA);
	border-radius: 12px;
	box-shadow: none;
}

.wp-block-table.stx-tabelle.stx-it-daten table {
	width: 100%;
	min-width: 760px;
	border: 0;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.55;
}

.wp-block-table.stx-tabelle.stx-it-daten thead {
	border-bottom: 0;
}

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

.wp-block-table.stx-tabelle.stx-it-daten thead th {
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #555C66);
	border-bottom: 1px solid var(--wp--preset--color--line, #E3E6EA);
	vertical-align: bottom;
}

.wp-block-table.stx-tabelle.stx-it-daten thead th:first-child {
	width: 22%;
}

.wp-block-table.stx-tabelle.stx-it-daten thead th:last-child {
	width: 30%;
}

.wp-block-table.stx-tabelle.stx-it-daten tbody td {
	padding: 14px 20px;
	font-size: 16px;
	line-height: 1.55;
	vertical-align: top;
	color: var(--wp--preset--color--text, #2A3038);
	border-bottom: 1px solid #EEF0F3;
}

.wp-block-table.stx-tabelle.stx-it-daten tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #12161C);
}

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

.wp-block-list.stx-it-punkte {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 900px;
	font-size: 16px;
}

.wp-block-list.stx-it-punkte > li {
	margin: 0;
}

/* ---------- Lokale Ablage und Deinstallation ---------- */

.stx-it-spalte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
}

/* ---------- Dokumente ---------- */

.stx-it-abschluss {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: center;
	justify-content: space-between;
}

.stx-it-abschluss__text {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

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

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

.wp-block-buttons.stx-it-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-it-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-it-knoepfe .is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons.stx-it-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);
}