/* 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; }
/* "Funktionen", "Regelwerke" and "Für wen" share one pattern (decision Marc 05.11.2026): groups as bands with a hairline between
   them, four equal columns, the "Alle …" link top right. Each panel is centred in the viewport (the list item is static, the
   full-width sticky header the containing block), so it never leaves the screen. "Für wen": .lp-who-* below. */
.lp-nav .lp-sub-band { top: calc(100% + 1px); width: min(1180px, calc(100vw - 32px)); left: 50%; transform: translateX(-50%); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 16px; padding: 6px 28px 10px; }
.lp-nav .lp-sub-band > li > a { padding: 6px 8px; margin-inline: -8px; }
.lp-nav .lp-sub-band .lp-sub-head span { padding: 14px 0 6px; }
.lp-nav .lp-sub-band .lp-sub-all { position: absolute; top: 12px; right: 28px; grid-column: auto; margin: 0; padding: 0; border: 0; }
.lp-nav .lp-sub-band .lp-sub-all > a { display: inline-flex; margin: 0; padding: 2px 0; color: var(--accent-dark); font-size: .86rem; font-weight: 600; }
.lp-nav .lp-sub-band .lp-sub-all > a:hover { background: none; text-decoration: underline; }
.lp-nav .lp-sub-band .lp-sub-all + .lp-sub-head { margin-top: 0; border-top: 0; }
.lp-nav .lp-sub-band .lp-sub-core { grid-column: span 2; }
.lp-nav .lp-sub-band .lp-sub-anchors { margin: -2px 0 2px 28px; }
.lp-nav .lp-group-band { position: static; }
.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; UX1, Marc 30.10.2026): brand block plus two link 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, 2fr) repeat(2, 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 { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 400; padding-block: 3px; }
/* Footer variant A (Marc 01.11.2026): "Demo anfragen" is the outlined secondary button next to the primary one; the portal
   sign-ins (release 2.18) are their own group "Portale" with a heading and one icon per portal; on phones the group is
   an accordion row like the link columns (block MOB2-D D2) */
.lp-foot-about .lp-foot-actions { max-width: none; }   /* the button pair stays on one row; the 280 px limit is for the claim */
.lp-foot-portals { margin-top: 18px; }
.lp-foot .lp-foot-logins { margin: 0; }
.lp-foot .lp-foot-login .icon { flex: none; width: 16px; height: 16px; color: var(--ink-faint); transition: color var(--t); }
.lp-foot .lp-foot-login:hover .icon { color: currentColor; }
/* 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, .lp-foot nav.lp-foot-portals { 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 .lp-foot-about .btn-ghost { color: var(--ink); }
.lp-foot .lp-foot-about .btn-ghost:hover { color: var(--accent-dark); }
.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: grid; justify-items: end; gap: 0; }
/* 2.27 (Marc 03.11.2026): row 1 the legal texts, row 2 service links and the release number; right-aligned next to the
   legal note on wide screens, left-aligned below it from 1000 px down (one break by design instead of a wrapping strip) */
.lp-foot .lp-foot-legal { justify-content: flex-end; }
.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); }
.lp-foot .lp-foot-legal .lp-foot-version a { white-space: nowrap; font-variant-numeric: tabular-nums; }  /* quiet release number (same colour as the legal links, AA contrast); 44 px on touch via the shared legal-link rule */
/* UX1 (Marc 30.10.2026): two link columns, so the brand block stays in the same row down to 720 px (tablet portrait
   768 px included) and spans the full width only below; at 640 px and less the accordion of block MOB2-D D2 takes over */
@media (max-width: 1000px) {
  .lp-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lp-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-foot-about { grid-column: 1 / -1; }
  .lp-foot-about p { max-width: none; }
}

/* ---------- 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; }
/* Keyword of a page headline (PageHeroes): for search, the message follows on its own line. Messing on the dark head, about 7 : 1 on Tiefsee */
.lp-h1-kw { display: block; color: #e0a93b; }
.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); }
/* 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; }
/* Screenshot column beside text: stays at the top of its block, no sticky travelling (Marc 04.11.2026: calmer scrolling) */
.lp-shot-col { min-width: 0; }
.lp-shot-col > :not(:first-child) { margin-top: 28px; }   /* beats .lp-clip { margin: 0 auto } further down */
.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 */
/* 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-jump + .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; }
/* WEB-SALES 10: newest three versions in full, older highlights by topic in <details>, trial box on the right */
.lp-news-layout { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; }
.lp-news-main { flex: 999 1 560px; min-width: 0; }
.lp-news-main .lp-news { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lp-news-main .lp-news > li.lp-news-latest { grid-column: 1 / -1; border: 2px solid var(--accent-bright); padding: 24px 26px; }
.lp-news-main .lp-news > li.lp-news-latest h2 { font-size: 1.7rem; }
.lp-news-main .lp-news > li.lp-news-latest ul { font-size: 1rem; }
.lp-news-archive-h { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 36px 0 12px; color: var(--ink); }
.lp-news-archive { border-top: 1px solid var(--line); }
.lp-news-archive details { border-bottom: 1px solid var(--line); }
.lp-news-archive summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; font-weight: 600; color: var(--ink); list-style: none; }
.lp-news-archive summary::-webkit-details-marker { display: none; }
.lp-news-archive summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.lp-news-archive details[open] > summary::after { transform: rotate(-135deg); }
.lp-news-archive summary:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.lp-news-archive ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); font-size: .93rem; }
.lp-news-archive ul li { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .lp-news-archive summary::after { transition: none; } }
.lp-news-aside { flex: 1 1 280px; min-width: 0; max-width: 100%; background: var(--inset); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lp-news-aside h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: 0; color: var(--ink); }
.lp-news-aside p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.lp-news-aside-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 900px) { .lp-news-aside { position: sticky; top: 96px; } }
/* 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-split, .lp-split-wide, .lp-aud { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@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.": base rule of the old layout (columns 5 : 6, frame 1180 px);
   the dark home hero overrides the size in `.hp-st-hero .lp-h1` (see there) */
.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; }
/* WEB-SALES 15: framework explanations as a two-column definition list (one column on phones); disclaimer in its own
   box at 15 px or more (was .85rem footnote). Links underlined so they do not rely on colour alone (WCAG 1.4.1). */
.pc-def { margin: 0; display: grid; gap: 0 40px; }
.pc-def > div { border-top: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-def dt { font-weight: 600; font-size: 1.06rem; color: var(--ink); }
.pc-def dd { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.pc-def dd a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 4px; }
@media (min-width: 720px) {
  .pc-def { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-def > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 719px) { .pc-def > div:last-child { border-bottom: 1px solid var(--line); } }
.pc-explain p.pc-footnote { margin: 28px 0 0; padding: 18px 22px; background: var(--inset); border-radius: 10px; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.pc-explain p.pc-footnote strong { color: var(--ink); font-weight: 600; }
.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.eu · 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.eu · 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; }
/* Short material cards (ADR 0273 addendum B, templates/whitepaper/_materials.php): not one link; download button and whitepaper link */
.wp-card-material { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px; color: var(--ink); }
.wp-card-kind { margin: 0 0 2px; }
.wp-card-material .wp-card-teaser { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.wp-card-actions { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wp-card-more { font-size: .85rem; overflow-wrap: anywhere; }
@media (pointer: coarse) { .wp-card-actions .btn { min-height: 44px; } .wp-card-more { display: inline-block; padding: 10px 0; } }
/* Phones: the seven short cards are one swipe row (scrolls inside itself, no page scroll sideways), so the overview keeps its
   page-length budget (site-mobile-check.mjs PAGE_MAX); keyboard users reach every card with Tab, the row scrolls along */
@media (max-width: 640px) {
  .wp-group-short { min-width: 0; max-width: 100%; }
  .wp-group-short .wp-group-lead { hyphens: manual; }   /* short lead: page hyphenation split "Sei-ten" at 375 px */
  .wp-group-short .wp-cards { width: 100%; max-width: 100%; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; }
  .wp-group-short .wp-card-item { scroll-snap-align: start; position: relative; }   /* contains the absolutely placed .sr-only text, which would otherwise widen the page */
}
@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; }
/* 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; } }
/* Home "Starten": card rows on a subgrid so both CTA rows line up although only the support card has the legal note */
@supports (grid-template-rows: subgrid) {
  .hp-start-band .lp-pair-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; justify-items: start; }
  .hp-start-band .lp-pair-card .lp-pair-cta { margin: 0; align-self: end; }
}
.hp-start-band .lp-pair-cta .lp-link { color: var(--ink-soft); }
.hp-start-legal { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; color: var(--ink-faint); font-size: .88rem; line-height: 1.5; }
.hp-start-legal .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
/* Draft B (27.10.2026): questions full width, two columns from 641 px; then one line of links */
#starten .hp-start-faq .lp-faq-embedded { margin-top: 40px; max-width: none; }
.hp-start-links { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 24px 0 0; }
.hp-start-links .lp-link { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) { .hp-start-links { flex-direction: column; align-items: flex-start; gap: 12px; } }
/* UX1 U3 (01.11.2026): /regelwerke "In Vorbereitung" as one compact line with the enquiry link, descriptions folded */
.lp-soon { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.lp-soon-line { margin: 0; line-height: 1.7; color: var(--ink-soft); }
.lp-soon-item { white-space: nowrap; }
.lp-soon-tag { color: var(--ink-faint); font-size: .9em; white-space: nowrap; }
.lp-soon-ask { display: inline-block; margin-left: 12px; }
.lp-soon-ask .lp-link { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; }
.lp-soon-more { margin: 8px 0 0; }
.lp-soon-more summary { cursor: pointer; color: var(--ink-soft); padding-block: 8px; }
.lp-soon-more dl { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 6px 24px; margin: 8px 0 0; }
.lp-soon-more dt { font-weight: 600; }
.lp-soon-more dd { margin: 0; color: var(--ink-soft); }
.lp-soon-more > p { margin: 16px 0 0; }   /* the closing sentence below the definition list needs its own gap (2.27) */
@media (max-width: 640px) {
  .lp-soon-item { white-space: normal; }
  .lp-soon-ask { display: block; margin: 8px 0 0; }
  .lp-soon-more dl { grid-template-columns: minmax(0, 1fr); }
  .lp-soon-more dd { margin-bottom: 8px; }
}
@media (pointer: coarse) { .lp-soon-more summary { padding-block: 12px; } }

/* 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. */
/* Safety net without the fit script (2.31, header overflow): the fit above is JavaScript. Without it (no JavaScript, script
   blocked or not yet run, headless measurements right after load) a long menu, e.g. fr/es/pt/it at 1221 to 1520 px, pushed the
   action buttons out of the viewport and the page scrolled sideways (scrollWidth up to 1508 px at 1280 px). Until app.js has
   measured the header (it adds .lp-head-fit as its first step) the header may wrap instead: the buttons drop to a second row
   and the menu itself wraps if it is still too wide. Once the script has run the rule no longer applies, so the measured
   layouts (full, tight, compact) of the fit stay exactly as before. */
@media (min-width: 1221px) {
  .lp-head:not(.lp-head-fit) .lp-head-inner { flex-wrap: wrap; row-gap: 8px; padding-block: 8px; }
  .lp-head:not(.lp-head-fit) .lp-nav { min-width: 0; }
  .lp-head:not(.lp-head-fit) .lp-nav-list { flex-wrap: wrap; }
  .lp-head:not(.lp-head-fit) .lp-actions { margin-left: auto; }
}
/* First stage before the menu button (Fable overall test 2.0.4, L5): fr/it/pt labels at 1280 px stay in the open navigation
   with tighter item padding and gaps; app.js sets .lp-head-tight and falls back to .lp-head-compact if it still does not fit. */
.lp-head-tight .lp-head-inner { gap: 10px; }
.lp-head-tight .lp-nav .lp-nav-item { padding: 8px 4px; font-size: .88rem; }
.lp-head-tight .lp-nav-list { gap: 0; }
.lp-head-tight .lp-actions { gap: 6px; }
.lp-head-tight .lp-actions .btn { padding-left: 12px; padding-right: 12px; }
.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) ---------- */
/* Product video slot (lp_video()); hidden until the file exists; 16:9 box reserved before the poster loads, transcript below */
.lp-video { margin: 28px auto 0; max-width: 1100px; }
.lp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--inset); }
/* One line under the film (208): note left, text version right; opened, the list uses the full width below. Phone: stacked. */
.lp-video-bar { position: relative; margin-top: 8px; }
.lp-video-demo { position: absolute; left: 0; top: 0; margin: 0; line-height: 44px; font-size: .82rem; color: var(--ink-soft); }
.lp-video-tx { margin-top: 0; color: var(--ink-soft); }
.lp-video-tx summary { cursor: pointer; display: block; width: fit-content; margin-left: auto; min-height: 44px; line-height: 44px; font-weight: 600; }
.lp-video-tx ol { margin: 4px 0 0; padding-left: 1.4em; }
@media (max-width: 560px) { .lp-video-demo { position: static; line-height: 1.4; padding-top: 6px; } .lp-video-tx summary { margin-left: 0; } }
/* "Ohne Schulung loslegen" block below the film: three numbered cards */
.lp-getstarted { max-width: 1100px; margin: 48px auto 0; }
.lp-getstarted-steps { list-style: none; counter-reset: gs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; max-width: 900px; }
.lp-getstarted-steps li { counter-increment: gs; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.35; hyphens: manual; overflow-wrap: normal; }
.lp-getstarted-steps li::before { content: counter(gs); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dark); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font: 700 .85rem var(--font-sans); }
@media (max-width: 760px) { .lp-getstarted { margin-top: 36px; } .lp-getstarted-steps { grid-template-columns: 1fr; } }
.lp-carousel-lead { margin-top: 28px; }
.lp-carousel-note { margin-top: 4px; margin-bottom: 12px; color: var(--ink-soft); font-size: .82rem; }
/* Home: screenshot carousel folded behind the film (native details, works without JS) */
.lp-fold { margin-top: 20px; }
.lp-fold-sum { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; cursor: pointer; font-weight: 600; color: var(--accent-dark); text-align: center; }
.lp-fold-sum::after { content: ''; width: 8px; height: 8px; margin-left: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.lp-fold[open] > .lp-fold-sum::after { transform: rotate(-135deg); }
.lp-fold-sum:hover { text-decoration: underline; }
.lp-fold[open] > .lp-fold-sum { margin-bottom: 12px; }
/* 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; }
/* Result (WEB-CALC-RESULT, Marc 04.11.2026 "calm"): only the saving block is a card; costs, duration and the details
   group are separated by white space and thin rules; the closing block holds the next steps and the PDF download. */
.bk-details { margin: 0 0 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-more { padding: 6px 0; margin: 0; }
.bk-more + .bk-more { border-top: 1px solid var(--line); }
.bk-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; box-sizing: border-box; padding: 10px 0; }
.bk-more[open] > summary { margin-bottom: 8px; }
.bk-more[open] { padding-bottom: 16px; }
.bk-chips { list-style: none; margin: 0 0 28px; 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 32px; border: 1px solid var(--line); border-top: 4px solid var(--accent-bright); border-radius: var(--radius-lg); padding: 28px 28px 22px; background: var(--surface); }
.bk-save.is-none { border-top-color: var(--line-strong); }
.bk-kicker { margin: 0 0 8px; 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: clamp(1.7rem, 7.4vw, 2.75rem); line-height: 1.1; 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 22px; color: var(--ink); }
.bk-kpis { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); color: var(--ink); font-size: .93rem; line-height: 1.45; }
.bk-kpis li { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--inset); }
.bk-saves-lead { margin: 0 0 14px; color: var(--ink); }
.bk-saves { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0 0 16px; }
.bk-rt { padding: 18px 18px 14px; border-radius: var(--radius-lg); background: var(--inset); }
.bk-rt-h { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.bk-rt .bk-save-v { font-size: clamp(1.25rem, 6.2vw, 1.7rem); color: var(--accent-dark); white-space: nowrap; }
.bk-rt .bk-save-l { margin: 0 0 12px; font-size: .9rem; }
.bk-rt-l { margin: 0; padding: 0 0 0 18px; color: var(--ink); font-size: .95rem; }
.bk-rt-l li { margin: 0 0 6px; }
.bk-saves-hint { margin: 0 0 16px; color: var(--ink); }
.bk-save-note { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.bk-save .bk-save-note { padding-top: 14px; border-top: 1px solid var(--line); }
.bk-result > .bk-save-note { margin: 0 0 24px; }
.bk-weak { margin: -16px 0 32px; color: var(--ink); }
.bk-costs, .bk-time { margin: 0 0 32px; padding: 28px 0 0; border-top: 1px solid var(--line); }
.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 20px; font: 400 1.35rem/1.25 var(--font-display); color: var(--ink); }
.bk-h3 .bk-tip { margin-left: 6px; }
.bk-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.bk-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.bk-bar-l { font-size: .95rem; }
.bk-bar-v { font-size: 1rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bk-bar-g { grid-column: 1 / -1; width: 100%; height: 12px; display: block; margin-top: 4px; }
.bk-foot { margin: 20px 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
.bk-foot p { margin: 0 0 6px; }
.bk-foot p:last-child { margin: 0; }
.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: 0; padding: 24px; border-radius: var(--radius-lg); background: var(--inset); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bk-offer .bk-pdf { margin: 0 0 0 auto; }
@media (max-width: 560px) {
  .bk-save, .bk-offer { padding: 20px 16px; }
  .bk-wbars .bk-bar { grid-template-columns: minmax(0, 1fr); }
  .bk-wbars .bk-bar-v { text-align: left; }
  .bk-wbars .bk-bar-v .bk-note-s { display: inline; margin-left: 6px; }
  .bk-offer, .bk-offer .lp-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
  .bk-offer .bk-pdf { margin: 0; }
  .bk-offer .btn { width: 100%; justify-content: center; }
}
@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 */
/* Benefits box of "Noch kein Partner?" on /partners: one wide card, so it stays still on hover (.lp-box scales small cards only) */
.lp-partner-benefits { margin-top: 8px; padding: 28px 32px; }
.lp-partner-benefits:hover { transform: none; }
.lp-partner-benefits-h { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0 0 20px; color: var(--ink); }
.lp-partner-benefits-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.lp-partner-benefits-cols h4 { font-family: var(--font-sans); font-size: .95rem; font-weight: 600; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--accent-dark); }
.lp-partner-benefits .lp-points h5 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; margin: 0 0 3px; color: var(--ink); }
.lp-partner-benefits-head .lp-intro, .lp-partner-benefits-cta .lp-intro { margin-inline: auto; text-wrap: balance; }
.lp-partner-benefits-cta { margin-top: 28px; }
@media (max-width: 900px) { .lp-partner-benefits-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .lp-partner-benefits { padding: 20px 16px; } }
.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; }
/* 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 a:focus-visible { outline: 2px solid var(--btn-ink); outline-offset: 2px; }   /* Tiefsee on Messing 7.4 : 1, the same in both themes */
.pil-bar a.pil-bar-cta { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--btn-ink); border-radius: 6px; background: var(--btn-ink); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pil-bar a.pil-bar-cta:hover { background: transparent; color: var(--btn-ink); }
.pil-bar p a { white-space: nowrap; }
/* Phone: one text block, the button becomes a link in the last line and the close button sits in a gap the text flows around, so the bar stays about 100 px high */
@media (max-width: 640px) {
  .pil-bar-inner { display: block; position: relative; padding-top: 8px; padding-bottom: 8px; font-size: .85rem; line-height: 1.4; }
  .pil-bar p, .pil-bar a.pil-bar-cta { display: inline; line-height: inherit; }
  .pil-bar p a { padding-block: 4px; }
  .pil-bar p::before { content: ""; float: right; width: 36px; height: 30px; }
  .pil-bar a.pil-bar-cta { min-height: 0; margin-left: 8px; padding: 4px 0; border: 0; background: none; color: var(--btn-ink); text-decoration: underline; text-underline-offset: 2px; }
  .pil-bar a.pil-bar-cta:hover { background: none; }
  .pil-bar a.pil-bar-close { position: absolute; top: 0; right: 4px; min-width: 44px; min-height: 44px; }
}
@media print { .pil-bar { display: none; } }
.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-bar-mid { fill: var(--ink); }

