/* Innere Seiten (Vorlage T1 Wimpern und die folgenden): gleiche Tokens, Kopf, Fuß und Module wie C1 (site.css, b3.css, c1.css).
   Nur das, was die Startseite nicht kennt: Brotkrumen, Antwort-Kopf mit Kennzahlen, Inhaltsleiste, Zeitleiste, Vorher-Nachher-Paare,
   Vergleichstabelle, Karten mit Listen, Weiter-Links. Klassen mit t- gelten für alle Vorlagen, t1- nur für T1. */

.t-page { --gutter: max(clamp(1rem, 4vw, 3.5rem), calc((100vw - 96rem) / 2)); --h2-size: clamp(1.75rem, 3.1vw, 2.9rem); --sec-pad: clamp(3.5rem, 7vw, 6rem); }
.t-page .h2 { line-height: 1.06; }
.t-a { position: relative; display: block; height: 0; width: 0; scroll-margin-top: calc(var(--hd-h) + 1rem); }
.t-kick { margin-bottom: 1.1rem; font: 500 0.78rem/1.4 var(--f-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--s-acc-t); }

/* Brotkrumen */
.t-crumb { padding: 1.25rem var(--gutter) 0; font-size: 0.82rem; color: var(--s-ink-2); }
.t-crumb ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.t-crumb li + li::before { content: "/"; margin-right: 0.6rem; color: var(--s-rule-strong); }
.t-crumb a { color: inherit; text-decoration: none; }
.t-crumb a:hover { color: var(--s-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Kopf: Antwort zuerst, Kennzahlen darunter, Foto rechts */
.t1-hero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem); }
.t1-h1 { font-family: var(--f-disp); font-weight: var(--disp-w, 400); font-size: clamp(2.1rem, 3.7vw, 3.4rem); line-height: 1.08; text-wrap: balance; color: var(--s-head, var(--s-ink)); }
.t1-answer { max-width: 38rem; margin-top: 1.4rem; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.65; color: var(--s-ink-2); }
.t1-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.t1-facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 0; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--s-rule); }
.t1-facts > div { padding: 1rem 1.6rem 0 0; margin-right: 1.6rem; border-right: 1px solid var(--s-rule); }
.t1-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.t1-facts dt { font: 500 0.7rem/1.3 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-ink-2); }
.t1-facts dd { margin: 0.35rem 0 0; font: 500 1.05rem/1.35 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--s-ink); }
.t1-hero-fig { position: relative; z-index: 2; margin: 0 0 clamp(-3.5rem, -4vw, -2rem); }
.t1-hero-fig .t1-ba-stage { border-radius: 1.4rem; box-shadow: 0 0 0 1px rgb(var(--lg) / 0.5), 0 2.2rem 3.6rem -2.2rem rgb(var(--sh) / var(--sh-k)); background: var(--bg-deep); }
.t1-hero-fig .t1-ba-tag { bottom: auto; top: 0.8rem; }
.t1-hero-cap { margin: 0.9rem 0 0 0.3rem; font-size: 0.85rem; line-height: 1.5; color: var(--s-ink-2); }
.t1-flow-fig { margin: 2rem 0 0; }
.t1-flow-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.1rem; box-shadow: 0 0 0 1px var(--s-rule); }
.t1-flow-fig figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--s-ink-2); }

/* Inhaltsleiste */
.t-toc { padding: 0 var(--gutter); border-block: 1px solid var(--s-rule); background: var(--bg-alt); }
.t-toc ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; padding: 0.95rem 0; list-style: none; }
.t-toc a { display: inline-block; padding: 0.15rem 0; font: 500 0.8rem/1.3 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--s-ink-2); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.t-toc a:is(:hover, :focus-visible) { color: var(--s-ink); border-bottom-color: rgb(var(--lg)); }

