/* V4.17: gemeinsame Lesbarkeit; bewusst nach den älteren Seitenstilen laden. */
:root {
  --seite-ink: #17373b;
  --seite-muted: #53686b;
  --seite-paper: #f7f5ef;
  --seite-line: #d7e2de;
  --titel-spacing: -.022em;
}
body:not(.home) {
  background: var(--seite-paper);
  color: var(--seite-ink);
  font-size: 17px;
  line-height: 1.65;
}
body:not(.home):not(.subpage) { padding-top: 0; }
body:not(.home) :is(h1, h2, h3) {
  font-family: var(--schrift-display);
  letter-spacing: var(--titel-spacing);
  line-height: 1.18;
  text-wrap: balance;
}
body:not(.home) :is(p, li) { letter-spacing: normal; }
body:not(.home) :is(.eyebrow, .hero-kicker, .feature-columns article > span) {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #087782;
}
body:not(.home) .eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.rahmen.weit { max-width: 80rem; padding-inline: clamp(1.2rem, 4vw, 3.5rem); }
#ablauf, #kostenlos, #faq, #modelle, #vergleich-titel, #kontakt { scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Marketing-Unterseiten: kürzerer Einstieg, dieselbe offene Display-Schrift. */
.subpage section.subpage-hero { padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(3rem, 6vw, 5rem); }
.subpage .subpage-hero h1 {
  max-width: 20ch;
  margin: .85rem 0 1.3rem;
  font-size: clamp(2.3rem, 4.4vw, 4.25rem);
  letter-spacing: var(--titel-spacing);
  line-height: 1.12;
}
.subpage .subpage-hero p { max-width: 65ch; color: #c8dfdc; font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.7; }
.subpage .subpage-back { display: flex; width: fit-content; margin-bottom: 1.4rem; font-size: .9rem; }
.subpage .subpage-hero .eyebrow, .subpage .dark .eyebrow { color: #85ddd7; }
.subpage .subpage-intro { max-width: 54rem; margin-bottom: 2.5rem; }
.subpage .subpage-intro h2, .subpage .section-copy h2 {
  max-width: 27ch; font-size: clamp(1.85rem, 3.2vw, 3.05rem);
  letter-spacing: var(--titel-spacing); line-height: 1.15;
}
.subpage .subpage-intro p { max-width: 65ch; font-size: 1.05rem; line-height: 1.7; }
.subpage .feature-columns { gap: 1.25rem; }
.subpage .feature-columns article { padding: clamp(1.4rem, 2.7vw, 2rem); border-radius: 22px; }
.subpage .feature-columns h3 { margin-block: .75rem 1rem; font-size: clamp(1.35rem, 1.9vw, 1.75rem); letter-spacing: -.012em; line-height: 1.24; }
.subpage .feature-columns p, .subpage .plain-list li { font-size: .975rem; line-height: 1.65; }
.subpage .dark .feature-columns p, .subpage .dark .plain-list li, .subpage .dark .subpage-intro p { color: #c3d9d6; }
.subpage .status-banner p { font-size: .95rem; line-height: 1.65; }
.subpage .status-banner { background: #eaf2ef; border-color: #c9dcd6; border-radius: 20px; }
.subpage .status-banner b { color: #285b59; }
.subpage .pricing .tier-card h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.18; }
.subpage .pricing .tier-promise { line-height: 1.65; }
.subpage .pricing .comparison-heading h3, .subpage .pricing .allowance-story h3 { line-height: 1.18; letter-spacing: var(--titel-spacing); }
.subpage .legal-note { font-size: .925rem; line-height: 1.65; }

/* Support und Dokumente gehören gestalterisch zur Website, mit Lesebreite
   statt riesigen Werbeüberschriften in langen Rechtstexten. */
.page-intro { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); background: radial-gradient(ellipse at 85% 10%, #e3efea 0, transparent 65%); border-bottom: 1px solid var(--seite-line); }
.page-back { display: flex; width: fit-content; align-items: center; min-height: 44px; margin-bottom: 1rem; color: var(--seite-muted); text-decoration: none; font-size: .9rem; }
.page-back:hover { color: #087782; }
.page-intro h1, .recht-seite .page-intro h1 { max-width: 24ch; margin: .9rem 0 1.15rem; font-size: clamp(2rem, 3.9vw, 3.65rem); font-weight: 700; line-height: 1.14; }
.page-intro .page-lead { max-width: 64ch; margin: 0; font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.7; color: var(--seite-muted); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.4rem; margin-top: 1.5rem; }
.page-button, .page-text-link { display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.15rem; border-radius: 999px; font-size: .95rem; font-weight: 650; text-decoration: none; }
.page-button { background: #087782; color: white; }
.page-button:hover { background: #063b43; color: white; }
.page-text-link { padding-inline: 0; color: #087782; }
.support-content { padding-block: clamp(3rem, 6vw, 5rem); }
.support-heading { max-width: 45rem; margin-bottom: 2rem; }
.support-heading h2 { margin-block: .7rem 0; font-size: clamp(1.8rem, 3.1vw, 2.7rem); }
.contact-grid, .support-reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2.2rem); background: white; border: 1px solid var(--seite-line); border-radius: 24px; }
.contact-card h3 { margin: .75rem 0; font-size: 1.65rem; }
body:not(.home) .contact-card h3 { letter-spacing: -.008em; }
.contact-card p { margin: 0 0 1.25rem; color: var(--seite-muted); }
.contact-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 650; color: #087782; text-underline-offset: .2em; overflow-wrap: anywhere; }
.response-note { max-width: 68ch; margin: 1.2rem 0 3.2rem; color: var(--seite-muted); font-size: .95rem; }
.help-panel { padding: clamp(1.4rem, 3vw, 2.2rem); background: #edf2ef; border-radius: 24px; }
.help-panel h2 { font-size: 1.5rem; margin-block: .75rem 1.2rem; }
.help-panel h2:not(:first-of-type) { margin-top: 2rem; }
.help-panel p, .help-panel li { font-size: 1rem; line-height: 1.75; }
.support-steps { padding-left: 1.4rem; }
.support-steps li { padding-left: .35rem; margin-block: .8rem; }
.support-steps li::marker { color: #087782; font-weight: 700; }
.help-panel .kasten { border: 0; border-left: 3px solid #70a9a5; border-radius: 0; background: transparent; padding: .15rem 0 .15rem 1rem; margin-top: 1.5rem; }
.help-panel .kasten p { margin-block: .3rem; }
.recht-seite .rahmen.weit { max-width: 80rem; }
.recht-seite .page-intro h1 { font-size: clamp(1.85rem, 3.5vw, 3.25rem); max-width: 28ch; }
.document-layout { display: grid; grid-template-columns: minmax(13rem, .72fr) minmax(0, 2fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.recht-seite .recht-inhalt { position: sticky; top: 6rem; display: block; min-width: 0; max-height: calc(100svh - 7rem); overflow-y: auto; margin: 0; padding: .8rem 0; border: 0; border-top: 2px solid #6aa49f; border-radius: 0; background: transparent; font-size: .875rem; }
.recht-inhalt summary { min-height: 44px; font-weight: 700; color: var(--seite-ink); cursor: pointer; }
.recht-seite .recht-inhalt ol { columns: 1; margin: .4rem 0 0; padding-left: 1.3rem; }
.recht-seite .recht-inhalt li { padding: 0 0 .2rem .15rem; }
.recht-inhalt a { color: var(--seite-muted); text-decoration: none; }
.recht-inhalt a:hover { color: #087782; text-decoration: underline; }
.document-copy { min-width: 0; padding: clamp(1.4rem, 3.2vw, 2.8rem); border: 1px solid var(--seite-line); border-radius: 24px; background: white; }
.recht-seite .document-copy h2 { margin-top: 2.4rem; font-size: clamp(1.2rem, 1.85vw, 1.6rem); letter-spacing: -.012em; line-height: 1.3; scroll-margin-top: 1rem; }
.recht-seite .document-copy h2:first-child { margin-top: 0; }
.recht-seite .document-copy h3 { font-size: 1.125rem; letter-spacing: normal; line-height: 1.35; }
.recht-seite .document-copy p, .recht-seite .document-copy li { font-size: 1rem; line-height: 1.8; }
.document-copy ul, .document-copy ol { padding-left: 1.3rem; }
.document-copy li { margin-block: .4rem; }
.document-copy .recht-meta { color: var(--seite-muted); }
body:not(.home) footer { border: 0; background: #082d34; color: #c7ddda; margin-top: 0; padding-block: 2rem; }
body:not(.home) footer .rahmen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; max-width: 80rem; padding-inline: clamp(1.2rem, 4vw, 3.5rem); }
body:not(.home) footer span { color: white; margin-right: auto; font-family: var(--schrift-display); font-weight: 700; }
body:not(.home) footer a { display: inline-flex; align-items: center; min-height: 44px; color: #c7ddda; font-size: .875rem; }
body:not(.home) .vorab-status { max-width: min(73rem, calc(100% - 2.4rem)); }

@media (max-width: 62rem) {
  .document-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .recht-seite .recht-inhalt { position: static; max-height: none; }
  .recht-seite .recht-inhalt ol { columns: 2; column-gap: 2rem; }
  .contact-grid, .support-reading { gap: 1rem; }
}
@media (max-width: 46rem) {
  .contact-grid, .support-reading { grid-template-columns: 1fr; }
  .recht-seite .recht-inhalt ol { columns: 1; }
  .page-intro h1, .recht-seite .page-intro h1 { overflow-wrap: anywhere; }
  .subpage .subpage-hero h1 { font-size: clamp(2.05rem, 7.8vw, 2.8rem); }
  .subpage section.subpage-hero { padding-block: 2rem 3rem; }
  .subpage .subpage-intro h2, .subpage .section-copy h2 { font-size: clamp(1.8rem, 6.5vw, 2.3rem); }
  .document-copy { border-radius: 18px; }
  body:not(.home) footer .rahmen { justify-content: flex-start; }
  body:not(.home) footer span { width: 100%; text-align: left; margin-bottom: .4rem; }
}
@media print {
  .page-back, .page-actions, .recht-inhalt, .vorab-status { display: none !important; }
  .document-layout { display: block; }
  .document-copy { padding: 0; border: 0; }
  .page-intro { background: none; padding: 0 0 1rem; border: 0; }
  body:not(.home), .document-copy { background: white; color: black; }
  .recht-seite .document-copy p, .recht-seite .document-copy li { font-size: 11pt; }
  main#inhalt { padding-top: 0; }
}