@import url("/inc/legalsmart.css") layer(global);
@import url("/inc/vendor-icons/icon-awesome/css/font-awesome.min.css") layer(global);

/* ==========================================================================
   /rechtsschutz/index_test02.php – Gestaltungslayer der Conversion-Testseite.

   Präfix t2-. Diese Datei wird ausschließlich von index_test02.php geladen
   und von keiner anderen Seite.

   Oben werden /inc/legalsmart.css und die Icon-Schrift als Ebene "global"
   eingebunden, weil Hauptnavigation und Footer aus den Projekt-Includes
   kommen und deren Gestaltung brauchen. Ebenen-Regel der Kaskade: Alles in
   dieser Datei steht außerhalb einer Ebene und gewinnt deshalb gegen die
   eingebundenen Regeln, unabhängig von deren Spezifität. Dadurch ist kein
   !important nötig, und an den Projektdateien wird nichts verändert.
   Die Basisregeln für Überschriften, Absätze, Listen und Links sind auf
   main eingegrenzt, damit Navigation und Footer unverändert aussehen.

   Gestaltung: reduziert und typografiegetrieben. Flächen wechseln nur
   zwischen #ffffff und #f5f5f7, Grün bleibt den Terminbuttons und wenigen
   Akzenten vorbehalten. Kein !important, keine externe Ressource.
   ========================================================================== */

:root {
  --text-primary:#1d1d1f;
  --text-secondary:#6e6e73;
  --bg:#ffffff;
  --bg-secondary:#f5f5f7;
  --border:#d2d2d7;
  --hairline:rgba(0,0,0,.06);
  /* Etwas dunkler als die getönte Fläche #f5f5f7 */
  --trust-line:#e2e2e5;
  --ls-green:#72c02c;

  --radius-small:12px;
  --radius-medium:18px;
  --radius-large:24px;
  --radius-pill:999px;

  --section-padding:128px;
  --section-padding-hero:160px;
  --section-padding-mobile:72px;

  --space-xs:8px;
  --space-s:16px;
  --space-m:24px;
  --space-l:40px;
  --space-xl:56px;
  --space-2xl:80px;

  --transition-base:180ms ease;

  --font-system:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
    "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* --- Reset und Grundlagen ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  height:auto;
  font-family:var(--font-system);
  font-size:17px;
  line-height:1.47;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--text-primary);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Nur im Inhaltsbereich: Im Footer gelten die Bildgrößen des Projekts,
   damit die App-Store-Logos ihre Höhe behalten. */
main img{max-width:100%;height:auto}
main a,.t2-nav a,.t2-sticky a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
main a:focus-visible,main summary:focus-visible,main label:focus-visible,
.t2-nav a:focus-visible,.t2-sticky a:focus-visible,.t2-skip:focus-visible{
  outline:2px solid var(--text-primary);
  outline-offset:3px;
  border-radius:4px;
}
main h1,main h2,main h3,main h4{margin:0 0 var(--space-m);font-weight:600;color:var(--text-primary)}
/* Nur die eine Überschrift mit dem sehr langen Kompositum darf umbrechen;
   getrennt wird erst auf schmalen Geräten, wo das Wort sonst überliefe. */
.t2-h2--wrap{overflow-wrap:break-word}
main h1{font-size:clamp(52px,6vw,76px);line-height:1.03;letter-spacing:-.035em}
main h2{font-size:clamp(42px,4.5vw,58px);line-height:1.06;letter-spacing:-.025em}
main h3{font-size:clamp(24px,2.2vw,32px);line-height:1.15;letter-spacing:-.015em}
/* /inc/legalsmart.css setzt Absätze auf Blocksatz; im Seiteninhalt bleibt
   der Text linksbündig, damit keine Löcher im Satz entstehen. */
main p,main li{font-size:18px;line-height:1.55;text-align:left}
main p{margin:0 0 var(--space-s)}
main .t2-head--center p,main .t2-plan__order,main .t2-final__micro{text-align:center}
main ul,main ol{margin:0;padding:0;list-style:none}
main table{border-collapse:collapse;width:100%}

/* Nur für Screenreader */
.t2-vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.t2-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:14px 22px;background:var(--ls-green);color:#fff;font-weight:600;
  border-bottom-right-radius:var(--radius-small);
}
.t2-skip:focus{left:0}

/* Sprungziele nicht unter der eingeblendeten Leiste verstecken */
main [id]{scroll-margin-top:80px}

