/*
 * Hilfecenter Support — polish pass on the JP-1100 redesign.
 *
 * The zz- prefix makes this sort last in the loader's ASCII-ordered glob, so it
 * loads AFTER jp-1100-hilfecenter-support.css and its equal-specificity rules
 * win — a plain jp-1100-...-polish name sorts BEFORE the base ('-' < '.') and
 * silently loses. Scoped to body.page-id-2179, which under WPML is
 * stamped on BOTH twins' <body> (DE 2179 + EN 293855), so one selector reaches
 * both languages — the same pattern the base sheet uses.
 */

/* 3 — Steps section: centre the "Support-Ticket anlegen" heading and its intro. */
body.page-id-2179 .support-steps-section h2.line-none,
body.page-id-2179 .support-steps-section h2.line-none + span.h5 {
	text-align: center;
}

/* 2 — Steps section: taller step cards with more vertical breathing room.
 *
 * Card height is driven by the theme's aspect spacer
 * `.figure-square::after { padding-bottom: 85% }`, so that is the lever to grow.
 * The inner is `position:absolute; inset:0` and the caption pins to its bottom
 * (`.figure-square-caption { bottom:0 }`), while the figure carries
 * `overflow:hidden` (for the 24px radius) — so a `min-height` on the inner only
 * overflows the fixed figure box and clips the caption. Growing the spacer
 * ratio makes the whole figure taller, and the bottom-pinned caption stays
 * inside the clip. */
/* The theme stacks the card as an absolute overlay: the image fills the whole
 * square (`position:absolute; inset:0`) and the caption is a translucent white
 * bar pinned to its bottom (`position:absolute; bottom:0`), so the label reads
 * ON TOP of the screenshot. Rebuild it as a normal vertical flow instead — the
 * image sits in a band on top, the caption flows below on solid white, cleanly
 * separated. Drop the aspect spacer so the card height follows that content. */
body.page-id-2179 .support-steps-section .figure-square::after {
	content: none;
}

/* Fill the (equal-height) grid column so all four cards match, regardless of
 * how many lines each caption wraps to. */