/* ---------- 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-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 */
/* 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-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); }
/* Enterprise card: the name links to /enterprise; at 320 px the extra link goes, its row would break the phone budget of /pakete */
.pk-mini-name { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 360px) { .pk-mini-more { display: none; } }
.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; }
.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; }
/* PR8: the approved comparison has more rows; on phones a wider label column and tighter rows keep the page in its budget (the table scrolls inside its region) */
@media (max-width: 640px) { .pk-table { min-width: 760px; } .pk-table th, .pk-table td { padding: 6px 10px; } .pk-table tbody th:first-child { min-width: 16rem; } }
.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 { 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; }
  /* WEB-SALES 6 (Marc 26.10.2026): one row per package, name with the audience below, price on the right. The former three
     columns let long words ("Lieferkette", "Organisationen") run into the price at 320 px (WCAG 1.4.10, 1.4.12). */
  .pk-stairs a, .pk-stairs-5 a, .pk-stairs a[class*="pk-step-"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; height: auto; min-height: 48px; padding: 12px 16px; border-radius: 10px; }
  .pk-s-name, .pk-stairs-5 .pk-s-name { grid-column: 1; font-size: 1rem; }
  .pk-s-for, .pk-stairs-5 .pk-s-for { grid-column: 1; display: block; font-size: .875rem; overflow-wrap: anywhere; hyphens: auto; }
  .pk-s-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; 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; } }
@media (min-width: 641px) {
  .pk-table { font-size: .95rem; line-height: 1.5; }
  .pk-table caption { padding: 14px 18px; }
  .pk-table th, .pk-table td { padding: 14px 18px; }
  .pk-table .pk-group th { padding-top: 16px; padding-bottom: 16px; }
}

.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 { 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 two link columns as an accordion (UX1: one row fewer), legal line at the bottom */
  .lp-foot { padding-top: 12px; }
  .lp-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-foot-about { padding-bottom: 0; }
  /* footer variant A: "Portale" is the first accordion row, directly below the button pair */
  .lp-foot-portals { margin-top: 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; }
  /* 2.25: the rows sit flush (app.css gives every details 10 px below; 30 px of the 500 px budget), the legal note runs tighter */
  .lp-foot .lp-foot-col { margin: 0; }
  .lp-foot-bottom { margin-top: 0; }
  .lp-foot .lp-foot-bottom { padding-top: 8px; }   /* air between the divider and the legal note (.lp-wrap resets the padding) */
  .lp-foot-bottom p { line-height: 1.4; }
  .lp-foot-bottom nav { justify-items: start; }
  .lp-foot .lp-foot-legal { justify-content: flex-start; }
  /* 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; }
  /* one row, but the two buttons may shrink and break inside: longer translations (fr, nl, pt) must not run past 320 px
     (WCAG 1.4.10, 26.10.2026) nor add a second row to the footer (FOOTER_MAX of site-mobile-check.mjs) */
  .lp-foot .lp-foot-actions > * { min-width: 0; flex: 0 1 auto; }
  .lp-foot .lp-foot-actions .btn { padding: 4px 10px; font-size: .85rem; text-align: center; white-space: normal; }

  /* 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; }
  .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; }

  /* 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; }

  /* 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; }
}
/* 2.26: narrower gaps on phones keep the bottom rows short, so the footer stays within FOOTER_MAX (500 px) without raising the limit
   (the 44 px rows are the touch-target rule); since 2.27 the strip has two rows of six and three links (see .lp-foot-meta) */
@media (pointer: coarse) and (max-width: 640px) {
  .lp-foot .lp-foot-legal { column-gap: 6px; }
  .lp-foot { padding-bottom: 6px; }   /* 8 px of the 14 px: at 320 px the strip needs a fourth row (German, Polish), this keeps the footer within 500 px */
}
@media (pointer: coarse) and (max-width: 360px) {
  .lp-foot-actions { gap: 8px 10px; flex-wrap: nowrap; }
  /* 2.25: a label that wraps (fr, pt with both buttons) stays inside the 44 px row instead of growing to 55 px */
  .lp-foot-actions .btn { padding: 4px 12px; font-size: .9rem; }
  .lp-foot .lp-foot-legal { column-gap: 6px; }
  .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; }
/* In-text screenshot of a guide (block "img", templates/landing/guides/page.php): full column width, caption below */
.lp-guide-figure { margin: 20px 0 28px; }
.lp-guide-figure .lp-shot img { display: block; }
.lp-guide-figure-narrow { max-width: 420px; }
@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); }
/* Home page (draft B): the ASVS card in the foot of the security section, with the level rings of /trust (Marc 19.10.2026).
   Smaller rings (70 px) so the three fit beside the text on wide screens and in one row at 375 px; text right of the rings
   from 761 px, stacked below */
.hp-asvs { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }   /* built like the four .lp-trust tiles above it */
.hp-asvs h3 { margin: 0; font-size: 1.02rem; }
.hp-asvs h3 a { color: inherit; display: inline-block; padding-block: 2px; }
.hp-asvs h3 a:hover { color: var(--accent-dark); }
.hp-asvs p { margin: 0; font-size: .92rem; line-height: 1.45; }
.hp-asvs p.hp-asvs-count { font-size: 1rem; font-weight: 600; }   /* absolute count of TrustFacts::asvsTotals(), the first thing read after the title */
.hp-asvs p.hp-asvs-note { font-size: .85rem; line-height: 1.8; color: var(--ink-soft); } /* 1.8 keeps the inline "Details" link at 24 px or more (WCAG 2.5.8, 320 px) */
.hp-asvs .lp-link { display: inline-block; padding-block: 2px; }
.hp-asvs .asvs-badges { margin: 4px 0; justify-content: flex-start; gap: 18px; }
.hp-asvs .asvs-badge { flex: 0 0 auto; }
.hp-asvs .asvs-ring { width: 70px; height: 70px; }
.hp-asvs .asvs-ring > span { width: 54px; height: 54px; font-size: 1rem; }
.hp-asvs .asvs-ring .icon { width: 24px; height: 24px; }
@media (min-width: 761px) {
  .hp-asvs { grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; row-gap: 6px; align-items: center; }
  .hp-asvs .asvs-badges { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .hp-asvs > h3, .hp-asvs > p { grid-column: 2; }
}
/* From 1001 px the foot follows the 4-column grid of .lp-trust-4: the card spans the first two tiles, the buttons the other two */
@media (min-width: 1001px) {
  .hp-sec-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hp-sec-foot .hp-asvs { grid-column: 1 / span 2; }
  .hp-sec-foot .sec-more { grid-column: 3 / span 2; justify-self: start; }
}
/* AI-WEB: the "in Kürze" card of the AI fill-in assistant spans the whole row below the six USP cards (templates/landing/_ai_highlight.php) */
.lp-usp .hp-usp-wide { grid-column: 1 / -1; }
.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; }
@media (min-width: 961px) { .lp-sec-hp1 .lp-slide { flex-basis: 50%; } }
.lp-trust-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lp-trust-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-trust-4 { grid-template-columns: minmax(0, 1fr); } }
/* L4 (2.06, page length, Fable): home page below the hero, tidier and shorter on wide screens by layout only (no content removed);
   phones keep the MOB2-D layout (swipe rows, one column) */
@media (min-width: 641px) {
  #besonders .lp-usp .lp-tile { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: start; }
  #besonders .lp-usp .lp-tile .lp-icon { grid-row: span 2; margin-top: 2px; }
  #besonders .lp-usp .lp-tile h3 { margin: 0; }
  .hp-sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 20px; }
  .hp-sec-foot .hp-asvs { flex: 1 1 560px; margin: 0; }
  .hp-sec-foot .sec-more { margin: 0; }
  .hp-start-faq .lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; border-bottom: 1px solid var(--line); }
  .hp-start-faq .lp-faq details:last-child { border-bottom: 0; }
}
.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) {
}
@media (pointer: coarse) {
}


/* 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; } }

/* ---------- Home hero (WEB-SALES 2, decision Marc 26.10.2026; replaces the 206 hero of 23.10.) ----------
   Headline, one short paragraph, two buttons side by side ("Kostenlos testen" and the free check, stacked below 640 px), then one
   small block: the trial note and one line of links (package price, guided tour). No demo request and no login link in the hero. */
.lp-hero .lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; }
.lp-hero .lp-cta .btn { justify-content: center; }
.lp-hero .lp-hero-meta { margin-top: 14px; color: var(--ink-faint); line-height: 1.7; }
.lp-hero .lp-hero-meta p { margin: 0; }
.lp-hero .lp-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
/* Text links in this line keep a 24 px tall hit area (WCAG 2.5.8), 44 px on touch devices */
.lp-hero .lp-hero-links .lp-link { display: inline-flex; align-items: center; min-height: 28px; font-weight: 600; }
@media (pointer: coarse) { .lp-hero .lp-hero-links .lp-link { min-height: 44px; } }
@media (max-width: 640px) {
  .lp-hero .lp-cta { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
}
.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; }
/* Pentest card and the two document cards of the request section on /trust (pentest report 2.06, Marc 23.10.2026) */
.tc-cards .lp-box p.tc-pentest-last { margin: 14px 0 10px; color: var(--ink); }
.tc-docs { margin-top: 20px; }
.tc-docs .lp-box { display: flex; flex-direction: column; gap: 12px; }
.tc-docs .lp-box h3 { margin-bottom: 0; }
.tc-docs .lp-box p.tc-docs-note { font-size: .9rem; }
.tc-docs .lp-box .btn { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; margin-top: auto; min-height: 44px; }

/* ===================================================================   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-dark); color: var(--on-accent); 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; }
/* WEB-SALES 13: closing screen = primary and secondary button, then applicability and prices as text links (.gt-next-actions is then a div around both rows) */
div.gt-next-actions { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.gt-next-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (min-width: 641px) { .gt-next .gt-next-actions { flex: none; } .gt-next .gt-next-buttons { flex-wrap: nowrap; } }   /* buttons side by side as in the draft */
.gt-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0; font-size: .95rem; }
.gt-next-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.lp-band .gt-next-links a { color: #edbb55; }
:root[data-theme="dark"] .gt-next-links a { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gt-next-links a { color: var(--accent-bright); } }
.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); }
/* Step change: picture and marked fields hide together until the new picture is decoded, then fade in as one (guided-tour.js render()) */
.gt-frame:not(.gt-in) > img, .gt-frame:not(.gt-in) > .gt-marks { opacity: 0; }
.gt-frame.gt-in > img, .gt-frame.gt-in > .gt-marks { animation: gt-in .3s ease-out; }
@keyframes gt-in { from { opacity: 0; } to { opacity: 1; } }
.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; }
}
/* GT1 play mode (206, switch Site::FEATURES['tour_play'], GuidedTour::playOn(); guided-tour.js "Play mode"). .is-v2 = stage with it: larger
   picture on desktop; .is-play = steps advance by themselves; .is-paused freezes the fill; .is-chend = chapter end card.
   The picture stands still (no zoom since 2.10, it drifted away from the marked fields and flickered). Pause control 44 px; with
   prefers-reduced-motion the chapter opens paused, see the script. */
.gt-play-note { margin-top: 10px; }
.gt-facts-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .92rem; }
.gt-stage.is-v2 .gt-bar { position: relative; }
.gt-stage.is-v2 .gt-body { grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr); }
.gt-stage.is-v2 .gt-frame { width: min(100%, calc((100vh - 170px) * 1.6)); }
.gt-stage.is-v2.is-end .gt-body { grid-template-columns: minmax(0, 640px); }
.gt-pp { display: inline-flex; align-items: center; gap: 6px; }
.gt-pp[hidden] { display: none; }
.gt-pp .icon { width: 18px; height: 18px; }
.gt-playbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.gt-playbar ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; height: 100%; }
.gt-playbar li { flex: 1; background: var(--line); overflow: hidden; }
.gt-playbar li.is-done .gt-fill { width: 100%; }
.gt-playbar .gt-fill { display: block; width: 0; height: 100%; background: var(--accent); }
.gt-playbar li.is-current .gt-fill { animation: gt-fill linear forwards; }
@keyframes gt-fill { from { width: 0; } to { width: 100%; } }
.gt-stage.is-paused .gt-playbar .gt-fill { animation-play-state: paused; }
.gt-stage.is-play .gt-card { transition: box-shadow .2s ease; }
.gt-chend-next { margin: 0 0 4px; color: var(--ink-soft); }
.gt-demo-note { margin: 0 0 10px; font-size: .8rem; color: var(--ink-faint); }
.gt-chend-thumbs { display: flex; gap: 8px; margin: 0 0 16px; overflow: hidden; }
.gt-chend-thumbs img { flex: 0 1 112px; min-width: 0; width: 112px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.gt-chend-actions { margin-top: 16px; }
.gt-chend-more { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; }
.gt-linkbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-dark); font: 600 .95rem var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gt-linkbtn:hover, .gt-linkbtn:focus-visible { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gt-frame.gt-in > img, .gt-frame.gt-in > .gt-marks { animation: none; } .gt-stage.is-play .gt-card { transition: none; } }
/* Chapter end on desktop: the chapter's last picture stays, dimmed, behind the end card (decorative; the card holds everything) */
@media (min-width: 901px) {
  .gt-stage.is-v2.is-chend .gt-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .gt-stage.is-v2.is-chend .gt-stage-pic { display: flex; grid-area: 1 / 1; width: 100%; opacity: .22; filter: saturate(.4); pointer-events: none; }
  .gt-stage.is-v2.is-chend .gt-stage-pic .gt-marks { display: none; }
  .gt-stage.is-v2.is-chend .gt-card { grid-area: 1 / 1; align-self: center; position: relative; z-index: 2; width: min(640px, 100%); box-sizing: border-box; box-shadow: var(--shadow-sm); }
}
@media (max-width: 900px) { .gt-stage.is-v2 .gt-body { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .gt-pp .gt-pp-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gt-pp { justify-content: center; padding: 0; }
  .gt-facts-row { display: grid; }
  .gt-stage.is-v2 .gt-frame { width: auto; }
  .gt-chend-actions .btn { flex: 1 1 100%; justify-content: center; }
  .gt-stage.is-v2.is-end .gt-card { margin-top: 0; border-radius: var(--radius-lg); }   /* end cards are no bottom sheet: never under the header */
  .gt-stage.is-v2.is-end .gt-card::before { display: none; }
  /* While it plays on a phone the picture gives the card more room, so "Mit Complass" is readable before the step moves on */
  .gt-stage.is-v2 .gt-stage-pic { height: 46vh; height: 46dvh; }
  .gt-stage.is-play .gt-legend { display: none; }
}
/* 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; }
/* /faq as topic cards (WEB-SALES 9): topic list as chips of jump links, search revealed by faq-search.js, topic link at the bottom of each card */
.lp-faq-page [hidden] { display: none !important; }
.lp-faq-search { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; max-width: 560px; }
.lp-faq-search label { font-size: .9rem; font-weight: 600; }
.lp-faq-search input { min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; width: 100%; }
.lp-faq-status { min-height: 1.5em; margin: 0 0 8px; color: var(--ink-soft); }
.lp-faq-toc-h { margin: 0 0 8px; font-size: .9rem; font-weight: 600; }
.lp-faq-page .lp-faq-toc { columns: auto; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 32px; }
.lp-faq-page .lp-faq-toc li { margin: 0; }
.lp-faq-page .lp-faq-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 500; font-size: .95rem; }
.lp-faq-page .lp-faq-toc a:hover, .lp-faq-page .lp-faq-toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lp-faq-page + .lp-faq-page { padding-top: 0; }
.lp-faq-cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.lp-faq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px 28px 24px; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 90px; }
.lp-faq-card-wide { grid-column: 1 / -1; }
.lp-faq-card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 20px 0 8px; }
.lp-faq-card header h2 { margin: 0; font-size: 1.5rem; }
.lp-faq-card .lp-faq summary { overflow-wrap: anywhere; }
.lp-faq-more { margin: 16px 0 0; font-size: .95rem; font-weight: 600; }
.lp-faq-more a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 8px; }
@media (max-width: 640px) {
  /* Phone budget (8 screens, site-mobile-check): topic chips in one scrollable row, tighter cards without borders between them */
  .lp-faq-page .lp-faq-toc { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 16px; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .lp-faq-page .lp-faq-toc a { white-space: nowrap; }
  .lp-faq-cards { gap: 8px; }
  .lp-faq-card { padding: 0 12px 4px; border-radius: 8px; }
  .lp-faq-card header { padding: 12px 0 4px; }
  .lp-faq-card header h2 { font-size: 1.25rem; }
  .lp-faq-more { margin: 0; }
  .lp-faq-more a { padding-block: 10px; }
}

/* ga-6 (1.93) /sicherheit: one section of blocks, folded extra tiles, layers figure aligned to the top (the "Inhalt" menu and the chip
   lines were replaced by the core statements, the jump line and the area cards of WEB-SALES 11, 26.10.2026) */
.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-layers { align-items: start; }
@media (max-width: 640px) {
  .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 */
/* UX1 U4 (01.11.2026): scenarios and FAQ in one section (draft B), the former closing section as the last line */
.sec-faq-h { margin: 32px 0 8px; }
.sec-cases-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent-dark); margin-top: 8px; }
@media (min-width: 641px) {
  /* Wide screens: the fold stays open and its summary is hidden, so cases five to nine continue the two-column grid */
  .sec-cases-more > summary { display: none; }
  .hp-start-faq .sec-cases:first-child { border-bottom: 0; }
}
.sec-ask { margin: 32px 0 0; max-width: 760px; }
.sec-ask-links { align-items: center; margin-top: 16px; }
@media (max-width: 640px) { .sec-faq-h { margin-top: 20px; } .sec-ask { margin-top: 20px; } .sec-ask-links { margin-top: 12px; } }