/* Abschnitte */
.t1-sec { padding-block: var(--sec-pad); }
.t1-alt { background: var(--bg-alt); }
.t1-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.t1-text .lead { max-width: 34rem; margin-top: 1.4rem; font-size: 1.12rem; }
.t1-note { max-width: 34rem; margin-top: 1.2rem; padding-left: 1rem; border-left: 2px solid rgb(var(--lg) / 0.7); font-size: 0.95rem; line-height: 1.6; color: var(--s-ink-2); }
.t1-card { padding: clamp(1.4rem, 2.4vw, 2.1rem); border-radius: 1.1rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule), 0 1.4rem 2.6rem -2rem rgb(var(--sh) / var(--sh-k)); }
.t1-card p { margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.65; color: var(--s-ink-2); }
.t1-card p:first-of-type { margin-top: 0.8rem; }
.t1-h3 { font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.2 var(--f-disp); color: var(--s-head, var(--s-ink)); }
.t1-h3-sm { margin-top: 1.7rem; font-size: 1.2rem; }
.t1-small { margin-top: 0.6rem; font-size: 0.88rem; line-height: 1.6; color: var(--s-ink-2); }
.t1-list, .t1-ol { display: grid; gap: 0.7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.t1-list li, .t1-ol li { position: relative; padding-left: 1.5rem; font-size: 0.98rem; line-height: 1.55; color: var(--s-ink-2); }
.t1-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.4rem; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg) translateY(-30%); }
.t1-list-no li::before { width: 0.65rem; height: 0; border: 0; border-top: 2px solid var(--s-ink-2); transform: none; top: 0.78em; }
.t1-ol { counter-reset: s; }
.t1-ol li { counter-increment: s; padding-left: 2rem; }
.t1-ol li::before { content: counter(s); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font: 600 0.75rem/1 var(--f-ui); color: var(--s-acc-t); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.7); }

/* Zeitleiste: Überschrift bleibt links stehen (sticky), rechts läuft die Schrittfolge an einer Goldlinie entlang */
.t1-flow { --sec-pad: clamp(4.5rem, 10vw, 9rem); }
.t1-flow-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 5rem); }
.t1-flow-head { position: sticky; top: calc(var(--hd-h) + 2rem); }
.t1-flow-head .lead { margin-top: 1.4rem; }
.t1-steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.t1-steps > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.3rem; align-items: start; padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.t1-steps > li:last-child { padding-bottom: 0; }
.t1-steps > li::before { content: ""; position: absolute; left: 1.3rem; top: 2.8rem; bottom: 0.2rem; width: 1px; background: linear-gradient(180deg, rgb(var(--lg) / 0.9), rgb(var(--lg) / 0.25)); }
.t1-steps > li:last-child::before { display: none; }
.t1-step-n { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font: 500 1.05rem/1 var(--f-disp); color: var(--s-ink); background: var(--gold-fill, var(--s-card)); box-shadow: var(--gold-bevel, 0 0 0 1px var(--s-rule-strong)); }
.t1-step-opt .t1-step-n { background: var(--s-card); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.7); color: var(--s-acc-t); }
.t1-step-h { padding-top: 0.45rem; font: 500 1.1rem/1.35 var(--f-ui); color: var(--s-ink); }
.t1-steps p { margin-top: 0.35rem; max-width: 34rem; font-size: 0.98rem; line-height: 1.65; color: var(--s-ink-2); }
.t1-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.t1-two + .t1-two { margin-top: clamp(1rem, 2.4vw, 2rem); }
.t1-two-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.t1-care dl { display: grid; gap: 0.2rem 1.2rem; grid-template-columns: auto minmax(0, 1fr); margin: 1rem 0 0; }
.t1-care dt { font: 500 0.78rem/1.6 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-acc-t); padding-top: 0.15rem; }
.t1-care dd { margin: 0 0 0.7rem; font-size: 0.98rem; line-height: 1.6; color: var(--s-ink-2); }

/* Vorher nachher: Schieberegler je Paar (page.js), das Nachher-Bild liegt oben und wird per Beschnitt freigelegt */
.t1-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.t1-ba-card { border-radius: 1.1rem; overflow: clip; background: var(--s-card); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.5), 0 1.6rem 2.8rem -2rem rgb(var(--sh) / var(--sh-k)); }
.t1-ba-stage { --p: 50%; position: relative; width: 100%; overflow: clip; touch-action: pan-y; }
.t1-ba-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }
.t1-ba-after { clip-path: inset(0 0 0 var(--p)); }
.t1-ba-line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fffdf9; box-shadow: 0 0 0 1px rgb(var(--lg) / 0.5), 0 0 1.2rem rgb(0 0 0 / 0.25); pointer-events: none; }
.t1-ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: var(--gold-fill, #fffdf9); box-shadow: var(--gold-bevel, 0 0 0 1px #c8b9a2), 0 0.5rem 1rem rgb(0 0 0 / 0.25); }
.t1-ba-line::before { content: "\2194"; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -52%); font: 600 1rem/1 var(--f-ui); color: var(--s-ink); }
.t1-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.t1-ba-range:focus-visible ~ .t1-ba-line::after { outline: 2px solid var(--s-focus); outline-offset: 3px; }
.t1-ba-tag { position: absolute; bottom: 0.6rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgb(251 248 243 / 0.92); font: 600 0.68rem/1.2 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-ink); pointer-events: none; }
.t1-ba-tag-b { left: 0.6rem; }
.t1-ba-tag-a { right: 0.6rem; }