/* --- Layout -------------------------------------------------------------- */
.t2-wrap{width:min(100% - 40px,1200px);margin-inline:auto}
.t2-narrow{max-width:900px}
.t2-sec{padding-top:var(--section-padding);padding-bottom:var(--section-padding)}
.t2-sec--tint{background:var(--bg-secondary)}
.t2-head{margin-bottom:var(--space-2xl);max-width:900px}
.t2-head--center{margin-inline:auto;text-align:center}
.t2-head--center .t2-lead{margin-inline:auto}

.t2-eyebrow{
  font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.01em;
  margin:0 0 18px;color:var(--text-primary);
}
.t2-eyebrow--accent{color:var(--ls-green)}
.t2-lead{
  font-size:clamp(22px,2.2vw,28px);line-height:1.25;font-weight:400;
  letter-spacing:-.015em;color:var(--text-secondary);max-width:900px;
  margin:0 0 var(--space-m);
}
.t2-big{
  font-size:clamp(24px,2.4vw,32px);line-height:1.3;letter-spacing:-.02em;
  color:var(--text-secondary);max-width:900px;margin:0;
}
.t2-big strong{color:var(--text-primary);font-weight:600}
.t2-after{margin:var(--space-l) 0 0;color:var(--text-secondary);max-width:760px}
.t2-after--strong{color:var(--text-primary);font-weight:600;max-width:900px}

