/* Complass – website (public pages before login, templates/landing/*): navigation with dropdown menus, footer,
   topic, framework, audience and security pages. Builds on the variables and lp classes in app.css (light/dark). */

/* ---------- Header: dropdown menus ---------- */
.lp-nav-list, .lp-mnav-list { list-style: none; margin: 0; padding: 0; }
.lp-nav-list { display: flex; gap: 2px; align-items: center; }
.lp-nav .lp-nav-item { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font: 500 .95rem var(--font-sans); padding: 8px; border-radius: var(--radius); background: none; border: 0; cursor: pointer; }
.lp-nav .lp-nav-item:hover { color: var(--ink); background: var(--inset); text-decoration: none; }
.lp-nav .lp-nav-item[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-bright); border-radius: 0; }
.lp-group { position: relative; }
.lp-group-btn .icon { width: 14px; height: 14px; transition: transform var(--t); }
.lp-group-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lp-sub { list-style: none; margin: 0; padding: 8px; display: none; }
.lp-nav .lp-sub { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 40; }
.lp-nav .lp-sub-wide { width: 580px; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
/* Safety net for every header dropdown (WCAG 2.2 2.4.11 Focus Not Obscured): the header is sticky and the panel absolute,
   so a panel taller than the viewport could never be scrolled into view. Cap it at the viewport below the panel top
   (button bottom 61 px + 8 px gap) plus a small margin, scroll inside, and keep the page from scrolling along. */
.lp-nav .lp-sub { max-height: calc(100vh - 85px); max-height: calc(100dvh - 85px); overflow-y: auto; overscroll-behavior: contain; }
/* "Für wen" (Marc 07.10.2026) and "Regelwerke" (grouped by theme, Marc 16.10.2026): three columns, centred under its button so it stays inside the viewport between the
   compact-header breakpoint and wide screens; sectors show the title only (layout.php). About 740 px in German with three groups (was 1004 px with two). */
.lp-nav .lp-sub-aud { width: min(980px, calc(100vw - 32px)); left: 50%; transform: translateX(-50%); grid-template-columns: repeat(3, 1fr); gap: 0 4px; }
.lp-nav .lp-sub-aud a { padding: 7px 10px; }
.lp-nav .lp-sub-aud .lp-sub-head span { padding: 8px 10px 2px; }
/* "Regelwerke" sits further left than "Für wen": its panel is centred under the whole menu row instead of its button
   (the list item is static, the menu list the containing block), so it never leaves the viewport on the left. */
.lp-nav .lp-nav-list { position: relative; }
.lp-nav .lp-group-fw { position: static; }
.lp-nav .lp-group-fw .lp-sub-aud { width: min(860px, calc(100vw - 32px)); }
.lp-group-btn[aria-expanded="true"] + .lp-sub { display: block; }
.lp-nav .lp-group-btn[aria-expanded="true"] + .lp-sub-wide { display: grid; }
:root:not(.js) .lp-group:hover .lp-sub, :root:not(.js) .lp-group:focus-within .lp-sub { display: block; }
.lp-sub a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radius); color: var(--ink); font-size: .93rem; font-weight: 500; }
.lp-nav .lp-sub a { padding: 9px 10px; }
.lp-sub a:hover { background: var(--inset); text-decoration: none; }
.lp-sub a[aria-current] { background: var(--inset); box-shadow: inset 3px 0 0 var(--accent-bright); }
.lp-sub-ic { color: var(--accent); display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.lp-sub-ic .icon { width: 18px; height: 18px; }
.lp-sub strong { font-weight: 600; }
.lp-sub-anchors { list-style: none; margin: -4px 0 4px 38px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 12px; }
.lp-nav .lp-sub .lp-sub-anchors a, .lp-sub .lp-sub-anchors a { padding: 2px 0; font-size: .82rem; color: var(--ink-faint); font-weight: 400; }
.lp-tag { display: inline-block; font: 600 .68rem var(--font-sans); letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); vertical-align: middle; white-space: nowrap; text-transform: none; }
.lp-tag-soon { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
/* Mobile menu: groups as accordion; scrollable within the header when many items are open */
.lp-mobile-nav:not([hidden]) { max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; }
.lp-mobile-nav .lp-nav-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 24px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 400 1rem var(--font-sans); text-align: left; cursor: pointer; text-decoration: none; }
.lp-mobile-nav a.lp-nav-item { justify-content: flex-start; }
.lp-mobile-nav .lp-nav-item:hover { background: var(--inset); }
.lp-mobile-nav .lp-sub { padding: 4px 0 8px; border-bottom: 1px solid var(--line); background: var(--inset); }
.lp-mobile-nav .lp-sub a:not(.btn) { padding: 10px 24px 10px 28px; border-bottom: 0; font-size: .95rem; }
.lp-mobile-nav .lp-sub-anchors { margin-left: 56px; }
.lp-mobile-nav .lp-sub .lp-sub-anchors a:not(.btn) { padding: 4px 0; font-size: .86rem; }
.lp-mobile-nav .lp-nav-item[aria-current="page"] { box-shadow: inset 4px 0 0 var(--accent-bright); font-weight: 600; }