/* Preise: die Zeilen der Startseite, hier auf einer Karte */
.t1-price { max-width: none; padding: clamp(0.4rem, 1.4vw, 1rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1.2rem, 2vw, 1.8rem); border-radius: 1.2rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule), 0 1.6rem 2.8rem -2rem rgb(var(--sh) / var(--sh-k)); }
.t1-price-foot { margin: 1rem 0 0; }
.t1-price .t1-small { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--s-rule); }

/* Vergleich */
.t1-cmp-wrap { max-width: none; overflow-x: auto; border-radius: 1.1rem; box-shadow: 0 0 0 1px var(--s-rule); background: var(--s-card); }
.t1-cmp { width: 100%; min-width: 34rem; border-collapse: collapse; text-align: left; }
.t1-cmp th, .t1-cmp td { padding: 1rem clamp(0.9rem, 2vw, 1.6rem); vertical-align: top; font-size: 0.98rem; line-height: 1.5; border-top: 1px solid var(--s-rule); }
.t1-cmp thead th { border-top: 0; font: 400 clamp(1.15rem, 1.8vw, 1.5rem)/1.2 var(--f-disp); color: var(--s-head, var(--s-ink)); }
.t1-cmp tbody th { width: 22%; font: 500 0.74rem/1.5 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-ink-2); }
.t1-cmp td { color: var(--s-ink); font-variant-numeric: tabular-nums; }
.t1-more { margin: 1.6rem 0 0; }
.t1-more .btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 0.8rem; }

/* Augenbrauen */
.t1-brow-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.t1-brow-head .lead { max-width: 38rem; margin-top: 1.4rem; font-size: 1.1rem; }
.t1-brow-fig { margin: 0; border-radius: 11rem 11rem 1.2rem 1.2rem; overflow: clip; box-shadow: 0 0 0 1px rgb(var(--lg) / 0.4), 0 2rem 3.4rem -2.2rem rgb(var(--sh) / var(--sh-k)); background: var(--bg-deep); }
.t1-brow-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 40%; }

/* Weiter-Links */
.t1-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.t1-next a { display: grid; align-content: start; gap: 0.6rem; height: 100%; padding: clamp(1.3rem, 2.2vw, 1.9rem); border-radius: 1.1rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule); text-decoration: none; color: var(--s-ink); transition: box-shadow 0.4s, transform 0.5s var(--ease); }
.t1-next a:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px rgb(var(--lg) / 0.8), 0 1.6rem 2.6rem -1.8rem rgb(var(--sh) / var(--sh-k)); transform: translateY(-3px); }
.t1-next-h { font: 400 1.4rem/1.2 var(--f-disp); color: var(--s-head, var(--s-ink)); }
.t1-next-p { font-size: 0.95rem; line-height: 1.6; color: var(--s-ink-2); }
.t1-next-go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font: 500 0.78rem/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-acc-t); }
.t1-next-go svg { width: 1rem; height: 1rem; }