/* ---------- Framework pages: offer cards of the minimum selection (WEB-SALES 1, Marc 26.10.2026; _package_cards.php lp_package_offer()) ---------- */
.pc-packages-offer > .lp-h2, .pc-packages-offer > .lp-intro { max-width: 720px; }
.pc-offer { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.pc-offer-card { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--radius-lg); }
.pc-offer-min { flex-basis: 420px; background: var(--surface); border: 2px solid var(--accent-bright); box-shadow: 0 8px 24px rgba(19, 35, 63, .10); }
.pc-offer-up { background: var(--inset); border: 1px solid var(--line); }
.pc-offer-card :is(h3, h4) { margin: -12px 0 0; font: 400 1.6rem/1.2 var(--font-display); color: var(--ink); }
.pc-offer-eyebrow { margin: 0; font: 600 .8rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.pc-offer-eyebrow-muted { color: var(--ink-faint); }
.pc-offer-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pc-offer-amount { font-size: 2rem; font-weight: 600; line-height: 1; }
.pc-offer-price-lg .pc-offer-amount { font-size: 2.75rem; }
.pc-offer-per { font-size: .95rem; color: var(--ink-faint); }
.pc-offer-text { margin: 0; color: var(--ink-soft); }
.pc-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; line-height: 1.5; }
.pc-offer-list li { display: flex; gap: 12px; }
.pc-offer-list strong { font-weight: 600; }
.pc-offer-check { flex: none; display: inline-flex; margin-top: 2px; color: var(--ok-ink); }
.pc-offer-check .icon { width: 20px; height: 20px; stroke-width: 2.5; }
.pc-offer-cta { margin-top: auto; flex-wrap: wrap; gap: 12px; }
.pc-offer-card .btn { max-width: 100%; white-space: normal; }
.pc-offer-card a { overflow-wrap: anywhere; }
.pc-offer-card .pc-cra-dist { margin: 0; }
.pc-offer-notes { max-width: 860px; margin-top: 24px; display: grid; gap: 8px; font-size: .9rem; line-height: 1.6; color: var(--ink-faint); }
.pc-offer-notes p { margin: 0; }
.pc-offer-notes a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.pc-packages-result .pc-offer { margin-top: 12px; }   /* offer cards inside a tool result (AI risk check, CRA deadlines) */
/* Statistics opt-out under the last question (DEMAND-STATS, Marc 04.11.2026): set apart from the answers, link visible as a link */
.ds-optout { display: grid; gap: 2px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-faint); }
.ds-optout .check { color: inherit; }
.ds-optout-more { justify-self: start; margin-left: 30px; padding: 4px 0; color: var(--accent-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .pc-offer-card { padding: 20px; } .pc-offer-price-lg .pc-offer-amount { font-size: 2.25rem; } }
@media print { .pc-offer-min { box-shadow: none; } }

/* ---------- Home: "Funktioniert mit" as one plain line (WEB-SALES 2, Marc 26.10.2026; index.php #funktioniert-mit-kurz) ---------- */
.ww-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.ww-line-h { margin: 0; font: 600 .9rem var(--font-sans); color: var(--ink-faint); }
.ww-line-list { flex: 1 1 520px; display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; font-weight: 600; color: var(--ink-soft); }
.ww-line-link { font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; }
.ww-line-note { flex-basis: 100%; color: var(--ink-faint); }
.ww-line-note > summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ww-line-note > p { margin: 6px 0 0; max-width: 860px; }
@media (pointer: coarse) { .ww-line-link, .ww-line-note > summary { min-height: 44px; } }

/* ---------- Home: "Was Complass abdeckt" in three columns (WEB-SALES 2, Marc 26.10.2026; index.php #funktionen) ---------- */
.hp-cover { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.hp-cover-col { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius-lg); background: var(--inset); }
.hp-cover-col h3 { margin: 0; font: 600 1.1rem var(--font-sans); color: var(--ink); }
.hp-cover-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hp-cover-col li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; color: var(--ink); }
.hp-cover-col li a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.hp-cover-col li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-cover-more { margin-top: auto; font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
@media (pointer: coarse) { .hp-cover-col li a, .hp-cover-more { min-height: 44px; } }

/* ---------- Role and sector pages: add-on prices in the offer card and compact further packages (WEB-SALES 5, Marc 26.10.2026) ---------- */
.pc-offer-item { flex: 1 1 auto; min-width: 0; }
.pc-offer-add { flex: none; white-space: nowrap; font-size: .95rem; color: var(--ink-faint); }
.lp-pkgs-compact { margin-top: 40px; }
.lp-pkgs-compact > .lp-h3 { margin: 0 0 16px; font: 400 1.6rem/1.2 var(--font-display); }
.lp-pkg-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.lp-pkg-mini { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.lp-sec-white .lp-pkg-mini { background: var(--inset); }
.lp-pkg-mini:hover { border-color: var(--accent-bright); text-decoration: none; }
.lp-pkg-mini:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.lp-pkg-mini-soon, .lp-pkg-mini-planned { background: transparent !important; border-style: dashed; border-color: var(--line-strong); }
.lp-pkg-mini-name { font-weight: 600; font-size: 1.05rem; }
.lp-pkg-mini-state { font-size: .82rem; color: var(--ink-faint); }
.lp-pkg-mini-text { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.lp-pkg-mini-foot { margin-top: auto; padding-top: 4px; font-size: .95rem; }
.lp-pkg-mini-per { color: var(--ink-faint); }
.lp-pkg-mini-more { font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Framework pages (WEB-SALES 4, Marc 26.10.2026; templates/landing/_regelwerk.php) ----------
   One column width for every section (.lp-wrap, text lines capped at about 760 px), applicability with the free check as a
   button and the legal note as a text line, the legal basis as a link list on the right, deadlines as cards, the counts
   of "Wie Complass hilft" in the heading row and the matching modules as one line of links. */
.fw-text > .lp-intro, .fw-text > .lp-note, .fw-text > p { max-width: 760px; }
.fw-betroffen { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.fw-betroffen .lp-intro { max-width: 760px; }
/* Website look "Stripe": heading over both columns, the legal basis as a quiet card beside the text (Fable review 02.11.2026) */
.fw-betroffen { row-gap: 20px; }
.fw-betroffen > .lp-h2 { grid-column: 1 / -1; margin: 0; }
.fw-betroffen > div > .lp-intro:first-child { margin-top: 0; }
.fw-refs { background: var(--inset); border-radius: 12px; padding: 20px 24px 8px; }
.fw-refs > .lp-h3, .fw-refs > h3.lp-h3 { font: 600 .75rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 6px; }
.fw-check-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }
.fw-check-cta .btn { max-width: 100%; white-space: normal; text-align: center; }
.fw-check-cta span { font-size: .9rem; color: var(--ink-faint); }
.fw-legal-line { margin: 16px 0 0; max-width: 760px; font-size: .9rem; line-height: 1.6; color: var(--ink-faint); }
.fw-refs > .lp-h3 { font: 600 1rem var(--font-sans); color: var(--ink-soft); margin: 0 0 12px; }
.fw-refs .lp-refs { gap: 0; }
.fw-refs .lp-refs li { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.fw-refs .lp-refs li:last-child { border-bottom: 0; }
.fw-refs .lp-refs li > .lp-ref-what { flex: none; font-size: .9rem; }
.fw-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.fw-dates li { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-top: 3px solid var(--accent-bright); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--inset); }
.fw-dates p { margin: 0; }
.fw-date-when { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.fw-date-what { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.fw-date-ref { margin-top: auto !important; font-size: .9rem; font-weight: 600; }
.fw-help-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.fw-help-head .lp-h2 { margin: 0; }
.fw-help-head .lp-facts { margin: 0; }
.fw-help { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.fw-help-points .lp-points { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.fw-help-points .lp-points li { display: block; }
.fw-help-points .lp-points .lp-icon { display: none; }
.fw-related { padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); line-height: 1.9; }
.fw-related .lp-link { font-weight: 600; }
@media (max-width: 900px) { .fw-betroffen, .fw-help { grid-template-columns: minmax(0, 1fr); } }
/* Phones: the further packages as short rows (name, price, action) so the section keeps the page budget with the prices visible */
@media (max-width: 640px) {
  .lp-pkgs-compact { margin-top: 32px; }
  .lp-pkg-minis { gap: 10px; }
  .lp-pkg-mini { padding: 14px 16px; gap: 4px; }
  .lp-pkg-mini-text { display: none; }
  .pc-offer { gap: 16px; }
  .pc-offer-card { gap: 14px; }
  .pc-offer-list { gap: 8px; font-size: .9rem; line-height: 1.45; }
  .pc-offer-notes { font-size: .85rem; line-height: 1.5; }
}

/* ---------- /sicherheit (WEB-SALES 11, Marc 26.10.2026; templates/legal/sicherheit.php) ----------
   Three core statements in the head, the jump targets as one line of text, every area as a card in two columns with its first
   four measures and "Alle {n} Maßnahmen" folded at the bottom; the roles table is a full-width card. */
.sec-core { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.sec-core li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.sec-core a { color: var(--ink); text-decoration: none; }
.sec-core a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sec-core strong { font-size: 1rem; font-weight: 600; }
.sec-core span { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.sec-jump p { margin: 20px 0 0; font-size: .95rem; line-height: 1.9; color: var(--ink-soft); }
.sec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sec-cards > .sec-block + .sec-block { margin-top: 0; }
.sec-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); scroll-margin-top: 96px; }
.sec-card-wide { grid-column: 1 / -1; }
.sec-card .sec-bh { margin: 0; font: 400 1.45rem/1.25 var(--font-display); color: var(--ink); }
.sec-card-intro { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.sec-top { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: .95rem; line-height: 1.5; }
.sec-card .sec-fold { margin-top: auto; }
.sec-card .sec-fold > .sec-tiles { grid-template-columns: minmax(0, 1fr); }
.sec-card-wide .sec-fold > .sec-matrix-wrap { margin-top: 12px; }
.sec-card .sec-more { margin: 0; }
@media (max-width: 900px) { .sec-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sec-card { padding: 20px; } .sec-card .sec-bh { font-size: 1.25rem; } }

/* ---------- Jump line of long feature pages (WEB-SALES 12, Marc 26.10.2026; lp_jump_line() in _parts.php) ---------- */
.lp-jump p { margin: 0; font-size: .95rem; line-height: 1.9; color: var(--ink-soft); }
.lp-jump .lp-link { display: inline-block; }
@media (pointer: coarse) { .lp-jump p { line-height: 2.4; } }

/* ---------- Release 2.18 variant B (preview for Marc): header "Login" as a small menu ----------
   Native <details> (opens without JavaScript; app.js [data-lp-login] adds Escape, click outside, focus); the panel reuses the
   dropdown look of .lp-sub, right-aligned under the button so it never leaves the viewport. Hidden with the other header
   buttons wherever the mobile menu takes over (max-width 1000 px and .lp-head-compact), which lists the entries itself. */
/* margin: 0 cancels the global `details { margin: 0 0 10px }` (app.css), which pushed the button 5 px above its neighbours. */
.lp-login-menu { position: relative; margin: 0; }
.lp-login-menu > summary { list-style: none; }
.lp-login-menu > summary::-webkit-details-marker { display: none; }
.lp-login-menu > summary .icon:last-child { width: 14px; height: 14px; transition: transform var(--t); }
.lp-login-menu[open] > summary .icon:last-child { transform: rotate(180deg); }
.lp-login-menu .lp-login-list { position: absolute; top: calc(100% + 8px); right: 0; width: 272px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 40; }
.lp-login-menu[open] .lp-login-list { display: block; }
.lp-login-list a { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .lp-login-menu > summary .icon:last-child { transition: none; } }
@media (max-width: 1000px) { .lp-login-menu { display: none !important; } }
.lp-head-compact .lp-login-menu { display: none !important; }

/* Complass Academy landing page /academy (templates/landing/academy.php, Marc 01.11.2026): audience cards, four learning steps,
   course rows with a status tag, record points in two columns. Tokens only, so light and dark follow the theme; one column on
   phones (content first, no swipe row: the bullet points of the cards are the content). */
.ac-cards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ac-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.ac-who { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.ac-card-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.ac-card-h .lp-tag { margin-left: 6px; }
.ac-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; color: var(--ink-soft); font-size: .93rem; }
.ac-list li { display: flex; gap: 8px; align-items: flex-start; }
.ac-list .icon { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }
.ac-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-weight: 600; }
.ac-more .icon { width: 15px; height: 15px; }
.ac-flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ac-flow li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.ac-flow h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 12px 0 6px; color: var(--ink); }
.ac-flow p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.ac-courses { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ac-courses li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 14rem; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 18px; }
.ac-courses h3 { margin: 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink); }
.ac-courses p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.ac-courses .lp-tag { justify-self: end; font-size: .78rem; padding: 3px 10px; white-space: normal; }
.ac-points { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
:root[data-theme="dark"] .ac-who, :root[data-theme="dark"] .ac-list .icon { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ac-who, :root:not([data-theme="light"]) .ac-list .icon { color: var(--accent-bright); } }
@media (max-width: 960px) {
  .ac-cards { grid-template-columns: minmax(0, 1fr); }
  .ac-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-courses li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ac-courses .lp-tag { justify-self: start; }
}
@media (max-width: 640px) {
  .ac-flow, .ac-points { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) { .ac-more { min-height: 44px; } }
/* Akademie solo package 3 (Marc 02.11.2026): layout only. Cards are the shared .lp-box of the website look "Stripe", the hint the
   neutral .lp-hint, the fine print .lp-note (DESIGN-GUIDELINES section 14); here only the two grids and the price tables (tables keep
   their hairlines). One column below 768 px, price cells wrap, buttons full width on phones. */
.ac-compare, .ac-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; align-items: stretch; }
.ac-col h3 { margin: 0 0 8px; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ac-col ul { margin: 0; padding-left: 20px; color: var(--ink-soft); display: grid; gap: 6px; }
.ac-pcard { display: flex; flex-direction: column; }
.ac-pcard h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--ink); }
.ac-pcard .ac-sub { margin: 0 0 14px; color: var(--ink-soft); }
.ac-ptable { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.ac-ptable caption { text-align: left; font-weight: 600; color: var(--ink); padding-bottom: 6px; }
.ac-ptable th, .ac-ptable td { text-align: left; padding: 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
.ac-ptable th { font-weight: 500; color: var(--ink-soft); padding-right: 12px; }
.ac-ptable td { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ac-ptable th small, .ac-ptable td small { display: block; white-space: normal; font-weight: 400; color: var(--ink-soft); font-size: .85rem; }
.ac-pcard .ac-list { flex: 1; }
.ac-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.ac-fine { margin-top: 16px; }
@media (max-width: 767px) {
  .ac-compare, .ac-prices { grid-template-columns: minmax(0, 1fr); }
  .ac-btns .btn { flex: 1 1 100%; }
  .ac-ptable td { white-space: normal; }
}

/* Draft 223 (preview for Marc): team page "Über uns" and page "Karriere" (templates/landing/_about2/) */
.ab2-draft { margin: 18px 0 0; padding: 10px 14px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius-lg); background: var(--inset); color: var(--ink); font-size: .9rem; max-width: 640px; }
.ab2-lead { max-width: 780px; }
.ab2-stack { display: flex; justify-content: center; }
.ab2-stack span { display: block; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--surface); margin-left: -22px; background: var(--surface); }
.ab2-stack span:first-child { margin-left: 0; }
.ab2-sil { display: block; width: 100%; height: 100%; }
.ab2-sil-bg { fill: var(--inset); }
.ab2-sil-fg { fill: var(--ink-faint); opacity: .55; }
.ab2-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }   /* at most four side by side, more cards wrap (Marc 06.11.2026) */
.ab2-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px 16px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius-lg); background: var(--surface); }
.ab2-card .ab2-sil { width: 96px; height: 96px; margin-bottom: 8px; }
.ab2-card h3 { font: 600 1.05rem var(--font-sans); color: var(--ink); margin: 0; }
.ab2-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); hyphens: auto; overflow-wrap: break-word; min-width: 0; }
.ab2-card .ab2-role { font-weight: 600; color: var(--ink); }
.ab2-more { margin: 24px 0 0; color: var(--ink-soft); }
.ab2-ways, .ab2-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ab2-ways > li, .ab2-areas > li { display: flex; flex-direction: column; gap: 10px; }
.ab2-ways h3, .ab2-areas h3 { display: flex; align-items: flex-start; gap: 10px; font: 600 1.05rem var(--font-sans); color: var(--ink); margin: 0; }
.ab2-ways h3 .icon, .ab2-areas h3 .icon { width: 22px; height: 22px; flex: none; color: var(--accent-dark); }
:root[data-theme="dark"] .ab2-ways h3 .icon, :root[data-theme="dark"] .ab2-areas h3 .icon { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab2-ways h3 .icon, :root:not([data-theme="light"]) .ab2-areas h3 .icon { color: var(--accent-bright); } }
.ab2-ways p, .ab2-areas p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.ab2-ways p:last-child { margin-top: auto; }
.ab2-ways .lp-link { display: inline-block; padding-block: 4px; }
.ab2-areas .ab2-bring { font-weight: 600; color: var(--ink); font-size: .9rem; margin-top: 4px; }
.ab2-areas li ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .93rem; }
.ab2-areas li ul li + li { margin-top: 6px; }
/* Career areas (Marc 03.11.2026): text-heavy cards, so more air than the shared .lp-box (padding, gaps, title and "Das bringen
   Sie mit" set apart). Six-track grid: three cards per row, and an incomplete last row stretches to full width instead of
   leaving an empty slot (5 areas = 3 + 2 wide). Grid and padding only, no new colours, so contrast is unchanged. */
