/* notdienst — page layout only (tokens only; no colours, no new sizes). Owner: page builder. */

/* 1 · Hero (emergency-bar) ---------------------------------------------------------------- */
/* Phones/tablets: the marquee with the number moves straight under the H1 (first screen at 390×664).
   .hero__body dissolves into the hero grid so its children can be ordered; the body holds no links
   after the H1, so focus order stays equal to the visual order. */
@media (max-width: 61.99em) {
	.nd-hero .hero__inner { row-gap: 0; }
	.nd-hero .hero__body { display: contents; }
	.nd-hero .hero__body > * { justify-self: start; }
	.nd-hero .hero__body > .breadcrumbs { justify-self: stretch; }
	.nd-hero .hero__title ~ * { order: 2; }
	.nd-hero .hero__inner > .marquee { order: 1; margin-top: var(--sp-5); }
}
/* Desktop: lead and checks side by side under the H1, so the marquee stays high. */
@media (min-width: 62em) {
	.nd-hero .hero__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(40px, 5vw, 80px); align-items: end; }
	.nd-hero .hero__body > * { grid-column: 1 / -1; justify-self: start; }
	.nd-hero .hero__body > .breadcrumbs { justify-self: stretch; }
	.nd-hero .hero__title { max-width: 16em; }
	.nd-hero .hero__lead { grid-column: 1; }
	.nd-hero .hero__checks { grid-column: 2; }
}

/* 2 · Abgrenzung — two cases side by side ----------------------------------------------- */
.nd-notice__cases { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
/* Side by side only from 62em: below that the 112 column would shrink to ~35 characters per line. */
@media (min-width: 62em) { .nd-notice__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); } }
.nd-notice__case { display: flex; flex-direction: column; gap: var(--sp-3); }
.nd-notice__case > * { margin: 0; }
.nd-notice__h { font-size: var(--fs-lg); }
.nd-notice__dial { margin-top: auto; padding-top: var(--sp-2); }
.nd-notice__free { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); font-weight: 700; }
.nd-notice__free .i { flex: none; }

/* 3 · Sofort tun — the fifth box closes the 2-column grid ------------------------------- */
@media (min-width: 48em) { .nd-todo > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* 4 · Woran Sie uns erkennen ------------------------------------------------------------- */
.nd-trust__more { margin-top: var(--sp-6); text-align: center; color: var(--c-muted); }

/* 5 · Kostenlose Beratung ---------------------------------------------------------------- */
.nd-phone { align-items: stretch; }
.nd-phone > .phone-block:not(.phone-block--dark) { justify-content: center; }
.nd-phone__more { margin-top: auto; }
/* The link may wrap on phones/tablets: inline flow keeps the arrow right after the last word
   (inline-flex would push it to the far edge of the card). */
.nd-phone__more .link-arrow { display: inline; }
.nd-phone__more .link-arrow .i { display: inline-block; margin-left: var(--sp-2); vertical-align: -.15em; }

/* 6 · Welcher Notfall — whole card is the link; horizontal tiles on phones --------------- */
.nd-route { position: relative; }
.nd-route .pcard__title { gap: var(--sp-3); align-items: flex-start; }
.nd-route .pcard__title > .i { margin-top: .15em; }
.nd-route__link { flex: 1; color: inherit; text-decoration: none; }
.nd-route__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.nd-route__link:hover { color: inherit; text-decoration: none; }
.nd-route .nd-route__go { flex: none; width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.nd-route:hover .nd-route__go { transform: translateX(4px); }
.nd-route:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
/* Two or three columns: each card is a 3-row subgrid (photo · title · text), so a two-line title
   („Einbruch – Tür aufgebrochen“) keeps the texts of its row on one line. */
@media (min-width: 40em) {
	.nd-route { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.nd-route .pcard__body { display: contents; }
	.nd-route .pcard__title { margin: 0; padding: var(--sp-5) var(--sp-5) 0; }
	.nd-route .pcard__body > p { margin: 0; padding: var(--sp-3) var(--sp-5) var(--sp-5); }
}
@media (max-width: 39.99em) {
	.nd-route { flex-direction: row; }
	.nd-route .pcard__media { flex: 0 0 36%; aspect-ratio: auto; min-height: 100%; }
	.nd-route .pcard__body { padding: var(--sp-4); gap: var(--sp-2); }
	.nd-route .pcard__title { font-size: var(--fs-md); align-items: flex-start; }
	.nd-route .pcard__title .i { margin-top: 2px; }
}

/* 9 · Wie es weitergeht — six steps as a 3 × 2 grid on desktop --------------------------- */
@media (min-width: 56.25em) {
	.nd-steps { --n: 3; row-gap: var(--sp-8); }
	.nd-steps .step:nth-child(3n)::after { display: none; }
}

/* 10 · FAQ — side head + accordion ------------------------------------------------------- */
@media (min-width: 62em) {
	.nd-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
	.nd-faq__head { position: sticky; top: calc(var(--header-h, 78px) + var(--sp-6)); margin-bottom: 0; }
}
.nd-faq__soft { color: var(--c-muted); }