@media (max-width: 62rem) {
  .t1-hero, .t1-split, .t1-brow-head { grid-template-columns: minmax(0, 1fr); }
  .t1-hero-fig { margin: 0; }
  .t1-flow-grid { grid-template-columns: minmax(0, 1fr); }
  .t1-flow-head { position: static; }
  .t1-two-3, .t1-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t1-ba { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
  .t1-brow-fig { max-width: 22rem; border-radius: 8rem 8rem 1.2rem 1.2rem; }
}
@media (max-width: 40rem) {
  .t1-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .t1-facts > div { padding: 0.9rem 0 0.9rem; margin: 0; border-right: 0; border-bottom: 1px solid var(--s-rule); }
  .t1-two, .t1-two-3, .t1-next { grid-template-columns: minmax(0, 1fr); }
  .t1-cta .btn { flex: 1 1 100%; white-space: normal; text-align: center; padding-block: 0.8rem; }
  .t-toc ul { flex-wrap: nowrap; overflow-x: auto; gap: 1.2rem; scrollbar-width: none; }
  .t-toc a { white-space: nowrap; }
  .t1-care dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .t1-care dd { margin-bottom: 0.9rem; }
}

/* Auftritte beim Scrollen: dieselbe Technik wie auf der Startseite (app.js, RV_SEL) */
@media (prefers-reduced-motion: reduce) { .t-page * { scroll-behavior: auto; } }

/* Unterschiedliche Abstände je Abschnitt: Atem zwischen den Blöcken statt eines Rasters */
#c1-was { --sec-pad: clamp(4rem, 9vw, 8rem); padding-top: clamp(5rem, 10vw, 9rem); }
#c1-ba { --sec-pad: clamp(3.5rem, 6vw, 5rem); }
#c1-preise { --sec-pad: clamp(3rem, 5vw, 4rem); }
#c1-vergleich { --sec-pad: clamp(4rem, 7vw, 6rem); }
#c1-brow { --sec-pad: clamp(4.5rem, 10vw, 9rem); }
#c1-next { --sec-pad: clamp(2.5rem, 5vw, 4rem); }

/* Listicle: neun Antworten als nummerierte Liste unter dem Kopf, dieselben Nummern an den Überschriften */
.t1-list9 { padding: clamp(3rem, 5vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.t1-list9-h { max-width: 44rem; margin: 0 0 1.6rem; font: 400 clamp(1.5rem, 2.5vw, 2.3rem)/1.2 var(--f-disp); color: var(--s-head, var(--s-ink)); text-wrap: balance; }
.t1-list9 ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.t1-list9 a { display: flex; align-items: flex-start; gap: 0.9rem; height: 100%; padding: 0.9rem 1.1rem; border-radius: 0.9rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule); text-decoration: none; font-size: 0.95rem; line-height: 1.4; color: var(--s-ink); transition: box-shadow 0.35s, transform 0.45s var(--ease); }
.t1-list9 a:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px rgb(var(--lg) / 0.85), 0 1rem 1.8rem -1.4rem rgb(var(--sh) / var(--sh-k)); transform: translateY(-2px); }
.t1-list9 .t1-num { margin-right: 0; }
.t1-num { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-right: 0.8rem; border-radius: 50%; vertical-align: 0.12em; font: 500 0.92rem/1 var(--f-disp); color: var(--s-ink); background: var(--gold-fill, var(--s-card)); box-shadow: var(--gold-bevel, 0 0 0 1px var(--s-rule-strong)); }
.h2 .t1-num { width: 2.5rem; height: 2.5rem; font-size: 1.15rem; vertical-align: 0.08em; }
.t1-h3 .t1-num { width: 2rem; height: 2rem; font-size: 0.95rem; vertical-align: 0.1em; }
.t1-cat { margin: 1.6rem 0 0; padding-bottom: 0.2rem; font: 500 0.78rem/1.4 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-acc-t); border-bottom: 1px solid var(--s-rule); }
.t1-cat:first-child { margin-top: 0.8rem; }
@media (max-width: 62rem) { .t1-list9 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .t1-list9 ol { grid-template-columns: minmax(0, 1fr); } }

/* Zweite T1-Seite (Wimpernverlängerung): Preismatrix, Vorteile, Looks */
.t2-price { display: grid; gap: 1.6rem; }
.t2-pt-wrap { overflow-x: auto; border-radius: 1.2rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule), 0 1.6rem 2.8rem -2rem rgb(var(--sh) / var(--sh-k)); }
.t2-pt { width: 100%; min-width: 54rem; border-collapse: collapse; text-align: left; }
.t2-pt th, .t2-pt td { padding: 1.05rem 0.9rem; vertical-align: middle; border-top: 1px solid var(--s-rule); }
.t2-pt thead th { border-top: 0; text-align: center; font: 500 0.72rem/1.35 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-ink-2); }
.t2-pt thead th:first-child { text-align: left; padding-left: clamp(1rem, 2vw, 1.6rem); }
.t2-pt thead .pt-grp { border-bottom: 1px solid var(--s-rule); }
.t2-pt thead tr + tr th { border-top: 0; }
.t2-pt tbody th { min-width: 16rem; padding-left: clamp(1rem, 2vw, 1.6rem); font-weight: 400; }
.pt-name { display: block; font: 500 1rem/1.35 var(--f-ui); color: var(--s-ink); }
.pt-desc { display: block; margin-top: 0.25rem; max-width: 26rem; font-size: 0.84rem; line-height: 1.5; color: var(--s-ink-2); }
.t2-pt td[data-opt] { text-align: center; font-variant-numeric: tabular-nums; }
.t2-pt td[data-opt$=":Neuanlage"] { background: rgb(var(--gg) / 0.07); }
.pt-price { display: block; font: 500 1.08rem/1.2 var(--f-ui); color: var(--s-acc-t); }
.pt-dur { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--s-ink-2); }
.pt-none { text-align: center; color: var(--s-rule-strong); }
.pt-cta { padding-right: clamp(1rem, 2vw, 1.6rem); text-align: right; white-space: nowrap; }
.pt-cta .btn { min-height: 2.6rem; padding: 0 1.2rem; }
.t1-notes { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; max-width: 56rem; }
.t1-notes li { position: relative; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.6; color: var(--s-ink-2); }
.t1-notes li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; border-top: 2px solid rgb(var(--lg)); }
.t1-ba-cap { margin: 0; padding: 0.7rem 1rem 0.8rem; font: 500 0.78rem/1.3 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-ink-2); }
.t2-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.t2-adv p { margin-top: 0.5rem; }
.t2-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.t2-look { padding: clamp(1.2rem, 2vw, 1.8rem); border-radius: 1.1rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule); counter-increment: look; }
.t2-look-h { font: 400 1.35rem/1.2 var(--f-disp); color: var(--s-head, var(--s-ink)); }
.t2-look p { margin-top: 0.6rem; font-size: 0.96rem; line-height: 1.65; color: var(--s-ink-2); }
.t2-look .t1-small { padding-top: 0.6rem; border-top: 1px solid var(--s-rule); }
.t2-looks .t2-look:nth-child(5) { grid-column: span 2; }
.t2-more { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.t2-dur { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1.4rem; margin: 1rem 0 0; }
.t2-dur dt { font: 500 0.78rem/1.6 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-acc-t); }
.t2-dur dd { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--s-ink-2); }
@media (max-width: 62rem) { .t2-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t2-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t2-looks .t2-look:nth-child(5) { grid-column: auto; } }
@media (max-width: 40rem) { .t2-grid4, .t2-looks { grid-template-columns: minmax(0, 1fr); } .t2-dur { grid-template-columns: minmax(0, 1fr); gap: 0; } .t2-dur dd { margin-bottom: 0.8rem; } .pt-cta .btn { white-space: normal; } }