.ab2-areas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px; }
.ab2-areas > li { grid-column: span 2; padding: 30px 32px; gap: 12px; }
.ab2-areas > li:nth-child(3n+1):nth-last-child(2), .ab2-areas > li:nth-child(3n+2):last-child { grid-column: span 3; }
.ab2-areas > li:nth-child(3n+1):last-child { grid-column: 1 / -1; }
.ab2-areas h3 { margin-bottom: 4px; }
.ab2-areas .ab2-bring { margin-top: 10px; }
.ab2-steps { margin: 0 0 20px; padding-left: 24px; display: grid; gap: 14px; color: var(--ink-soft); }
.ab2-steps strong { color: var(--ink); }
.ab2-steps .lp-link { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .ab2-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tablet: three text-heavy columns get too narrow, so two per row; an odd last card takes the full width */
@media (min-width: 861px) and (max-width: 1100px) {
  .ab2-areas > li:nth-child(n):nth-child(n):nth-child(n) { grid-column: span 3; }
  .ab2-areas > li:nth-child(odd):last-child:nth-child(n):nth-child(n) { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ab2-ways, .ab2-areas { grid-template-columns: minmax(0, 1fr); }
  .ab2-areas { gap: 22px; }
  .ab2-areas > li, .ab2-areas > li:nth-child(n):nth-child(n):nth-child(n) { grid-column: 1 / -1; padding: 24px 22px; }   /* beats the last-row rules above */
  .ab2-stack span { width: 64px; height: 64px; margin-left: -16px; }
  .ab2-stack { justify-content: flex-start; order: -1; }
}
@media (max-width: 640px) {
  /* Phone: compact horizontal cards (photo left, text right) instead of a tall column of five */
  .ab2-team { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab2-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; text-align: left; padding: 14px; }
  .ab2-card .ab2-sil { width: 64px; height: 64px; margin: 0; grid-row: 1 / span 3; }
}
.ab2-draft-team { margin: 0 0 20px; }
/* preview only (ADR 0271): note on a card visitors do not see */
.ab2-card .ab2-consent { align-self: flex-start; margin-top: 6px; padding: 2px 8px; border: 1px dashed currentColor; border-radius: 999px; font-size: .8rem; font-weight: 600; }

/* Menu "Für wen" by situation (decision Marc 02.11.2026, templates/landing/_menu_who.php): situations, sectors in two
   columns, job roles; the same markup stacks in the mobile menu, the situations first. Role links stay at least 24 px high
   (WCAG 2.5.8) and 44 px on touch devices. */
.lp-nav .lp-sub-who { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lp-nav .lp-who-col { padding: 14px 0 10px; }
.lp-nav .lp-who-col + .lp-who-col { border-top: 1px solid var(--line); }
.lp-nav .lp-sub-who :is(.lp-who-sits, .lp-who-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 16px; }
.lp-who-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lp-who-h { display: block; padding: 0 0 4px; font: 600 .74rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.lp-who-sits, .lp-who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lp-who-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.lp-sub .lp-who-list a, .lp-nav .lp-sub .lp-who-list a { display: flex; padding: 6px 8px; margin-inline: -8px; font-weight: 400; font-size: .92rem; }
.lp-who-sits > li { padding: 6px 0; }
.lp-sub a.lp-who-sit, .lp-nav .lp-sub a.lp-who-sit { display: inline-flex; padding: 2px 0; font: 400 1.18rem/1.25 var(--font-display); color: var(--ink); }
.lp-sub a.lp-who-sit:hover { background: none; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.lp-who-roles { display: grid; justify-items: start; font-size: .84rem; color: var(--ink-faint); }
.lp-sub .lp-who-roles a, .lp-nav .lp-sub .lp-who-roles a { display: inline-flex; align-items: center; min-height: 24px; padding: 0; font-size: .84rem; font-weight: 400; color: var(--ink-soft); }
.lp-sub .lp-who-roles a:hover { background: none; color: var(--accent-dark); text-decoration: underline; }
.lp-sub .lp-who-roles a[aria-current] { box-shadow: none; background: none; color: var(--ink); font-weight: 600; }
.lp-sub a.lp-who-all { margin-top: auto; padding: 6px 0; display: inline-flex; gap: 0; color: var(--accent-dark); font-weight: 600; }
.lp-sub a.lp-who-all:hover { background: none; }
.lp-nav .lp-sub a.lp-who-all { position: absolute; top: 12px; right: 28px; margin: 0; padding: 2px 0; font-size: .86rem; }
.lp-nav .lp-sub a.lp-who-all:hover { text-decoration: underline; }
@media (pointer: coarse) { .lp-sub .lp-who-roles a { min-height: 44px; } }
/* Mobile menu: one column per group below each other, indented like the other sub-items */
.lp-mobile-nav .lp-sub-who { display: none; padding: 8px 24px 12px 28px; }
.lp-mobile-nav .lp-group-btn[aria-expanded="true"] + .lp-sub-who { display: grid; gap: 16px; }
.lp-mobile-nav .lp-sub-who .lp-who-list a:not(.btn), .lp-mobile-nav .lp-sub-who a.lp-who-sit, .lp-mobile-nav .lp-sub-who a.lp-who-all { padding: 10px 0; margin: 0; }
.lp-mobile-nav .lp-sub-who a.lp-who-sit { padding-bottom: 2px; font-size: 1.2rem; }
.lp-mobile-nav .lp-who-sits > li { padding: 2px 0 6px; }
.lp-mobile-nav .lp-sub-who .lp-who-roles a:not(.btn) { padding: 0; }
@media (max-width: 480px) { .lp-mobile-nav .lp-who-list-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Website look "Stripe" (decision Marc 02.11.2026, 09:51 CET: "Stripe nehmen"; tokens --st-*) ----------
   Stripe's look in the CI colours for every website page: a gradient head (Tiefsee base, Messing, Tiefsee 3 and Lagune
   light) with a slanted lower edge, eyebrows above headings, white sections (also .lp-sec-blue) parted by hairlines, cards
   without border but with a fine shadow, one slanted dark band where a page marks it (.st-dark) and the gradient on the closing
   band (.lp-band). Slants are clip-paths: <main> has the colour of the white sections (var(--surface)), so a cut corner shows
   exactly the neighbour's colour and nothing has to overlap. Every band keeps enough padding that focus rings stay inside.
   Legal texts (main with .lp-legal) and the public forms (.public-body, not this layout) keep their calm head. Demo material
   (live demo, film poster, screenshots, clips) stays light in both themes; the gradient head and the dark band are dark in
   both themes, so their text colours are fixed. Home page parts (hero, numbers row) follow under "Home page". */
:root {
  /* --st-a (page tone), --st-shadow-sm, --st-shadow and --st-mesh live in app.css (block "Portal look Stripe"), shared with the
     public forms and the portal; app.css loads before this file */
  --st-b: var(--bg); --st-card: var(--surface); --st-card-line: var(--line);
  --st-band: #0c1830; --st-skew: clamp(16px, 3.5vw, 48px);   /* flatter slants (Marc 02.11.2026, draft 3) */
}
/* Dark theme (Fable review 02.11.2026): the page one step darker than the cards, the dark band darker still, so the accent and
   the slants stay visible */
:root[data-theme="dark"] {
  --st-card-line: rgba(247, 243, 234, .12);
  --st-band: #07101f;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --st-card-line: rgba(247, 243, 234, .12);
  --st-band: #07101f;
} }
/* Every website section is white (light) or the page tone (dark); Nebelblau is gone (Marc 02.11.2026) */
.lp-body, .lp-body main, .lp-sec.lp-sec-white, .lp-sec.lp-sec-blue { background: var(--st-a); }

/* Page head of every page built with lp_head() (and the security page, which uses the legal head without a legal text) */
.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head { position: relative; color: #f7f3ea; background: var(--st-mesh); border-bottom: 0;
  padding: 52px 0 calc(48px + var(--st-skew)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--st-skew)), 0 100%); }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-h1 { color: #fff; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-lead,
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) p:not(:is(.lp-box, .lp-trust, .lp-head-film, .sec-core) p):not(.lp-scene-when, .lp-scene-turn) { color: #d3dae6; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-crumb,
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-crumb a { color: #c5ccd8; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-crumb [aria-current] { color: #f7f3ea; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-eyebrow,
:root[data-theme="dark"] :is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-eyebrow { color: #e0a93b; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) a:not(.btn):not(:is(.lp-crumb, .lp-box, .lp-trust, .lp-head-film, .sec-core) a) { color: #e0a93b; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-eyebrow .lp-tag { background: rgba(247, 243, 234, .12); border-color: rgba(247, 243, 234, .35); color: #f7f3ea; }
/* Cards inside a dark head or band keep the normal page colours */
:is(.lp-page-head, .lp-legal-head, .st-dark) :is(.lp-box, .lp-head-film, .sec-core) { color: var(--ink); }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-btn-outline,
:root[data-theme="dark"] :is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; background: transparent; }
:is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-btn-outline:hover,
:root[data-theme="dark"] :is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head) .lp-btn-outline:hover { background: #f7f3ea; color: #13233f; }
.lp-page-head .btn-primary { box-shadow: 0 10px 24px -8px rgba(224, 169, 59, .55); }
/* One gradient emphasis per website area, same colours (Marc 02.11.2026, draft 4; lp_head_area() in _parts.php):
   Funktionen keep the default (Messing top right), Regelwerke Lagune bottom right, "Für wen" Messing at the bottom */
.lp-page-head:has(> [data-head-area="frameworks"]) { background:
  radial-gradient(55% 80% at 100% 100%, rgba(47, 127, 119, .85) 0%, rgba(47, 127, 119, 0) 70%),
  radial-gradient(35% 55% at 70% 0%, rgba(224, 169, 59, .55) 0%, rgba(224, 169, 59, 0) 70%),
  radial-gradient(60% 80% at 20% 0%, rgba(28, 53, 96, .9) 0%, rgba(28, 53, 96, 0) 70%),
  linear-gradient(160deg, #0c1830 0%, #13233f 55%, #132a4a 100%); }
.lp-page-head:has(> [data-head-area="who-its-for"]) { background:
  radial-gradient(45% 75% at 55% 110%, rgba(224, 169, 59, .75) 0%, rgba(224, 169, 59, 0) 70%),
  radial-gradient(45% 70% at 100% 0%, rgba(28, 53, 96, .95) 0%, rgba(28, 53, 96, 0) 70%),
  radial-gradient(35% 55% at 100% 80%, rgba(47, 127, 119, .5) 0%, rgba(47, 127, 119, 0) 70%),
  linear-gradient(160deg, #0c1830 0%, #13233f 55%, #132a4a 100%); }
/* Clip or screenshot in the head: a light app window with a shadow */
.lp-head-film > * { border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 40px 80px -20px rgba(4, 10, 24, .6), 0 24px 48px -24px rgba(0, 0, 0, .5); }
.lp-head-film :is(figcaption, .clip-caption) { padding: 10px 16px 14px; }

/* White instead of Nebelblau (Marc 02.11.2026: "statt mit hellblau, mit weiß und Dunkelblau"): .lp-sec-blue sections are white
   like the others; neighbouring light sections are parted by a hairline, cards stand out by their shadow. The dark accent of a
   page is its .st-dark section (at most one per page). */
main > .lp-sec:not(.st-dark) + .lp-sec:not(.st-dark) { border-top: 1px solid var(--st-card-line); }

/* Fable review 02.11.2026, "clean, aufgeräumt, nicht überladen" (Marc) */
main > .lp-faq-page + .lp-faq-page { border-top: 0; }   /* the FAQ page's two parts are one block */
.lp-page-head + .lp-sec.lp-sec-tight:has(> .lp-wrap > .lp-jump:first-child) { padding-block: 32px; }   /* "Auf dieser Seite" line */
main .lp-hint:not(.lp-hint-warn) { background: var(--inset); color: var(--ink-soft); border-color: transparent; border-radius: 12px; }   /* one neutral note style; yellow only for warnings */
.st-dark .lp-wrap > h3 { margin-top: 40px; }
@media (min-width: 1100px) { .sec-tiles:not(.sec-card .sec-tiles):has(> li:nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 7 tiles as 4 + 3, no orphan; only full-width rows: inside the half-width area cards of /sicherheit the tiles stay one column (4 columns squeezed them to ~110 px) */

/* A light section between the dark band and the closing band gets more air, so the white reads as a pause */
.st-dark + .lp-sec:has(+ .lp-band) { padding-block: 96px; }
@media (max-width: 640px) { .st-dark + .lp-sec:has(+ .lp-band) { padding-block: 56px; } }

/* Cards: no border, fine shadow, a small lift on hover (no scaling) */
main .lp-box { border-color: transparent; border-radius: 12px; box-shadow: var(--st-shadow-sm); }
main .lp-box:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--st-shadow); }
@media (prefers-reduced-motion: reduce) { main .lp-box:hover { transform: none; } }
/* One card style everywhere (Fable review 02.11.2026): the other card types of the website lose their 1 px frame and get the
   same shadow; notes (.lp-hint), tables, forms and the highlighted latest news entry keep their frames on purpose */
main :is(.lp-phases > li, .lp-news > li:not(.lp-news-latest), .lp-partner-logo, .pk-card, .pk-plan:not(.is-accent), .asvs-exc, .lp-faq-card, .pc-offer-up, .lp-pkg-mini, .sec-card, .ac-flow > li, .ac-courses > li) {
  border-color: transparent; border-radius: 12px; box-shadow: var(--st-shadow-sm); }
main .lp-partner-strip { border-style: solid; border-color: transparent; box-shadow: var(--st-shadow-sm); }
/* Fable review 2 (02.11.2026, 8.5 -> 9): last frames and empty places */
main :is(.sec-tiles li, .tc-explain) { border-color: transparent; border-radius: 12px; box-shadow: var(--st-shadow-sm); }
main .sec-matrix-wrap { border-color: var(--line); }
.sec-jump details { margin-top: 20px; }
.sec-jump summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: rgba(247, 243, 234, .1); border: 1px solid rgba(247, 243, 234, .3); color: #f7f3ea; font-weight: 600; font-size: .9rem; }
.sec-jump summary:hover { background: rgba(247, 243, 234, .18); }
.sec-jump details p { margin: 12px 0 0; }
@media (pointer: coarse) { .sec-jump summary { min-height: 44px; } }
.lp-sec.lp-faq-page:first-of-type, main > .lp-page-head + .lp-faq-page { padding-top: 72px; }
.lp-head-film .lp-figure figcaption, .lp-head-film figcaption { text-align: left; }
@media (min-width: 901px) {
  /* a group with two or four cards fills its rows instead of leaving a hole in a three-column grid */
  main .lp-tiles:has(> :nth-child(2):last-child), main .lp-tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Comfortable line length everywhere (Marc 02.11.2026: "kleinere Zeilen"): running text at most about 70 characters, list
   entries about 75; grids keep their column widths, centred sections centre the block */
main .lp-sec :is(p.lp-intro, p.lp-note, p.lp-legal-note, .lp-hint > p, p.lp-soon-line, p.fw-legal-line) { max-width: 70ch; }
main .lp-sec :is(.lp-points, .lp-checks, .ac-courses) > li { max-width: 75ch; }
main .lp-sec :is(.lp-split, .fw-betroffen, .lp-help-split) :is(p, li) { max-width: none; }
main .lp-center :is(p.lp-intro, p.lp-note) { margin-inline: auto; }
/* "Funktioniert mit": a calmer line, the trademark note next to "Alle Anbindungen" */
.hp-st-sec .ww-line-list { font-size: .94rem; gap: 6px 24px; }
.hp-st-sec .ww-line-note { flex-basis: auto; }
/* offer cards on framework pages: top aligned, the button follows the text instead of sitting at the far bottom */
.pc-offer { align-items: flex-start; }
/* law references inside running text: slimmer pills so the line height stays even */
.lp-checks .gl-term.ref { vertical-align: middle; padding-block: 1px; line-height: 1.3; }

main .cf-row .badge-muted { color: var(--ink-soft); }   /* the row fades in; the badge keeps 4.5 : 1 already while fading (axe) */
/* Packages and framework pages: the comparison link left under the head like an intro line, not floating in the middle */
.pk-under-head { text-align: left; margin-top: 32px; }
/* Audience pages: the two "next step" links as one quiet list instead of two boxes; the legal note as a small line */
.lp-next-links { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .95rem; }
.lp-next-links li { display: flex; gap: 10px; align-items: flex-start; }
.lp-next-links .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.lp-legal-note { display: flex; gap: 8px; align-items: flex-start; max-width: 760px; margin: 20px 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-faint); }
.lp-legal-note .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* Closing band: the head gradient with a slanted upper edge (footer markup unchanged) */
.lp-band { background: var(--st-mesh); clip-path: polygon(0 var(--st-skew), 100% 0, 100% 100%, 0 100%); padding-top: calc(56px + var(--st-skew)); }
.lp-band .lp-h2 { color: #fff; }

/* Dark band, marked per page with .st-dark on one section (home, security, trust, framework, audience and feature pages) */
.lp-sec.st-dark { background: radial-gradient(50% 80% at 100% 100%, rgba(47, 127, 119, .35) 0%, rgba(47, 127, 119, 0) 70%),
  radial-gradient(40% 70% at 0% 0%, rgba(28, 53, 96, .8) 0%, rgba(28, 53, 96, 0) 70%), var(--st-band); color: #f7f3ea;
  padding-block: calc(56px + var(--st-skew)); clip-path: polygon(0 var(--st-skew), 100% 0, 100% calc(100% - var(--st-skew)), 0 100%); }
/* Inside the band the text tokens switch to the on-dark values; cards in it get the page values back (--st-page-*, taken on
   :root, so they follow the theme) */
:root { --st-page-ink: var(--ink); --st-page-ink-soft: var(--ink-soft); --st-page-ink-faint: var(--ink-faint); --st-page-line: var(--line);
  --st-page-accent: var(--accent); --st-page-accent-dark: var(--accent-dark); }
.st-dark { --ink: #f7f3ea; --ink-soft: #d3dae6; --ink-faint: #a9b6ca; --line: rgba(247, 243, 234, .2); --accent: #e0a93b; --accent-dark: #e0a93b; }
.st-dark :is(.lp-box, .hp-asvs, .lp-faq, .lp-tile, .lp-hint, .fw-dates > li, .sec-tiles > li, [class*="-card"], table, .lp-shot, .lp-figure, .clip) { color: var(--ink); --ink: var(--st-page-ink); --ink-soft: var(--st-page-ink-soft); --ink-faint: var(--st-page-ink-faint);
  --line: var(--st-page-line); --accent: var(--st-page-accent); --accent-dark: var(--st-page-accent-dark); }
.st-dark .lp-h2, .st-dark h3 { color: #fff; }
.st-dark .lp-intro, .st-dark > .lp-wrap > p { color: #c5ccd8; }
.st-dark .lp-eyebrow, :root[data-theme="dark"] .st-dark .lp-eyebrow { color: #e0a93b; }
.st-dark .lp-btn-outline, :root[data-theme="dark"] .st-dark .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; background: transparent; }
.st-dark .lp-btn-outline:hover, :root[data-theme="dark"] .st-dark .lp-btn-outline:hover { background: #f7f3ea; color: #13233f; }
.st-dark :is(.lp-box, .hp-asvs, .lp-faq, .lp-tile, .lp-hint, .fw-dates > li, .sec-tiles > li, [class*="-card"], table, .lp-shot, .lp-figure, .clip) h3 { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head, .st-dark) .lp-eyebrow { color: #e0a93b; }
  :root:not([data-theme="light"]) :is(.lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head, .st-dark) .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; } }
@media (max-width: 640px) {
  .lp-page-head, main:not(:has(.lp-legal)) > .lp-legal-head { padding: 28px 0 calc(32px + var(--st-skew)); }
  .lp-sec.st-dark { padding-block: calc(32px + var(--st-skew)); }
}

/* ---------- Home page (templates/landing/index.php, classes hp-st-*) ---------- */
/* Hero */
.lp-hero.hp-st-hero { position: relative; color: #f7f3ea; background: var(--st-mesh); padding: 48px 0 calc(76px + var(--st-skew));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--st-skew)), 0 100%); }
.hp-st-hero .lp-hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 48px; }
/* The text column is fixed at about 568 px (frame 1180 px, grid 11fr/10fr, gap 48 px). A 3.8rem cap broke "Regulatorik umsetzen,"
   onto two lines (four lines in total) on every desktop of 1382 px and wider; 3.1rem keeps three lines (two at 1024 px). The phone rule below overrides this. */
.hp-st-hero .lp-h1 { color: #fff; font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.hp-st-hero .lp-lead { color: #d3dae6; font-size: 1.14rem; }
.hp-st-hero .lp-hero-tags { gap: 8px; margin: 0 0 22px; }
.hp-st-hero .lp-hero-star { display: none; }
.hp-st-hero .lp-hero-tags a { padding: 5px 12px; border-radius: 999px; color: #fff; background: rgba(247, 243, 234, .1); border: 1px solid rgba(247, 243, 234, .28); }
.hp-st-hero .lp-hero-tags a:hover { color: #13233f; background: #f7f3ea; text-decoration: none; }
.hp-st-hero .lp-btn-outline, :root[data-theme="dark"] .hp-st-hero .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; background: transparent; }
.hp-st-hero .lp-btn-outline:hover, :root[data-theme="dark"] .hp-st-hero .lp-btn-outline:hover { background: #f7f3ea; color: #13233f; }
.hp-st-hero .lp-hero-meta { color: #c5ccd8; }
.hp-st-hero .lp-link, .hp-st-hero .lp-lead-more { color: #e0a93b; }
.hp-st-hero .btn-primary { box-shadow: 0 10px 24px -8px rgba(224, 169, 59, .55); }
/* The live demo as a light app window (no monitor stand); its caption row reads on the dark hero */
.hp-st-hero .cxd-monitor { background: #fff; padding: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 50px 100px -20px rgba(4, 10, 24, .6), 0 30px 60px -30px rgba(0, 0, 0, .55); }
.hp-st-hero .cxd-monitor::before { content: ""; display: block; height: 26px; border-bottom: 1px solid #dfe5ee;
  background: radial-gradient(circle at 16px 13px, #d8796c 4px, transparent 5px), radial-gradient(circle at 32px 13px, #e0a93b 4px, transparent 5px),
    radial-gradient(circle at 48px 13px, #2f7f77 4px, transparent 5px), #f3f6fa; }
.hp-st-hero .cxd-screen { border-radius: 0; }
.hp-st-hero .cxd-stand, .hp-st-hero .cxd-foot { display: none; }
.hp-st-hero .cxd-cap { color: #f7f3ea; }
.hp-st-hero .cxd-chip { background: rgba(224, 169, 59, .14); border-color: rgba(224, 169, 59, .5); color: #f0c66b; }
.hp-st-hero .cxd-pause { background: rgba(247, 243, 234, .08); border-color: rgba(247, 243, 234, .35); color: #f7f3ea; }
.hp-st-hero .cxd-dots button { background: rgba(247, 243, 234, .3); }
/* Calmer control row (Fable review): scene chip, dots and pause button on one line, the caption on its own line below */
.hp-st-hero .cxd-cap { order: 3; flex-basis: 100%; }
.hp-st-hero .cxd-dots { margin-left: auto; }

/* Strong numbers, overlapping the slanted hero edge */
.hp-st-stats-wrap { position: relative; z-index: 2; margin-top: calc(-64px - var(--st-skew) / 2); }
.hp-st-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--st-card); border-radius: 14px; box-shadow: var(--st-shadow); overflow: hidden; }
.hp-st-stats li + li { border-left: 1px solid var(--st-card-line); }
.hp-st-stats a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px 26px; color: var(--ink-soft); text-decoration: none; }
.hp-st-stats a:hover { background: var(--inset); }
.hp-st-stats a:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hp-st-stats strong { font: 400 2.9rem/1 var(--font-display); color: var(--accent); }
.hp-st-stats .hp-st-stat-ic .icon { width: 2.6rem; height: 2.6rem; stroke-width: 1.5; }
.hp-st-stats span { font-weight: 500; font-size: .95rem; line-height: 1.35; }

/* Sections */
.lp-sec.hp-st-sec:not(.st-dark) { padding-block: 48px; }
.hp-st-stats-wrap + .lp-sec.hp-st-sec, .hp-st-stats-wrap + .ref-band { margin-top: 16px; }
.hp-st-sec .lp-eyebrow { margin-bottom: 10px; }
.hp-st-sec .lp-h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); line-height: 1.12; max-width: 780px; margin-bottom: 14px; }
.hp-st-sec .lp-intro { font-size: 1.12rem; max-width: 700px; color: var(--ink-soft); }
/* Cards: white, no border, fine shadow, lift on hover */
.hp-st-sec .lp-tile, .hp-st-sec .hp-cover-col, .hp-st-sec .lp-pair-card, .hp-st-sec .hp-asvs, .hp-st-sec .lp-getstarted-steps li, .hp-st-sec .ww-line {
  background: var(--st-card); border: 0; border-radius: 12px; box-shadow: var(--st-shadow-sm); }
.hp-st-sec .lp-tile, .hp-st-sec .hp-cover-col, .hp-st-sec .lp-pair-card { transition: box-shadow var(--t), transform var(--t); }
.hp-st-sec .lp-tile:hover, .hp-st-sec .hp-cover-col:hover, .hp-st-sec .lp-pair-card:hover { box-shadow: var(--st-shadow); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .hp-st-sec .lp-tile:hover, .hp-st-sec .hp-cover-col:hover, .hp-st-sec .lp-pair-card:hover { transform: none; } }
.hp-st-sec .lp-tile .lp-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--warn-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 641px) {
  .hp-st-sec .lp-usp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
  .hp-st-sec .lp-tile { padding: 24px; }
  #besonders.hp-st-sec .lp-usp .lp-tile { display: flex; flex-direction: column; gap: 8px; }   /* icon on top, Stripe-like */
  #besonders.hp-st-sec .lp-usp .lp-tile .lp-icon { margin: 0 0 6px; }
}
.hp-st-sec .ww-line { margin-top: 28px; padding: 18px 24px; }
/* Tighter home rhythm (Marc 02.11.2026, draft 1): about 300 px shorter on a desktop, no content removed */
.hp-st-sec .lp-h2 { margin-bottom: 10px; }
@media (min-width: 641px) { .lp-sec.st-dark.hp-st-sec { padding-block: calc(44px + var(--st-skew)); } }
.hp-st-sec .lp-getstarted { margin-top: 32px; }
.hp-st-sec .ww-line-list { font-size: 1.02rem; letter-spacing: .01em; color: var(--ink-faint); }
/* "Funktioniert mit" by purpose (HERO-3): one row per group, label left and names right; the label stacks above the names on phones */
.ww-line-groups { flex-basis: 100%; display: grid; gap: 10px; margin: 0; }
.ww-line-group { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.ww-line-gh { margin: 0; font: 600 .78rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ww-line-groups .ww-line-list { flex: none; }
@media (max-width: 640px) { .ww-line-group { grid-template-columns: minmax(0, 1fr); }
  .ww-line-groups { gap: 14px; }
  .hp-st-sec .ww-line-groups .ww-line-list { gap: 2px 18px; font-size: .96rem; } }
/* Coverage: three cards with a big number (or icon) on top */
.hp-st-sec .hp-cover { gap: 20px; margin-top: 24px; }
.hp-st-sec .hp-cover-col { padding: 26px 26px 22px; }
.hp-st-sec .hp-cover-col h3 { display: flex; flex-direction: column; gap: 6px; }
.hp-st-num { display: block; font: 400 3.4rem/1 var(--font-display); color: var(--accent); }
.hp-st-num-ic .icon { width: 3rem; height: 3rem; stroke-width: 1.5; }
/* Product: film in a light window frame, numbered steps as cards */
.hp-st-sec .lp-video { max-width: 980px; }
.hp-st-sec .lp-video video { border: 0; border-radius: 12px; box-shadow: var(--st-shadow); }
.hp-st-sec .lp-getstarted-steps { gap: 16px; }
.hp-st-sec .lp-getstarted-steps li { padding: 18px 20px; }
.hp-st-sec .lp-getstarted-steps li::before { width: 32px; height: 32px; background: var(--btn-bg); color: var(--btn-ink); font-size: .95rem; }
/* Security: dark band, the four points as lined columns, the ASVS card as a light card */
.st-dark .lp-trust { margin-top: 36px; gap: 28px; }
.st-dark .lp-trust li { background: transparent; border: 0; border-left: 1px solid rgba(247, 243, 234, .2); border-radius: 0; padding: 2px 0 2px 18px; flex-direction: column; }
.st-dark .lp-trust .lp-icon { color: #e0a93b; }
.st-dark .lp-trust strong, .st-dark .lp-trust strong a { color: #fff; }
.st-dark .lp-trust p { color: #c5ccd8; }
.st-dark .hp-sec-foot { margin-top: 36px; }
/* ASVS card over the full width, the two buttons below it on the left (Fable review: no empty half beside the card) */
@media (min-width: 641px) {
  .st-dark .hp-sec-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .st-dark .hp-sec-foot .hp-asvs { grid-column: 1; }
  .st-dark .hp-sec-foot .sec-more { grid-column: 1; justify-self: start; margin: 0; }
  .st-dark .hp-asvs > p { max-width: 70ch; }
}
.st-dark .hp-asvs { padding: 22px 24px; color: var(--ink); }
/* Start: the two cards with the shadow, roomier */
.hp-st-sec .lp-pair { gap: 20px; margin-top: 32px; }
.hp-st-sec .lp-pair-card { padding: 28px; }
/* Closing band after "Starten": the hero gradient with a slanted upper edge (footer markup unchanged) */
/* Dark theme: the eyebrows and big numbers in bright Messing */
:root[data-theme="dark"] .hp-st-num, :root[data-theme="dark"] .hp-st-stats strong { color: var(--accent-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-st-num, :root:not([data-theme="light"]) .hp-st-stats strong { color: var(--accent-bright); }
  :root:not([data-theme="light"]) .hp-st-hero .lp-btn-outline { border-color: rgba(247, 243, 234, .6); color: #f7f3ea; } }
/* Tablet and phone */
@media (max-width: 1000px) { .hp-st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-st-stats li:nth-child(3) { border-left: 0; } .hp-st-stats li:nth-child(n+3) { border-top: 1px solid var(--st-card-line); } }
@media (max-width: 900px) { .hp-st-hero .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 640px) {
  .lp-hero.hp-st-hero { padding: 36px 0 calc(72px + var(--st-skew)); }
  .hp-st-hero .lp-hero-tags { margin-bottom: 16px; }
  .hp-st-hero .lp-h1 { font-size: clamp(1.65rem, 8.6vw, 2.2rem); line-height: 1.12; }   /* longest words (pl, pt) still fit 320 px */
  .hp-st-stats-wrap { margin-top: calc(-48px - var(--st-skew) / 2); }
  .hp-st-stats a { padding: 16px; }
  .hp-st-stats strong { font-size: 2.2rem; }
  .hp-st-stats .hp-st-stat-ic .icon { width: 2rem; height: 2rem; }
  .hp-st-stats span { font-size: .86rem; }
  .lp-sec.hp-st-sec:not(.st-dark) { padding-block: 52px; }
  .hp-st-num { font-size: 2.6rem; }
  .st-dark .lp-trust { gap: 16px; }
}

/* ---------- About and careers (templates/landing/about.php, _about2/about.php, _about2/careers.php; look "Stripe", 02.11.2026) ---------- */
/* Head figure: the silhouette row and the initials stand free on the gradient, without the light app window of a screenshot */
.lp-head-film:has(> :is(.ab2-stack, .ab-initials-head)) > * { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.lp-page-head .ab2-stack span { border-color: rgba(247, 243, 234, .9); }
.lp-page-head .lp-head-film > .ab-initials-head { border-radius: 50%; }
.lp-page-head .ab-initials-head { width: 200px; height: 200px; justify-self: center; font-size: 3.4rem; background: rgba(247, 243, 234, .12); color: #f7f3ea; border: 2px solid rgba(247, 243, 234, .35); }
@media (min-width: 1001px) { .lp-page-head:has(.ab2-stack, .ab-initials-head) .lp-head-split { grid-template-columns: 7fr 4fr; } }
@media (max-width: 1000px) {
  .lp-page-head .ab2-stack { justify-content: flex-start; } .lp-page-head .ab-initials-head { width: 96px; height: 96px; font-size: 1.8rem; justify-self: start; } }
@media (max-width: 640px) { .lp-page-head .lp-head-film:has(> .ab2-stack) { display: none; } }   /* decorative; the team cards show the silhouettes */
/* Team cards: one card style (no dashed frame, the fine shadow); in the dark band they keep the page colours ([class*="-card"]) */
main .ab2-card { border: 0; border-radius: 12px; box-shadow: var(--st-shadow-sm); }
.st-dark .ab2-draft { background: rgba(247, 243, 234, .08); border-color: rgba(247, 243, 234, .35); color: #f7f3ea; }
/* About (AB1): the four team cards as 4 or 2 + 2, never 3 + 1 */
#team .lp-tiles-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { #team .lp-tiles-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { #team .lp-tiles-list:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
/* Careers: five areas as 3 + 2 over the full width (no orphan card) */
@media (min-width: 901px) {
  .ab2-areas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ab2-areas > li { grid-column: span 2; }
  .ab2-areas > li:nth-child(4):nth-last-child(2), .ab2-areas > li:nth-child(5):last-child { grid-column: span 3; }
}
/* Careers: "So bewerben Sie sich" in the dark band as three numbered columns */
.st-dark .ab2-steps { list-style: none; counter-reset: ab2s; padding: 0; margin: 32px 0 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; color: var(--ink-soft); }
.st-dark .ab2-steps > li { counter-increment: ab2s; border-left: 1px solid rgba(247, 243, 234, .2); padding: 2px 0 2px 18px; }
.st-dark .ab2-steps > li::before { content: counter(ab2s); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; }
.st-dark .ab2-steps strong { display: block; color: #fff; margin-bottom: 4px; }
.st-dark #bewerben .lp-note, .st-dark .lp-wrap > .lp-note { max-width: 760px; color: #c5ccd8; }
@media (max-width: 900px) { .st-dark .ab2-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* Closing band with more buttons than lp_cta(): heading and text above, the buttons in one wrapping row below */
.lp-band-stack { flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-band-stack .lp-band-btn { flex-shrink: 1; }
.lp-band .lp-small { margin: 0; color: #c5ccd8; }
/* Pricing (Preview 'preise', templates/pricing/index.php): plan cards in the one card style; the featured plan keeps its Messing frame */
main .pr-plan:not(.is-featured) { border-color: transparent; border-radius: 12px; box-shadow: var(--st-shadow-sm); }
main .pr-plan.is-featured { border-radius: 12px; box-shadow: var(--st-shadow-sm); }
/* ---------- Company pages of release 2.26 (Marc 02.11.2026): contact, press, events, comparison ----------
   templates/landing/{contact,press,events,comparison}.php; classes cx-* (contact), pr-* (press), ev-* (events), cmp-*
   (comparison). "Kontakt" is the last direct item of the main menu (Site::nav()). */
/* Contact */
.cx-phone { display: flex; gap: 20px; align-items: center; padding: 24px 28px; max-width: 760px; }
.cx-phone-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); }
.cx-phone-ic .icon { width: 26px; height: 26px; }
.cx-phone .lp-h3 { margin: 0; }
.cx-phone p { margin: 4px 0 0; color: var(--ink-soft); }
.cx-phone .cx-phone-no { margin: 2px 0 4px; font-size: clamp(1.4rem, 3.6vw, 1.9rem); font-weight: 600; letter-spacing: .01em; }
.cx-phone .cx-phone-no a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.cx-phone .cx-phone-no a:hover { color: var(--accent-dark); text-decoration: underline; }
.cx-h2 { margin-top: 56px; }
.cx-boxes { list-style: none; padding: 0; margin: 0 0 20px; }
.lp-tiles.lp-tiles-compact { list-style: none; padding: 0; }
.lp-tile h3 .icon { width: 18px; height: 18px; color: var(--accent); vertical-align: -3px; }
.cx-addr { margin-top: auto !important; padding-top: 6px; font-weight: 600; overflow-wrap: anywhere; }
.cx-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: end; }
.cx-address { font-style: normal; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }

/* Press */
/* Draft 2.36: "In jedem Paket enthalten" below the plan cards, 3 columns, 2, then one compact list at phone width (no sideways scroll at 320 px) */
.pr-incl { margin: 28px 0 24px; }
.pr-incl > .pr-plan-name { margin: 0 0 16px; }
.pr-incl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; }
.pr-incl-list li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.pr-incl-list .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.pr-incl-list strong { display: block; color: var(--ink); font-weight: 600; }
.pr-incl-list p { margin: 2px 0 0; color: var(--ink-soft); font-size: .93rem; }
@media (max-width: 1000px) { .pr-incl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pr-incl-list { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.pr-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pr-copy { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--ink); }
.pr-copy p { margin: 0 0 12px; max-width: 70ch; }
.pr-copy p:last-child { margin-bottom: 0; }
.pr-facts { padding: 22px 24px; }
.pr-facts h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.pr-facts dl { margin: 0; display: grid; gap: 4px; }
.pr-facts dt { font-size: .82rem; color: var(--ink-faint); margin-top: 8px; }
.pr-facts dd { margin: 0; color: var(--ink); font-weight: 500; }
.pr-logos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pr-logos > li { padding: 0; overflow: hidden; }
.pr-logo-stage { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 28px; background: #fff; border-bottom: 1px solid var(--st-card-line); }
.pr-logo-stage.is-dark { background: #13233f; }
.pr-logo-stage img { width: min(100%, 320px); height: auto; }
.pr-logo-name { margin: 14px 20px 4px; font-weight: 600; color: var(--ink); }
.pr-logo-dl { margin: 0 20px 16px; display: flex; gap: 20px; }
.pr-logo-dl a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 600; }
.pr-logo-dl .icon { width: 16px; height: 16px; }
.pr-signet { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; margin-top: 20px; padding: 0; overflow: hidden; }
.pr-signet-stage { min-height: 100%; border-bottom: 0; border-right: 1px solid var(--st-card-line); }
.pr-signet-stage img { width: 96px; }
.pr-signet .lp-note { margin: 0 20px 6px; }
@media (max-width: 640px) { .pr-signet { grid-template-columns: 1fr; } .pr-signet-stage { border-right: 0; border-bottom: 1px solid var(--st-card-line); } }
.pr-person { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: center; }
.pr-person-text { grid-template-columns: minmax(0, 1fr); }
.pr-photo-dl { margin: 16px 0 0 !important; flex-wrap: wrap; }
.pr-photo { width: 200px; height: auto; border-radius: 16px; box-shadow: var(--st-shadow-sm); }
.pr-initials { width: 200px; aspect-ratio: 4 / 5; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--st-mesh); color: #f7f3ea; font-family: var(--font-display); font-size: 3.4rem; }
.pr-role { margin: -4px 0 12px; font-weight: 600; color: var(--accent-dark); }
.pr-person p { max-width: 70ch; }
.pr-contact { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-contact > li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.pr-contact .icon { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 2px; }
.pr-contact .pr-k { display: block; font-size: .82rem; color: var(--ink-faint); }
.pr-contact a { overflow-wrap: anywhere; font-weight: 600; }

/* Events */
.ev-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; }
.ev-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; padding: 26px 28px; align-items: start; }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; border-radius: 12px; background: var(--st-mesh); color: #f7f3ea; text-align: center; }
.ev-day { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; white-space: nowrap; }
.ev-month { font-size: .85rem; letter-spacing: .04em; color: #e0a93b; margin-top: 4px; }
.ev-body h3 { font-family: var(--font-sans); font-size: 1.3rem; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.ev-body p { margin: 0 0 10px; color: var(--ink-soft); max-width: 70ch; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .93rem; }
.ev-meta .icon { width: 16px; height: 16px; color: var(--accent); }
.ev-meta .icon + span { margin-right: 12px; }
.ev-tags { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ev-tags li { padding: 3px 10px; border-radius: 999px; background: var(--inset); color: var(--ink-soft); font-size: .82rem; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin: 0 !important; }
.ev-ext { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; }
.ev-ext .icon { width: 15px; height: 15px; }
#ablauf .ac-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ablauf .lp-note { margin-top: 24px; }

/* Comparison */
.cmp-wrap { margin-top: 24px; border-radius: 12px; box-shadow: var(--st-shadow-sm); overflow: hidden; background: var(--st-card); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--st-card-line); }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 600; background: var(--inset); }
.cmp-table tbody th { font-weight: 600; color: var(--ink); width: 18%; }
.cmp-table td { color: var(--ink-soft); }
.cmp-table td.cmp-us { color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cmp-table td.cmp-us { display: table-cell; }
.cmp-table td.cmp-us .icon { width: 18px; height: 18px; color: var(--accent); margin-right: 8px; vertical-align: -3px; }
.cmp-table thead th.cmp-us { color: var(--accent-dark); }
/* Three-way comparison (Marc 06.11.2026): by hand, elsewhere, Complass. The Complass column is the dark panel of the price page (.pk-plan.is-accent)
   and stands out above and below the table; on phones every topic becomes a card with Complass as its dark foot. */
.cmp3 { --cmp3-panel: #13233f; width: 100%; margin-top: 44px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp3 th, .cmp3 td { padding: 20px 22px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--st-card-line); }
.cmp3 thead th { padding-block: 0 18px; color: var(--ink); font: 400 1.35rem/1.2 var(--font-display); vertical-align: bottom; }
.cmp3 thead th:first-child { width: 19%; }
.cmp3 thead small { display: block; margin-top: 4px; color: var(--ink-faint); font: 400 .85rem/1.3 var(--font-sans); }
.cmp3 tbody th { padding-left: 0; color: var(--ink); font-weight: 600; }
.cmp3 td { color: var(--ink-soft); font-size: .97rem; line-height: 1.5; }
.cmp3 .cmp3-us { --ink: #f7f3ea; --ink-faint: #d3dae6; width: 34%; background: var(--cmp3-panel); color: #f7f3ea; border-bottom-color: rgba(247, 243, 234, .16); }
.cmp3 td.cmp3-us { position: relative; display: table-cell; padding-left: 52px; font-weight: 500; }
.cmp3 td.cmp3-us .icon { position: absolute; top: 50%; left: 22px; width: 18px; height: 18px; margin-top: -9px; color: #e0a93b; }
.cmp3 thead .cmp3-us { padding-top: 26px; border-radius: 14px 14px 0 0; font-size: 1.6rem; }
.cmp3 tbody tr:last-child > * { border-bottom: 0; }
.cmp3 tbody tr:last-child .cmp3-us { padding-bottom: 28px; border-radius: 0 0 14px 14px; }
.cmp3 tbody tr:last-child td.cmp3-us .icon { margin-top: -13px; }
.cmp3-import { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 36px 0 0; color: var(--ink); font-weight: 500; }
.cmp3-import .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--accent-dark); }
.cmp3-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.cmp3-notes .lp-note { margin: 0; font-size: .86rem; }
.cmp-more { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

@media (max-width: 900px) {
  .pr-split, .cx-post { grid-template-columns: 1fr; gap: 24px; }
  .pr-contact { grid-template-columns: 1fr; }
  #ablauf .ac-flow { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cx-phone { flex-direction: column; align-items: flex-start; padding: 20px; }
  .cx-h2 { margin-top: 40px; }
  .pr-logos { grid-template-columns: 1fr; }
  .pr-person { grid-template-columns: 1fr; gap: 20px; }
  .pr-photo, .pr-initials { width: 120px; }
  .pr-initials { font-size: 2.2rem; }
  .ev-card { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .ev-date { flex-direction: row; gap: 10px; justify-content: flex-start; padding: 10px 14px; }
  .ev-day { font-size: 1.3rem; }
  .ev-month { margin-top: 0; }
  /* Comparison table as stacked cards: each row a block, the two columns labelled */
  .cmp-wrap { box-shadow: none; background: transparent; overflow: visible; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table tr { margin: 0 0 14px; border-radius: 12px; box-shadow: var(--st-shadow-sm); background: var(--st-card); overflow: hidden; }
  .cmp-table tbody th { width: auto; padding-bottom: 6px; border-bottom: 0; }
  .cmp-table td { padding-top: 6px; }
  .cmp-table td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-faint); margin-bottom: 2px; }
  .cmp-table td.cmp-us::before { color: var(--accent-dark); }
  .cmp-table td.cmp-us .icon { display: none; }
  .cmp-table tbody tr:last-child > * { border-bottom: 1px solid var(--st-card-line); }
  .cmp-table tbody tr > :last-child { border-bottom: 0 !important; }
  /* Three-way comparison as stacked cards: each topic a card, the columns labelled, Complass as the dark foot */
  .cmp3 { display: block; margin-top: 28px; }
  .cmp3 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp3 tbody, .cmp3 tr, .cmp3 tbody th, .cmp3 td { display: block; width: auto; }
  .cmp3 tr { margin: 0 0 16px; border-radius: 14px; box-shadow: var(--st-shadow-sm); background: var(--st-card); overflow: hidden; }
  .cmp3 tbody th { padding: 16px 18px 4px; border-bottom: 0; font-size: 1.05rem; }
  .cmp3 td { padding: 8px 18px; border-bottom: 0; }
  .cmp3 td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-faint); font-size: .78rem; font-weight: 600; letter-spacing: .03em; }
  .cmp3 td.cmp3-us { display: block; width: auto; margin-top: 8px; padding: 14px 18px 16px; }
  .cmp3 td.cmp3-us::before { color: #e0a93b; }
  .cmp3 td.cmp3-us .icon { display: none; }
  .cmp3 tbody tr:last-child .cmp3-us { padding-bottom: 16px; border-radius: 0; }
  .cmp3-notes { grid-template-columns: 1fr; gap: 14px; }
}
@media (pointer: coarse) { .pr-logo-dl a, .ev-ext { min-height: 44px; } }

/* Contact, tidied up (Marc 02.11.2026, "ist das aufgeräumt?"): one section in two columns, no cards; mailboxes as a list with hairlines */
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; }
/* Small labels in the eyebrow style above phone, address and mailboxes, so the number stays the strongest element (Marc's
   review 02.11.2026: the thin display headings read weaker than their content) */
.cx-label { margin: 0 0 14px; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.cx-address strong { font-weight: 600; }
.cx-left .cx-phone-no { margin: 0 0 12px; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600; }
.cx-left .cx-phone-no a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.cx-left .cx-phone-no a:hover { color: var(--accent-dark); text-decoration: underline; }
.cx-soft { color: var(--ink-soft); font-size: .93rem; }
.cx-gap { margin-top: 64px !important; }
.cx-address { font-style: normal; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.cx-mails { margin: 0; display: grid; }
.cx-mails > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--st-card-line); }
.cx-mails > div:last-child { border-bottom: 1px solid var(--st-card-line); }
.cx-mails dt { font-weight: 600; color: var(--ink); }
.cx-mails dd { margin: 0; display: grid; gap: 2px; }
.cx-mails dd a { font-weight: 600; overflow-wrap: anywhere; justify-self: start; }
#weiter .lp-next-links { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--st-card-line); }
@media (max-width: 900px) { .cx-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .cx-mails > div { grid-template-columns: 1fr; } }

/* Footer 2.26 (Marc 02.11.2026, "passt nicht in die Lücke die Portale"): "Portale" is its own column between the brand block and
   "Regelwerke", so the footer is about a third lower on wide screens. Tablet: brand block on its own row, three columns below;
   phones keep the accordion in the same order (brand block, Portale, Regelwerke, Complass). */
.lp-foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.lp-foot-grid > .lp-foot-portals { margin-top: 0; }
@media (max-width: 1000px) {
  .lp-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-foot-grid > .lp-foot-about { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .lp-foot-grid > .lp-foot-portals { grid-column: 1 / -1; } }
@media (max-width: 640px) { .lp-foot-grid { grid-template-columns: minmax(0, 1fr); } .lp-foot-grid > .lp-foot-portals { margin-top: 12px; } }

/* "Über uns" with photos (release 2.26, Marc 02.11.2026): cards with a black-and-white 4:5 portrait on top, name, role and text
   below; the grid takes as many columns as cards are shown (.ab2-team-<n>, at most four side by side; Meles counts as a card since plan 2.37 W1). Cards without
   a photo keep the silhouette. The hero row shows the same photos as round thumbnails. */
.ab2-team-1, .ab2-team-2, .ab2-team-3 { max-width: 900px; }
.ab2-team-1 { grid-template-columns: minmax(0, 300px); }
.ab2-team-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; }
.ab2-team-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Four cards (three people plus Meles, plan 2.37 W1): one row of four on wide screens, two by two on tablets */
.ab2-team-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; }
@media (min-width: 641px) and (max-width: 1100px) { .ab2-team-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
/* Meles card: the portrait is an SVG drawing, so it keeps the light grey of the photos and links to his own page */
.ab2-card-meles .ab2-more-link { margin-top: 4px; }
.ab2-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ab2-card.ab2-card-photo { padding: 0; overflow: hidden; border-style: solid; align-items: stretch; text-align: left; gap: 0; }
.ab2-card-photo .ab2-photo { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #f8f8f8; }
.ab2-card-photo .ab2-card-body { padding: 16px 18px 20px; }
.ab2-stack span img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; border-radius: 50%; background: #f8f8f8; }
@media (max-width: 640px) {
  .ab2-team-1, .ab2-team-2, .ab2-team-3, .ab2-team-4 { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .ab2-card.ab2-card-photo { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .ab2-card-photo .ab2-photo { width: 96px; }
  .ab2-card-photo .ab2-card-body { padding: 12px 14px 14px; }
}

/* Domain check info page /domain-check-info (templates/landing/domain-check-info.php), classes dci-*: identification box next to
   the intro, the security mailbox as a large readable address. */
.dci-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.dci-split p { max-width: 70ch; }
.dci-ids { padding: 22px 24px; }
.dci-ids h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.dci-ids dl { margin: 0; }
.dci-ids dt { font-size: .82rem; color: var(--ink-faint); margin-top: 12px; }
.dci-ids dd { margin: 2px 0 0; color: var(--ink); }
.dci-ids code { display: block; font-size: .86rem; overflow-wrap: anywhere; white-space: normal; }
.dci-mail { display: flex; gap: 16px; align-items: center; padding: 20px 24px; max-width: 560px; margin-top: 8px; }
.dci-mail .icon { width: 26px; height: 26px; flex: none; color: var(--accent); }
.dci-mail p { margin: 0; }
.dci-k { display: block; font-size: .82rem; color: var(--ink-faint); }
.dci-addr { font-size: clamp(1.15rem, 3.2vw, 1.45rem); font-weight: 600; overflow-wrap: anywhere; }
.dci-excl { margin-top: 48px; }
.dci-excl p { max-width: 70ch; }
@media (max-width: 900px) { .dci-split { grid-template-columns: 1fr; gap: 28px; } }
.dci-excl .lp-checks { margin-bottom: 20px; }

/* Guide overview "Ratgeber" (templates/landing/guides/index.php): topic filter without script, image cards, compact rows on phones */
.lp-guide-index { display: grid; gap: 32px; }
.lp-guide-filter { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-guide-filter legend { padding: 0; margin-bottom: 12px; font-weight: 600; }
.lp-guide-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-guide-filter label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line, #d9d4c7); border-radius: 999px; cursor: pointer; }
.lp-guide-filter label span { font-size: .85rem; opacity: .8; }
.lp-guide-filter label:hover { border-color: var(--ink); }
.lp-guide-filter input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.lp-guide-filter input:focus-visible + label { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.lp-guide-index:has(#gf-nis2:checked) .lp-guide-cards li:not([data-topic="nis2"]),
.lp-guide-index:has(#gf-iso-27001:checked) .lp-guide-cards li:not([data-topic="iso-27001"]),
.lp-guide-index:has(#gf-iec-62443:checked) .lp-guide-cards li:not([data-topic="iec-62443"]),
.lp-guide-index:has(#gf-cra:checked) .lp-guide-cards li:not([data-topic="cra"]),
.lp-guide-index:has(#gf-suppliers:checked) .lp-guide-cards li:not([data-topic="suppliers"]),
.lp-guide-index:has(#gf-sectors:checked) .lp-guide-cards li:not([data-topic="sectors"]) { display: none; }
.lp-guide-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* Own card line, darker than --line-strong, so the frames hold up beside the strong covers (Marc 05.11.2026) */
.lp-guide-cards { --guide-card-line: #a9b5c6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-guide-cards { --guide-card-line: #4a638f; } }
:root[data-theme="dark"] .lp-guide-cards { --guide-card-line: #4a638f; }
.lp-guide-cards a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--guide-card-line); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; }
.lp-guide-cards a:hover strong { text-decoration: underline; }
.lp-guide-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line, #d9d4c7); }
.lp-guide-cover { display: block; width: 100%; height: 100%; }
.lp-guide-card-text { display: grid; gap: 8px; padding: 16px 18px 18px; }
.lp-guide-card-text strong { font-size: 1.05rem; line-height: 1.35; }
.lp-guide-card-text small { opacity: .75; }
.lp-guide-card-topic { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.lp-guide-index-note { font-size: .875rem; opacity: .8; margin: 0; }
@media (max-width: 640px) {
  .lp-guide-index { gap: 24px; }
  .lp-guide-cards { gap: 12px; }
  .lp-guide-filter { flex-wrap: nowrap; overflow-x: auto; position: relative; padding-bottom: 4px; }
  .lp-guide-filter label { flex: none; white-space: nowrap; }
  .lp-guide-cards a { flex-direction: row; align-items: center; }
  .lp-guide-card-img { flex: 0 0 112px; margin-left: 10px; border-bottom: 0; border-radius: 8px; }
  .lp-guide-cover-label { display: none; }
  .lp-guide-card-text { gap: 4px; padding: 12px 14px; }
  .lp-guide-card-text strong { font-size: 1rem; }
  .lp-guide-card-text small:last-child { display: none; }
}
/* Guide text: numbered steps and point cards instead of long lists (templates/landing/guides/page.php) */
.lp-guide-body h2 { margin-top: 56px; }
.lp-guide-body p { margin-block: 0 16px; }
.lp-guide-body .lp-guide-steps { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; }
.lp-guide-body .lp-guide-steps li { position: relative; margin: 0; padding: 14px 16px 14px 62px; border: 1px solid var(--line, #d9d4c7); border-radius: 12px; }
.lp-guide-body .lp-guide-steps li::before { content: attr(data-step); position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .95rem; background: var(--brand, #13233F); color: #fff; }
.lp-guide-body .lp-guide-points { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lp-guide-body .lp-guide-points li { margin: 0; padding: 14px 16px; border: 1px solid var(--line, #d9d4c7); border-radius: 12px; }
.lp-guide-body .lp-guide-points strong { display: block; margin-bottom: 4px; }
.pk-row-link { display: block; font-size: .85rem; font-weight: 400; }

/* Home page as a story (proposal 05.11.2026, Marc: "lass die Seite eine Geschichte erzählen"): open rows and graphics instead of tiles */
.hp-relief-start { margin-top: 88px; }
.hp-moment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; margin-top: 36px; }
.hp-moment h3 { margin: 0 0 18px; color: var(--accent-dark); font: 600 .85rem var(--font-sans); }
.hp-moment p { margin: 18px 0 0; max-width: 46ch; color: var(--ink-soft); }
.hp-papers { display: grid; justify-items: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-papers li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); font-size: .9rem; box-shadow: var(--st-shadow-sm); }
.hp-papers li:nth-child(1) { transform: rotate(-2.5deg); }
.hp-papers li:nth-child(2) { transform: translateX(44px) rotate(1.5deg); }
.hp-papers li:nth-child(3) { transform: translateX(12px) rotate(-1deg); }
.hp-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.hp-steps li { counter-increment: st; display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.hp-steps li::before { content: counter(st); flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dark); color: var(--on-accent, #fff); font: 600 .9rem var(--font-sans); }
.hp-rows { display: grid; gap: 56px; margin-top: 40px; }
.hp-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hp-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hp-row:nth-child(even) .hp-row-text { order: 2; }
.hp-row-text { min-width: 0; }
.hp-row-text h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.hp-row-text p { margin: 0 0 12px; max-width: 46ch; color: var(--ink-soft); }
.hp-row-text .hp-row-eyebrow { margin: 0 0 8px; color: var(--accent-dark); font-size: .85rem; font-weight: 600; }
.hp-row-text .hp-row-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
.hp-row-links .lp-link { display: inline-flex; align-items: center; min-height: 44px; }
.hp-row-shot .lp-figure { margin: 0; }
.hp-more-h { margin: 56px 0 20px; font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 400; }
.hp-more { columns: 2; column-gap: 56px; margin: 0; padding: 0; list-style: none; }
.hp-more li { break-inside: avoid; padding: 0 0 18px; color: var(--ink-soft); }
.hp-more a { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
.hp-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-hub { display: block; width: 100%; max-width: 1100px; height: auto; margin: 20px auto 0; }
.hp-hub-tick { stroke: var(--line); }
.hp-hub-inner { fill: none; stroke: #e0a93b; stroke-opacity: .35; }
.hp-hub-star { fill: #e0a93b; fill-opacity: .07; }
.hp-hub-brand { fill: #f7f3ea; font: 400 34px var(--font-display); }
.hp-hub-core-line { margin: 12px 0 0; color: var(--ink-soft); }
.hp-hub-fw { fill: #f7f3ea; font: 600 14px var(--font-sans); }
.hp-hub-all { fill: #e0a93b; font: 600 14px var(--font-sans); }
.hp-hub-arc { fill: none; stroke-width: 4; stroke-linecap: round; }
.hp-hub-arc-0 { stroke: url(#hp-hub-brass); }
.hp-hub-arc-1 { stroke: #1f7a86; }
.hp-hub-arc-2 { stroke: #23406e; }
.hp-hub-dot { stroke: var(--surface); stroke-width: 3; }
.hp-hub-dot-0 { fill: #d39a2f; } .hp-hub-dot-1 { fill: #1f7a86; } .hp-hub-dot-2 { fill: #23406e; }
.hp-hub-t { fill: var(--ink); font: 400 20px var(--font-display); }
.hp-hub a:hover .hp-hub-t { fill: var(--accent-dark); }
.hp-hub a:hover .hp-hub-dot { stroke: var(--accent-dark); }
.hp-hub a:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.hp-hub-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .9rem; }
.hp-hub-legend li { display: flex; align-items: center; gap: 8px; }
.hp-hub-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #d39a2f; }
.hp-hub-key-1::before { background: #1f7a86 !important; }
.hp-hub-key-2::before { background: #23406e !important; }
.hp-hub-list { display: none; }
.hp-hub-list .lp-fold { margin-top: 8px; }
.hp-hub-list .lp-fold-sum { justify-content: flex-start; padding: 0; }
#so-sieht-es-aus .lp-video { max-width: 760px; }
/* Closing band with the two start cards (draft 2.35): the cards keep the page tokens, so their outlined button goes back to page colours; #starten sits above it */
.hp-start-band .lp-pair { margin-top: 24px; }
main .hp-start-band .lp-pair-card { border-color: var(--line); color: var(--ink); }
.hp-start-band .lp-pair-card p { color: var(--ink-soft); }
.hp-start-band .lp-pair-card .hp-start-legal { color: var(--ink-soft); }
main .lp-band.hp-start-band .lp-pair-card .lp-btn-outline, :root[data-theme="dark"] main .lp-band.hp-start-band .lp-pair-card .lp-btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
main .lp-band.hp-start-band .lp-pair-card .lp-btn-outline:hover, :root[data-theme="dark"] main .lp-band.hp-start-band .lp-pair-card .lp-btn-outline:hover { background: var(--ink); color: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) main .lp-band.hp-start-band .lp-pair-card .lp-btn-outline { border-color: var(--ink); color: var(--ink); } }
.hp-hub-list h3 { margin: 18px 0 2px; color: var(--accent-dark); font: 600 .85rem var(--font-sans); }
.hp-all-cta { margin: 24px 0 0; text-align: center; }
.hp-all-people { max-width: 70ch; margin: 20px auto 0; color: var(--ink-soft); text-align: center; }
.hp-rows-ot { margin-top: 72px; }
.hp-flow { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 0; padding: 0; list-style: none; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; }
.hp-flow a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.hp-gfx { display: grid; gap: 8px; max-width: 420px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--inset); }
.hp-gfx-prices { gap: 0; margin: 0; }
.hp-gfx-prices div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.hp-gfx-prices div:last-child { border-bottom: 0; }
.hp-gfx-prices dt { font-weight: 600; color: var(--ink); }
.hp-gfx-prices dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.hp-gfx-note { max-width: 420px; margin: 8px 0 0; color: var(--ink-soft); font-size: .8rem; }
.hp-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; margin: 32px 0 44px; }
@media (max-width: 860px) {
  .hp-moment { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
  .hp-relief-start { margin-top: 48px; }
  .hp-rows { gap: 32px; margin-top: 24px; }
  .hp-price { margin: 20px 0 28px; }
  .hp-row, .hp-row:nth-child(even), .hp-price { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hp-row:nth-child(even) .hp-row-text { order: 0; }
  .hp-more-h { margin-top: 36px; }
  .hp-more { columns: 1; }
  .hp-hub, .hp-hub-legend { display: none; }
  .hp-hub-list { display: block; }
  .hp-all-cta, .hp-all-people { text-align: left; }
  .hp-rows-ot { margin-top: 32px; }
}
.hp-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 12px; }

/* Everyday scene in the page head instead of the lead (lp_head() $scene, pattern of the industry page, strategy decision Marc 05.11.2026) */
.lp-page-head .lp-scene p.lp-scene-when { margin: 0 0 6px; color: #e0a93b; font-weight: 600; }
.lp-scene .lp-lead { margin-bottom: 12px; }
.lp-page-head .lp-scene p.lp-scene-turn { margin: 0 0 20px; color: #fff; font-size: 1.1rem; font-weight: 600; }

/* Airy duties section of a page with a scene (.lp-airy, _zielgruppe.php; Marc 05.11.2026 "bisschen mehr entzerren") */
.lp-airy .lp-challenges { gap: 48px; margin-top: 32px; }
.lp-airy .lp-challenge { padding: 6px 0 6px 20px; }
.lp-airy .lp-challenge h3 { margin: 14px 0 8px; }
.lp-airy .lp-aud.lp-sec-inner { margin-top: 96px; }
.lp-airy .lp-aud { gap: 72px; }
.lp-airy .lp-aud .lp-checks li { margin-bottom: 20px; }
.lp-airy .lp-note-fw { margin-top: 28px; }
.lp-airy .lp-next-links { gap: 18px; margin-top: 72px; }
.lp-airy .lp-legal-note { margin-top: 44px; }
.lp-airy .lp-sectors-h { margin-top: 0; }
.lp-airy .lp-grid2 { gap: 40px 64px; margin-top: 28px; }
@media (max-width: 640px) {
  .lp-airy .lp-challenges { gap: 28px; }
  .lp-airy .lp-aud.lp-sec-inner { margin-top: 56px; }
  .lp-airy .lp-aud { gap: 32px; }
  .lp-airy .lp-aud .lp-checks li { margin-bottom: 14px; }
  .lp-airy .lp-next-links { margin-top: 44px; }
  .lp-airy .lp-grid2 { gap: 24px; }
}
.lp-help-note { max-width: 70ch; margin: 44px 0 0; }

/* Headlines of the subpages break at word ends only, as in the home hero (Marc 05.11.2026, "Gerä-te"); overflow-wrap of main stays as the guard for very long words */
@media (max-width: 640px) { .lp-page-head .lp-h1 { hyphens: manual; } }

/* Public maturity check (templates/landing/tools/maturity-check.php, ADR 0304); design tokens only, no traffic-light colours */
.mc-scale { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mc-scale summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-weight: 600; }
.mc-scale dl { margin: 0; padding: 0 14px 12px; display: grid; gap: 6px; }
.mc-scale dl div { display: grid; gap: 0; }
.mc-scale dt { font-weight: 600; }
.mc-scale dd { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.mc-q { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.mc-q legend { font-weight: 600; font-size: 1.05rem; line-height: 1.4; padding: 0; margin-bottom: 10px; }
.mc-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft); font: 500 .75rem var(--font-sans); white-space: nowrap; vertical-align: 2px; }
.mc-opts { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-opts .check { min-height: 44px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; line-height: 1.25; }
.mc-opts .check:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mc-fw .mc-opts { grid-template-columns: 1fr; }
.mc-count { font-weight: 600; margin: 4px 0 10px; min-height: 1.5em; }
.mc-privacy { color: var(--ink-soft); font-size: .92rem; }
.mc-result { scroll-margin-top: 90px; }
.mc-result:focus { outline: none; }   /* tabindex -1 target of the form action, never reached by Tab */
.mc-result .pc-send-demo p { margin: 8px 0 0; }
.mc-note { max-width: 70ch; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mc-scores { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 24px 0 36px; }
.mc-score { padding: 22px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--st-shadow-sm); min-width: 0; }
.mc-score h3 { margin: 0 0 6px; font-size: 1rem; }
.mc-score p { margin: 4px 0 0; }
.mc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.mc-num { font: 400 3.2rem/1.1 var(--font-display, "Marcellus", serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.mc-score p.mc-band { margin: 8px 0 2px; font-weight: 600; }
.mc-track { display: block; width: 100%; height: 10px; border: 0; border-radius: 5px; overflow: hidden; appearance: none; -webkit-appearance: none; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.mc-track::-webkit-progress-bar { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.mc-track::-webkit-progress-value { background: var(--ink); }
.mc-track::-moz-progress-bar { background: var(--ink); }
.mc-score .mc-track { margin-top: 12px; }
.mc-topics { list-style: none; margin: 12px 0 36px; padding: 0; display: grid; gap: 12px; }
.mc-topics li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 7rem; gap: 12px; align-items: center; }
.mc-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .92rem; white-space: nowrap; }
.mc-gaps { list-style: none; margin: 12px 0 36px; padding: 0; }
.mc-gaps li { padding: 16px 0; border-top: 1px solid var(--line); }
.mc-gaps li:last-child { border-bottom: 1px solid var(--line); }
.mc-gaps h4 { margin: 0 0 2px; font-size: 1.05rem; }
.mc-gaps p { margin: 4px 0 0; max-width: 70ch; }
.mc-stand { color: var(--ink-soft); font-size: .92rem; }
.mc-open { margin: 8px 0 32px; padding-left: 20px; }
.mc-card { margin: 24px 0; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--st-shadow-sm); }
.mc-card h3 { margin: 0 0 14px; }
.mc-band-small { font-size: .9rem; opacity: .9; margin-top: 8px; }
@media (max-width: 720px) {
  .mc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-opts .check { padding: 8px 10px; gap: 8px; hyphens: auto; }
  .mc-fw .mc-opts { grid-template-columns: 1fr; }
  .mc-topics li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .mc-topics .mc-track { grid-column: 1 / -1; grid-row: 2; }
  .mc-opts .check input, .mc-q legend { font-size: 16px; }
}
@media print {
  body:has(#mc-ergebnis) { background: #fff; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(#mc-ergebnis) .lp-head, body:has(#mc-ergebnis) .lp-foot, body:has(#mc-ergebnis) .lp-page-head, body:has(#mc-ergebnis) .mc-form,
  body:has(#mc-ergebnis) #faq, body:has(#mc-ergebnis) .lp-band, body:has(#mc-ergebnis) .skip-link, body:has(#mc-ergebnis) .cookie-note { display: none !important; }
  body:has(#mc-ergebnis) .lp-sec { padding: 0; }
  .mc-score { box-shadow: none; border: .3mm solid #d9e0ea; break-inside: avoid; }
  .mc-gaps li { break-inside: avoid; }
  .mc-result a { color: inherit; text-decoration: none; }
}
/* ---------- Package page: columns, terms and comparison (draft for Marc 06.11.2026: the page has to move visitors to buy) ----------
   templates/landing/packages.php. One column per package with price and button first, Professional as the recommended dark card (fixed colours in both
   themes like the head and the dark band: Messing 7.4 : 1 and #f7f3ea about 13 : 1 on Tiefsee). No section of this page is a dark band, so this card is the
   page's one dark accent. The plain stair list stands in for the columns on phones only. */
main:has(.pk-plans) .lp-page-head { padding-block: 40px 76px; }   /* a short head: the prices start in the first screen at 1440 x 900 */
.pk-quick { display: none; }
.pk-all { padding: 28px 0 88px; }
.pk-wide { max-width: 1400px; }
.pk-pick-head { max-width: 1132px; margin: 0 auto 44px; }   /* 1132 px = the text width of .lp-wrap, so heading and notes line up with the page head */
.pk-pick-head .lp-h2 { margin: 0; }
.pk-pick-head .pk-under-head { margin: 12px 0 0; font-size: .95rem; }
.pk-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pk-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 28px; border: 1px solid var(--line); background: var(--st-card, var(--surface)); scroll-margin-top: 112px; }
.pk-plan:target { outline: 3px solid var(--accent-bright); outline-offset: 4px; }
.pk-plan.is-accent { --ink: #f7f3ea; --ink-soft: #d3dae6; --ink-faint: #a9b6ca; --line: rgba(247, 243, 234, .22); --accent: #e0a93b; --accent-dark: #e0a93b;
  margin-block: -20px; padding-block: 46px 46px; border: 2px solid var(--btn-bg); border-radius: 12px; background: #13233f; color: var(--ink); box-shadow: 0 18px 44px rgba(19, 35, 63, .28); }
.pk-flag { position: absolute; top: -15px; left: 26px; margin: 0; padding: 4px 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: .85rem; font-weight: 700; line-height: 1.4; }
.pk-plan-name { margin: 0; color: var(--ink); font: 400 1.9rem/1.2 var(--font-display); }
.pk-plan-short { min-height: 3em; margin: 6px 0 0; color: var(--ink-soft); line-height: 1.5; }
.pk-plan-price { margin: 14px 0 0; color: var(--ink-soft); font-size: .95rem; }
.pk-plan-price strong { display: block; color: var(--ink); font-size: 2.35rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.pk-plan.is-accent .pk-plan-price strong { color: var(--accent-bright); }
.pk-tiers { list-style: none; margin: 14px 0 0; padding: 0; color: var(--ink-faint); font-size: .85rem; line-height: 1.5; }
.pk-plan > .btn { justify-content: center; width: 100%; margin-top: 18px; padding-inline: 12px; white-space: normal; text-align: center; }
.pk-plan-for { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.5; }
.pk-gains { list-style: none; display: grid; gap: 16px; margin: 22px 0 0; padding: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.pk-gains li { position: relative; padding-left: 28px; overflow-wrap: anywhere; hyphens: manual; }
.pk-gains li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--ok-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pk-plan.is-accent .pk-gains li::before { background: var(--accent-bright); }
.pk-gains strong { display: block; color: var(--ink); font-weight: 600; }
.pk-plan .pk-text, .pk-plan .pk-soonline { margin: 20px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.pk-plan-end { display: grid; justify-items: start; gap: 14px; margin-top: auto; padding-top: 28px; }
.pk-plan .pk-chips, .pk-others .pk-chips { display: block; margin: 0; color: var(--ink-faint); font-size: .85rem; line-height: 1.6; }
.pk-plan .pk-chips li, .pk-others .pk-chips li { display: inline; padding: 0; border: 0; font-size: inherit; color: inherit; }
.pk-plan .pk-chips li + li::before, .pk-others .pk-chips li + li::before { content: " · "; }
.pk-fit { width: 100%; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.pk-fit summary { cursor: pointer; padding-block: 2px; color: var(--ink); font-weight: 600; }
.pk-fit summary:focus-visible, .pk-note-more summary:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; border-radius: 4px; }
.pk-fit p { margin: 8px 0 0; }
.pk-plans-note { max-width: 1132px; margin: 44px auto 0; color: var(--ink-faint); font-size: .9rem; }
.pk-others-h { max-width: 1132px; margin: 72px auto 24px; }
.pk-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1132px; margin: 0 auto; }
.pk-others-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-others .pk-mini { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 104px; padding: 32px; }
.pk-others .pk-mini > * { margin-block: 0; }
.pk-others .pk-mini > * + * { margin-top: 14px; }
.pk-others .pk-for { margin-bottom: 0; }
.pk-mini-price { color: var(--ink-soft); font-size: .95rem; }
.pk-mini-price strong { color: var(--ink); font-size: 1.6rem; font-weight: 700; }
.pk-others .pk-cta { margin-top: auto; padding-top: 22px; }

.pk-terms { padding: 88px 0; }
.pk-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 56px; margin: 48px 0 0; padding: 0; }
.pk-facts li { min-width: 0; color: var(--ink-soft); line-height: 1.6; }
.pk-fact-h { margin: 14px 0 6px; color: var(--ink); font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
.pk-facts p { margin: 0; }
.pk-facts .pk-fact-link { margin-top: 8px; }

#vergleich { padding: 88px 0; }
.pk-table col.pk-col-accent { background: color-mix(in srgb, var(--btn-bg) 11%, transparent); }
.pk-table .pk-row-price th, .pk-table .pk-row-price td { font-weight: 700; color: var(--ink); }
.pk-table .pk-row-cta a { font-weight: 600; }
.pk-note-more { margin-top: 12px; color: var(--ink-faint); font-size: .9rem; max-width: 70ch; }
.pk-note-more summary { cursor: pointer; padding-block: 4px; color: var(--ink-soft); font-weight: 600; }
@media (min-width: 1001px) {
  .pk-others:not(.pk-others-3) .pk-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The table is about 3,000 px tall: its head row stays in view below the sticky page header. Sticky needs a wrapper without its own scrolling; it fits here anyway */
  #vergleich .pk-table-wrap { overflow: visible; }
  #vergleich .pk-table thead th { position: sticky; top: 89px; z-index: 3; background: var(--st-card, var(--surface)); box-shadow: 0 1px 0 var(--line); }
}
@media (max-width: 1239px) {
  .pk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .pk-plan.is-accent { margin-block: 0; padding-block: 44px 32px; }
  .pk-plan-short { min-height: 0; }
}
@media (max-width: 1000px) {
  .pk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .pk-others-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pk-plans, .pk-others { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.pk-plans) .lp-page-head { padding-block: 24px 56px; }
  .pk-quick { display: block; margin-top: 24px; }
  .pk-all { padding: 36px 0 48px; }
  .pk-pick-head { margin-bottom: 36px; }
  .pk-plans { gap: 32px; }
  .pk-plan { padding: 26px 20px 22px; }
  .pk-plan.is-accent { padding-block: 34px 26px; }
  .pk-plan-short { display: none; }   /* the list below the head says it already; the sentence below the button stays */
  .pk-plan-price { margin-top: 8px; }
  .pk-plan-for { display: none; }   /* page budget of section 13: the fit is in the list and in "Typische Ausgangslage" */
  .pk-gains { gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); line-height: 1.5; }
  .pk-others .pk-gains { padding-top: 0; border-top: 0; }
  .pk-others .pk-gains span:not(.lp-tag) { display: none; }   /* Praxis: the titles say it; the details stay on the framework page */
  .pk-plan-end { padding-top: 20px; gap: 8px; }
  .pk-plans-note { margin-top: 28px; }
  .pk-others-h { margin-top: 44px; }
  .pk-others .pk-mini { padding: 22px 20px; }
  .pk-terms, #vergleich { padding: 44px 0; }
  .pk-facts { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
  .pk-facts .pk-ic { display: none; }
  .pk-fact-h { margin-top: 0; }
  #vergleich .pk-table { min-width: 980px; }   /* wider inside its own scrolling region: the long row labels take two lines instead of four */
  #vergleich .pk-table tbody th:first-child { min-width: 27rem; }
}
@media (pointer: coarse) { .pk-fit summary, .pk-note-more summary { display: flex; align-items: center; min-height: 44px; } .pk-plan .pk-more-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- Features overview /funktionen (rework 06.11.2026, templates/landing/funktionen.php; docs/features/WEBSITE.md "Features overview") ---------- */
.lp-sec.ft-sec { padding-block: 88px; scroll-margin-top: 90px; }
.lp-sec.ft-sec + .lp-sec.ft-sec { border-top: 0; }
.ft-flow-wrap { position: relative; z-index: 2; margin-top: -34px; }
.ft-flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-radius: 12px; background: var(--st-card, var(--surface)); box-shadow: var(--st-shadow); }
.ft-flow li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; padding: 20px 22px; }
.ft-flow li + li { border-left: 1px solid var(--line); }
.ft-flow .icon { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--accent-dark); }
.ft-flow strong { color: var(--ink); font-size: 1.02rem; }
.ft-flow span { color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.ft-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; color: var(--ink); font-size: .92rem; font-weight: 600; }
.ft-kicker .lp-icon .icon { width: 20px; height: 20px; }
.ft-eyebrow { margin: 0 0 8px; color: var(--accent-dark); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ft-sec-head { max-width: 680px; margin-bottom: 48px; }
.ft-sec-head .lp-intro { margin-bottom: 0; }
.ft-lead-block { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.ft-window { min-width: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -24px rgba(19, 35, 63, .35), 0 0 0 1px var(--line); }
.ft-window img { display: block; width: 100%; height: auto; }
.ft-checks { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.ft-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--ink); }
.ft-checks .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--accent-dark); }
.ft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 26px 0 0; }
.ft-rows { display: grid; gap: 88px; }
.ft-row { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.ft-row:nth-child(odd) { grid-template-columns: 7fr 5fr; }
.ft-row:nth-child(odd) .ft-window { order: -1; }   /* the picture changes sides from row to row; the text stays first in the source for phones */
.ft-row-text { min-width: 0; }
.ft-row-text > p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.ft-row-text > .ft-kicker { margin-bottom: 14px; color: var(--ink); }
.ft-row-text > .ft-actions { margin-top: 18px; }
.ft-row-h { margin: 0 0 12px; color: var(--ink); font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1.25 var(--font-display); }
.ft-also { display: grid; gap: 6px; margin-top: 28px !important; padding-top: 22px; border-top: 1px solid var(--line); }
.ft-also .ft-kicker { margin: 0; }
.ft-kicker .lp-plan-link { font-weight: 600; }
.ft-quiet { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 72px; margin: 80px 0 0; padding: 40px 0 0; border-top: 1px solid var(--line); }
.ft-quiet-h { margin: 0; font: 400 1.3rem/1.3 var(--font-display); }
.ft-quiet-h a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 4px; }
/* A detail of a pipeline picture: --w is the width of the picture in the window, --x and --y move it. Screenshots stay light in the dark theme. */
.ft-crop { position: relative; aspect-ratio: 16 / 10; }
.ft-crop img { position: absolute; top: var(--y, 0); left: var(--x, 0); width: var(--w, 100%); max-width: none; height: auto; }
.ft-crop-zones { --w: 116%; --x: -2%; --y: -16%; }
.ft-crop-vulns { --w: 175%; --x: -11%; --y: -12%; }
.ft-crop-risks { --w: 220%; --x: -20%; --y: -120%; }
.ft-crop-incident { --w: 190%; --x: -47%; --y: -18%; }
.ft-crop-suppliers { --w: 140%; --x: -11%; --y: -28%; }
.ft-crop-academy { --w: 170%; --x: -54%; --y: -45%; }
.ft-crop-jira { --w: 150%; --x: -38%; --y: -6%; }
.lp-core-band { --ink: #f7f3ea; --ink-soft: #d3dae6; --line: rgba(247, 243, 234, .22); --accent: #e0a93b; --accent-dark: #e0a93b;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; padding: 56px 56px; border: 2px solid var(--btn-bg); border-radius: 12px; background: #13233f; color: var(--ink-soft); box-shadow: 0 18px 44px rgba(19, 35, 63, .28); }
.lp-core-band .lp-h2 { margin: 0 0 12px; color: var(--ink); }
.lp-core-band p { margin: 0; }
.lp-core-band .ft-kicker { margin-bottom: 12px; color: var(--ink); }
.lp-core-band .ft-actions { margin-top: 18px; }
.lp-core-band .lp-link { color: #e0a93b; }
.ft-plans { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.ft-plans a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px 22px 20px; border-radius: 12px; background: var(--st-card, var(--surface)); box-shadow: var(--st-shadow-sm); color: var(--ink); text-decoration: none; }
.ft-plans a:hover { box-shadow: var(--st-shadow); text-decoration: none; }
.ft-plans strong { font: 400 1.35rem/1.2 var(--font-display); }
.ft-plan-for { color: var(--ink-soft); font-size: .92rem; line-height: 1.4; }
.ft-plan-price { margin-top: auto; padding-top: 10px; font-weight: 700; }
.ft-plans .is-accent a { box-shadow: 0 0 0 2px var(--btn-bg), var(--st-shadow-sm); }
.ft-plan-flag { position: absolute; top: -12px; left: 18px; padding: 2px 12px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: .8rem; font-weight: 700; }
@media (max-width: 1000px) {
  .ft-lead-block { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ft-flow, .ft-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-flow li:nth-child(3) { border-left: 0; }
  .ft-flow li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ft-row, .ft-row:nth-child(odd) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft-row:nth-child(odd) .ft-window { order: 0; }
  .ft-rows { gap: 72px; }
  .lp-core-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
}
@media (max-width: 640px) {
  .ft-flow-wrap { margin-top: 20px; }
  .ft-flow li { padding: 12px 14px; align-items: center; }
  .ft-flow span { display: none; }   /* page budget of section 13: the four words carry the line, the sections below explain them */
  .ft-flow .icon { grid-row: auto; margin-top: 0; }
  .lp-page-head .lp-head-film .lp-shot { max-height: 260px; }   /* the top of the phone picture, not the whole 1:2 screen */
  .ft-rows { gap: 36px; }
  .ft-row, .ft-row:nth-child(odd) { gap: 16px; }
  .ft-crop { aspect-ratio: 2 / 1; }
  .ft-crop:has(picture) img { top: -32%; left: 0; width: 100%; }   /* phone pictures are made for this width; the app bar stays out of the window */
  .ft-crop-zones:has(picture) img { top: -150%; }
  .ft-crop-suppliers:has(picture) img { top: -90%; }
  .ft-no-phone { display: none; }   /* page budget of section 13: the detail pages show the rest */
  .ft-plan-for, .lp-core-band .ft-checks, #pakete .lp-intro, .ft-row:has(.ft-no-phone) .ft-row-text > p:not([class]) { display: none; }
  .ft-row-h { margin-bottom: 8px; font-size: 1.3rem; }
  .ft-row-text > .ft-actions { margin-top: 10px; }
  .ft-also { margin-top: 18px !important; padding-top: 14px; }
  .ft-quiet { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 44px; padding-top: 24px; }
  .lp-sec.ft-sec { padding-block: 30px; }
  .ft-window { aspect-ratio: 4 / 3; }
  .ft-window.ft-crop { aspect-ratio: 2 / 1; }
  .ft-lead-block .ft-window img { width: 190%; max-width: none; }   /* the left half of the matrix stays readable */
  .ft-sec-head { margin-bottom: 24px; }
  .ft-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ft-plans a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
  .ft-plan-price { margin: 0; padding: 0; font-size: .9rem; text-align: right; }
  .lp-core-band { padding: 28px 22px; }
}
@media (max-width: 360px) { .ft-rows { gap: 24px; } .lp-sec.ft-sec { padding-block: 24px; } .ft-sec-head .lp-intro { display: none; } }   /* page budget of section 13 at 320 px */
/* Applicability check: where the free first assessment ends */
.pc-limits { margin: 24px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pc-limits h3 { margin: 0 0 12px; }
.pc-limits-grid { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pc-limits ul { margin: 0 0 12px; padding-left: 18px; }
.pc-limits li { margin: 0 0 4px; }
.pc-limits > p { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* "Partner werden" below the role pages of "Kunden begleiten" (plan 2.37 W1): same size as the role links, set off with an arrow */
.lp-sub .lp-who-roles a.lp-who-extra { color: var(--accent-dark); font-weight: 600; }
.lp-sub .lp-who-roles a.lp-who-extra::after { content: " \2192"; }