/* Psychotherapeutische Praxis – Komponenten (reines CSS, Präfix pp-). Setzt tokens.css voraus. */
body { margin: 0; font-family: var(--font-sans); background: var(--creme); color: var(--text); -webkit-font-smoothing: antialiased; }
.pp-demo { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.pp-demo--col { flex-direction: column; align-items: stretch; }
:where(.pp-btn, .pp-input, .pp-link, .pp-nav a):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Wortmarke */
.pp-wordmark { white-space: nowrap; flex: none; display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.pp-wordmark__name { font-weight: 800; font-size: 20px; line-height: 24px; letter-spacing: -0.02em; color: var(--dark); }
.pp-wordmark__sub { font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blau); }
.pp-wordmark--lg .pp-wordmark__name { font-size: 22px; line-height: 28px; }
.pp-wordmark--inverse .pp-wordmark__name { color: var(--weiss); }
.pp-wordmark--inverse .pp-wordmark__sub { color: var(--blau); }

/* Buttons */
.pp-btn { white-space: nowrap; flex: none; font: inherit; font-weight: 600; font-size: 16px; line-height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-8); border-radius: var(--radius-lg); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; box-sizing: border-box; }
.pp-btn--primary { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.pp-btn--primary:hover { background: var(--orange-text); border-color: var(--orange-text); }
.pp-btn--primary.pp-btn--a11y { color: var(--dark); }
.pp-btn--secondary { background: transparent; border-color: var(--blau); color: var(--blau-text); }
.pp-btn--secondary:hover { background: var(--blau-tint); }
.pp-btn--lg { height: 56px; padding: 0 44px; }
.pp-btn--sm { height: 40px; padding: 0 var(--space-5); font-size: 14px; }

/* Link „→ Mehr erfahren“ */
.pp-link { font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; color: var(--blau-text); display: inline-flex; gap: 6px; }
.pp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-link--gruen { color: var(--gruen-text); } .pp-link--orange { color: var(--orange-text); } .pp-link--amber { color: var(--amber-text); }

/* Header / Navigation */
.pp-header { background: var(--creme); border-top: var(--topbar) solid var(--blau); }
.pp-header__bar { height: 80px; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-10); padding: 0 var(--space-15); border-bottom: 1px solid var(--border); }
.pp-nav { display: flex; gap: var(--space-10); margin-left: auto; }
.pp-nav a { white-space: nowrap; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.pp-nav a[aria-current="page"] { font-weight: 600; color: var(--dark); border-bottom-color: var(--dark); }
.pp-nav a:hover { color: var(--dark); }

/* Abschnittskopf */
.pp-eyebrow { font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blau-text); margin: 0 0 var(--space-2); }
.pp-eyebrow--orange { color: var(--orange-text); }
.pp-h1 { font-weight: 800; font-size: 48px; line-height: 53px; letter-spacing: -0.02em; color: var(--dark); margin: 0; }
.pp-lead { font-size: 18px; line-height: 27px; color: var(--text); margin: var(--space-4) 0 0; max-width: 60ch; }
.pp-accent { color: var(--orange); }

/* Formular */
.pp-field { display: flex; flex-direction: column; gap: 6px; }
.pp-field__label { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pp-input { font: inherit; font-size: 15px; height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--weiss); color: var(--dark); box-sizing: border-box; width: 100%; }
.pp-input::placeholder { color: var(--placeholder); }
.pp-input:focus { border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-tint); outline: none; }
textarea.pp-input { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; }
.pp-consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 12px; line-height: 18px; color: var(--text-muted); }

/* Tags & Badges */
.pp-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-6); border-radius: var(--radius-sm); background: var(--border); color: var(--text); font-weight: 600; font-size: 13px; }
.pp-tag--gruen { background: var(--gruen-tint); color: var(--gruen-text); }
.pp-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-xs); border: 1px solid currentColor; font-weight: 600; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.pp-badge--blau { color: var(--blau-text); background: var(--blau-tint-2); }
.pp-badge--gruen { color: var(--gruen-text); background: var(--gruen-tint); }
.pp-badge--orange { color: var(--orange-text); background: var(--orange-tint); }
.pp-badge--amber { color: var(--amber-text); background: var(--gelb-tint); }
.pp-pill { display: inline-flex; align-items: center; height: 43px; padding: 0 var(--space-6); border-radius: var(--radius-full); border: 1px solid; font-weight: 500; font-size: 14px; box-sizing: border-box; }
.pp-pill--blau { border-color: var(--blau); background: var(--blau-tint-2); color: var(--blau-text); }
.pp-pill--gruen { border-color: var(--gruen); background: var(--gruen-tint); color: var(--gruen-text); }
.pp-pill--orange { border-color: var(--orange); background: var(--orange-tint); color: var(--orange-text); }

/* Häkchenliste */
.pp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pp-checks li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: 13px; line-height: 18px; color: var(--dark); }
.pp-checks__icon { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); background: var(--gruen-tint); color: var(--gruen); display: grid; place-items: center; }
.pp-checks__icon svg { width: 14px; height: 14px; fill: currentColor; }
.pp-checks--plain li { font-weight: 500; }
.pp-checks--plain .pp-checks__icon { width: 16px; height: 16px; background: none; }