/* Preismatrix am Telefon: jede Technik als Karte, Zeitraum und Preis als Zeilen, Knopf unten */
@media (max-width: 40rem) {
  .t2-pt-wrap { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .t2-pt, .t2-pt tbody, .t2-pt tr, .t2-pt th, .t2-pt td { display: block; min-width: 0; width: auto; }
  .t2-pt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .t2-pt tbody tr { margin-bottom: 1rem; padding: 0.4rem 0 1rem; border-radius: 1.1rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule); }
  .t2-pt tbody th { min-width: 0; padding: 0.9rem 1.1rem 0.5rem; border-top: 0; }
  .t2-pt td[data-opt] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--s-rule); text-align: right; }
  .t2-pt td[data-opt]::before { content: attr(data-label); font-size: 0.86rem; color: var(--s-ink-2); text-align: left; }
  .t2-pt td[data-opt] .pt-price, .t2-pt td[data-opt] .pt-dur { display: inline; }
  .t2-pt td[data-opt] .pt-dur { margin-left: 0.6rem; }
  .t2-pt .pt-none { display: none; }
  .t2-pt .pt-cta { padding: 0.8rem 1.1rem 0; text-align: left; border-top: 0; }
  .t2-pt .pt-cta .btn { width: 100%; }
}

/* Hub «Kosmetikbehandlungen» (Vorlage T2): Anliegen-Auswahl, Preisliste nach Kategorie mit Karte je Leistung, Sprungleiste */
.t3-hero-fig { margin: 0; }
.t3-hero-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; border-radius: 1.4rem; box-shadow: 0 0 0 1px rgb(var(--lg) / 0.5), 0 2.2rem 3.6rem -2.2rem rgb(var(--sh) / var(--sh-k)); background: var(--bg-deep); }
.t3-find { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); margin: 0; padding: 0; list-style: none; }
.t3-find > li { display: flex; flex-direction: column; padding: clamp(1.1rem, 1.8vw, 1.5rem); }
.t3-find-h { font: 400 1.3rem/1.2 var(--f-disp); color: var(--s-head, var(--s-ink)); }
.t3-find-k { margin: 0.9rem 0 0.4rem; font: 500 0.7rem/1.3 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-acc-t); }
.t3-find .t3-find-p { margin: 0.8rem 0 0.6rem; font-size: 0.92rem; line-height: 1.55; color: var(--s-ink-2); }
.t3-find ul { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.t3-find ul a { display: inline-block; padding: 0.3rem 0; font-size: 0.95rem; line-height: 1.4; color: var(--s-ink); text-decoration: underline; text-decoration-color: rgb(var(--lg) / 0.8); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color 0.3s, text-decoration-color 0.3s; }
.t3-find ul a:is(:hover, :focus-visible) { color: var(--s-acc-t); text-decoration-color: currentColor; }

/* Sprungleiste: bleibt beim Scrollen unter dem Kopf stehen */
.t3-jump { position: sticky; top: var(--hd-h); z-index: 6; margin: 1.6rem calc(var(--gutter) * -1) 0; padding: 0.7rem var(--gutter); background: color-mix(in srgb, var(--bg-alt) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--s-rule); }
.t3-jump ul { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.t3-jump ul::-webkit-scrollbar { display: none; }
.t3-jump a { display: inline-block; padding: 0.5rem 0.95rem; border-radius: 999px; white-space: nowrap; font: 500 0.8rem/1.2 var(--f-ui); letter-spacing: 0.04em; text-decoration: none; color: var(--s-ink); background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule); transition: box-shadow 0.3s, color 0.3s; }
.t3-jump a:is(:hover, :focus-visible) { color: var(--s-acc-t); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.9); }