/* --- Buttons und Textlinks ---------------------------------------------- */
.t2-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius-pill);
  padding:14px 24px;
  font-family:inherit;font-size:17px;line-height:1.2;font-weight:600;
  letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;
  transition:transform var(--transition-base),opacity var(--transition-base);
}
.t2-btn--pri{background:var(--ls-green);color:#fff}
.t2-btn--pri:hover{transform:translateY(-1px);opacity:.92;color:#fff}
.t2-btn--sec{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--text-primary)}
.t2-btn--sec:hover{transform:translateY(-1px);opacity:.8;color:var(--text-primary)}
.t2-btn--lg{padding:17px 30px;font-size:18px}
.t2-btns{display:flex;flex-wrap:wrap;gap:var(--space-m);align-items:center;margin-top:var(--space-l)}
.t2-btns--mt{margin-top:var(--space-xl)}
.t2-tlink{color:var(--ls-green);font-weight:500;text-decoration:underline}
.t2-tlink:hover{color:var(--text-primary)}

/* --- Kopfzeile ----------------------------------------------------------- */
.t2-nav{
  position:fixed;top:0;left:0;right:0;z-index:310;
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition:transform var(--transition-base),opacity var(--transition-base),
    visibility var(--transition-base);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
}
.t2-nav__in{
  width:min(100% - 40px,1200px);margin-inline:auto;
  display:flex;align-items:center;gap:var(--space-l);
  min-height:56px;
}
.t2-nav__brand{
  font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  white-space:nowrap;
}
.t2-nav__brand span{color:var(--text-secondary)}
.t2-nav__links{display:flex;gap:var(--space-m);margin-left:auto}
.t2-nav__links a{
  font-size:15px;color:var(--text-secondary);text-decoration:none;
  transition:color var(--transition-base);
}
.t2-nav__links a:hover{color:var(--text-primary)}
.t2-nav__cta{padding:9px 18px;font-size:15px;margin-left:var(--space-m)}

/* --- Hero ---------------------------------------------------------------- */
.t2-hero{padding-top:var(--section-padding-hero);padding-bottom:var(--section-padding-hero)}
.t2-hero__grid{display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.t2-hero .t2-lead{max-width:620px}
.t2-anchor-price{
  margin:var(--space-l) 0 6px;font-size:17px;font-weight:600;
  color:var(--text-primary);
}
/* Preisschild als diagonales Eckband in der oberen rechten Ecke der Karte.
   Der quadratische Rahmen beschneidet das Band, damit es an der oberen und
   an der rechten Kante endet; der Radius folgt der Kartenecke. */
.t2-visual{position:relative}
.t2-pricetag{
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  width:150px;
  height:150px;
  overflow:hidden;
  border-top-right-radius:var(--radius-large);
  pointer-events:none;
}
/* Das Band liegt auf der Diagonale des Rahmens und wird an beiden Enden
   bündig an der Kartenkante beschnitten. Das zweite translateY rückt es
   näher an die Ecke, damit es wenig Kartenfläche verdeckt. */
.t2-pricetag__band{
  position:absolute;
  left:50%;
  top:50%;
  width:250px;
  margin:0;
  padding:10px 0;
  transform:translate(-50%,-50%) rotate(45deg) translateY(-26px);
  background:var(--ls-green);
  color:#fff;
  font-size:19px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:center;
  white-space:nowrap;
  /* Feine weiße Kanten setzen das Band von der Karte ab. */
  border-top:2px solid var(--bg);
  border-bottom:2px solid var(--bg);
}

/* Produktvisualisierung, reines HTML/CSS */
.t2-mock{
  border:1px solid var(--hairline);border-radius:var(--radius-large);
  background:var(--bg);overflow:hidden;
}
.t2-mock__bar{
  display:flex;align-items:center;gap:6px;
  padding:14px 18px;border-bottom:1px solid var(--hairline);
  background:var(--bg-secondary);
}
.t2-mock__dot{width:9px;height:9px;border-radius:50%;background:var(--border)}
.t2-mock__title{
  margin-left:12px;font-size:14px;font-weight:600;color:var(--text-secondary);
  letter-spacing:-.01em;
}
.t2-mock__body{padding:18px}
.t2-mock__new{
  margin:0 0 14px;padding:12px 16px;border-radius:var(--radius-pill);
  /* Bewusst nicht grün: Grün bleibt im Hero dem Preisstörer und dem
     Terminbutton vorbehalten. */
  background:var(--text-primary);color:#fff;font-size:15px;font-weight:600;
  text-align:center;
}
.t2-mock__list li{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:12px 0;border-bottom:1px solid var(--hairline);
}
.t2-mock__list li:last-child{border-bottom:0}
.t2-mock__kind{font-size:15px;font-weight:600;letter-spacing:-.01em}
.t2-mock__meta{grid-column:1;font-size:13px;color:var(--text-secondary)}
.t2-mock__state{
  grid-row:1 / span 2;grid-column:2;align-self:center;
  font-size:13px;color:var(--text-secondary);white-space:nowrap;
}
.t2-mock__state--done{color:var(--text-primary);font-weight:600}

/* --- Trust Strip --------------------------------------------------------- */
.t2-trust{
  padding-top:var(--space-2xl);padding-bottom:var(--space-2xl);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.t2-trust__g{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.t2-trust__t{
  margin:0 0 6px;font-size:21px;line-height:1.25;font-weight:600;
  letter-spacing:-.015em;
}
.t2-trust__s{margin:0;font-size:16px;line-height:1.45;color:var(--text-secondary)}

/* --- Zehn Argumente: Sticky-Scroll --------------------------------------- */
.t2-story{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}
.t2-story__aside{align-self:start}
.t2-story__count{
  margin:0;font-size:clamp(48px,5vw,80px);line-height:1;
  font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.t2-story__of{color:var(--text-secondary);font-size:.42em;letter-spacing:-.02em}
.t2-story__dots{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-m) 0 var(--space-m)}
.t2-story__dots li{
  width:26px;height:3px;border-radius:2px;background:var(--border);
  transition:background-color var(--transition-base);
}
.t2-story__dots li.is-active{background:var(--text-primary)}
.t2-story__hint{
  margin:0 0 var(--space-m);font-size:16px;line-height:1.45;
  color:var(--text-secondary);max-width:32ch;
}
.t2-story__aside .t2-btn{width:100%;max-width:22rem}
.t2-story__steps{display:grid;gap:var(--space-2xl)}
.t2-story__step{max-width:900px}
.t2-story__n{
  display:block;margin-bottom:var(--space-s);font-size:15px;font-weight:600;
  color:var(--text-secondary);font-variant-numeric:tabular-nums;
}
/* Überschrift auf Sektionsniveau, Text auf Lead-Niveau. */
.t2-story__step h2{margin-bottom:var(--space-m)}
.t2-story__step p{
  margin:0;
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--text-secondary);
}

/* --- Rollen im Team ------------------------------------------------------ */
.t2-roles{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--space-xl)}
.t2-roles li{padding:var(--space-m) 0;border-bottom:1px solid var(--border)}
.t2-roles li:first-child{border-top:1px solid var(--border)}
.t2-roles__t{margin:0 0 6px;font-size:21px;font-weight:600;letter-spacing:-.015em}
.t2-roles__x{margin:0;color:var(--text-secondary)}

/* --- Preisauswahl, funktioniert ohne JavaScript -------------------------- */
.t2-plan{max-width:1100px;margin-inline:auto}
.t2-plan__radio{position:absolute;opacity:0;width:1px;height:1px}
.t2-plan__step{margin-bottom:var(--space-2xl)}
.t2-plan__q{
  margin:0 0 8px;font-size:clamp(24px,2.2vw,32px);line-height:1.15;
  font-weight:600;letter-spacing:-.015em;
}
.t2-plan__hint{margin:0 0 var(--space-l);color:var(--text-secondary)}
.t2-sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:var(--space-m)}
.t2-size{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:72px;padding:14px 10px;
  border:1px solid var(--border);border-radius:var(--radius-small);
  background:var(--bg);cursor:pointer;text-align:center;
  transition:border-color var(--transition-base),background-color var(--transition-base);
}
.t2-size:hover{border-color:var(--text-primary)}
.t2-size__n{font-size:17px;font-weight:600;letter-spacing:-.01em}
.t2-size__s{font-size:14px;color:var(--text-secondary)}

.t2-terms{display:none;grid-template-columns:1fr;gap:var(--space-m)}
.t2-terms>*{min-width:0}
.t2-term{
  position:relative;display:flex;flex-direction:column;
  padding:var(--space-l) var(--space-m) var(--space-m);
  border:1px solid var(--hairline);border-radius:var(--radius-large);
  background:var(--bg);text-align:center;
}
.t2-term--best{border-color:var(--border)}
.t2-term__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:var(--radius-pill);
  background:var(--ls-green);color:#fff;font-size:14px;font-weight:600;
  white-space:nowrap;
}
.t2-term__y{margin:0 0 12px;font-size:21px;font-weight:600;letter-spacing:-.015em}
.t2-term__p{
  margin:0;font-size:clamp(40px,4.2vw,48px);line-height:1;
  font-weight:600;letter-spacing:-.025em;
}
.t2-term__s{margin:8px 0 var(--space-m);font-size:15px;color:var(--text-secondary)}
.t2-term__x{
  margin:0;font-size:16px;line-height:1.5;color:var(--text-secondary);
  margin-bottom:var(--space-l);text-align:left;
}
/* margin-top:auto hält die Buttons aller Karten auf einer Linie */
.t2-term__cta{margin-top:auto;width:100%}
.t2-plan__foot{
  margin:var(--space-l) 0 0;font-size:15px;line-height:1.5;
  color:var(--text-secondary);
}
.t2-plan__cta{text-align:center}
.t2-plan__order{margin:var(--space-m) 0 0;font-size:15px;color:var(--text-secondary)}
.t2-plan__order a{color:var(--text-secondary)}
.t2-plan__order a:hover{color:var(--text-primary)}

