/* keytos.de/neu · Text-Seiten (Impressum, Datenschutz, Leistungen im Detail) – Jonas, 18.10.2026. Gestaltung wie die anderen
   Kategorien: Zweizeiler (zweite Zeile grau), Schrift und Grautöne aus dem Theme, Pastellflächen statt Linien und Rahmen.
   Der Text selbst kommt wortgleich aus den alten Seiten; hier werden nur ihre Bausteine (.karte, .kasten, .preiszeile, .faq,
   .fussnote, .leise) neu gestaltet. */

.ts { --rand: var(--grid-gutter-width); --blau: #dbe8ff; --mint: #d7f0e3; --butter: #fbefc8; --flaeche: #f4f4f4; padding: 0 var(--rand); overflow-x: clip; }
.ts :where(h1, h2, h3, p, ul, ol) { margin: 0; } /* :where – darf die Abstände im Text nicht überstimmen */

/* Kopf */
.ts-kopf { display: grid; gap: 28px; padding: calc(12px + var(--notch-h) + clamp(56px, 9vw, 136px)) 0 clamp(48px, 6vw, 96px); }
.ts-kopf__titel { max-width: 15em; font-weight: var(--weight-light); font-size: clamp(40px, 7vw, 112px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.ts-zeile { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } /* Maske: die Zeile steigt heraus */
.ts-zeile > span { display: block; }
.ts-kopf__leise { color: var(--color-gray-500); } /* große Schrift: 3,5 : 1 reicht ab 24 px */
.ts-kopf__einleitung { max-width: 36em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--primitive-black); text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .js .ts [data-zeile] { transform: translateY(105%); animation: ts-hoch 1s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .ts [data-steig] { opacity: 0; transform: translateY(18px); animation: ts-steig .8s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 400ms); }
  @keyframes ts-hoch { to { transform: none; } }
  @keyframes ts-steig { to { opacity: 1; transform: none; } }
}

/* Körper: links das Inhaltsverzeichnis (läuft mit), rechts der Text */
.ts-koerper { display: grid; gap: 40px; padding-bottom: clamp(96px, 10vw, 168px); }
.ts-inhalt { padding: 20px; border-radius: 24px; background: var(--flaeche); }
.ts-inhalt__titel { padding: 0 12px 10px; font-size: 15px; font-weight: var(--weight-bold); }
.ts-inhalt ol { display: grid; gap: 2px; padding: 0; list-style: none; }
.ts-inhalt a { display: block; padding: 9px 12px; border-radius: 12px; color: var(--color-gray-800); font-size: 15px; line-height: 1.35; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.ts-inhalt a[aria-current] { background: var(--primitive-white); color: var(--primitive-black); }
.ts-inhalt a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .ts-inhalt a:hover { background: var(--primitive-white); color: var(--primitive-black); } }
@media (min-width: 1020px) {
  .ts-koerper { grid-template-columns: minmax(220px, 3fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 120px); align-items: start; }
  .ts-koerper--schmal { grid-template-columns: minmax(0, 1fr); }
  .ts-inhalt { position: sticky; top: calc(12px + var(--notch-h) + 24px); }
}

/* Text in Lesebreite */
.ts-text { max-width: 44rem; font-size: 18px; line-height: 1.65; color: var(--primitive-black); }
.ts-text > * + * { margin-top: 18px; }
.ts-text h2 { margin-top: 64px; font-size: clamp(24px, 2.2vw, 32px); font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.2; scroll-margin-top: calc(12px + var(--notch-h) + 32px); }
.ts-text > h2:first-child { margin-top: 0; }
.ts-text h2 + * { margin-top: 14px; }
.ts-text strong, .ts-text b { font-weight: var(--weight-bold); }
.ts-text a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (hover: hover) { .ts-text a:hover { text-decoration-thickness: 2px; } }
.ts-text ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.ts-text li { position: relative; padding-left: 30px; }
.ts-text li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--blau); }
.ts-text .leise { font-size: 16px; line-height: 1.55; color: var(--color-gray-800); }
.ts-text hr { display: none; } /* Abstand übernimmt die nächste Zwischenüberschrift (keine Linien) */
/* Rechtliches: Anbieter-Karte und Schlussnotiz */
.ts-text .karte { padding: 28px 32px; border-radius: 24px; background: var(--blau); }
.ts-text .karte > * + * { margin-top: 12px; }
.ts-text .fussnote { margin-top: 64px; padding: 24px 28px; border-radius: 20px; background: var(--flaeche); font-size: 16px; line-height: 1.55; color: var(--color-gray-800); }
.ts-text .fussnote > * + * { margin-top: 12px; }
/* Leistungen: Hinweis-Kasten, Preise, Fragen */
.ts-text .kasten { padding: 28px 32px; border-radius: 24px; background: var(--butter); }
.ts-text .kasten .punkt { display: none; }
.ts-text .preiszeile { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-text .preis-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--mint); font-size: 16px; line-height: 1.3; }
.ts-text .faq { display: grid; gap: 10px; }
.ts-text .faq details { border-radius: 20px; background: var(--flaeche); }
.ts-text .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 24px; border-radius: 20px; font-size: 18px; font-weight: var(--weight-bold); line-height: 1.35; list-style: none; cursor: pointer; }
.ts-text .faq summary::-webkit-details-marker { display: none; }
.ts-text .faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primitive-white); font-size: 24px; font-weight: var(--weight-regular); line-height: 1; transition: transform .3s var(--ease-quart-out); }
.ts-text .faq details[open] summary::after { transform: rotate(45deg); }
.ts-text .faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ts-text .faq details > :not(summary) { padding: 0 24px 22px; }
@media (max-width: 599.98px) {
  .ts-text { font-size: 17px; }
  .ts-text :is(.karte, .kasten) { padding: 22px 22px; }
  .ts-text .faq summary { font-size: 17px; padding-left: 20px; }
  .ts-text .faq details > :not(summary) { padding: 0 20px 20px; }
}

/* Abschluss der Leistungsseiten: Fläche über die ganze Breite */
.ts-abschluss { display: grid; justify-items: start; gap: 24px; margin: 0 calc(var(--rand) * -1); padding: clamp(72px, 9vw, 144px) var(--rand); background: var(--blau); }
.ts-abschluss__titel { max-width: 14em; font-weight: var(--weight-light); font-size: clamp(34px, 4.6vw, 72px); line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.ts-abschluss__text { max-width: 36em; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; }
.ts-abschluss .cta--primary { min-height: 56px; padding-top: 0; padding-bottom: 0; font-size: 17px; font-weight: var(--weight-bold); text-transform: none; } /* wie die übrigen Knöpfe der neuen Seite statt Theme-Versalien */