body.page-id-2179 .support-steps-section .figure-square {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.page-id-2179 .support-steps-section .figure-square-inner {
	position: static;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* The image sits in a fixed band on top; the caption grows to absorb the rest
 * so the cards equalise. */
body.page-id-2179 .support-steps-section .figure-square-inner picture {
	display: block;
	width: 100%;
	flex: 0 0 auto;
}

body.page-id-2179 .support-steps-section .figure-square-img {
	position: relative;
	display: block;
	width: 100%;
	height: 200px;
	object-fit: contain;
}

body.page-id-2179 .support-steps-section .figure-caption {
	position: static;
	flex: 1 1 auto;
	width: 100%;
	background: #fff;
	padding: 40px 32px 48px;
}

/* The card is an <a>, so the caption inherits the link underline — drop it. */
body.page-id-2179 .support-steps-section .figure-square,
body.page-id-2179 .support-steps-section .figure-square:hover,
body.page-id-2179 .support-steps-section .figure-caption {
	text-decoration: none;
}

/* 4 — Tools section: more space between each bold title line and the paragraph
 * that follows it (e.g. "Was ist TeamViewer?" and its body copy). The titles are
 * a <p> whose only child is a <strong>; the body paragraphs are plain text. */
body.page-id-2179 .support-tools-section .info-card p:has(> strong:only-child) {
	margin-bottom: 20px;
}

/* The two Support-Optionen sub-headings ("Wer ist support-berechtigt?" and
 * "Support-Level der kostenpflichtigen Editionen") render at the theme default
 * #333 — recolour them to brand navy. Scoped by structure (h3.text-center.mt-7)
 * so both language twins are hit. */
body.page-id-2179 .support-options-section h3.text-center.mt-7 {
	color: #0b1b45;
}

/* 5 — Support-Optionen intro: keep the two lead paragraphs at the theme's own
 * reduced, centred measure (the wrapper's w-lg-75 / w-xl-60 utilities) rather
 * than the full band width, and colour the copy brand navy. */
body.page-id-2179 .support-options-section .w-lg-75.w-xl-60 p {
	color: #0b1b45;
}

/* 6 — "Wer ist support-berechtigt?" compact cards: bold the whole title line so
 * the edition qualifier ("für alle Kunden kostenfrei ab Edition Start", …) reads
 * as strongly as the title above it. */
body.page-id-2179 .support-options-section .info-card--compact .info-card__title h5,
body.page-id-2179 .support-options-section .info-card--compact .info-card__title span.h5 {
	font-weight: 700 !important;
}

/* 7a — "Support-Level" tiles: bold the tile title (E-Mail-Support / Telefon-Support). */
body.page-id-2179 .support-options-section .info-card.card .card-body h3.h5 {
	font-weight: 700 !important;
}

/* 7d — the two Support-Level tiles carry sub-headings the theme renders alike
 * (span.h5). Split them by role, keying on the .mt-3 class the markup already
 * carries — no merge into the paragraph:
 *   • .mt-3 labels (Tickets im JTL-Kundencenter, Rückrufservice) stay single
 *     one-line labels, sized like the body copy;
 *   • the others (Bevorzugte Ticketbearbeitung, Sicherheit …) are section
 *     subtitles and match "Support-Level Bronze & Silber" (the .h3 subtitle:
 *     28px / 600). */
body.page-id-2179 .support-options-section .info-card.card .card-body span.font-weight-normal.mt-3.h5 {
	margin-top: 0 !important;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
}

/* 7g — the four sub-section subtitles (Support-Level Bronze & Silber /
 * Support-Level Gold, Bevorzugte Ticketbearbeitung, Sicherheit …) render at
 * 18px, bold, tight to the content below (the card's 16px flex gap still
 * separates them). The .h3 ones default to 28px/600, the .h5 ones carry
 * .font-weight-normal (400 !important), so the weight needs !important. */
body.page-id-2179 .support-options-section .info-card.card .card-body span.mt-0.h3,
body.page-id-2179 .support-options-section .info-card.card .card-body span.font-weight-normal.h5:not(.mt-3) {
	font-size: 18px;
	font-weight: 700 !important;
	line-height: 24px;
	color: #0b1b45;
	margin-bottom: 0;
}

/* More space between the tile title and its Support-Level name. The markup
 * carries .mt-0 (margin-top:0 !important), so this needs !important too. */
body.page-id-2179 .support-options-section .info-card.card .card-body span.mt-0.h3 {
	margin-top: 16px !important;
}

/* 7e — drop the bronze envelope icon in front of "Tickets im JTL-Kundencenter";
 * the label reads as a plain sub-heading. */
body.page-id-2179 .support-options-section .info-card--icon-sms .card-body span.h5.mt-3 .fa-stack {
	display: none;
}

/* 7f — equalise the two Support-Level tiles (E-Mail vs Telefon), whose text
 * length differs. Their columns already stretch to the taller one in the flex
 * row; make each column a flex column and let the card fill it. */
body.page-id-2179 .support-options-section .row > [class*="col"]:has(> .info-card.card) {
	display: flex;
	flex-direction: column;
}

body.page-id-2179 .support-options-section .info-card.card {
	flex: 1 1 auto;
}

/* 8 — "Services von JTL" card: balance the space below the copy (to the CTA)
 * against the space above it (the rule). */
body.page-id-2179 .support-questions-section .info-card .info-card-cta {
	margin-top: 24px;
}

/* 9 — "Installations- und Einrichtungsservices" card: more space above the body
 * copy so it sits clear of the heading. */
body.page-id-2179 .support-questions-section .info-card.bg-secondary .card-body .mb-auto > p:first-child {
	margin-top: 24px;
}

/* 10 — all four "Wer ist support-berechtigt?" eligibility card headings read
 * brand navy (Start / Advanced / Pro / Enterprise). One rule over the compact
 * cards' title, so every twin's four cards match — no per-card icon scoping. */
body.page-id-2179 .support-options-section .info-card--compact .info-card__title h5,
body.page-id-2179 .support-options-section .info-card--compact .info-card__title span.font-weight-normal.h5 {
	color: rgb(11, 27, 69);
}