/* Auswahlzustände: die Größenschlüssel sind fest, deshalb ausformuliert. */
#t2-g-solo:checked ~ .t2-plan__step label[for="t2-g-solo"],
#t2-g-01:checked ~ .t2-plan__step label[for="t2-g-01"],
#t2-g-06:checked ~ .t2-plan__step label[for="t2-g-06"],
#t2-g-11:checked ~ .t2-plan__step label[for="t2-g-11"],
#t2-g-21:checked ~ .t2-plan__step label[for="t2-g-21"],
#t2-g-31:checked ~ .t2-plan__step label[for="t2-g-31"],
#t2-g-41:checked ~ .t2-plan__step label[for="t2-g-41"]{
  border-color:var(--text-primary);
  background:var(--bg-secondary);
}
#t2-g-solo:focus-visible ~ .t2-plan__step label[for="t2-g-solo"],
#t2-g-01:focus-visible ~ .t2-plan__step label[for="t2-g-01"],
#t2-g-06:focus-visible ~ .t2-plan__step label[for="t2-g-06"],
#t2-g-11:focus-visible ~ .t2-plan__step label[for="t2-g-11"],
#t2-g-21:focus-visible ~ .t2-plan__step label[for="t2-g-21"],
#t2-g-31:focus-visible ~ .t2-plan__step label[for="t2-g-31"],
#t2-g-41:focus-visible ~ .t2-plan__step label[for="t2-g-41"]{
  outline:2px solid var(--text-primary);
  outline-offset:3px;
}
#t2-g-solo:checked ~ .t2-plan__step .t2-terms[data-g="solo"],
#t2-g-01:checked ~ .t2-plan__step .t2-terms[data-g="01"],
#t2-g-06:checked ~ .t2-plan__step .t2-terms[data-g="06"],
#t2-g-11:checked ~ .t2-plan__step .t2-terms[data-g="11"],
#t2-g-21:checked ~ .t2-plan__step .t2-terms[data-g="21"],
#t2-g-31:checked ~ .t2-plan__step .t2-terms[data-g="31"],
#t2-g-41:checked ~ .t2-plan__step .t2-terms[data-g="41"]{
  display:grid;
}

