/* Clarity360 Unterseiten (DESIGN.md v2.0, Abschnitt 14). Liegt auf theme.css und home.css. Säule über Klasse .p-t/.p-e/.p-b am main. */
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--fg-2);text-decoration:none;font-size:.9375rem}
.back:hover{color:var(--fg-1)}
.sub-hero{padding-block:clamp(40px,6vw,88px) clamp(48px,7vw,96px);border-top:3px solid var(--pillar)}
.sub-hero .tag{margin-top:28px}
.sub-hero h1{margin-top:14px;font-weight:300;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.04;letter-spacing:-.02em;max-width:16ch}
.sub-lead{margin-top:28px;max-width:44ch;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55}
.proc{margin-top:48px;counter-reset:p;border-top:1px solid var(--border-strong)}
.proc li{counter-increment:p;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.2fr);gap:8px 40px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--border)}
.proc li::before{content:counter(p,decimal-leading-zero);font:300 clamp(2.25rem,4vw,3.25rem)/1 var(--f-head);color:var(--ink);font-variant-numeric:lining-nums}
.proc h3{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:400}
.proc p{color:var(--fg-2);max-width:56ch}
.rows{margin-top:48px;border-top:1px solid var(--border-strong)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 64px;padding:36px 0;border-bottom:1px solid var(--border)}
.row-h h3{font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem)}
.row-h .meta{margin-top:8px;color:var(--ink);font-weight:600;letter-spacing:.04em}
.row-b p{max-width:56ch;color:var(--fg-2)}
.row-b .link{margin-top:12px}
.ref-h{margin-top:12px;font-weight:300}
.ref{margin-top:36px;display:grid;gap:20px;max-width:720px}
.ref-i{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:4px 28px;align-items:baseline;padding-top:20px;border-top:1px solid var(--border)}
.ref-fig{font-family:var(--f-head);font-weight:300;font-size:clamp(3rem,7vw,5.5rem);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.ref-fig .u{font-size:.45em;letter-spacing:0}
.ref-l{color:var(--fg-2)}
.ref-t{margin-top:32px;max-width:56ch}
.ref-t+.meta{margin-top:8px}
.faq{margin-top:40px;border-top:1px solid var(--border-strong);max-width:860px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:22px 0;font:400 clamp(1.15rem,1.8vw,1.4rem)/1.25 var(--f-head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--link)}
.faq .proj-x::after{transform:rotate(90deg)}
.faq details[open] .proj-x::after{transform:rotate(0)}
.faq .ans{padding:0 0 28px;max-width:62ch;color:var(--fg-2)}
@media (max-width:860px){
  .proc li{grid-template-columns:56px minmax(0,1fr);gap:8px 16px}
  .proc li p{grid-column:2}
  .row{grid-template-columns:1fr;padding:28px 0}
  .ref-i{grid-template-columns:1fr;gap:0}
}
.ref-fig{white-space:nowrap}
.ref-fig .num,.ref-fig .u{display:inline;font:inherit;color:inherit}
.ref-fig .u{font-size:.45em}
.ref-ul{margin-top:32px;max-width:760px;border-top:1px solid var(--border-strong)}
.ref-ul li{padding:16px 0;border-bottom:1px solid var(--border);color:var(--fg-1)}
.ref-ul+.meta{margin-top:16px}
/* Produktübersicht */
.pr-list{border-top:1px solid var(--border-strong)}
.pr{display:grid;grid-template-columns:56px minmax(0,3fr) minmax(0,5fr) 170px;gap:8px 28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.pr-icon{width:56px;height:56px;border-radius:14px}
.pr-t h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400}
.pr-t .tag{margin-top:4px}
.pr-d{color:var(--fg-2);max-width:52ch}
.pr-go{color:var(--link);font-weight:500;white-space:nowrap}
a.pr:hover h2,a.pr:hover .pr-go{color:var(--link-hover);text-decoration:underline;text-underline-offset:5px}
.pr.soon .tag{color:var(--fg-2)}
.pr.soon .pr-icon{opacity:.7}
@media (max-width:860px){
  .pr{grid-template-columns:56px minmax(0,1fr);padding:24px 0}
  .pr-d,.pr-go{grid-column:1 / -1}
}
/* Rechtstexte (Impressum, Datenschutz): Inhalt unverändert, nur Darstellung */
.legal{max-width:780px;padding-block:clamp(40px,6vw,88px) clamp(56px,8vw,112px);margin-inline:max(var(--gut),calc((100% - 1200px)/2))}
.legal h1{font-weight:300;font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:12px}
.legal-meta{color:var(--fg-2);font-size:.9375rem;margin-bottom:32px}
.legal-meta span{color:var(--teal-ink)}
.legal h2{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;margin:48px 0 14px;font-weight:400}
.legal h3{font-size:1.15rem;margin:28px 0 8px;font-weight:500}
.legal p,.legal li{color:var(--fg-2);font-size:1rem;margin-bottom:12px;max-width:70ch}
.legal ul,.legal ol{padding-left:1.2em;list-style:disc;margin-bottom:16px}
.legal ol{list-style:decimal}
.legal li{margin-bottom:6px}
.legal a{color:var(--link);text-underline-offset:3px;overflow-wrap:anywhere}
.legal a:hover{color:var(--link-hover)}
.legal strong{color:var(--fg-1);font-weight:600}
.legal .index,.legal .glossary{list-style:none;padding-left:0}
.legal .index li{margin-bottom:2px}
.legal .index a{font-size:.9375rem}
.legal .seal{margin-top:48px;font-size:.8125rem;color:var(--fg-2)}
.legal .seal a{color:var(--fg-2)}
.legal-s{border-top:1px solid var(--border);padding-top:8px}
.legal-s h2{margin-top:20px}
.legal .placeholder{color:var(--fg-2)}
.legal :target,.legal h2[id]{scroll-margin-top:96px}
.sub-hero h1{hyphens:auto;overflow-wrap:break-word}