/* Closing band (dark): light outline button */
.lp-band .lp-btn-outline, :root[data-theme="dark"] .lp-band .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; }
.lp-band .lp-btn-outline:hover, :root[data-theme="dark"] .lp-band .lp-btn-outline:hover { background: #f7f3ea; color: #13233f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-band .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; } }
.lp-band .lp-cta { flex-wrap: wrap; }

/* ---------- Footer with all pages ----------
   Compact (WF1, Marc 07.10.2026): at most four columns in one row, at most seven links per column, legal links as a
   slim line at the bottom. List links get 3 px block padding so every target is at least 24 px high (WCAG 2.5.8). */
.lp-foot { padding: 28px 0 14px; font-size: .875rem; }
.lp-foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.lp-foot-logo { height: 32px; margin-bottom: 6px; }
.lp-foot-about p { margin: 0 0 10px; max-width: 280px; }
.lp-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lp-foot .lp-foot-login { color: var(--ink-soft); font-weight: 400; padding-block: 3px; }
/* Footer columns: heading on top, list below with the same line spacing in all columns
   (overrides the older single-line footer .lp-foot nav in app.css) */
.lp-foot-grid > nav { display: block; }
.lp-foot-h { font-weight: 600; color: var(--ink); margin: 0 0 6px; line-height: 1.4; }
.lp-foot .lp-foot-h a { color: var(--ink); font-weight: 600; }
.lp-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; line-height: 1.35; }
.lp-foot ul a { display: inline-block; padding-block: 3px; color: var(--ink-soft); font-weight: 400; }
.lp-foot .lp-foot-all { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; }
.lp-foot .lp-foot-all .icon { width: 14px; height: 14px; }
.lp-foot .lp-foot-about .btn { color: var(--btn-ink); }
.lp-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-faint); }
.lp-foot-bottom p { margin: 0; }
.lp-foot-bottom nav { display: block; }
.lp-foot .lp-foot-legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.lp-foot .lp-foot-legal a { padding-block: 5px; color: var(--ink-soft); }
@media (max-width: 1000px) {
  .lp-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-foot-about { grid-column: 1 / -1; }
  .lp-foot-about p { max-width: none; }
}
@media (max-width: 640px) {
  .lp-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .lp-foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Content ---------- */
.lp-link { color: var(--accent-dark); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
:root[data-theme="dark"] .lp-link { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-link { color: var(--accent-bright); } }
.lp-page-head { background: var(--bg); padding: 56px 0 44px; border-bottom: 1px solid var(--line); }
.lp-page-head .lp-h1 { margin-bottom: 14px; }
.lp-page-head .lp-lead { max-width: 760px; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 .78rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 12px; }
.lp-eyebrow .icon { width: 18px; height: 18px; }
:root[data-theme="dark"] .lp-eyebrow { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-eyebrow { color: var(--accent-bright); } }
.lp-page-head .lp-cta { margin-top: 24px; }
/* Page header with short film (topic pages) */
.lp-head-split { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
.lp-head-film .clip { margin: 0; }
.lp-head-film .lp-figure figcaption { text-align: center; }
@media (max-width: 1000px) { .lp-head-split { grid-template-columns: 1fr; gap: 28px; } }
.lp-sec-tight { padding: 56px 0; }
.lp-h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin: 0 0 12px; }
.lp-intro-tight { margin-bottom: 24px; }
/* Theme headings on /regelwerke (Site::frameworkThemes(), Marc 16.10.2026): h2 for the outline, sized like a sub-heading */
.lp-fw-theme { margin: 0 0 14px; }
.lp-tiles + .lp-fw-theme { margin-top: 36px; }
/* Tiles with link (topics, frameworks, roles) */
.lp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-tiles-2 { grid-template-columns: repeat(2, 1fr); }
.lp-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.lp-tile { display: flex; flex-direction: column; gap: 8px; }
a.lp-tile, a.lp-tile:hover { color: var(--ink); text-decoration: none; }
.lp-tile h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 4px 0 0; color: var(--ink); }
.lp-tile p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.lp-tile-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--accent-dark); }
.lp-tile-more .icon { width: 15px; height: 15px; }
:root[data-theme="dark"] .lp-tile-more { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-tile-more { color: var(--accent-bright); } }
.lp-tile-muted { border-style: dashed; }
/* IEC 62443 tile on /regelwerke: one offer with links per role (box is not a link itself, no nested interactive elements) */
.lp-tile-links { list-style: none; margin: auto 0 0; padding: 6px 0 0; display: grid; gap: 10px; }
.lp-tile-links li { display: flex; flex-direction: column; gap: 2px; }
.lp-tile-links a { display: inline-flex; align-items: center; gap: 6px; padding-block: 2px; font-size: .95rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.lp-tile-links a .icon { width: 15px; height: 15px; flex: none; }
.lp-tile-links span { font-size: .86rem; color: var(--ink-soft); }
:root[data-theme="dark"] .lp-tile-links a { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-tile-links a { color: var(--accent-bright); } }
.lp-iec-role-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 8px; }
.lp-iec-role-list a[aria-current="page"] { text-decoration: none; color: var(--ink); }
/* Graphic "Ein Tool statt fünf" */
.lp-eco { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: center; }
.lp-eco-fig { margin: 0; }
.lp-eco-svg { width: 100%; height: auto; max-width: 640px; display: block; margin: 0 auto; }
.eco-link { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.eco-ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 7; opacity: .7; }
.eco-node rect { fill: var(--surface); stroke: color-mix(in srgb, var(--accent-bright) 70%, transparent); stroke-width: 1.5; }
.eco-node text { font-family: var(--font-sans); fill: var(--ink); font-size: 17px; font-weight: 600; }
.eco-node .eco-sub { font-size: 13px; font-weight: 400; fill: var(--ink-faint); }
.eco-node .eco-no { fill: var(--accent); font-weight: 700; }
.eco-hub circle { fill: #13233f; stroke: #e0a93b; stroke-width: 2; }
.eco-hub text { font-family: var(--font-sans); fill: #f7f3ea; font-size: 14px; font-weight: 500; }
.eco-hub .eco-hub-t { font-family: var(--font-display); font-size: 25px; font-weight: 400; fill: #e0a93b; }
.eco-dot { fill: var(--accent-bright); stroke: var(--surface); stroke-width: 2; }
.lp-eco-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.lp-eco-list li { display: flex; gap: 12px; }
.lp-eco-list .icon { color: var(--accent-bright); width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.lp-eco-list strong { display: block; color: var(--ink); }
.lp-eco-list p { margin: 2px 0 0; color: var(--ink-soft); font-size: .93rem; }
/* Frameworks bar */
.lp-fwbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-fwbar a, .lp-fwbar span.lp-fw-planned { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-bright) 55%, transparent); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .93rem; }
.lp-fwbar a:hover { border-color: var(--accent-bright); text-decoration: none; background: var(--inset); }
.lp-fwbar span.lp-fw-planned { font-weight: 400; color: var(--ink-faint); border-style: dashed; }
/* Trust */
.lp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.lp-trust li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.lp-trust .lp-icon .icon { width: 22px; height: 22px; }
.lp-trust strong { display: block; color: var(--ink); margin-bottom: 2px; }
.lp-trust p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
/* Problem → solution */
.lp-problem { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.35; color: var(--ink); max-width: 880px; margin: 0; }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lp-split-wide { grid-template-columns: 5fr 7fr; }
.lp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-points li { display: flex; gap: 14px; }
.lp-points .lp-icon { margin-top: 2px; }
.lp-points .lp-icon .icon { width: 22px; height: 22px; }
.lp-points h3 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; margin: 0 0 3px; color: var(--ink); }
.lp-points p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.lp-figure { margin: 0; }
.lp-figure figcaption { margin-top: 12px; color: var(--ink-faint); font-size: .86rem; }
.lp-figure + .lp-figure { margin-top: 28px; }
.lp-shot-sticky { position: sticky; top: 110px; }
.lp-sec-inner { margin-top: 40px; }
.lp-shot-placeholder { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: var(--inset); border-style: dashed; box-shadow: none; }
.lp-shot-placeholder span { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-faint); font-size: .95rem; }
.lp-shot-placeholder .icon { width: 20px; height: 20px; }
/* Legal / normative reference */
.lp-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-refs li { display: flex; gap: 8px 14px; align-items: baseline; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp-refs li > .lp-ref-what { color: var(--ink-soft); font-size: .92rem; flex: 1 1 260px; }
.lp-refs .lp-norm { font-weight: 600; color: var(--ink); }
/* Compact legal basis as one line below "Warum" (WF1 proposal E): label above, all entries as chips of the same size
   (standards without link get the look of the law chips, but with a neutral outline instead of the link colour) */
.lp-refs-line { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.lp-refs-line-h { margin: 0 0 8px; font-weight: 600; color: var(--ink); font-size: .92rem; }
.lp-refs-line ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-refs-line li { display: inline-flex; align-items: center; }
.lp-refs-line .ref, .lp-refs-line .lp-norm { min-height: 24px; }
.lp-refs-line .lp-norm { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; color: var(--ink); padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; }
.lp-hint { display: flex; gap: 12px; align-items: flex-start; background: var(--info-bg); color: var(--info-ink); border: 1px solid var(--info-line); border-radius: var(--radius-lg); padding: 14px 16px; font-size: .9rem; margin: 24px 0 0; }
.lp-hint .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.lp-hint p { margin: 0; }
.lp-hint-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
/* Deadlines */
.lp-dates { list-style: none; margin: 0; padding: 0; border-left: 2px solid color-mix(in srgb, var(--accent-bright) 55%, transparent); display: grid; gap: 16px; }
.lp-dates li { position: relative; padding-left: 22px; }
.lp-dates li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent-bright); }
.lp-dates li.is-past::before { background: var(--accent-bright); }
.lp-dates .lp-date { display: block; font-weight: 700; color: var(--ink); }
.lp-dates .lp-date-what { color: var(--ink-soft); font-size: .93rem; }
/* Phases */
.lp-phases { list-style: none; margin: 0; padding: 0; counter-reset: ph; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp-phases li { counter-increment: ph; display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; font-size: .92rem; color: var(--ink); }
.lp-phases li::before { content: counter(ph); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .82rem; }
:root[data-theme="dark"] .lp-phases li::before { background: var(--accent-bright); color: #13233f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-phases li::before { background: var(--accent-bright); color: #13233f; } }
.lp-phases.lp-phases-1 { grid-template-columns: 1fr; }
/* Scale that starts at 0 (TISAX maturity levels 0 to 5, /regelwerke/tisax) */
.lp-phases.lp-phases-0 { counter-reset: ph -1; }
.lp-tile .lp-tile-h { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 4px 0 0; color: var(--ink); }
.lp-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .93rem; }
.lp-facts strong { color: var(--ink); font-size: 1.3rem; font-family: var(--font-display); font-weight: 400; margin-right: 4px; }
/* Anchors */
.lp-anchors { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-anchors a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: .9rem; }
.lp-anchors a:hover { border-color: var(--accent-bright); text-decoration: none; }
.lp-anchors .icon { width: 15px; height: 15px; color: var(--accent); }
/* Chips, problem sentence and h2 in one wrap (Integrations; Asset Management for the chips): room between them.
   One wrap on purpose: the phone folding (site-mobile.js) keeps the siblings before the h2 visible. */
.lp-anchors + .lp-problem { margin-top: 32px; }
.lp-problem + .lp-h2 { margin-top: 40px; }
.lp-body [id] { scroll-margin-top: 104px; }
/* Audiences */
.lp-aud { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; align-items: start; padding: 36px 0; border-top: 1px solid var(--line); }
.lp-aud:first-child { border-top: 0; padding-top: 0; }
.lp-aud .lp-checks { margin-top: 0; }
/* Short film */
.lp-clip { max-width: 920px; margin: 0 auto; }
.lp-clip .clip { margin: 0; }
/* News */
.lp-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; max-width: 820px; } /* left-aligned with the page head (was centred by .lp-narrow, which left an empty column on the left) */
/* /neuigkeiten: the first card sits close under the page head (was 84 px section padding + 44 px head padding = a large empty band, 22.10.2026) */
.lp-sec.lp-news-sec { padding-top: 36px; }
@media (max-width: 640px) { .lp-sec.lp-news-sec { padding-top: 24px; } }
.lp-news > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.lp-news h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 4px; color: var(--ink); }
.lp-news-meta { color: var(--ink-faint); font-size: .86rem; margin: 0 0 10px; }
.lp-news ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .93rem; }
.lp-news ul li { margin-bottom: 6px; }
/* Security: tiles per area */
.sec-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.sec-tiles li { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-bright) 40%, transparent); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.sec-tiles h3, .sec-tiles h4 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.sec-tiles h3 .icon, .sec-tiles h4 .icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
:root[data-theme="dark"] .sec-tiles h3 .icon, :root[data-theme="dark"] .sec-tiles h4 .icon { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec-tiles h3 .icon, :root:not([data-theme="light"]) .sec-tiles h4 .icon { color: var(--accent-bright); } }
.sec-tiles p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.sec-not { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sec-not li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.sec-not .icon { width: 20px; height: 20px; color: var(--err-ink); flex-shrink: 0; }
.sec-block + .sec-block { margin-top: 48px; }
.sec-block > .lp-h3 { display: flex; align-items: center; gap: 10px; }
.sec-block > .lp-h3 .icon { width: 22px; height: 22px; color: var(--accent); }

@media (max-width: 1000px) {
  .lp-tiles, .lp-tiles-4, .lp-trust, .sec-tiles, .lp-phases { grid-template-columns: 1fr 1fr; }
  .lp-eco, .lp-split, .lp-split-wide, .lp-aud { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-shot-sticky { position: static; }
}
@media (max-width: 640px) {
  .lp-tiles, .lp-tiles-2, .lp-tiles-4, .lp-trust, .sec-tiles, .sec-not, .lp-phases { grid-template-columns: 1fr; }
  .lp-page-head { padding: 40px 0 32px; }
  .lp-wrap { padding: 0 16px; }
  .lp-mobile-nav .lp-nav-item, .lp-mobile-nav a.lp-nav-item:not(.btn) { padding: 14px 16px; }
  .lp-mobile-nav .lp-sub a:not(.btn) { padding: 10px 16px 10px 24px; }
  .lp-mobile-nav .lp-sub-anchors { margin-left: 52px; }
  .lp-mobile-demo { margin: 16px; }
}

/* ---------- Home page: keyword line above the hero heading (frameworks, brass stars) ---------- */
.lp-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: -5px 0 13px; font: 600 .76rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
/* Tags wrap onto two rows on narrow screens: 24 px tall hit area (WCAG 2.5.8), same look as before */
.lp-hero-tags a { display: inline-block; padding: 5px 0; line-height: 14.5px; color: var(--ink); text-decoration: none; }
.lp-hero-tags a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lp-hero-star { color: var(--accent-dark); font-size: .75rem; letter-spacing: 0; }
/* Hero heading "Regulatorik umsetzen, / auch ohne Experten im Haus.": old layout (columns 5 : 6, frame 1180 px),
   font at most 3rem so that "Regulatorik umsetzen," fits on one line (desktop three lines), on smartphone 2rem (also three lines) */
.lp-hero .lp-h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
/* Phones: long words (compounds, Dutch/Polish terms, breadcrumbs) wrap and hyphenate instead of widening the page; tables keep their words */
@media (max-width: 600px) {
  main { overflow-wrap: anywhere; hyphens: auto; }
  .lp-crumb { white-space: normal; }
  main table { overflow-wrap: normal; hyphens: manual; }
}
/* Phones below 360 px (e.g. 320 px): smaller hero heading so it stays at three lines without hyphenating words (click test F43) */
@media (max-width: 359px) {
  .lp-hero .lp-h1 { font-size: 1.65rem; hyphens: manual; overflow-wrap: normal; }
}

/* ---------- Trust Center (TN1): date/version chip, check cards, fact lists ---------- */
.tc-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 .82rem var(--font-sans); color: var(--ink-soft); margin: 10px 0 0; }
.tc-chip .icon { width: 16px; height: 16px; }
.tc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; list-style: none; margin: 28px 0 0; padding: 0; }
.tc-cards .lp-box h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.02rem; }
.tc-cards .lp-box p { margin: 0; color: var(--ink-soft); }
.tc-facts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ink-soft); }
.tc-facts li::before { content: "·"; margin-right: 6px; color: var(--accent-dark); }
.tc-facts-lg { font-size: .98rem; gap: 12px; margin: 24px 0 0; }
.tc-facts-lg li { display: flex; align-items: flex-start; gap: 10px; }
.tc-facts-lg li::before { content: none; }
.tc-facts-lg .icon { width: 20px; height: 20px; flex: none; color: var(--accent-dark); margin-top: 1px; }
.tc-more { margin: 0; }
.tc-more .icon { width: 14px; height: 14px; vertical-align: -2px; }
.tc-cards .lp-box p.tc-more-gap { margin-top: 12px; }
/* TN1.6: collapsible OWASP ASVS explainer (#asvs) below the "Our own checks" cards */
.tc-explain { margin: 24px 0 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); scroll-margin-top: 96px; }
.tc-explain > summary { display: flex; align-items: center; gap: 10px; padding: 18px 24px; font-weight: 700; color: var(--ink); list-style: none; border-radius: var(--radius-lg); }
.tc-explain > summary::-webkit-details-marker { display: none; }
.tc-explain > summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.tc-explain[open] > summary::after { transform: rotate(-135deg); }
.tc-explain > summary .icon { width: 20px; height: 20px; flex: none; color: var(--accent-dark); }
.tc-explain > summary:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.tc-explain-body { padding: 0 24px 22px; max-width: 760px; color: var(--ink-soft); }
.tc-explain-body h3 { margin: 18px 0 6px; font-size: 1rem; color: var(--ink); }
.tc-explain-body h3:first-child { margin-top: 0; }
.tc-explain-body p { margin: 0 0 10px; }
.tc-explain-body strong { color: var(--ink); }
.tc-levels { margin: 0 0 6px; display: grid; gap: 10px; }
.tc-levels > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; align-items: baseline; }
.tc-levels dt { font-weight: 700; color: var(--ink); }
.tc-levels dd { margin: 0; }
@media (max-width: 520px) { .tc-explain > summary { padding: 16px; } .tc-explain-body { padding: 0 16px 18px; } .tc-levels > div { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .tc-explain > summary::after { transition: none; } }
:root[data-theme="dark"] .tc-explain > summary .icon { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tc-explain > summary .icon { color: var(--accent-bright); } }
/* ---------- Public applicability check (D7b, templates/landing/check/) ---------- */
.pc-group { border: 0; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.pc-group > legend.h3 { padding: 0; margin: 0 0 4px; font-size: 1.1rem; }
fieldset.pc-q { border: 0; margin: 0; padding: 0; }
.pc-explain-h { margin-top: 40px; }
.pc-explain p { margin: 0 0 10px; color: var(--ink-soft); font-size: .93rem; }
.pc-explain p.pc-footnote { margin: 22px 0 0; font-size: .85rem; line-height: 1.5; }
.pc-result { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.pc-laws { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 16px 0; }
.pc-law h3, .pc-package h3 { margin: 0 0 8px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-cls { margin: 0 0 8px; }
.pc-reasons, .pc-items, .pc-deadlines, .pc-steps { margin: 0 0 10px; padding-left: 20px; font-size: .9rem; }
.pc-reasons li, .pc-items li, .pc-deadlines li, .pc-steps li { margin-bottom: 6px; }
.pc-package { margin-top: 16px; }
/* Price of the suggested package (PublicCheck::quote()); colours only from tokens, so light and dark follow the theme */
.pc-quote { width: 100%; max-width: 560px; border-collapse: collapse; margin: 4px 0 8px; font-size: .9rem; }
.pc-quote th, .pc-quote td { padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.pc-quote td { text-align: right; white-space: nowrap; padding-left: 12px; }
.pc-quote td.muted { color: var(--ink-faint); }
.pc-quote tfoot th, .pc-quote tfoot td { border-bottom: 0; font-weight: 600; font-size: 1rem; padding-top: 10px; }
.pc-quote tfoot td { white-space: normal; }
/* Long button labels in the package block wrap instead of widening the page at 320 px (WCAG 1.4.10) */
.pc-package .btn { max-width: 100%; white-space: normal; }
@media (max-width: 480px) { .pc-quote { table-layout: fixed; } .pc-quote td { width: 7.5em; white-space: normal; overflow-wrap: anywhere; } }
.pc-send-demo { margin-top: 14px; }
/* Package advice (BP19): two cards one below the other, minimum selection first; included rows dimmed; tokens only */
.pc-packages .pc-package + .pc-package { margin-top: 12px; }
.pc-package-lead { margin: 0 0 8px; color: var(--ink-soft); }
.pc-min-items .pc-incl { color: var(--ink-faint); }
.pc-package .lp-cta { flex-wrap: wrap; margin-top: 8px; }
.pc-package a { overflow-wrap: anywhere; }
/* Link under the buttons: enough distance for the 24 px target size (WCAG 2.5.8) */
.pc-package .lp-cta + p.small { margin: 14px 0 0; }
.pc-package .lp-cta + p.small a { display: inline-block; padding: 4px 0; }
.pc-tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pc-tile { align-items: center !important; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pc-tile:hover { border-color: var(--accent); }
.pc-tile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pc-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* D7c: compact step-by-step assistant (public/assets/public-check.js adds .pc-wizard; without JS the full form stays) */
.pc-wizard { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--surface); box-shadow: var(--shadow-sm); }
.pc-wizard .pc-group { margin: 0; gap: 0; }
.pc-wizard .pc-group > legend { display: none; }
.pc-wizard [data-step]:not(.is-current):not(.pc-size [data-step]) { display: none; }
.pc-wizard .pc-group:not(:has(.is-current)) { display: none; }
.pc-wizard .pc-size { display: grid; gap: 18px; }
.pc-step-intro { margin: 0; }
.pc-group-figures { display: grid; gap: 18px; padding-left: 16px; border-left: 3px solid var(--line); }
.pc-group-figures > p { margin: 0; }
.pc-more { margin: 8px 0 0; }
.pc-more > summary { cursor: pointer; font-size: .875rem; color: var(--accent-dark); }
.pc-more ul { margin: 8px 0 0; padding-left: 20px; }
.pc-more li + li { margin-top: 4px; }
.pc-more p { margin: 8px 0 0; }
/* Group figures only with "Teil einer Gruppe, IT gemeinsam" (without JS/:has they stay visible with a hint) */
.pc-wizard .pc-size:not(:has(input[name="gruppe"][value="it_gemeinsam"]:checked)) .pc-group-figures { display: none; }
.pc-wizard [data-step] > legend, .pc-wizard .pc-size legend { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; outline: none; }
.pc-wizard .pc-nojs-only, .pc-wizard .pc-select-hidden, .pc-wizard label[for="pc-taetigkeit"] { display: none; }
.pc-wizard > p.small.muted { margin: 14px 0 0; font-size: .8rem; }
.pc-progress { margin: 0 0 18px; }
.pc-progress p { margin: 0 0 6px; }
.pc-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pc-bar span { display: block; height: 100%; width: 0; background: var(--accent, currentColor); transition: width .25s ease; }
.pc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.pc-nav .btn-block { width: auto; margin-left: auto; }
.pc-nav [hidden], .pc-act [hidden], .pc-result [hidden] { display: none !important; }
.pc-nav [data-pc-next] { margin-left: auto; }
.pc-nav [data-pc-back]:disabled { visibility: hidden; }
.pc-act-search { width: 100%; margin: 0 0 10px; }
.pc-act-list { display: grid; gap: 6px; max-height: 22rem; overflow-y: auto; padding-right: 4px; }
.pc-act-group { margin: 8px 0 0; font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.pc-act-other { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pc-act-more { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .pc-bar span { transition: none; } }
@media (max-width: 640px) {
  .pc-laws { grid-template-columns: 1fr; }
  .pc-wizard { padding: 18px 16px; border-radius: 12px; }
  .pc-tiles { grid-template-columns: 1fr 1fr; }
}
/* Print: the result as a branded A4 leaflet (Marc, 06.10.2026: the printout is advertising for Complass).
   Only the result prints, framed by a Tiefsee head band with logo and a closing call to action; Chrome drops its own
   header/footer lines (title, URL, date) because the @page margin boxes below are defined. */
.pc-print-only { display: none; }
@media print {
  @page pc { size: A4; margin: 14mm 15mm 16mm;
    @bottom-left { content: "complass.de · Betroffenheitscheck"; font: 8pt "Work Sans", Arial, sans-serif; color: #5d687a; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 8pt "Work Sans", Arial, sans-serif; color: #5d687a; } }
  @page pc-en { size: A4; margin: 14mm 15mm 16mm;
    @bottom-left { content: "complass.de · Applicability check"; font: 8pt "Work Sans", Arial, sans-serif; color: #5d687a; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 8pt "Work Sans", Arial, sans-serif; color: #5d687a; } }
  body:has(#pc-ergebnis) { page: pc; }
  html:lang(en) body:has(#pc-ergebnis) { page: pc-en; }
  body:has(#pc-ergebnis) { background: #fff; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(#pc-ergebnis) .lp-head, body:has(#pc-ergebnis) .lp-foot, body:has(#pc-ergebnis) .lp-page-head,
  body:has(#pc-ergebnis) .pc-form, body:has(#pc-ergebnis) .lp-check .lp-wrap > .alert, body:has(#pc-ergebnis) .lp-check .lp-wrap > .lp-eyebrow,
  body:has(#pc-ergebnis) .pc-explain-h, body:has(#pc-ergebnis) .pc-explain, body:has(#pc-ergebnis) #faq,
  body:has(#pc-ergebnis) .lp-band, body:has(#pc-ergebnis) .skip-link, body:has(#pc-ergebnis) .cookie-note,
  .pc-result .btn, .pc-result .lp-cta, .pc-result .pc-send-demo, .pc-law > p.small:last-child { display: none !important; }
  body:has(#pc-ergebnis) .lp-sec { padding: 0; }
  body:has(#pc-ergebnis) .lp-wrap { max-width: none; padding: 0; }
  .pc-result { margin: 0; padding: 0; border: 0; color: #1b2638; }
  .pc-result a { color: #1b2638; text-decoration: none; }
  .pc-print-only { display: block; }

  /* Head band: Tiefsee with the logo for dark grounds, brass rule underneath */
  .pc-print-head { display: flex; align-items: center; gap: 10mm; background: #13233f; color: #f7f3ea; padding: 7mm 8mm; border-radius: 3mm; border-bottom: 1.2mm solid #e0a93b; margin: 0 0 6mm; }
  .pc-print-logo { width: 46mm; height: auto; flex-shrink: 0; }
  .pc-print-meta p { margin: 0; }
  .pc-print-kicker { font: 600 8pt "Work Sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #e0a93b; }
  .pc-print-title { font: 400 15pt/1.25 "Marcellus", Georgia, serif; margin: 1.5mm 0 !important; color: #f7f3ea; }
  .pc-print-date { font-size: 8.5pt; color: #d3dae6; }

  /* Result heading and disclaimer */
  .pc-result > .lp-h2 { font-size: 20pt; margin: 0 0 3mm; display: flex; align-items: center; gap: 4mm; }
  .pc-result > .alert { font-size: 8pt; padding: 2.5mm 4mm; margin: 0 0 4mm; border-radius: 2mm; }
  .pc-result .alert br { display: none; }
  .pc-result > .alert[role="note"]:not(:first-of-type) { break-inside: avoid; }

  /* Law cards: two columns, brass edge, never split across pages */
  .pc-laws { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5mm; margin: 0 0 3.5mm; }
  .pc-result .panel { box-shadow: none; border: .3mm solid #d9e0ea; border-left: 1.2mm solid #a8761a; border-radius: 2mm; padding: 3.5mm 5mm; margin: 0 0 3.5mm; break-inside: avoid; background: #fff; }
  .pc-laws .panel { margin: 0; break-inside: auto; }
  .pc-laws .pc-st-nicht_betroffen { border-left-color: #2f7f77; }
  .pc-laws .pc-st-pruefung_offen { border-left-color: #13233f; }
  .pc-result h3, .pc-result h4 { break-after: avoid; }
  .pc-result li { break-inside: avoid; }
  .pc-result h3 { font: 600 11pt "Work Sans", Arial, sans-serif; margin: 0 0 2mm; display: flex; flex-wrap: wrap; align-items: center; gap: 2mm; }
  .pc-result h4 { font-size: 9pt; margin: 3mm 0 1mm; }
  .pc-result ul, .pc-result ol { margin: 0 0 2mm; padding-left: 4.5mm; }
  .pc-result li { margin: 0 0 1mm; line-height: 1.4; }
  .pc-result p { margin: 0 0 2mm; line-height: 1.45; }
  .pc-result .badge { font-size: 7.5pt; padding: .6mm 2.2mm; border-radius: 3mm; white-space: nowrap; }

  /* Package and closing call to action */
  .pc-package { border-left-color: #13233f !important; background: #f3f6fa !important; }
  .pc-package h3 { font: 400 14pt "Marcellus", Georgia, serif; }
  .pc-print-cta { margin: 0; padding: 5mm 6mm; background: #13233f; color: #f7f3ea; border-radius: 2mm; break-inside: avoid; }
  .pc-print-cta p { margin: 0 0 1.5mm; color: #d3dae6; }
  .pc-print-cta .pc-print-cta-h { font: 400 14pt "Marcellus", Georgia, serif; color: #f7f3ea; margin-bottom: 2mm; }
  .pc-print-cta-links { color: #f7f3ea !important; margin: 2mm 0 0 !important; }
  .pc-print-cta-links strong { color: #e0a93b; }
  .pc-print-foot { font-size: 7.5pt; color: #5d687a; margin: 3mm 0 0; }
}

/* Whitepaper cover previews (WP1.COVER, templates/whitepaper/_cover.php): pre-rendered first PDF page, or a designed
   card in the Complass style while no image exists. The card keeps fixed brand colours (Tiefsee/Messing) in both
   themes, like the PDF cover itself; its text contrast is 14.2:1 (title) and 7.4:1 (kicker). */
.wp-cover { display: block; }
.wp-cover img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(19, 35, 63, .18); background: #13233f; }
.wp-cover-tile { margin: -4px -4px 6px; padding: 18px 16% 0; height: 210px; overflow: hidden; background: var(--inset); border-radius: 6px; }
.wp-cover-detail { max-width: 220px; margin-bottom: 24px; }
.wp-cover-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; background: #13233f; color: #f7f3ea; border: 1px solid rgba(224, 169, 59, .4); border-radius: 6px; padding: 18px; }
.wp-cover-tile.wp-cover-card { height: auto; min-height: 210px; margin: -4px -4px 6px; }
.wp-cover-detail.wp-cover-card { max-width: 320px; min-height: 260px; }
.wp-cover-card::after { content: ""; position: absolute; right: -44px; bottom: -44px; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(224, 169, 59, .35); }
.wp-card-kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #e0a93b; }
.wp-card-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.wp-card-rule { width: 48px; height: 3px; background: #e0a93b; }
.wp-card-badges { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.wp-card-badge { font-size: .75rem; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(247, 243, 234, .45); }
@media (max-width: 520px) { .wp-cover-tile { height: 180px; padding-inline: 12%; } .wp-cover-detail { max-width: 180px; } }

/* Whitepaper overview grouped by topic with an audience filter (templates/whitepaper/overview.php, Marc 10.10.2026).
   Chips: anchor links without JS, toggle buttons with public/assets/whitepaper-overview.js. Contrast (WCAG 2.2 AA):
   light: text --ink on --surface 15.2:1, outline --ink-faint 5.6:1 (1.4.11), pressed #13233f on Messing 7.4:1, focus 4.0:1;
   dark: text 12.7:1, outline 6.2:1, pressed 7.4:1, focus 7.3:1. Pressed is also marked by a check and bold text, not colour alone.
   Cards: small cover thumbnail, title (h3), teaser clamped to two lines (full text stays in the DOM), meta line;
   3 per row on desktop, 1 column below about 640 px; no horizontal scroll at 320 px. */
.wp-filter { margin: 0; }
.wp-filter-h { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.wp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--ink-faint); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 .92rem/1.25 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--t), border-color var(--t); }
a.wp-chip:hover, .wp-chip:hover { color: var(--ink); background: var(--inset); border-color: var(--accent); text-decoration: none; }
.wp-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wp-chip[aria-pressed="true"], .wp-chip[aria-pressed="true"]:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; font-weight: 600; }
.wp-chip[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; }
.wp-chip-n { font-weight: 400; }
.wp-filter-status { margin: 10px 0 0; min-height: 1.4em; font-size: .9rem; color: var(--ink-soft); }
.wp-group { margin-top: 44px; scroll-margin-top: 96px; }
.wp-group[hidden], .wp-card-item[hidden] { display: none; }
.wp-group-head { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wp-group-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.25; margin: 0 0 4px; color: var(--ink); }
.wp-group-lead { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.wp-group-n { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--inset); color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
.wp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.wp-card-item { display: flex; min-width: 0; }
a.wp-card, a.wp-card:hover { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px; color: var(--ink); text-decoration: none; }
.wp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wp-card-h { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); overflow-wrap: break-word; hyphens: manual; }
.wp-card-teaser { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wp-card-meta { margin: 2px 0 0; font-size: .8rem; color: var(--ink-faint); }
.wp-cover-thumb { flex: 0 0 60px; width: 60px; }
.wp-cover-thumb img { border-radius: 3px; box-shadow: 0 2px 6px rgba(19, 35, 63, .2); }
.wp-cover-thumb.wp-cover-card { height: 85px; padding: 8px; gap: 6px; border-radius: 3px; }
.wp-cover-thumb .wp-card-kicker, .wp-cover-thumb .wp-card-title, .wp-cover-thumb .wp-card-badges { display: none; }
.wp-cover-thumb.wp-cover-card::after { width: 60px; height: 60px; right: -22px; bottom: -22px; }
.wp-cover-thumb .wp-card-rule { width: 24px; height: 2px; margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .wp-chip { transition: none; } }

/* ---------- Audiences (/fuer-wen, decision Marc 06.10.2026) ---------- */
/* Menu "Für wen": one sentence per role; the partner entry and "Alle Zielgruppen" span all columns.
   Menu labels never wrap ("Für wen" with its arrow would otherwise break onto two lines). */
.lp-nav .lp-nav-item { white-space: nowrap; }
.lp-sub-desc { display: block; font-weight: 400; font-size: .84rem; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; }
.lp-nav .lp-sub-sep, .lp-nav .lp-sub-all { grid-column: 1 / -1; }
.lp-sub-sep, .lp-sub-all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
/* "Funktionen" panel: the security pages close it as one row below the topics (header fit, Marc 13.10.2026) */
.lp-sub-sec { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.lp-sub-sec + .lp-sub-sec { border-top: 0; margin-top: 0; padding-top: 0; }
.lp-nav .lp-sub-wide .lp-sub-sec + .lp-sub-sec { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.lp-nav .lp-sub-wide li:not(.lp-sub-sec) + .lp-sub-sec { grid-column: 1; }   /* new row, also after an odd number of topics */
/* Page head: secondary link next to the main button */
.lp-page-head .lp-cta { align-items: center; }
.lp-cta-alt { font-weight: 600; }
/* Tiles that are links as a whole */
a.lp-tile-link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
a.lp-tile-link:hover { text-decoration: none; color: var(--ink); }
.lp-tile-fw { font-size: .84rem; color: var(--ink-faint); margin: 8px 0 0; }
/* Framework links in a row: at least 24 px high (WCAG 2.5.8 target size) */
.lp-note-fw .lp-link { display: inline-block; padding-block: 4px; }
.lp-aud-first { border-top: 0; padding-top: 0; }
/* Overview: partner strip below the role tiles */
.lp-partner-strip { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink); background: var(--inset); }
.lp-partner-strip:hover { text-decoration: none; color: var(--ink); border-color: var(--accent); }
.lp-partner-strip > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lp-partner-strip > span:nth-child(2) > span { color: var(--ink-soft); font-size: .93rem; }
.lp-partner-strip > .icon { width: 18px; height: 18px; color: var(--accent-dark); flex-shrink: 0; }
/* Partner page: "Partner werden" next to the partner list */
/* Two cards built the same way side by side (partner page "Partner werden" / "Unsere Partner", WF1): equal columns,
   the button row sits at the bottom of each card so both buttons line up. */
.lp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.lp-pair-card { display: flex; flex-direction: column; align-items: flex-start; }
.lp-pair-card .lp-h2 { margin-top: 12px; }
.lp-pair-card .lp-pair-cta { margin: auto 0 0; padding-top: 8px; }
@media (max-width: 860px) { .lp-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* WCAG 1.4.10 Reflow (07.10.2026). Long badge labels (e.g. the ASVS status on /trust in fr/es/it) must wrap at
   320 px instead of forcing a horizontal scroll; the base .badge in app.css is nowrap for the portal, so this is
   limited to the public website (.lp-wrap). The smaller radius keeps a pill on one line and a rounded box on two. */
@media screen {
  .lp-wrap .badge { white-space: normal; max-width: 100%; border-radius: 12px; overflow-wrap: anywhere; }
}
/* Header that does not fit (long translations, e.g. pt between 1221 and 1300 px): app.js sets .lp-head-compact and
   the header switches to the menu button, exactly as below the 1220 px breakpoint in app.css. :where() keeps the
   specificity of the app.css rules, so the .lp-mobile-nav refinements above still win as they do on small screens. */
.lp-head-compact .lp-nav { display: none; }
.lp-head-compact .lp-menu-toggle { display: inline-flex; }
.lp-head-compact .lp-login, .lp-head-compact .lp-demo { display: none !important; }
.lp-head-compact .lp-actions { margin-left: auto; }
.lp-head-compact .lp-mobile-nav:not([hidden]) { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); }
:where(.lp-head-compact) .lp-mobile-nav a:not(.btn) { display: flex; align-items: center; gap: 8px; padding: 15px 24px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem; text-decoration: none; }
:where(.lp-head-compact) .lp-mobile-nav a:not(.btn):hover { background: var(--inset); }
:where(.lp-head-compact) .lp-mobile-nav a .icon { width: 16px; height: 16px; color: var(--ink-soft); }
:where(.lp-head-compact) .lp-mobile-demo { margin: 16px 24px 20px; justify-content: center; }
/* WCAG 1.4.3 (07.10.2026): the neighbouring carousel slides are dimmed to 35 % (app.css), which leaves their
   captions at about 2.4:1. Only the screenshot stays as a preview; the caption of an inactive slide is faded out
   completely (still read by screen readers) and fades in with the slide. */
.lp-carousel.is-ready .lp-slide figcaption { transition: opacity .4s ease; }
.lp-carousel.is-ready .lp-slide:not([data-active]) figcaption { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lp-carousel.is-ready .lp-slide figcaption { transition: none; } }

/* ---------- Home page 1.57 (templates/landing/index.php, docs/features/WEBSITE.md) ---------- */
/* "In Kürze" and audience lines: links in a row, at least 24 px high (WCAG 2.5.8 target size), wrap on narrow screens */
.lp-soon-line, .lp-aud-line { margin-top: 24px; line-height: 1.9; }
.lp-soon-line .lp-link, .lp-aud-line .lp-link, .lp-trust-asvs .lp-link { display: inline-block; padding-block: 2px; }
/* Trust Center line below the trust list: the ASVS wording comes from TrustFacts::asvsLine() */
.lp-trust-asvs { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); }
.lp-trust-asvs > .icon { flex-shrink: 0; margin-top: 3px; color: var(--accent-dark); }
/* Product video slot (lp_video()); hidden until the file exists */
.lp-video { margin: 28px auto 0; max-width: 1100px; }
.lp-video video { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--inset); }
/* Carousel captions of inactive slides: handled once in the reflow block of claude/reflow-trust-pt (opacity 0,
   WCAG 1.4.3), which is merged before this branch; no second rule here. */
/* ft1: public CRA reporting deadline calculator (templates/landing/tools/cra-deadlines.php) */
.cd-form { display: grid; gap: 20px; }
.cd-kinds { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cd-kinds .pc-tile { align-items: flex-start !important; }
.cd-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cd-row .field { display: grid; gap: 6px; align-content: start; }
.cd-row .field label { font-weight: 600; }
.cd-row input, .cd-row select { width: 100%; max-width: 100%; }
.cd-later { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--surface); }
.cd-later > summary { cursor: pointer; font-weight: 600; }
.cd-later[open] > summary { margin-bottom: 12px; }
.cd-basis { margin: 0 0 16px; }
.cd-stages { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.cd-stage { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.cd-stage.is-overdue { border-left-color: var(--danger-fill); }
.cd-stage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cd-stage-head h3 { margin: 0; font-size: 1.05rem; }
.cd-step { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--accent); color: var(--ink); font-weight: 700; font-size: .85rem; flex: none; }
.cd-due { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.05rem; }
.cd-due-label { color: var(--ink-soft); font-size: .9rem; }
.cd-pending { margin: 0 0 6px; }
.cd-stage p.small { margin: 0 0 4px; overflow-wrap: anywhere; }
.cd-contents summary { cursor: pointer; font-size: .9rem; }
.cd-contents ul, .cd-extra { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.cd-extra li { margin-bottom: 6px; }
.cd-where, .cd-offer { margin-top: 24px; }
.cd-where h3, .cd-offer h3 { margin: 0 0 8px; font-size: 1.05rem; }

/* Consultant cost calculator (ft3, templates/landing/tools/consultant-costs.php): clean wizard with pills and sliders */
.bk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bk-pill { position: relative; display: block; cursor: pointer; }
.bk-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-pill span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); text-align: center; line-height: 1.3; transition: background-color .15s, border-color .15s; }
.bk-seg .bk-pill span { border-radius: var(--radius-lg); }
.bk-pill:hover span { border-color: var(--accent); }
.bk-pill input:checked + span { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.bk-pill input:focus-visible + span { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.bk-aside { margin: 14px 0 0; }
.bk-field { display: grid; gap: 6px; margin-top: 20px; }
.bk-field label { font-weight: 600; }
.bk-field select { width: 100%; max-width: 100%; }
.bk-slider { margin: 0 0 24px; }
.bk-slider-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.bk-slider-head label { font-weight: 600; }
.bk-slider-head output { font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.bk-slider input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.bk-slider input[type="range"]:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.bk-scale { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-top: -6px; }
.bk-help { margin: 6px 0 0; }
.bk-more { border-top: 1px solid var(--line); padding: 12px 0 0; margin: 16px 0 0; }
.bk-more > summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.bk-more[open] > summary { margin-bottom: 12px; }
.bk-chips { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .88rem; text-decoration: none; }
.bk-chip:hover { border-color: var(--accent); text-decoration: none; }
.bk-chip:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.bk-chip svg { width: 14px; height: 14px; color: var(--ink-soft); flex-shrink: 0; }
.bk-save { margin: 0 0 12px; border: 1px solid var(--line); border-top: 4px solid var(--accent-bright); border-radius: var(--radius-lg); padding: 18px 20px 16px; background: var(--surface); }
.bk-save.is-none { border-top-color: var(--line-strong); }
.bk-kicker { margin: 0 0 4px; font: 700 .85rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.bk-save-v { margin: 0 0 4px; font-family: var(--font-display); font-size: 2.2rem; line-height: 1.15; font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bk-save.is-none .bk-save-v { color: var(--ink); font-size: 1.2rem; }
.bk-save-l { margin: 0 0 12px; color: var(--ink); }
.bk-kpis { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); color: var(--ink); font-size: .93rem; }
.bk-kpis li { padding-left: 14px; position: relative; }
.bk-kpis li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.bk-save-note { margin: 0; font-size: .88rem; color: var(--ink); }
.bk-result > .bk-save-note { margin: 0 0 20px; }
.bk-weak { margin: 0 0 20px; color: var(--ink); }
.bk-costs { margin: 24px 0 8px; }
.bk-h4 { margin: 16px 0 6px; font-size: .98rem; }
.bk-sub { margin: 0 0 6px; }
.bk-route { margin: 0 0 8px; }
.bk-num td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-num thead th:not(:first-child) { text-align: right; }
.bk-num tbody th { width: 46%; }
.bk-table .bk-sum th, .bk-table .bk-sum td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.bk-method td { white-space: nowrap; }
.bk-slider-l { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-slider-v { display: inline-flex; align-items: baseline; gap: 8px; }
.bk-per { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bk-tip { display: inline; }
.bk-tip-text { display: block; margin: 4px 0 0; font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.bk-tip.is-js { position: relative; display: inline-block; vertical-align: middle; }
.bk-tip.is-js .bk-tip-text { display: none; position: absolute; z-index: 20; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: min(300px, 80vw); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 6px 20px rgba(19, 35, 63, .18); line-height: 1.45; }
.bk-tip.is-js.is-open .bk-tip-text { display: block; }
.bk-tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); font: 600 .8rem var(--font-sans); line-height: 1; cursor: pointer; }
.bk-tip-btn:hover, .bk-tip-btn[aria-expanded="true"] { border-color: var(--accent); }
.bk-tip-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
@media (max-width: 480px) { .bk-tip.is-js { position: static; } .bk-tip.is-js .bk-tip-text { left: 16px; right: 16px; width: auto; transform: none; top: auto; margin-top: 6px; } .bk-slider-head { position: relative; } }
.bk-h3 { margin: 0 0 12px; font-size: 1.05rem; }
.bk-bars { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 14px; }
.bk-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.bk-bar-l { font-size: .92rem; }
.bk-bar-v { font-size: .92rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bk-bar-g { grid-column: 1 / -1; width: 100%; height: 14px; display: block; }
.bk-bar-track { fill: var(--inset); }
.bk-bar-fill { fill: var(--line-strong); }
.bk-bar-c .bk-bar-fill { fill: var(--accent-bright); }
.bk-note-s { display: block; font-weight: 400; color: var(--ink-soft); font-size: .82rem; margin-top: 2px; }
.bk-low { margin: 0 0 8px; color: var(--warn-ink); }
.bk-table-wrap { overflow-x: auto; }
.bk-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bk-table th, .bk-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bk-table thead th { font-weight: 600; color: var(--ink-soft); }
.bk-table tbody th { font-weight: 400; width: 55%; }
.bk-src a { font-size: .85em; }
.bk-sources { margin: 8px 0 0; padding-left: 28px; overflow-wrap: anywhere; }
.bk-sources li { margin-bottom: 4px; }
.bk-offer { margin-top: 24px; }
.bk-offer p { margin: 0 0 10px; }
@media (max-width: 480px) { .bk-table tbody th { width: auto; } .bk-table th, .bk-table td { display: block; padding: 2px 0; border: 0; } .bk-table tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); } .bk-table thead { display: none; } }
@media (prefers-reduced-motion: reduce) { .bk-pill span { transition: none; } }
.cd-offer { border-radius: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); }
.cd-offer .lp-cta { flex-wrap: wrap; }
@media print {
  .cd-form, .lp-band, #faq, .cd-offer .lp-cta { display: none !important; }
}
.cd-result > .pc-footnote { margin-top: 20px; }
@media print { .pc-result .pc-no-print { display: none !important; } }

/* ft1 part 2: public AI risk class check (templates/landing/tools/ai-risk-check.php); reuses .pc-* and .cd-offer */
.ar-form { display: grid; gap: 22px; }
.ar-scope { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 8px; }
.ar-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ar-tiles .pc-tile { align-items: flex-start !important; }
.ar-list, .ar-area { display: grid; gap: 8px; }
.ar-list .check, .ar-area .check { align-items: flex-start; }
.ar-area { margin-top: 12px; }
.ar-area-h { margin: 0; font-weight: 600; font-size: .95rem; }
.ar-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ar-sub-q { margin: 0 0 8px; font-weight: 600; }
.ar-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ar-cond { display: grid; gap: 18px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; }
.ar-cond > p { margin: 0; }
.ar-verdict { border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 12px; padding: 16px 18px; background: var(--surface); margin-bottom: 18px; }
.ar-verdict p { margin: 0 0 8px; }
.ar-verdict p:last-child { margin-bottom: 0; }
.ar-verdict-class { font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.ar-verdict.is-danger { border-left-color: var(--danger-fill); }
.ar-verdict.is-warn { border-left-color: var(--warn-ink); }
.ar-verdict.is-ok { border-left-color: var(--ok-ink); }
.ar-block { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--surface); margin-bottom: 14px; }
.ar-block h3 { margin: 0 0 8px; font-size: 1.05rem; }
.ar-block h4 { margin: 12px 0 6px; font-size: .95rem; }
.ar-block p { margin: 0 0 8px; overflow-wrap: anywhere; }
.ar-block ul { margin: 0 0 8px; padding-left: 20px; }
.ar-block li { margin-bottom: 6px; }
.ar-when { font-weight: 600; }
.ar-open { border-left: 4px solid var(--warn-ink); }
.ar-literacy { border-left: 4px solid var(--accent); }
.ar-result > .pc-footnote { margin-top: 20px; }
@media print {
  .ar-form, .ar-scope, .lp-band, #faq, .cd-offer .lp-cta { display: none !important; }
}
@media (max-width: 480px) { .cd-offer .lp-cta .btn { white-space: normal; max-width: 100%; } }
/* Group headings in the "Für wen" submenu ("Nach Rolle", "Nach Branche"; Site::nav(), Marc 07.10.2026) */
.lp-nav .lp-sub-head { grid-column: 1 / -1; }
.lp-sub-head span { display: block; padding: 10px 10px 4px; font: 600 .74rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.lp-sub-head + li, .lp-sub-sep + .lp-sub-head { margin-top: 0; }
.lp-sub-sep + .lp-sub-head, .lp-sub li:not(:first-child).lp-sub-head { border-top: 1px solid var(--line); margin-top: 4px; }
/* Package teaser on role and sector pages (templates/landing/_packages.php, Site::packages(), Marc 07.10.2026) */
.lp-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 18px; }
.lp-pkg { display: flex; flex-direction: column; gap: 10px; }
.lp-pkg h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--ink); }
.lp-pkg-soon, .lp-pkg-planned { border-style: dashed; }
.lp-pkg-badge { align-self: flex-start; margin: 0; font: 600 .74rem var(--font-sans); letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.lp-pkg-badge-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.lp-pkg-badge-soon { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.lp-pkg-badge-planned { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.lp-pkg-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lp-pkg-items li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; }
.lp-pkg-items .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--accent-dark); }
:root[data-theme="dark"] .lp-pkg-items .icon { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-pkg-items .icon { color: var(--accent-bright); } }
/* "From" price on bookable package cards (_packages.php, public prices decision Marc 10.10.2026); tokens cover light and dark */
.lp-pkg-price { margin: 4px 0 0; color: var(--ink-soft); font-size: .95rem; }
.lp-pkg-price strong { color: var(--ink); font-size: 1.35rem; font-weight: 700; }
.lp-pkg-price-detail { display: block; font-size: .85rem; }
.lp-pkg-cta { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
/* Reflow (WCAG 1.4.10): long button labels in es, it, pt wrap inside the card at 320 px instead of scrolling sideways */
.lp-pkg-cta .btn { white-space: normal; max-width: 100%; text-align: center; }
/* Sector pages (templates/landing/_zielgruppe.php, Marc 07.10.2026): "Die Herausforderung" and help tiles next to a screenshot */
.lp-challenges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 18px; }
.lp-challenge { border-left: 3px solid var(--warn-line); padding: 4px 0 4px 16px; }
.lp-challenge .lp-icon { color: var(--warn-ink); }
.lp-challenge h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 8px 0 4px; color: var(--ink); }
.lp-challenge p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.lp-help-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 18px; }
.lp-help-split .lp-tiles { margin-top: 0; }
.lp-tiles.lp-tiles-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (max-width: 900px) { .lp-help-split { grid-template-columns: minmax(0, 1fr); } }

/* Framework pages (rw21 C1d): role table, screenshot row, "in Kürze" note */
.lp-announced { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.lp-table-wrap { overflow-x: auto; margin: 16px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lp-table-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lp-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .92rem; color: var(--ink); }
.lp-table caption { text-align: left; padding: 10px 14px 0; color: var(--ink-faint); font-size: .86rem; }
.lp-table th, .lp-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lp-table thead th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.lp-table tbody th { font-weight: 600; }
.lp-table tbody tr:last-child > * { border-bottom: 0; }
.lp-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-shots .lp-figure + .lp-figure { margin-top: 0; }
@media (max-width: 900px) { .lp-shots { grid-template-columns: minmax(0, 1fr); } }

/* Public partner list (/partners, templates/landing/partners.php): logo, name, city, website; alphabetical grid */
.lp-partners { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.lp-partner { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.lp-partner-logo { display: flex; align-items: center; justify-content: center; height: 96px; padding: 12px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.lp-partner-logo img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.lp-partner-initial { font-size: 2.2rem; font-weight: 600; color: #1f3b57; }
.lp-partner-body h3 { margin: 0 0 4px; font-size: 1.1rem; overflow-wrap: anywhere; }
.lp-partner-city { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ink-faint); font-size: .92rem; }
.lp-partner-city svg, .lp-partner-web svg { width: 15px; height: 15px; flex: none; }
/* 1.91-K co-marketing badge (Silber/Gold) of an opted-in partner; text plus border, contrast AA in light and dark */
.lp-partner-badge { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border: 1px solid var(--line, #c9d3e0); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink, #1b2533); }
.lp-partner-badge-gold { border-color: #a07a12; }
.lp-partner-badge-silber { border-color: #7a8594; }
.lp-partner-web { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
/* Key functions per area on the home page (#funktionen) */
.lp-tile-points { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: var(--ink-soft); }
.lp-tile-points li { display: flex; gap: 8px; align-items: flex-start; }
.lp-tile-points svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent, currentColor); }
/* Reflow (WCAG 1.4.10): long compound words (nl "bedrijfscontinuïteitsbeheer", de, pl) in the help tiles of the
   audience pages hyphenate or wrap instead of widening the two-column grid at 768 px (sector pages, Release 1.58) */
.lp-help-split .lp-tile { min-width: 0; }
.lp-help-split .lp-tile h3, .lp-help-split .lp-tile p { hyphens: auto; overflow-wrap: anywhere; }
/* Complass services below the consulting note on the home page (#partner) */
.lp-services { margin-top: 28px; }
.lp-services .lp-small { margin-top: auto; color: var(--ink-faint); }
/* Compact partner list on the home page (#partner, at most 8 entries, opt-in partners only) */
.lp-home-partners { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 16px; }
.lp-home-partners a { display: flex; align-items: center; justify-content: center; height: 88px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: #1f3b57; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.lp-home-partners img { max-width: 100%; max-height: 60px; object-fit: contain; }
.lp-cta-center { justify-content: center; }


/* Complass Core (decision Marc 10.10.2026): building block in every plan, set off from the bookable areas.
   Band (lp_core_band) above the module tiles (variant B). Badge .lp-tag-ok uses the "ok" tokens
   (light #1f5f58 on #e4f1ee, dark #7fd3cb on #12302e, both above 4.5:1). */
.lp-tag-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.lp-tag-plan { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); vertical-align: middle; }
.lp-core-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 32px; align-items: start; margin: 0 0 22px; border: 2px solid color-mix(in srgb, var(--ok-fill, #2f7f77) 55%, transparent); color: var(--ink); text-decoration: none; }
a.lp-core-band:hover { color: var(--ink); text-decoration: none; }
.lp-core-head { display: flex; gap: 12px; align-items: flex-start; }
.lp-core-head > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lp-core-h { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700; margin: 2px 0 0; color: var(--ink); }
.lp-core-x { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: .95rem; }
.lp-core-points { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.lp-core-band .lp-tile-more { grid-column: 1; }
@media (max-width: 760px) {
  .lp-core-band { grid-template-columns: 1fr; }
  .lp-core-x, .lp-core-points, .lp-core-band .lp-tile-more { grid-column: 1; grid-row: auto; }
}
/* Guided wizard component (.wz-*): moved to app.css on 11.10.2026 (DSB1), because the portal uses it too (docs/WIZARD.md) */
/* AI risk check in the wizard: Annex III areas in two columns on wide screens */
@media (min-width: 720px) { .wz.is-on .ar-areas { columns: 2; column-gap: 28px; } .wz.is-on .ar-areas .ar-area { break-inside: avoid; } .wz.is-on .ar-areas .ar-area:first-child { margin-top: 0; } }

/* bp4 (Marc 10.10.2026): "no legal advice" note on the public check result; link underlined so it does not rely on
   colour alone (WCAG 1.4.1) */
.lp-hint.pc-legal-hint { margin: 12px 0 18px; }
.lp-hint.pc-legal-hint a { text-decoration: underline; text-underline-offset: 2px; }

/* PIL1 pilot programme (src/Pilot.php): slim closable bar above the header on the home page, pilot page */
.pil-bar { background: var(--btn-bg); color: var(--btn-ink); font-size: .9rem; }
.pil-bar-inner { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.pil-bar p { margin: 0; flex: 1; line-height: 1.4; }
.pil-bar a { color: var(--btn-ink); text-decoration: underline; text-underline-offset: 2px; }
.pil-bar a.pil-bar-close { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: 6px; text-decoration: none; }
.pil-bar a.pil-bar-close:hover, .pil-bar a.pil-bar-close:focus-visible { background: rgba(19, 35, 63, .12); }
.pil-bar .icon { width: 16px; height: 16px; }
.pil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; }
.pil-steps { margin: 0 0 24px; padding-left: 1.4em; display: grid; gap: 10px; }
.pil-fine { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.ord-coupon-ok { color: var(--ok-ink, #146c2e); }
.ord-pilot-terms { margin-top: 8px; }
.ord-code-btn { display: flex; align-items: flex-end; }
.pr-totals .ord-discount dd { color: var(--ok-ink); }

/* PIL1 customer references (src/References.php): logo band below the hero, customer voices page, admin thumbnails */
.ref-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface, #fff); }
.ref-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 18px; padding-bottom: 18px; }
.ref-band-h { flex-basis: 100%; font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-faint); margin: 0; }
.ref-band-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; list-style: none; margin: 0; padding: 0; flex: 1 1 320px; }
.ref-band-logos img { height: 36px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.ref-band-logos img:hover { filter: none; opacity: 1; }
.ref-band-link { font-size: .9rem; white-space: nowrap; }
.ref-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.ref-card figure { margin: 0; }
.ref-logo { height: 48px; width: auto; max-width: 200px; object-fit: contain; margin-bottom: 14px; }
.ref-quote { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.55; }
.ref-quote p { margin: 0; }
.ref-quote p::before { content: "„"; } .ref-quote p::after { content: "“"; }
:root[lang="en"] .ref-quote p::before, html[lang="en"] .ref-quote p::before { content: "“"; }
:root[lang="en"] .ref-quote p::after, html[lang="en"] .ref-quote p::after { content: "”"; }
.ref-facts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.ref-facts li { font-size: .8rem; background: var(--accent-tint); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.ref-related { color: var(--ink-faint); margin: 10px 0 0; }
/* Dark theme: logos keep their own colours on a light chip (inverting would break logos with a white background) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ref-band-logos li, :root:not([data-theme="light"]) .ref-logo { background: #fff; border-radius: 8px; padding: 6px 10px; } }
:root[data-theme="dark"] .ref-band-logos li, :root[data-theme="dark"] .ref-logo { background: #fff; border-radius: 8px; padding: 6px 10px; }
/* KR1 compliance cost calculator: weeks until audit-ready (span bar with a mark at the typical case) and PDF button */
.bk-time { margin: 20px 0 12px; }
.bk-bar-mid { fill: var(--ink); }
.bk-pdf { margin: 16px 0 0; }

/* ---------- Package badges and package page /pakete (decision Marc 13.10.2026) ----------
   .lp-plan-link: the badge "ab Professional →" next to a feature is a link to the package's section (Site::planBadge()).
   Recognisable as a link: underline, arrow, hover border, visible focus ring; at least 26 px high (WCAG 2.2 2.5.8: 24 px).
   Colours = .lp-tag-plan (info tokens: light #13233f on #e7ecf4, dark #b9cae8 on #16264a, both above 7:1). */
.lp-plan-link { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 10px; font-size: .74rem; text-decoration: underline; text-underline-offset: 2px; color: var(--info-ink); }
.lp-plan-link:hover { color: var(--info-ink); border-color: currentColor; text-decoration-thickness: 2px; }
.lp-plan-link:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.lp-h2 .lp-plan-link, .lp-eyebrow .lp-plan-link { letter-spacing: normal; text-transform: none; font-family: var(--font-sans); font-weight: 600; }

/* Header stair: four steps rising from Start to Premium, each a link to its section */
.pk-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; height: 280px; }
.pk-stairs a { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 12px 12px 4px 4px; background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink); text-decoration: none; transition: transform .15s ease; }
.pk-stairs a.pk-step-1 { height: 42%; } .pk-stairs a.pk-step-2 { height: 58%; } .pk-stairs a.pk-step-3 { height: 76%; } .pk-stairs a.pk-step-4 { height: 94%; }
.pk-stairs-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); height: 320px; }
.pk-stairs-5 a { padding: 12px 8px; } .pk-stairs-5 .pk-s-name { font-size: .92em; overflow-wrap: normal; hyphens: none; } .pk-stairs-5 .pk-s-for { font-size: .76rem; hyphens: none; overflow-wrap: normal; }   /* ga-6: no hyphenation in the staircase, short labels */
.pk-stairs-5 a.pk-step-1 { height: 44%; } .pk-stairs-5 a.pk-step-2 { height: 56%; } .pk-stairs-5 a.pk-step-3 { height: 69%; } .pk-stairs-5 a.pk-step-4 { height: 82%; } .pk-stairs-5 a.pk-step-5 { height: 96%; }
/* A step never gets lower than its content, so the price always stays inside the tile (Praxis tile, Marc 14.10.2026) */
.pk-stairs a { min-height: min-content; }
.pk-stairs a.is-accent { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.pk-stairs a:hover { transform: translateY(-4px); text-decoration: none; }
.pk-stairs a:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.pk-s-name { font-weight: 700; font-size: 1.05rem; }
.pk-s-for { font-size: .8rem; line-height: 1.3; }
.pk-s-price { margin-top: auto; font-weight: 600; font-size: .9rem; }
.pk-under-head { margin-top: 18px; margin-bottom: 0; text-align: center; color: var(--ink-faint); font-size: .9rem; }

/* Sections: generous spacing, text and screenshots side by side, sides alternate */
.pk-sec { padding: 120px 0; }
.lp-body .pk-sec[id], .pk-sec { scroll-margin-top: 80px; }
.pk-split { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.pk-flip { grid-template-columns: 6fr 5fr; }
.pk-flip .pk-txt { order: 2; }
.pk-for { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; font-weight: 600; color: var(--accent-dark); }
:root[data-theme="dark"] .pk-for { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pk-for { color: var(--accent-bright); } }
.pk-lvl { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-size: .85rem; }
.pk-h { font-size: 2.1rem; margin: 0 0 14px; }
.pk-situation { margin: 0 0 28px; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent-bright); color: var(--ink-soft); }
.pk-situation-k { display: block; margin-bottom: 2px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.pk-cards { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pk-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-soft); font-size: .92rem; }
.lp-sec-white .pk-card { background: var(--bg); }
.pk-card strong { display: block; margin: 8px 0 4px; color: var(--ink); font-size: .98rem; }
.pk-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--info-bg); color: var(--info-ink); }
.pk-ic .icon { width: 18px; height: 18px; }
.pk-text, .pk-soonline { margin: 0 0 18px; color: var(--ink-soft); font-size: .93rem; }
.pk-chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chips li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--ink-soft); }
.pk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.pk-price { margin: 0; color: var(--ink-soft); }
.pk-price strong { font-size: 1.15rem; color: var(--ink); }
.pk-pics { position: relative; padding-bottom: 70px; }
.pk-shot .lp-figure { margin: 0; }
.pk-shot .lp-shot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(19, 35, 63, .16); }
.pk-shot-sub { position: absolute; right: -24px; bottom: 0; width: 55%; }
.pk-shot-sub .lp-shot { box-shadow: 0 14px 30px rgba(19, 35, 63, .24); }
.pk-flip .pk-shot-sub { right: auto; left: -24px; }
/* Connector between two packages: "Alles aus Start, dazu …" */
.pk-step { padding: 8px 0; text-align: center; background: linear-gradient(var(--bg) 50%, var(--surface) 50%); }
.pk-step-up { background: linear-gradient(var(--surface) 50%, var(--bg) 50%); }
.pk-step span { display: inline-block; padding: 10px 20px; border: 1px solid var(--info-line); border-radius: 999px; background: var(--info-bg); color: var(--info-ink); font-weight: 600; }
.pk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pk-mini:hover { transform: none; }
/* Comparison table: scrolls inside its focusable region on small screens, never the page */
.pk-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pk-table-wrap:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.pk-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; }
.pk-table caption { padding: 10px 12px; text-align: left; color: var(--ink-faint); font-size: .85rem; }
.pk-table th, .pk-table td { padding: 9px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.pk-table tbody th { font-weight: 500; }
.pk-table .pk-group th { background: var(--info-bg); color: var(--info-ink); font-weight: 600; }
.pk-yes { color: var(--ok-ink); font-weight: 700; } .pk-add { color: var(--accent-dark); font-weight: 700; } .pk-no { color: var(--ink-faint); }
:root[data-theme="dark"] .pk-add { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pk-add { color: var(--accent-bright); } }
/* Package type switch "Komplettpakete | Einzelpakete" under the header (no extra menu width) and individual packages page */
.pk-switch { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pk-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--ink); }
.pk-switch a[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pk-switch a:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.pk-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pk-trio .pk-mini { display: flex; flex-direction: column; }
.pk-trio .pk-cards { grid-template-columns: minmax(0, 1fr); }
.pk-todo { padding: 2px 8px; border: 1px dashed var(--line); border-radius: 6px; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .pk-trio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) {
  .pk-split, .pk-flip, .pk-duo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pk-flip .pk-txt { order: 0; }
  .pk-sec { padding: 80px 0; }
}
@media (max-width: 640px) {
  /* ga-6: phones get a compact list with the short description and an arrow instead of a half-filled grid */
  .pk-stairs, .pk-stairs-5 { grid-template-columns: minmax(0, 1fr); height: auto; gap: 8px; }
  .pk-stairs a, .pk-stairs-5 a, .pk-stairs a[class*="pk-step-"] { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; height: auto; min-height: 48px; padding: 10px 14px; border-radius: 12px; }
  .pk-stairs a::after { content: "\2192"; font-weight: 700; }
  .pk-s-for, .pk-stairs-5 .pk-s-for { display: block; font-size: .85rem; }
  .pk-s-name { font-size: .95rem; }
  .pk-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pk-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .pk-card .pk-ic { grid-row: span 2; }
  .pk-card strong { margin: 0 0 2px; }
  .pk-shot-sub { right: -8px; width: 60%; }
  .pk-flip .pk-shot-sub { left: -8px; }
  .pk-h { font-size: 1.8rem; }
}
@media (max-width: 480px) { .pk-s-name { hyphens: none; } }
@media (prefers-reduced-motion: reduce) { .pk-stairs a { transition: none; } .pk-stairs a:hover { transform: none; } }

.pk-praxis-hint { margin-top: 24px; }

/* ---------- MOB2-D: phone view of the website (decisions Marc 12.10.2026 F13, plan D1 to D7 approved 15.10.2026) ----------
   Only below 640 px; desktop unchanged. Behaviour in public/assets/site-mobile.js, rules in docs/DESIGN-GUIDELINES.md
   section 13. Without JavaScript the header tools stay in the header and every folded part stays open. */
.lp-mnav-tools, .lp-foot-sum, .lp-foot-phone { display: none; }
.lp-lead-more { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
:root[data-theme="dark"] .lp-lead-more { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-lead-more { color: var(--accent-bright); } }
.lp-fold-btn { margin-top: 4px; }
@media (max-width: 640px) {
  /* D1 header: logo and menu button only; language and light/dark move into the menu (JavaScript only, the menu needs it) */
  html.js .lp-actions > .lp-langmenu, html.js .lp-actions > .theme-toggle { display: none; }
  .lp-mobile-nav .lp-mnav-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 20px; }
  .lp-mnav-h { width: 100%; margin: 0; font-size: .82rem; color: var(--ink-soft); }
  .lp-mnav-langs { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; }
  .lp-mobile-nav .lp-mnav-langs a:not(.btn) { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .88rem; font-weight: 600; }
  .lp-mobile-nav .lp-mnav-langs a[aria-current] { background: var(--inset); border-color: var(--ink); }
  .lp-mobile-nav .lp-mnav-tools .theme-toggle { width: 44px; height: 44px; justify-content: center; margin: 0 0 0 auto; align-self: flex-end; }

  /* D2 footer: brand block, then the three link columns as an accordion, legal line at the bottom */
  .lp-foot { padding-top: 20px; }
  .lp-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-foot-about { padding-bottom: 12px; }
  .lp-foot-claim, .lp-foot-hd { display: none; }
  .lp-foot-sum { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin: 0; border-top: 1px solid var(--line); cursor: pointer; list-style: none; }
  .lp-foot-sum::-webkit-details-marker { display: none; }
  .lp-foot-sum::after { content: ""; width: 8px; height: 8px; margin-right: 6px; border: solid var(--ink-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
  .lp-foot-col[open] > .lp-foot-sum::after { transform: rotate(-135deg); }
  .lp-foot-col > ul { padding-bottom: 10px; }
  .lp-foot-phone { display: block; }
  .lp-foot-bottom { margin-top: 0; }
  /* legal line: tighter gaps and a smaller type size so longer translations (pl, nl, fr) keep the footer within 500 px at 320 px */
  .lp-foot .lp-foot-legal { gap: 0 8px; }
  .lp-foot .lp-foot-legal a { font-size: .8rem; }
  .lp-foot .lp-foot-actions { flex-wrap: nowrap; gap: 8px; }
  .lp-foot .lp-foot-actions .btn { padding-inline: 10px; font-size: .85rem; text-align: center; }
  .lp-foot .lp-foot-login { font-size: .85rem; line-height: 1.2; }

  /* D3 swipe rows: tile groups and trust lists scroll sideways inside themselves, the next card peeks in */
  .lp-tiles:not(.lp-tiles-list), .lp-trust { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; }
  .lp-tiles:not(.lp-tiles-list) > *, .lp-trust > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .lp-tiles:not(.lp-tiles-list) > :only-child { flex-basis: 100%; }
  .lp-tile-points { display: none; }
  /* framework chips (home page): one row that scrolls sideways (chip row, MOB2-B F5) */
  .lp-fwbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin-inline: -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; }
  .lp-fwbar > li { flex: none; }
  .lp-box:hover { transform: none; }
  /* Overview pages (features, frameworks, audiences): compact one-column list instead of a swipe row */
  .lp-tiles-list { gap: 10px; }
  .lp-tiles-list > .lp-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-content: start; padding: 14px 16px; }
  .lp-tiles-list > .lp-tile > * { grid-column: 2; margin: 0; }
  .lp-tiles-list > .lp-tile > .lp-icon { grid-column: 1; grid-row: 1 / span 2; }
  .lp-tiles-list > a.lp-tile > p:not(.lp-tile-fw) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lp-tiles-list > a.lp-tile > .lp-tile-more { display: none; }
  .wp-overview .wp-card .wp-cover, .wp-tiles .wp-cover { display: none; }
  /* secondary link line under the feature row ("In Kürze: …"); the planned topics stay reachable via "Alle Funktionen" */
  .lp-soon-line { display: none; }

  /* D5 hero: less air, lead text three lines with "mehr", buttons full width */
  .lp-hero { padding: 28px 0 40px; }
  .lp-lead.lp-lead-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
  .lp-hero .lp-cta { flex-direction: column; align-items: stretch; }
  .lp-hero .lp-cta .btn { justify-content: center; }

  /* D4: list shortened to the first entries (data-lp-more) */
  .lp-more-btn { margin-top: 12px; }
}
/* D6 forms on the website: 16 px text (no iOS zoom on focus) and 44 px fields on phones and touch devices */
@media (max-width: 640px), (pointer: coarse) {
  .lp-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .lp-body select, .lp-body textarea { font-size: 16px; }
  .lp-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .lp-body select { min-height: 44px; }
}
/* D6/D7 touch targets on the website (portal: MOB1-A foundation in app.css): buttons, logo links and choice rows */
@media (pointer: coarse) {
  .lp-menu-toggle { width: 44px; height: 44px; }
  .lp-foot ul a, .lp-foot .lp-foot-legal a, .lp-foot .lp-foot-login { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .lp-body .btn, .lp-body .lp-brand, .lp-body .lp-foot-brand { min-height: 44px; }
  .lp-body .lp-brand, .lp-body .lp-foot-brand { display: inline-flex; align-items: center; }
  .lp-body label.check { min-height: 44px; padding-block: 10px; }
}
/* Click test 2.0 (201): longer labels of the beta languages (fr, nl, pt, es, it) must not add 44 px rows to the phone footer */
@media (pointer: coarse) {
  .lp-foot .lp-foot-legal { column-gap: 10px; }
  .lp-foot .lp-foot-legal a { font-size: .78rem; }
}
@media (pointer: coarse) and (max-width: 360px) {
  .lp-foot-actions { gap: 8px 10px; flex-wrap: nowrap; }
  .lp-foot-actions .btn { padding-inline: 12px; font-size: .9rem; }
  .lp-foot .lp-foot-login { font-size: .86rem; }
  .lp-foot .lp-foot-legal { column-gap: 8px; }
  .lp-foot .lp-foot-legal a { font-size: .74rem; }
}
/* MOB2-D D4: folded parts stay out of the layout even where a class sets display (e.g. the swipe rows) */
.lp-folded[hidden], [data-lp-more] > [hidden] { display: none !important; }
@media (max-width: 640px) {
  /* D4/D7: calmer spacing between sections, FAQ rows as 44 px targets */
  .lp-sec { padding: 44px 0; }
  .lp-sec-tight { padding: 32px 0; }
  .lp-band { padding: 40px 0; }
  .lp-page-head { padding: 28px 0 24px; }
  .lp-faq details { padding: 4px 0; }
  .lp-faq summary { min-height: 44px; align-items: center; }
}

/* M1 guide pages (templates/landing/guides/page.php): reading column, contents list, checklist, stacked table cards on phones */
.lp-guide-toc { border: 1px solid var(--line, #d9d4c7); border-radius: 10px; padding: 4px 16px; margin: 0 0 28px; }
.lp-guide-toc summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.lp-guide-toc ol { margin: 0 0 12px; padding-left: 22px; }
.lp-guide-toc li { margin: 4px 0; }
.lp-guide-body { font-size: 1.0625rem; line-height: 1.65; }
.lp-guide-body h2 { margin: 40px 0 12px; scroll-margin-top: 90px; }
.lp-guide-body h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.lp-guide-body ul, .lp-guide-body ol { padding-left: 22px; }
.lp-guide-body li { margin: 6px 0; }
.lp-guide-quote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--accent, #1f4e9c); font-weight: 600; }
.lp-guide-quote p { margin: 0; }
.lp-guide-check { list-style: none; padding-left: 0 !important; }
.lp-guide-check li { display: flex; gap: 12px; align-items: flex-start; }
.lp-guide-box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 4px; border: 2px solid currentColor; border-radius: 4px; opacity: .6; }
.lp-guide-table { overflow-x: auto; margin: 16px 0; }
.lp-guide-table table { border-collapse: collapse; width: 100%; }
.lp-guide-table th, .lp-guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line, #d9d4c7); vertical-align: top; }
.lp-guide-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.lp-guide-note { margin-top: 40px; }
@media (max-width: 640px) {
  .lp-guide-body { font-size: 1rem; }
  .lp-guide-table { overflow: visible; }
  .lp-guide-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-guide-table table, .lp-guide-table tbody, .lp-guide-table tr, .lp-guide-table td { display: block; width: 100%; }
  .lp-guide-table tr { border: 1px solid var(--line, #d9d4c7); border-radius: 10px; padding: 6px 12px; margin: 0 0 10px; }
  .lp-guide-table td { border: 0; padding: 4px 0; }
  .lp-guide-table td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; opacity: .7; }
  .lp-guide-cta .btn { width: 100%; justify-content: center; }
}
@media print { .lp-guide-toc { display: none; } }
/* M1: link band to the guide pages */
.lp-sec.lp-guide-links { padding: 16px 0; }
.lp-guide-link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lp-guide-link-list a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.lp-guide-link-tag { flex: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }

/* WEB-GOLIVE: USP cards on the home page, ASVS page (templates/legal/asvs.php), about page (templates/landing/about.php) */
.lp-usp .lp-tile h3 a { color: inherit; display: inline-block; padding-block: 2px; }
.lp-usp .lp-tile h3 a:hover { color: var(--accent-dark); }
.lp-fw-heading { margin: 28px 0 12px; }
.lp-faq-embedded { margin-top: 36px; margin-inline: auto; }
.asvs-levels { list-style: none; margin: 20px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.asvs-level { display: grid; gap: 8px; align-content: start; padding: 20px 22px; }
.asvs-level small { color: var(--ink-soft); font-weight: 400; line-height: 1.45; }
.asvs-lab { color: var(--ink-soft); font-size: .9rem; }
.asvs-big { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.asvs-bar { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin: 6px 0; }
.asvs-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: 5px; background: var(--accent-bright); }
.asvs-bar-navy i { background: var(--dark); }
.asvs-badges { list-style: none; margin: 20px 0 10px; padding: 0; display: flex; justify-content: space-between; gap: 10px; }
.asvs-badge { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; justify-items: center; text-align: center; }
.asvs-badge-lab { color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.asvs-ring { --p: 0; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--accent-bright) calc(var(--p) * 1%), var(--line) 0); display: flex; align-items: center; justify-content: center; }
.asvs-badge-navy .asvs-ring { background: conic-gradient(var(--dark) calc(var(--p) * 1%), var(--line) 0); }
.asvs-ring > span { width: 74px; height: 74px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.asvs-ring .icon { width: 30px; height: 30px; color: var(--accent); }
.tc-cards .lp-box p.asvs-badges-note { margin-top: 8px; font-size: .92rem; }
:root[data-theme="dark"] .asvs-badge-navy .asvs-ring { background: conic-gradient(var(--ink-faint) calc(var(--p) * 1%), var(--line) 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .asvs-badge-navy .asvs-ring { background: conic-gradient(var(--ink-faint) calc(var(--p) * 1%), var(--line) 0); } }
/* ga-6 (1.93) SEC-PAGE: key-figure strip (2 x 2 on phones) and ten benefit cards (one column on phones) */
.asvs-kpis { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.asvs-kpi { display: grid; gap: 4px; align-content: start; padding: 16px 18px; }
.asvs-kpi-n { font-size: 1.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.asvs-kpi-l { color: var(--ink-soft); font-size: .9rem; line-height: 1.35; }
.asvs-benefits { list-style: none; margin: 20px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.asvs-benefit { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.asvs-benefit h3 { margin: 0 0 6px; }
.asvs-benefit p { margin: 0 0 6px; }
.asvs-means { color: var(--ink); }
.asvs-proof { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-soft); font-size: .88rem; }
.asvs-proof .icon { width: 14px; height: 14px; margin-top: 3px; flex: none; color: var(--accent); }
@media (max-width: 900px) { .asvs-benefits { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .asvs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
  .asvs-kpi { padding: 12px 14px; }
  .asvs-kpi-n { font-size: 1.35rem; }
  .asvs-benefits { gap: 10px; }
  .asvs-benefit { padding: 14px 16px; }
  .asvs-benefit > .lp-icon { display: none; }   /* phone: the text gets the full width, the page stays within its length budget */
  .asvs-benefit h3 { font-size: 1.02rem; }
}
/* ga-6 (1.93) HP1 compact home page (templates/landing/index-hp1.php): tighter tiles so hero plus six sections stay within about five screens */
.lp-tiles-compact { gap: 16px; }
.lp-tiles-compact .lp-tile { padding: 16px 18px; gap: 6px; }
.lp-tiles-compact .lp-tile h3 { font-size: 1.02rem; margin: 0; }
.lp-tiles-compact .lp-tile p { margin: 0; font-size: .92rem; line-height: 1.45; }
.lp-cover { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lp-cover-item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; min-height: 48px; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink); }
.lp-cover-item .lp-icon { flex: none; }
.lp-cover-item .lp-icon .icon { width: 20px; height: 20px; }
.ww-inline { margin-top: 24px; }
@media (min-width: 961px) { .lp-sec-hp1 .lp-slide { flex-basis: 50%; } }
.ww-inline .ww-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ww-inline .ww-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-trust-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lp-cover, .lp-trust-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-cover, .lp-trust-4 { grid-template-columns: minmax(0, 1fr); } .ww-inline .ww-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.asvs-h2 { margin-top: 8px; }
.asvs-chips { list-style: none; margin: 12px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.asvs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .88rem; overflow-wrap: anywhere; }
.asvs-chip .icon { width: 14px; height: 14px; color: var(--accent); flex: none; }
.asvs-tc { display: flex; gap: 16px; align-items: flex-start; background: var(--dark); color: #f7f3ea; border-radius: var(--radius-lg); padding: 22px 24px; margin-top: 8px; }
.asvs-tc-ic { flex: none; color: var(--accent-bright); }
.asvs-tc-ic .icon { width: 24px; height: 24px; }
.asvs-tc-h { margin: 0 0 4px; font-size: 1.15rem; color: #f7f3ea; }
.asvs-tc p { margin: 0 0 14px; color: rgba(247, 243, 234, .82); }
.asvs-tc .btn { max-width: 100%; white-space: normal; text-align: center; }
.tc-cards-rest { margin-top: 20px; }
.asvs-exc { max-width: 75ch; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line, #d9d2c3); border-radius: var(--radius-lg); background: var(--surface, #fff); scroll-margin-top: 90px; }
.asvs-exc-h { margin: 0 0 10px; font-size: 1.02rem; }
.asvs-exc-h .icon { width: 18px; height: 18px; vertical-align: -3px; }
.asvs-exc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.asvs-exc-list li + li { border-top: 1px solid var(--line, #d9d2c3); padding-top: 12px; }
.asvs-exc-row { margin: 0; font-size: .95rem; }
.asvs-exc-why { color: var(--ink-soft); font-size: .92rem; }
.asvs-exc-why summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; list-style: none; }
.asvs-exc-why summary::-webkit-details-marker { display: none; }
.asvs-exc-why summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.asvs-exc-why[open] summary::before { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .asvs-exc-why summary::before { transition: none; } }
.asvs-exc-why p { margin: 0 0 6px; max-width: 720px; }
.asvs-na { margin-top: 20px; color: var(--ink-soft); font-size: .92rem; }
.asvs-na summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.asvs-na p { margin: 0 0 8px; max-width: 720px; }
:root[data-theme="dark"] .asvs-bar-navy i { background: var(--ink-faint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .asvs-bar-navy i { background: var(--ink-faint); } }
@media (max-width: 760px) {
  .asvs-levels { grid-template-columns: minmax(0, 1fr); }
  .asvs-tc { padding: 18px 16px; }
  .asvs-tc .btn { display: flex; justify-content: center; width: 100%; }
}
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: center; }
.ab-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); object-fit: cover; background: var(--inset); }
.ab-initials { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--inset); color: var(--accent-dark); font: 700 1.4rem var(--font-sans); width: 64px; height: 64px; flex: none; }
.ab-cont details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin: 10px 0; }
.ab-cont summary { display: flex; align-items: center; min-height: 48px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
.ab-cont .ab-body { padding: 0 18px 16px; color: var(--ink-soft); }
.ab-cont .ab-body ul { margin: 0 0 8px; padding-left: 20px; }
@media (max-width: 860px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-hero-grid .ab-photo { width: 120px; aspect-ratio: 1; border-radius: 50%; order: -1; }
}
/* WEB-OVERHAUL-1 3.11: applicability check on the shared wizard (public-check.js adds .pc-enhanced instead of .pc-wizard) */
.pc-enhanced .pc-size { display: grid; gap: 18px; }
.pc-enhanced .pc-nojs-only, .pc-enhanced .pc-select-hidden, .pc-enhanced label[for="pc-taetigkeit"] { display: none; }
.pc-enhanced [data-step] > legend, .pc-enhanced .pc-size legend { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.pc-enhanced .wz-foot { margin-top: 18px; }
.pc-enhanced .pc-act [hidden] { display: none !important; }
@media (max-width: 640px) {
  .pc-enhanced .wz-foot .btn { flex: 1 1 100%; justify-content: center; }
}
/* WEB-OVERHAUL-1 3.13: "Typische Unternehmen" inside the duties section of the audience pages */
.lp-sectors-h { margin-top: 36px; }
/* WEB-OVERHAUL-1 (375 px): anchor chips scroll sideways inside their row instead of wrapping into rows; 44 px touch targets */
@media (max-width: 640px) {
  .lp-anchors { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .lp-anchors li { flex: 0 0 auto; }
  .lp-anchors a { white-space: nowrap; }
}
@media (pointer: coarse) {
  .lp-anchors a { min-height: 44px; }
}


/* WEB-INT-LOGOS: "Funktioniert mit" tiles on /funktionen/core (templates/landing/_works_with.php). Name tiles use the site
   font and neutral colours, never manufacturer colours; logo tiles keep the owner's colours inside a white field. */
.ww-h { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 28px 0 12px; }
.ww-h:first-of-type { margin-top: 8px; }
/* One look for every tile in both colour schemes (Marc 19.10.2026): a white field with fixed dark text, because logos keep
   their original colours and may not be recoloured; equal rows so logo and name tiles line up. */
.ww-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.ww-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: 10px 8px; text-align: center; border: 1px solid rgba(27, 42, 65, .14); border-radius: var(--radius-lg); background: #fff; overflow-wrap: break-word; }
.ww-tile { hyphens: manual; }
.ww-tile b { font-size: 1rem; font-weight: 600; color: #1b2a41; line-height: 1.25; }
.ww-tile small { font-size: .8rem; color: #55606f; line-height: 1.3; }
.ww-logo img { height: 28px; width: auto; max-width: 100%; object-fit: contain; }
.ww-note { margin: 20px 0 0; color: var(--ink-soft); max-width: 78ch; }
/* Trademark notice as a collapsible footnote (Marc 18.10.2026): the summary sentence stays visible, the owner list folds.
   The toggle is a 44 px target; chevron drawn with borders like .tc-explain, no motion with prefers-reduced-motion. */
.ww-note > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; border-radius: 4px; }
.ww-note > summary::-webkit-details-marker { display: none; }
.ww-note > summary:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.ww-note-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent-dark); white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.ww-note-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.ww-note[open] .ww-note-toggle::after { transform: translateY(1px) rotate(-135deg); }
.ww-note > p { margin: 4px 0 0; }
:root[data-theme="dark"] .ww-note-toggle { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ww-note-toggle { color: var(--accent-bright); } }
@media (prefers-reduced-motion: reduce) { .ww-note-toggle::after { transition: none; } }
@media (max-width: 960px) { .ww-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ww-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ww-tile { min-height: 64px; padding: 8px 6px; }
  .ww-tile b { font-size: .94rem; }
  .ww-logo img { height: 24px; }
}
/* WEB-INT-LOGOS home page: slim band of the same tiles (not an lp-sec, like .ref-band) */
.ww-band { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0 24px; }
.ww-band-h { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.ww-compact .ww-tile { min-height: 56px; padding: 8px 6px; }
.ww-band .ww-h { font-size: .9rem; margin: 18px 0 8px; color: var(--ink-soft); }
.ww-band .ww-grp:first-of-type .ww-h { margin-top: 0; }
.ww-band .ww-note { margin-top: 16px; }
.ww-band-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; min-height: 44px; }
@media (max-width: 640px) { .ww-band { padding: 24px 0 16px; } .ww-band .ww-grp-rest, .ww-band .ww-h, .ww-compact .ww-tile small { display: none; } }
.ww-logo .ww-cap { font-size: .94rem; font-weight: 600; color: #1b2a41; line-height: 1.2; }
.ww-logo:has(.ww-cap) img { height: 24px; }
/* One look for all logo tiles: the picture sits in a box of the same height and is fitted into it (never cropped or
   recoloured); symbol-only logos are smaller and carry the name below. CSAF has wide transparent margins and is shown larger. */
.ww-logo img { height: 32px; width: 100%; max-width: 100%; object-fit: contain; }
.ww-logo:has(.ww-cap) img { height: 26px; }
.ww-logo-csaf img { height: 56px; margin: -12px 0; }
.ww-logo-nmap img, .ww-logo-grype img { width: auto; }
@media (max-width: 640px) { .ww-logo img { height: 28px; } .ww-logo:has(.ww-cap) img { height: 24px; } .ww-logo-csaf img { height: 48px; margin: -10px 0; } }

/* ---------- Main call to action "Testzugang" (decision Marc 17.10.2026, 20:47, F7): trial primary, demo secondary ---------- */
/* Trial note right under the hero buttons, then the line with "So sieht es aus" and the login (both small text) */
.lp-hero .lp-trial-note { margin-top: 14px; }
.lp-hero .lp-trial-note + .lp-small { margin-top: 6px; }
/* Text links in these lines keep a 24 px tall hit area (WCAG 2.5.8) */
.lp-hero .lp-small .lp-link, .lp-pair-cta .lp-link { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; }
.lp-hero .lp-small .lp-link .icon { width: 14px; height: 14px; }
/* GT1-R14: on touch devices the hero text links reach the 44 px touch target */
@media (pointer: coarse) { .lp-hero .lp-small .lp-link { min-height: 44px; } }
/* GT1 tour card below the hero buttons (decision Marc 20.10.2026): one link with a round play icon, title and chapters/duration;
   below the buttons so "Demo anfragen" stays the only primary action. Full width on phones, at least 56 px tall. */
.lp-tour-card { display: flex; align-items: center; gap: 14px; max-width: 420px; min-height: 56px; margin-top: 16px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--ink); text-decoration: none; }
.lp-tour-card:hover, .lp-tour-card:focus-visible { border-color: var(--accent); }
.lp-tour-card-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-dark); color: var(--on-accent); }
.lp-tour-card-icon .icon { width: 18px; height: 18px; margin-left: 2px; }
.lp-tour-card-t { display: flex; flex-direction: column; min-width: 0; }
.lp-tour-card-t strong { font-size: 1.02rem; }
.lp-tour-card-t span { color: var(--ink-soft); font-size: .86rem; }
.lp-tour-card-go { margin-left: auto; color: var(--accent-dark); }
.lp-tour-card-go .icon { width: 18px; height: 18px; transition: transform .15s; }
.lp-tour-card:hover .lp-tour-card-go .icon { transform: translateX(3px); }
.lp-tour-card + .lp-small { margin-top: 12px; }
@media (max-width: 640px) { .lp-tour-card { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .lp-tour-card-go .icon { transition: none; } }
.lp-pair-card .lp-pair-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
/* Long button texts wrap instead of overflowing at 320 px and 200 % zoom (WCAG 1.4.10) */
.lp-pair-cta .btn, .lp-mobile-demo { max-width: 100%; white-space: normal; text-align: center; }
/* Mobile menu: trial (primary) and demo (outline) stacked, one gap between them */
.lp-mobile-demo + .lp-mobile-demo, :where(.lp-head-compact) .lp-mobile-demo + .lp-mobile-demo { margin-top: 0; }
/* Trust Center "Our own checks": check lists and a test-count figure instead of prose (release 1.90) */
.tc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tc-checks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.tc-checks .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.tc-cards .lp-box p.tc-stat { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.tc-stat-n { flex: none; font-size: 2rem; line-height: 1; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ===================================================================   GT1 public guided tour (templates/landing/tour.php, public/assets/guided-tour.js, docs/specs/GT1-GUIDED-TOUR-CONCEPT.md).
   Without JavaScript: start screen, every step as a list (picture with marked fields, "Heute oft" / "Mit Complass"), closing band.
   With JavaScript (.gt-js): the list is hidden and the full-screen stage .gt-stage shows one step per screen. Phone (≤ 640 px):
   picture on top, text card below as a sheet, sticky back/next bar, 44 px targets, no sideways scroll. Screenshots stay light.
   ========================================================================== */
.gt-facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.gt-facts li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); }
.gt-facts .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.gt-start { margin: 24px 0 0; }
.gt-chapters-h { margin-top: 40px; }
.gt-chapters { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gt-chapter { display: flex; gap: 14px; align-items: flex-start; min-height: 44px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; }
.gt-chapter:hover, .gt-chapter:focus-visible { border-color: var(--accent); }
.gt-chapter-n { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .9rem var(--font-sans); }
.gt-chapter-t { display: grid; gap: 4px; }
.gt-chapter-t > span { color: var(--ink-soft); font-size: .92rem; }
.gt-chapter-meta { font-size: .82rem !important; color: var(--ink-faint) !important; }
.gt-step { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; align-items: start; margin: 28px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.gt-pic { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.gt-pic img { display: block; width: 100%; height: auto; }
.gt-marks { position: absolute; inset: 0; pointer-events: none; }
/* List without JavaScript (GT1-R2): markers as SVG rects, positions are SVG attributes (no style attribute, CSP style-src 'self') */
.gt-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gt-rect { fill: rgba(201, 145, 37, .08); stroke: var(--accent); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.gt-rect.is-focus { stroke-width: 4px; }
.gt-marks-phone { display: none; }
.gt-mark { position: absolute; box-sizing: border-box; border: 3px solid var(--accent); border-radius: 8px; background: rgba(201, 145, 37, .08); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); padding: 0; margin: 0; font: inherit; cursor: pointer; pointer-events: auto; }
.gt-mark.is-focus { animation: gt-pulse 1.8s ease-in-out infinite; }
/* Tap area of at least 44 px also for small frames (CLAUDE.md "Mobile usability") */
.gt-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.gt-mark-label { position: absolute; left: -3px; top: 100%; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--accent-dark); color: #fff; font: 600 .78rem/1.3 var(--font-sans); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gt-mark:not(.is-focus):not(.is-shown) .gt-mark-label { display: none; }
.gt-mark.is-low .gt-mark-label { top: 6px; left: 6px; margin-top: 0; }
/* The focus field and an opened label lie above the other frames */
.gt-mark.is-focus, .gt-mark.is-shown { z-index: 2; }
@keyframes gt-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 0 rgba(201, 145, 37, .55); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 10px rgba(201, 145, 37, 0); } }
@media (prefers-reduced-motion: reduce) { .gt-mark.is-focus { animation: none; } }
.gt-eyebrow { font: 600 .78rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 8px; }
.gt-title { margin: 0 0 14px; font-size: 1.35rem; line-height: 1.3; }
.gt-title:focus { outline: none; }
.gt-compare { margin: 0; display: grid; gap: 12px; }
.gt-compare > div { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); }
.gt-compare dt { font: 700 .8rem var(--font-sans); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.gt-compare dd { margin: 0; line-height: 1.5; }
.gt-today { background: var(--inset); color: var(--ink-soft); }
.gt-with { background: var(--info-bg); border-color: var(--info-line) !important; }
.gt-with dt { color: var(--info-ink); }
.gt-chips { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gt-chips li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .88rem; }
.gt-legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--ink-soft); }
.gt-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--accent); border-radius: 3px; vertical-align: -1px; }
.gt-legend li.is-active { color: var(--ink); font-weight: 600; }
.gt-next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.gt-js .gt-list { display: none; }

/* Stage (JavaScript): full screen, slim bar, picture left, card right, nav at the bottom */
html.gt-open, html.gt-open body { overflow: hidden; }
.gt-stage { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--bg); color: var(--ink); }
.gt-stage[hidden] { display: none; }
.gt-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface); min-width: 0; }
.gt-bar-btn { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); font: 600 .9rem var(--font-sans); cursor: pointer; }
.gt-bar-btn:hover, .gt-bar-btn:focus-visible { border-color: var(--accent); }
.gt-close { display: inline-grid; place-items: center; padding: 0; }
.gt-progress { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 6px; flex: 1; min-width: 0; max-width: 420px; }
.gt-progress li { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.gt-progress li.is-done { background: var(--accent); opacity: .55; }
.gt-progress li.is-current { background: var(--accent); }
/* The chapter menu lies above the picture markers and the phone card (z-index 3); the frame isolates its markers (below) */
.gt-menu { position: absolute; top: 61px; left: 16px; z-index: 10; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.gt-menu ol { list-style: none; margin: 0; padding: 0; }
.gt-menu-item { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gt-menu-item:hover, .gt-menu-item:focus-visible { background: var(--inset); }
.gt-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 24px; padding: 20px 24px; min-height: 0; overflow: auto; }
.gt-stage-pic { display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
/* The frame keeps the picture's aspect ratio (markers are percentages of it): its width follows the free height */
.gt-frame { position: relative; width: min(100%, calc((100vh - 190px) * 1.6)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; container-type: inline-size; isolation: isolate; }
/* Marker labels wrap inside the picture (max-width set per label from the field position, guided-tour.js) */
.gt-frame .gt-mark-label { white-space: normal; overflow-wrap: anywhere; width: max-content; }
.gt-frame img { display: block; width: 100%; height: auto; }
.gt-frame.is-phone { width: min(100%, 360px); }
.gt-card { align-self: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.gt-stage.is-end .gt-body { grid-template-columns: minmax(0, 640px); justify-content: center; }
.gt-stage.is-end .gt-stage-pic { display: none; }
.gt-card .gt-next-actions { margin-top: 16px; }
.gt-nav { display: flex; justify-content: space-between; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.gt-nav .btn { min-height: 44px; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
.gt-nav .btn[hidden] { display: none; }

@media (max-width: 900px) {
  .gt-step { grid-template-columns: 1fr; gap: 16px; }
  .gt-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gt-marks-desk { display: none; }
  .gt-marks-phone { display: block; }
  .gt-pic { max-width: 360px; margin: 0 auto; }
  .gt-chapters { grid-template-columns: 1fr; }
  .gt-bar { padding: 6px 12px; gap: 8px; }
  .gt-bar [data-gt-overview] { display: none; }
  .gt-progress { max-width: none; }
  /* Picture about 55 % of the screen, the text card below as a sheet that scrolls with the body */
  .gt-body { padding: 10px 12px; gap: 0; display: block; }
  .gt-stage-pic { height: 55vh; height: 55dvh; }
  .gt-frame { height: 100%; width: auto !important; max-width: 100%; aspect-ratio: 1 / 2; }
  .gt-frame:not(.is-phone) { aspect-ratio: 16 / 10; height: auto; width: 100% !important; }
  .gt-frame img { width: 100%; height: 100%; max-height: none; object-fit: fill; }
  .gt-card { position: relative; z-index: 3; margin: -24px 0 0; padding: 16px; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); }
  .gt-card::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 2px; background: var(--line-strong); }
  .gt-title { font-size: 1.15rem; }
  .gt-nav { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .gt-nav .btn { flex: 1 1 0; justify-content: center; font-size: .92rem; }
  .gt-card, .gt-compare dd { overflow-wrap: anywhere; }
  .gt-mark-label { max-width: 240px; }
}
/* Package detail pages (1.92-V): what the next package adds, as rows instead of a table (375 px) */
.pd-diff { display: grid; gap: 8px; margin: 16px 0; padding: 0; }
.pd-diff > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.lp-sec-white .pd-diff > div { background: var(--bg); }
.pd-diff dt { font-weight: 600; color: var(--ink); }
.pd-diff dd { margin: 0; text-align: right; white-space: nowrap; }
@media (min-width: 720px) { .pd-diff { grid-template-columns: repeat(2, 1fr); } }

/* Public glossary and FAQ (1.92-V, from claude/t13-seo-prep; templates/landing/glossary.php and faq.php): A-Z jump links, term list,
   topic list of the FAQ; links underlined so they do not rely on colour alone (WCAG 1.4.1) */
.lp-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.lp-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; text-decoration: none; }
.lp-az a:hover, .lp-az a:focus-visible { text-decoration: underline; }
.lp-az-h { margin: 32px 0 8px; scroll-margin-top: 90px; }
.lp-glossary { margin: 0; }
.lp-glossary dt { margin-top: 18px; font-weight: 700; scroll-margin-top: 90px; }
.lp-glossary dt dfn { font-style: normal; }
.lp-glossary dd { margin: 4px 0 0; }
.lp-glossary dd a, .lp-faq-toc a { text-decoration: underline; text-underline-offset: 2px; }
.lp-faq-toc { columns: 2 220px; padding-left: 1.2em; margin: 0 0 24px; }
.lp-faq-toc li { break-inside: avoid; margin: 4px 0; }
.pk-more > .pk-duo { margin-bottom: 44px; }   /* ga-6: "Weitere Pakete" cards above the comparison table in one section */

/* ga-6 (1.93) /sicherheit: one section of blocks, folded extra tiles, "Inhalt" menu on phones, layers figure aligned to the top */
.sec-bh { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: 8px; }
.sec-bh .icon { width: 24px; height: 24px; color: var(--accent); flex: none; }
.sec-fold { margin-top: 16px; }
.sec-fold > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent-dark); }
.sec-fold > .sec-tiles { margin-top: 12px; }
.sec-toc-sum { display: none; }
.sec-layers { align-items: start; }
@media (max-width: 640px) {
  .sec-toc { margin-top: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
  .sec-toc-sum { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
  .sec-toc-sum::-webkit-details-marker { display: none; }
  .sec-toc-sum::after { content: ""; width: 8px; height: 8px; border: solid var(--ink-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
  .sec-toc[open] > .sec-toc-sum::after { transform: rotate(-135deg); }
  .sec-toc .lp-anchors { flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: 4px; margin: 0; padding: 0 8px 10px; }
  .sec-toc .lp-anchors a { width: 100%; border: 0; border-radius: var(--radius); background: none; }
  .sec-bh { font-size: 1.25rem; }
}
@media (max-width: 640px) { .pk-pics { display: none; } }   /* ga-6: /pakete on phones: text and cards first, the plan screenshots stay on wider screens (length budget) */

/* 2.0.4 ux1 (page length): /sicherheit shows the measures of an area as one chip line, the explained tiles sit behind one fold; scenarios fold after four */
.sec-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 4px; padding: 0; }
.sec-chips li { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: .88rem; }
.sec-fold-all { margin-top: 20px; }
.sec-fold-all > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent-dark); }
.sec-fold-all > .lp-grid2 { margin-top: 12px; }