/* einbruchschutz — page layout only (tokens from theme.css; no colours, no new sizes). */

/* 02 · Schwachstellen: hint notice under the boxed list */
.ebs-hint { max-width: 860px; margin-top: var(--sp-8); }

/* 05 · Vorher/nachher: each note sits directly under its photo; the arrow stays centred on the photos */
.ebs-ba { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
.ebs-ba__before { grid-row: 1; grid-column: 1; }
.ebs-ba__note--before { grid-row: 2; grid-column: 1; margin-bottom: var(--sp-6); }
.ebs-ba__after { grid-row: 3; grid-column: 1; }
.ebs-ba__note--after { grid-row: 4; grid-column: 1; }
.ebs-ba__note { display: grid; align-content: start; gap: var(--sp-2); padding-left: var(--sp-4); border-left: 3px solid var(--c-line-strong); }
.ebs-ba__note > * { margin: 0; }
.ebs-ba__note h3 { font-size: var(--fs-lg); }
.ebs-ba__note p { color: var(--c-muted); }
.ebs-ba__note--after { border-left-color: var(--yellow); }
@media (min-width: 40em) {
	.ebs-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ebs-ba__after { grid-row: 1; grid-column: 2; }
	.ebs-ba__note--before { grid-row: 2; grid-column: 1; margin-bottom: 0; }
	.ebs-ba__note--after { grid-row: 2; grid-column: 2; }
	.ebs-ba > .ba__arrow { position: relative; top: auto; left: auto; grid-row: 1; grid-column: 1 / -1; align-self: center; justify-self: center; transform: none; margin-bottom: 3.2rem; }
}

/* 06 · RC-Klassen: intro, table, note, then the notice + police panel pair */
.ebs-rc { display: grid; gap: var(--sp-4); }
.ebs-rc > * { margin: 0; }
.ebs-rc__intro { max-width: 68ch; }
.ebs-rc .cmp th[scope="row"] { white-space: nowrap; font-family: var(--font-display); font-size: var(--fs-md); }
.ebs-rc__note { display: flex; align-items: flex-start; gap: var(--sp-3); font-weight: 600; color: var(--c-heading); }
.ebs-rc__note .i { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--c-accent-text); }
.ebs-rc__pair { margin-top: var(--sp-8); align-items: stretch; }
/* the notice text needs the full width until both cards can be roomy side by side */
@media (max-width: 61.99em) { .ebs-rc__pair { grid-template-columns: minmax(0, 1fr); } }
.ebs-rc__pair .split__panel { min-height: 0; justify-content: center; }
.ebs-rc__pair .split__panel a .i { width: 1em; height: 1em; margin-left: 4px; vertical-align: -0.1em; }

/* 08 · Ablauf: sticky title beside a vertical timeline */
@media (min-width: 62em) {
	.ebs-timeline { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
	.ebs-timeline__head { position: sticky; top: calc(var(--admin-bar) + var(--header-h-s) + var(--sp-6)); }
	.ebs-timeline__head .section-head { margin-bottom: 0; }
	.ebs-timeline__cta { margin-top: var(--sp-7); }
}
/* phones/tablets: the sticky call bar covers this; the call button only fills the sticky column on desktop */
@media (max-width: 61.99em) { .ebs-timeline__cta { display: none; } }
.ebs-timeline__steps { max-width: none; }
.ebs-timeline__steps .step:last-child { padding-bottom: 0; }
.ebs-timeline__steps .step__n { flex: none; }
.ebs-timeline__steps .step__body { flex: 1 1 0%; min-width: 0; }

/* 01 · Hero: markup order H1 → lead → call button → note → checks (button on the first screen at 1440×900);
   mirrored split gives the text column the larger share so the lead stays short */
#hero .hero__checks { margin-top: var(--sp-6); }
@media (min-width: 56.25em) {
	#hero.hero--rev .hero__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* 09 · Kostenlose Beratung: H2 + checklist stacked left, the one phone card right */
.ebs-consult { display: grid; gap: var(--gap); grid-template-areas: "head" "phone" "list"; }
.ebs-consult__head { grid-area: head; margin-bottom: var(--sp-2); }
.ebs-consult__phone { grid-area: phone; }
.ebs-consult__list { grid-area: list; }
.ebs-consult .phone-block__facts li { align-items: flex-start; }
.ebs-consult .phone-block__facts li .i { flex: none; margin-top: 3px; }
@media (min-width: 56.25em) {
	.ebs-consult { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head phone" "list phone"; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
	.ebs-consult__head { margin-bottom: 0; align-self: end; }
	.ebs-consult__list { align-self: stretch; justify-content: center; }
	.ebs-consult__list .phone-block__facts { gap: var(--sp-5); }
	.ebs-consult__list .phone-block__facts li { font-size: var(--fs-md); }
}