.t3-cat { margin-top: clamp(2.2rem, 4vw, 3.4rem); scroll-margin-top: calc(var(--hd-h) + 4.5rem); }
.t3-cat-h { font: 400 clamp(1.5rem, 2.3vw, 2rem)/1.15 var(--f-disp); color: var(--s-head, var(--s-ink)); }
.t3-cat-p { margin: 0.5rem 0 0; max-width: 44rem; font-size: 0.98rem; line-height: 1.6; color: var(--s-ink-2); }
.t3-pl { display: grid; gap: 0.9rem; margin-top: 1.2rem; }
.t3-svc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 1rem clamp(1.2rem, 3vw, 2.6rem); align-items: center; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.4vw, 2rem); border-radius: 1.1rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule), 0 1.2rem 2.2rem -1.9rem rgb(var(--sh) / var(--sh-k)); scroll-margin-top: calc(var(--hd-h) + 5rem); transition: box-shadow 0.4s; }
.t3-svc:is(:hover, :target) { box-shadow: 0 0 0 1px rgb(var(--lg) / 0.85), 0 1.4rem 2.4rem -1.8rem rgb(var(--sh) / var(--sh-k)); }
.t3-svc-h { font: 500 1.1rem/1.35 var(--f-ui); color: var(--s-ink); }
.t3-svc-d { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--s-ink-2); }
.t3-svc-more { display: inline-block; margin-top: 0.5rem; font: 500 0.78rem/1.3 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-acc-t); text-decoration: underline; text-decoration-color: rgb(var(--lg) / 0.8); text-underline-offset: 0.25em; }
.t3-opt { width: 100%; border-collapse: collapse; }
.t3-opt th, .t3-opt td { padding: 0.55rem 0; vertical-align: baseline; border-top: 1px solid var(--s-rule); }
.t3-opt tr:first-child th, .t3-opt tr:first-child td { border-top: 0; padding-top: 0; }
.t3-opt tr:last-child th, .t3-opt tr:last-child td { padding-bottom: 0; }
.t3-opt th { padding-right: 1rem; font-size: 0.92rem; font-weight: 400; line-height: 1.45; text-align: left; color: var(--s-ink); }
.t3-opt td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t3-opt .pt-price, .t3-opt .pt-dur { display: inline; }
.t3-opt .pt-price { font-size: 1.05rem; }
.t3-opt .pt-dur { margin-left: 0.7rem; }
.t3-svc-cta .btn { min-height: 2.6rem; padding: 0 1.3rem; white-space: nowrap; }
.t3-extra { margin-top: 1rem; }
.t3-extra-l { display: grid; margin: 0.8rem 0 0; }
.t3-extra-l > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1.5rem; padding: 0.7rem 0; border-top: 1px solid var(--s-rule); }
.t3-extra-l dt { font-size: 0.95rem; line-height: 1.5; color: var(--s-ink); }
.t3-extra-l dd { margin: 0; font-size: 0.95rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--s-acc-t); }
.t3-next4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.t3-next4 a { display: grid; align-content: start; gap: 0.6rem; height: 100%; padding: clamp(1.3rem, 2.2vw, 1.9rem); border-radius: 1.1rem; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-rule); text-decoration: none; color: var(--s-ink); transition: box-shadow 0.4s, transform 0.5s var(--ease); }
.t3-next4 a:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px rgb(var(--lg) / 0.8), 0 1.6rem 2.6rem -1.8rem rgb(var(--sh) / var(--sh-k)); transform: translateY(-3px); }
.t3-from { font: 500 0.95rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--s-acc-t); }
.t3-three { display: grid; gap: 1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: reason; }
.t3-three li { position: relative; padding-left: 3rem; counter-increment: reason; }
.t3-three li::before { content: counter(reason); position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font: 500 0.95rem/1 var(--f-disp); color: var(--s-ink); background: var(--gold-fill, var(--s-card)); box-shadow: var(--gold-bevel, 0 0 0 1px var(--s-rule-strong)); }
.t3-three-h { font: 500 1.05rem/1.35 var(--f-ui); color: var(--s-ink); }
.t3-three p { margin: 0.2rem 0 0; font-size: 0.96rem; line-height: 1.6; color: var(--s-ink-2); }
.t3-ext { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.t3-ext .btn { min-height: 2.6rem; padding: 0 1.2rem; }
@media (max-width: 75rem) { .t3-find, .t3-next4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 62rem) {
  .t3-svc { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .t3-svc-cta .btn { width: 100%; }
}
@media (max-width: 40rem) {
  .t3-find, .t3-next4, .t3-care3 { grid-template-columns: minmax(0, 1fr); }
  .t3-opt .pt-dur { display: block; margin: 0.1rem 0 0; }
  .t3-opt th { padding-right: 0.6rem; }
  .t3-extra-l > div { grid-template-columns: minmax(0, 1fr); }
  .t3-extra-l dd { text-align: left; }
  .t3-ext .btn { width: 100%; white-space: normal; text-align: center; padding-block: 0.7rem; }
}

/* Leistungsseiten (T3): Schlagworte als Reihe */
.t3-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 clamp(1.2rem, 2.4vw, 2rem); padding: 0; list-style: none; }
.t3-chips li { padding: 0.55rem 1.1rem; border-radius: 999px; font: 500 0.88rem/1.2 var(--f-ui); color: var(--s-ink); background: var(--s-card); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.6); }
.t1-card .t3-from { margin: 0.3rem 0 0; }