/* Karten */
.pp-card { background: var(--weiss); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.pp-card--accent { border-top: var(--topbar) solid var(--blau); }
.pp-card--gruen { border-top-color: var(--gruen); } .pp-card--orange { border-top-color: var(--orange); } .pp-card--gelb { border-top-color: var(--gelb); }
.pp-card__media { aspect-ratio: 16 / 9; background: var(--blau-tint); object-fit: cover; width: 100%; display: block; }
.pp-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.pp-card__title { font-weight: 700; font-size: 22px; line-height: 26px; color: var(--dark); margin: 0; }
.pp-card__text { font-size: 15px; line-height: 22px; color: var(--text); margin: 0; flex: 1; }
.pp-icon-tile { width: 48px; height: 48px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--orange-tint); color: var(--orange); }
.pp-icon-tile svg { width: 20px; height: 20px; fill: currentColor; }
.pp-icon-tile--blau { background: var(--blau-tint); color: var(--blau); } .pp-icon-tile--gruen { background: var(--gruen-tint); color: var(--gruen); } .pp-icon-tile--gelb { background: var(--gelb-tint); color: var(--amber); }

/* Zitat */
.pp-quote { background: var(--weiss); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-6) var(--space-6) var(--space-8); margin: 0; max-width: 351px; box-sizing: border-box; }
.pp-quote svg { width: 20px; height: 20px; fill: var(--blau); display: block; margin-bottom: var(--space-3); }
.pp-quote p { margin: 0; font-style: italic; font-weight: 500; font-size: 15px; line-height: 23px; color: var(--dark); }

/* Hinweise */
.pp-callout { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border-left: 4px solid var(--blau); background: var(--blau-tint); font-weight: 500; font-size: 14px; line-height: 21px; color: var(--dark); }
.pp-callout svg { width: 20px; height: 20px; flex: none; fill: var(--blau); }
.pp-callout strong { font-weight: 700; }
.pp-callout--gruen { border-color: var(--gruen); background: var(--gruen-tint); } .pp-callout--gruen svg { fill: var(--gruen); }
.pp-callout--orange { border-color: var(--orange); background: var(--orange-tint); } .pp-callout--orange svg { fill: var(--orange); } .pp-callout--orange strong { color: var(--orange-text); }
.pp-callout--krise { border-color: var(--rot); background: var(--rot-tint); color: var(--rot-text); font-weight: 600; font-size: 13px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); }
.pp-callout--krise svg { fill: var(--rot); width: 16px; height: 16px; }

/* Schritte (Ablauf) */
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-4); counter-reset: s; }
.pp-steps li { counter-increment: s; text-align: center; font-weight: 500; font-size: 12px; line-height: 17px; color: var(--dark); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pp-steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: var(--radius-full); display: grid; place-items: center; font-weight: 700; font-size: 18px; background: var(--blau); color: var(--on-blau); }
.pp-steps li:nth-child(5n+2)::before { background: var(--gruen); color: var(--dark); }
.pp-steps li:nth-child(5n+3)::before { background: var(--orange); color: var(--dark); }
.pp-steps li:nth-child(5n+4)::before { background: var(--gelb); color: var(--dark); }

/* Timeline */
.pp-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); position: relative; }
.pp-timeline::before { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; background: var(--border); }
.pp-timeline li { position: relative; padding-top: var(--space-8); padding-right: var(--space-4); }
.pp-timeline li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--blau); }
.pp-timeline li:nth-child(4n+2)::before { background: var(--gruen); } .pp-timeline li:nth-child(4n+3)::before { background: var(--orange); } .pp-timeline li:nth-child(4n+4)::before { background: var(--gelb); }
.pp-timeline b { display: block; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--dark); }
.pp-timeline span { font-size: 14px; line-height: 20px; color: var(--text); }

/* Themen-Kacheln */
.pp-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.pp-topic { display: flex; align-items: center; gap: var(--space-3); min-height: 59px; padding: var(--space-3) var(--space-4); box-sizing: border-box; background: var(--weiss); border: 1px solid var(--border); border-left: 3px solid var(--blau); border-radius: var(--radius-md); font-weight: 600; font-size: 13px; line-height: 17px; color: var(--dark); }
.pp-topic svg { width: 16px; height: 16px; flex: none; fill: var(--blau); }
.pp-topic--gruen { border-left-color: var(--gruen); } .pp-topic--gruen svg { fill: var(--gruen); }
.pp-topic--orange { border-left-color: var(--orange); } .pp-topic--orange svg { fill: var(--orange); }
.pp-topic--gelb { border-left-color: var(--gelb); } .pp-topic--gelb svg { fill: var(--amber); }

/* FAQ */
.pp-faq { background: var(--weiss); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); }
.pp-faq h4 { margin: 0 0 var(--space-4); font-weight: 700; font-size: 16px; color: var(--dark); }
.pp-faq details { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
.pp-faq summary { list-style: none; cursor: pointer; display: flex; gap: var(--space-3); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--dark); }
.pp-faq summary::before { content: "+"; color: var(--blau); font-weight: 700; width: 12px; }
.pp-faq details[open] summary::before { content: "–"; }
.pp-faq details p { margin: var(--space-2) 0 0 24px; font-size: 14px; line-height: 21px; color: var(--text); }

/* Whitepaper (Print, A4) */
.pp-page { width: 595px; height: 842px; box-sizing: border-box; background: var(--creme); border-top: var(--topbar) solid var(--blau); padding: 48px 56px 40px; display: flex; flex-direction: column; position: relative; font-size: 11px; line-height: 17px; color: var(--text); box-shadow: var(--shadow-card); }
.pp-page__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.pp-page__meta { font-size: 9px; line-height: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); text-align: right; }
.pp-page h1 { font-weight: 800; font-size: 30px; line-height: 33px; letter-spacing: -0.02em; color: var(--dark); margin: var(--space-2) 0 var(--space-3); }
.pp-page h2 { font-weight: 700; font-size: 16px; line-height: 21px; color: var(--blau-text); margin: var(--space-5) 0 var(--space-2); }
.pp-page p { margin: 0 0 var(--space-3); }
.pp-page__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 8.5px; color: var(--text-muted); }