/* --- Einordnung: Text über die volle Breite, Hinweis klein darunter ------ */
.t2-lead--wide{max-width:none}
.t2-note{
  margin-top:var(--space-2xl);
  padding-top:var(--space-m);
  border-top:1px solid var(--border);
  max-width:none;
}
.t2-note p{font-size:16px;line-height:1.55;color:var(--text-secondary);margin:0 0 10px}
.t2-note p:last-child{margin-bottom:0}
.t2-note strong{color:var(--text-primary);font-weight:600}

/* --- Akkordeon ----------------------------------------------------------- */
.t2-acc{margin-top:var(--space-xl)}
.t2-acc details{border-bottom:1px solid var(--border)}
.t2-acc summary{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:var(--space-m) 48px var(--space-m) 0;
  font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.3;
}
.t2-acc summary::-webkit-details-marker{display:none}
.t2-acc summary::after{
  content:"";position:absolute;right:8px;top:30px;
  width:9px;height:9px;
  border-right:1.5px solid var(--text-secondary);
  border-bottom:1.5px solid var(--text-secondary);
  transform:rotate(45deg);
  transition:transform var(--transition-base);
}
.t2-acc details[open] summary::after{transform:rotate(-135deg);top:34px}
.t2-acc__b{padding:0 0 var(--space-m);max-width:760px}
.t2-acc__b p{color:var(--text-secondary);margin:0}

/* --- Abschluss und cal.com ----------------------------------------------- */
.t2-final{background:var(--bg-secondary)}
.t2-cal{
  max-width:1000px;margin-inline:auto;
  background:var(--bg);border:1px solid var(--hairline);
  border-radius:var(--radius-large);overflow:hidden;
}
.t2-cal__box{width:100%;min-height:640px}
.t2-cal__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-s);min-height:640px;padding:var(--space-l);text-align:center;
}
.t2-cal__ph p{max-width:520px;color:var(--text-secondary);margin:0}
.t2-cal__pht{font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--text-primary)}
.t2-final__micro{
  margin:var(--space-m) 0 0;text-align:center;font-size:15px;
  color:var(--text-secondary);
}

/* --- Fußzeile ------------------------------------------------------------ */
.t2-foot{
  padding:var(--space-2xl) 0;border-top:1px solid var(--hairline);
  background:var(--bg);
}
.t2-foot__brand{margin:0 0 var(--space-s);font-size:16px;font-weight:600}
.t2-foot__links{display:flex;flex-wrap:wrap;gap:var(--space-m)}
.t2-foot__links a{font-size:15px;color:var(--text-secondary);text-decoration:none}
.t2-foot__links a:hover{color:var(--text-primary);text-decoration:underline}

/* --- Mobiler Sticky-CTA -------------------------------------------------- */
.t2-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--hairline);
  transform:translateY(120%);
  transition:transform var(--transition-base);
}
.t2-sticky.is-on{transform:translateY(0)}
.t2-sticky .t2-btn{width:100%}

/* --- Ab 768 Pixel -------------------------------------------------------- */
@media (min-width:768px){
  .t2-trust__g{grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}
  /* Senkrechte Trennstriche: etwas dunkler als die Fläche, aber deutlich
     heller als die Rahmenlinien der Seite. */
  .t2-trust__g li:nth-child(2n){padding-left:var(--space-xl);border-left:1px solid var(--trust-line)}
  .t2-sizes{grid-template-columns:repeat(4,1fr)}
  .t2-terms{grid-template-columns:repeat(3,1fr)}
  .t2-roles{grid-template-columns:repeat(2,1fr);column-gap:var(--space-2xl)}
  .t2-roles li:nth-child(2){border-top:1px solid var(--border)}
}