/* Hub: Kategorie mit Bild rechts neben der Überschrift */
.t3-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem clamp(1.2rem, 3vw, 2.6rem); align-items: end; }
.t3-cat-img { display: block; width: clamp(12rem, 22vw, 18rem); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; background: var(--bg-deep); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.4), 0 1.2rem 2rem -1.6rem rgb(var(--sh) / var(--sh-k)); }
@media (max-width: 40rem) { .t3-cat-head { grid-template-columns: minmax(0, 1fr); } .t3-cat-img { order: -1; width: 100%; aspect-ratio: 16 / 9; } }
.t3-col { display: grid; gap: clamp(1rem, 2vw, 1.6rem); align-content: start; }
.t3-dev { margin: 0; }
.t3-dev img { aspect-ratio: auto; object-fit: contain; background: #fff; padding: 0.4rem; }
.t3-band { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 30%; margin: 0 0 clamp(1.2rem, 2.4vw, 2rem); border-radius: 1.1rem; box-shadow: 0 0 0 1px var(--s-rule); background: var(--bg-deep); }
.t3-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.1rem; border-radius: 0.8rem; background: var(--bg-deep); }
@media (max-width: 40rem) { .t3-band { aspect-ratio: 16 / 9; } }
.t3-hand img { max-height: 15rem; width: auto; margin-inline: auto; background: #fff; }
.t3-line img { width: 100%; max-width: 15rem; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 1rem; box-shadow: 0 0 0 1px var(--s-rule); }


/* Welle 1, restliche Seiten (gen_page.py): Kopf ohne Foto, zweispaltige Karten, Fließtext, Kurs-Eckdaten, Bildreihe, Rechtstexte */
.t1-hero-solo { grid-template-columns: minmax(0, 1fr); }
.t1-hero-solo .t1-hero-text { max-width: 60rem; }
.t2-looks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-prose { max-width: 52rem; }
.t-prose-fig { margin: 1.6rem 0 0; }
.t-prose-fig img { display: block; width: 100%; max-width: 40rem; height: auto; border-radius: 1.1rem; box-shadow: 0 0 0 1px var(--s-rule); }
.t-defs { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--s-rule); max-width: 60rem; }
.t-defs > div { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 0.4rem 1.6rem; padding: 1rem 0; border-bottom: 1px solid var(--s-rule); }
.t-defs dt { font: 500 0.74rem/1.6 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-ink-2); }
.t-defs dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--s-ink); }
.t-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); margin: 0; padding: 0; list-style: none; }
.t-gal figure { margin: 0; }
.t-gal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.9rem; box-shadow: 0 0 0 1px var(--s-rule); background: var(--bg-deep); }
.t-gal figcaption { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.45; color: var(--s-ink-2); }
.t-gal-tall img { aspect-ratio: 3 / 4; }
.t-gal-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.t-legal { max-width: 74rem; font-size: 1rem; line-height: 1.7; color: var(--s-ink-2); }
.t-legal > :not(.t-table-wrap) { max-width: 56rem; }
.t-legal h2, .t-legal h3, .t-legal h4 { margin: 2rem 0 0.6rem; font-family: var(--f-disp); font-weight: var(--disp-w, 400); line-height: 1.2; color: var(--s-head, var(--s-ink)); }
.t-legal h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.t-legal h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.t-legal h4 { font-size: 1.1rem; }
.t-legal p, .t-legal ul, .t-legal ol { margin: 0 0 1rem; }
.t-legal ul, .t-legal ol { padding-left: 1.3rem; }
.t-legal a { color: var(--s-acc-t); overflow-wrap: anywhere; }
.t-legal .t-table-wrap { margin: 0 0 1.4rem; overflow-x: auto; }
.t-legal table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.t-legal tbody th { min-width: 10rem; }
.t-legal :is(th, td) { hyphens: auto; overflow-wrap: break-word; }
.t-legal :is(th, td) { padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--s-rule, #e2d8c8); }
.t-legal thead th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink, #1d1a16); border-bottom-color: var(--s-rule-strong, #c8b9a2); }
.t-legal tbody th { font-weight: 700; color: var(--s-ink, #1d1a16); }
@media (max-width: 40rem) { .t2-looks-2 { grid-template-columns: minmax(0, 1fr); } .t-defs > div { grid-template-columns: minmax(0, 1fr); } }
.t1-cmp tbody th a, .t1-cmp td a { font: 500 0.98rem/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--s-ink); text-underline-offset: 0.2em; }
.t1-cmp tbody th a:hover, .t1-cmp td a:hover { color: var(--s-acc-t); }

/* ---------- Green Peel, Einsatz: goldene Gesichtszeichnung mit acht Hautthemen (gpf) ----------
   Bild und Icons sind generiert (Goldfolie auf Weiß); multiply macht das Weiß zum Seitenton. Ohne Skript steht alles fertig da. */
.gpf-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.gpf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.gpf-labs { display: grid; gap: clamp(.8rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.gpf-lab { display: flex; align-items: center; gap: .9rem; padding: .3rem 0; font-size: 1.02rem; line-height: 1.35; color: var(--s-ink); }
.gpf-right .gpf-lab { flex-direction: row-reverse; text-align: right; }
.gpf-lab::after { content: ""; flex: 1; min-width: 1.5rem; height: 1px; background: linear-gradient(90deg, rgb(var(--lg) / .8), transparent); transform-origin: left center; }
.gpf-right .gpf-lab::after { background: linear-gradient(270deg, rgb(var(--lg) / .8), transparent); transform-origin: right center; }
.gpf-tx { flex: 0 1 auto; max-width: 13rem; }

.gpf-ic { flex: none; width: 4.2rem; height: 4.2rem; background: center / contain no-repeat; }
.gpf-fig { margin: 0; }
.gpf-img { display: block; width: 100%; height: auto; max-height: 40rem; object-fit: contain; margin: 0 auto; }
@media (max-width: 51.99rem) {
  .gpf { grid-template-columns: minmax(0, 1fr); }
  .gpf-fig { order: -1; max-width: 17rem; margin-inline: auto; }
  .gpf-labs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .gpf-right .gpf-lab { flex-direction: row; text-align: left; }
  .gpf-lab::after { display: none; }
  .gpf-ic { width: 3rem; height: 3rem; }
  .gpf-lab { font-size: .95rem; gap: .7rem; }
}
@media (max-width: 34rem) { .gpf-labs { grid-template-columns: minmax(0, 1fr); } }
/* Auftritt: Bild blendet auf, die Themen folgen nacheinander; nur mit Skript und ohne «weniger Bewegung» */
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .gpf.is-arm .gpf-fig { opacity: 0; transform: scale(.97); }
  html:not(.fx-off) .gpf.is-arm .gpf-lab { opacity: 0; transform: translateY(.7rem); }
  html:not(.fx-off) .gpf.is-arm .gpf-lab::after { transform: scaleX(0); }
  html:not(.fx-off) .gpf.is-in .gpf-fig { opacity: 1; transform: none; transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
  html:not(.fx-off) .gpf.is-in .gpf-lab { opacity: 1; transform: none; transition: opacity .7s var(--ease) calc(.5s + var(--i, 0) * .14s), transform .7s var(--ease) calc(.5s + var(--i, 0) * .14s); }
  html:not(.fx-off) .gpf.is-in .gpf-lab::after { transform: none; transition: transform .9s var(--ease) calc(.8s + var(--i, 0) * .14s); }
}


/* Entwurfshinweis auf Rechtstexten, die noch nicht freigegeben sind (build_live.py bricht mit LIVE_FINAL=1 ab, solange er auf einer Seite steht) */
.t-legal .t-draft { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-left: 4px solid var(--s-acc, #b07f2c); border-radius: 0.5rem; background: var(--s-card, #fbf8f3); color: var(--s-ink, #1d1a16); font-size: 0.95rem; }