/* Navigation, Fußspalten und Inhaltsseiten (Sicherheit, Einsatz, Branchen, Ratgeber). */
.head-row { gap: 1.5rem; }
.head-nav { display: none; margin-left: auto; gap: 1.5rem; }
.head-nav a { color: #e6ebfb; font-size: .98rem; font-weight: 500; text-decoration: none; }
.head-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 48rem) { .head-nav { display: flex; } .head-row > .btn { margin-left: 0; } }

.foot-cols { display: grid; gap: 1.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 2.5rem; }
@media (min-width: 48rem) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-cols a { display: block; padding-block: .22rem; color: var(--muted); text-decoration: none; }
.foot-cols a:hover { color: var(--fg); }
.foot-h { margin: 0 0 .5rem; font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }

.pg-hero { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.pg-hero > div { display: block; text-align: left; }
.pg-hero .eyebrow { margin: 1.25rem 0 .75rem; color: var(--gold-hell); }
.pg-hero .eyebrow:empty { display: none; }
.pg-hero h1 { max-width: 28ch; font-size: clamp(2.4rem, 5.4vw, 4rem); color: #fff; }
.pg-hero .lead { max-width: 44rem; padding-inline: 0; margin-top: 1.25rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; color: #cdd6f3; }
.crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }

.pg-body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.pg-text { max-width: 46rem; }
.pg-text h2 { margin-top: 3rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.pg-text h3 { margin: 1.9rem 0 0; font-size: 1.12rem; font-weight: 600; color: var(--fg); }
.pg-text p { margin: 1rem 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--fg); }
.pg-text ul, .pg-text ol { margin: 1rem 0 0; padding-left: 1.3rem; font-size: 1.08rem; line-height: 1.6; }
.pg-text li + li { margin-top: .45rem; }
.pg-text a, .pg-faq a { color: var(--accent); text-decoration-color: var(--pop); text-underline-offset: .18em; }
.pg-text .facts { max-width: none; margin-top: 1.5rem; padding: 0; }
.pg-text .facts li { margin: 0; }
.pg-text .cp, .pg-text .bx-3 { margin-top: 1.5rem; }
.pg-date { margin-top: 2.5rem !important; font-size: .92rem !important; color: var(--muted) !important; }

.tldr { max-width: 46rem; margin-bottom: 2.25rem; padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.tldr-h { margin: 0 0 .5rem; font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pop-text); }
.tldr ul { margin: 0; padding-left: 1.2rem; font-size: 1.04rem; line-height: 1.55; color: var(--fg); }
.tldr li + li { margin-top: .35rem; }

.pg-faq { max-width: 46rem; margin-top: 3.5rem; }
.pg-faq h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.pg-faq details, .home-faq details { border-top: 1px solid var(--line); }
.pg-faq details:last-child, .home-faq details:last-child { border-bottom: 1px solid var(--line); }
.pg-faq summary, .home-faq summary { cursor: pointer; padding: 1rem 0; font-size: 1.08rem; font-weight: 500; color: var(--fg); }
.pg-faq details p, .home-faq details p { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.6; color: var(--muted); }

.pg-rel { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pg-rel h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.rel-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 52rem) { .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel { display: block; padding: 1.4rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s ease-out; }
.rel:hover { border-color: var(--accent); }
.rel b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.15; text-transform: uppercase; color: var(--fg); }
.rel span { display: block; margin-top: .55rem; font-size: .95rem; line-height: 1.5; color: var(--muted); }

.home-faq { max-width: 46rem; }
.home-faq h2 { margin-bottom: 1.25rem; }
.more-link { display: inline-block; margin-top: 1.5rem; font-weight: 500; color: var(--accent); text-decoration-color: var(--pop); text-underline-offset: .18em; }