/* --- Ab 1024 Pixel ------------------------------------------------------- */
@media (min-width:1024px){
  .t2-hero__grid{grid-template-columns:1.05fr .95fr}
  .t2-trust__g{grid-template-columns:repeat(4,1fr);gap:0}
  .t2-trust__g li{padding-left:var(--space-l);border-left:1px solid var(--trust-line)}
  .t2-trust__g li:first-child{padding-left:0;border-left:0}
  /* Sticky-Bühne: Zähler und Fortschritt bleiben stehen, die Argumente
     laufen daran vorbei. Erst ab dieser Breite, damit auf kleinen Geräten
     nichts klebt. */
  .t2-story{grid-template-columns:.6fr 1.4fr;gap:var(--space-2xl)}
  .t2-story__aside{position:sticky;top:120px}
  .t2-story__steps{gap:0}
  .t2-story__step{
    min-height:50vh;display:flex;flex-direction:column;justify-content:center;
    padding:var(--space-l) 0;
  }
  /* Die Abblendung kommt erst, wenn das Skript übernimmt – ohne
     JavaScript bleiben alle zehn Argumente voll lesbar. */
  .t2-story.is-ready .t2-story__step{
    opacity:.35;transition:opacity var(--transition-base);
  }
  .t2-story.is-ready .t2-story__step.is-active{opacity:1}
  .t2-sizes{grid-template-columns:repeat(7,1fr)}
  .t2-sticky{display:none}
}

/* --- Bis 991 Pixel ------------------------------------------------------- */
@media (max-width:991px){
  /* Die fünf Produktlinks brauchen zusammen mit Wortmarke und Terminbutton
     mehr Platz, als bis hierhin zur Verfügung steht. Unterhalb dieser Breite
     bleiben Wortmarke und Terminbutton; die Ziele sind über den Inhalt und
     die Hauptnavigation erreichbar. */
  .t2-nav__links{display:none}
  /* Der Rechtsschub steckt sonst am Linkblock. */
  .t2-nav__cta{margin-left:auto}
}

/* --- Bis 767 Pixel ------------------------------------------------------- */
@media (max-width:767px){
  .t2-sec{padding-top:var(--section-padding-mobile);padding-bottom:var(--section-padding-mobile)}
  .t2-hero{padding-top:var(--space-2xl);padding-bottom:var(--section-padding-mobile)}
  .t2-h2--wrap{hyphens:auto}
  main h1{font-size:40px;line-height:1.07}
  main h2{font-size:36px;line-height:1.1}
  main h3{font-size:26px}
  main p,main li{font-size:17px}
  .t2-lead,.t2-big,.t2-story__step p{font-size:21px;line-height:1.3}
  .t2-eyebrow{font-size:19px;margin-bottom:12px}
  .t2-head{margin-bottom:var(--space-xl)}
  /* Auf schmalen Viewports darf die Wortmarke umbrechen, damit der
     Buchungsbutton vollständig in die Zeile passt. */
  .t2-nav__in{gap:12px}
  .t2-nav__brand{font-size:15px;white-space:normal;min-width:0}
  .t2-nav__cta{margin-left:auto;flex:0 0 auto;padding:8px 14px;font-size:14px}
  .t2-plan__q{font-size:24px}
  .t2-acc summary{font-size:19px}
  .t2-roles__t{font-size:19px}
  .t2-pricetag{width:132px;height:132px}
  .t2-pricetag__band{
    width:220px;padding:9px 0;font-size:15px;
    transform:translate(-50%,-50%) rotate(45deg) translateY(-22px);
  }
  .t2-cal__box,.t2-cal__ph{min-height:560px}
  body{padding-bottom:88px}
}

/* --- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
    scroll-behavior:auto;
  }
  html{scroll-behavior:auto}
  .t2-btn--pri:hover{transform:none}
}

/* --- Wechsel der beiden Leisten ------------------------------------------
   Beim Laden ist nur die Hauptnavigation aus /inc/navigation.inc.php zu
   sehen. Sobald gescrollt wird, setzt das Skript die Klasse am body:
   die Hauptnavigation fährt nach oben aus dem Bild, die seiteneigene
   Leiste mit dem Terminbutton nimmt ihren Platz ein. */
.ls-header{
  transition:transform var(--transition-base),opacity var(--transition-base);
}
body.t2-scrolled .ls-header{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
body.t2-scrolled .t2-nav{
  transform:none;
  opacity:1;
  visibility:visible;
}