/* ============================================================
   JETZT STARTEN — Kampagnenseite der Eintrittsaktion (jt-)
   Briefing: docs/Prompt_JetztStarten.md
   Grundstimmung dunkel und dicht: Pine trägt die Mitte, zwei
   Bilder rahmen. Die Kalenderblätter hängen über die Kante der
   Pine-Fläche in die weiße Tarif-Sektion — die eine Überlappung
   der Seite, deshalb der negative Rand an .jt-leiste-rolle und
   der zusätzliche obere Innenabstand an .jt-tarife.
   ============================================================ */

/* ---------- 01 · Der Kalender ---------- */
/* Der Pine-Grund liegt auf ::before und endet 74 px über der Unterkante:
   So hängen die Kalenderblätter echt über die Kante in die weiße
   Tarif-Sektion (die eine Überlappung der Seite), und die Klammerzeile
   „ein Jahresbeitrag" steht schon auf Weiß. z-index:0 am Kapitel, damit
   das ::before mit -1 hinter den Inhalt, aber vor den Seitengrund fällt. */
/* margin-top 0: Die Sektion schließt direkt an den Hero an — der weiße
   Streifen dazwischen war der Sektionsabstand (Andreas, 02.09.2026). */
.jt-kalender{color:#fff;margin-top:0;padding-top:56px;position:relative;z-index:0}
.jt-kalender::before{content:"";position:absolute;inset:0 0 74px;background:var(--pine);z-index:-1}
.jt-kal-innen{padding:0 var(--inset)}
.jt-marke{border-top-color:var(--hairline-dunkel)}
.jt-marke .nr{color:var(--lime)}
.jt-marke .was{color:rgba(255,255,255,.55)}

.jt-zahlzeile{display:flex;align-items:flex-end;gap:clamp(24px,4vw,64px);flex-wrap:wrap;padding:34px 0 8px}
.jt-tage{display:flex;align-items:baseline;gap:16px;margin:0}
.jt-tage-zahl{font-family:var(--anzeige);font-weight:700;letter-spacing:-.05em;line-height:.8;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:clamp(88px,13vw,196px);color:var(--lime)}
.jt-tage-wort{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,2.4vw,34px)}
.jt-zahl-text{max-width:34ch;font-family:var(--lauf);font-weight:300;font-size:17px;line-height:1.55;color:rgba(255,255,255,.78);margin:0;padding-bottom:12px}
.jt-stand{color:rgba(255,255,255,.5);margin:4px 0 0}
.jt-info{min-height:1.4em;color:rgba(255,255,255,.72);margin:10px 0 26px}

/* Die Leiste: Blätter eines Abreißkalenders. Auf schmalen Fenstern rollt
   sie waagrecht im eigenen Container — die Seite selbst nie. */
.jt-leiste-rolle{padding:0 var(--inset) 6px;overflow-x:auto;scrollbar-width:none}
.jt-leiste-rolle::-webkit-scrollbar{display:none}
.jt-leiste{display:flex;align-items:flex-start;gap:26px;width:max-content;padding-bottom:2px}
.jt-gruppe-frei,.jt-gruppe-blaetter{display:flex;gap:8px}
.jt-gruppe-jahr{display:flex;flex-direction:column;gap:0}

.jt-blatt{position:relative;display:flex;flex-direction:column;align-items:center;width:74px;height:100px;background:#fff;color:var(--tinte);box-shadow:var(--schatten-plakette);padding:15px 6px 9px;border-radius:var(--r-flaeche)}
.jt-blatt.jt-frei{background:var(--lime);color:var(--pine)}
.jt-perfo{position:absolute;top:6px;left:9px;right:9px;height:0;border-top:2px dotted rgba(20,35,27,.28)}
.jt-frei .jt-perfo{border-top-color:rgba(7,48,31,.34)}
.jt-blatt-monat{font-family:var(--anzeige);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-top:4px}
.jt-blatt-jahr{font-family:var(--anzeige);font-weight:600;font-size:10.5px;letter-spacing:.16em;opacity:.62}
.jt-blatt-preis{margin-top:auto;font-family:var(--anzeige);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}

/* Die Klammer „ein Jahresbeitrag" liegt durch den Überhang schon auf der
   weißen Fläche — deshalb dunkle Schrift und helle Haarlinie. */
.jt-klammer{display:block;margin-top:12px;padding-top:8px;border-top:1px solid var(--hairline);font-family:var(--anzeige);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center}

.jt-nach-ende{color:rgba(255,255,255,.82);max-width:56ch;padding:30px 0 6px;margin:0}
.jt-nach-ende-link{padding:10px 0 56px;margin:0}

/* ---------- 02 · Die vier Beiträge ---------- */
.jt-tarife{padding-top:var(--luft)}
.jt-tarif-raster{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:56px;align-items:start}
.jt-tabelle-rolle{overflow-x:auto}
.jt-tabelle{width:100%;border-collapse:collapse}
.jt-tabelle thead th{font-family:var(--anzeige);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--hairline)}
.jt-tabelle tbody th,.jt-tabelle tbody td{padding:20px 12px 20px 0;border-bottom:1px solid var(--hairline);vertical-align:baseline;text-align:left}
.jt-tabelle .jt-r{text-align:right;padding-right:0}
.jt-tarifname{display:block;font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(16px,1.6vw,21px);color:var(--tinte)}
.jt-monat{display:block;font-family:var(--lauf);font-weight:300;font-size:14px;color:var(--muted);margin-top:3px}
.jt-sp-bedingung{font-family:var(--lauf);font-weight:300;font-size:15px;color:var(--sekundaer)}
.jt-preis{font-family:var(--anzeige);font-weight:700;font-size:clamp(20px,2.2vw,29px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--tinte);white-space:nowrap}
.jt-tabelle tbody tr{transition:background var(--t-schnell) ease-out}
.jt-tabelle tbody tr:hover{background:rgba(31,132,70,.05)}
.jt-marginalie{border-left:1px solid var(--hairline);padding-left:26px;display:flex;flex-direction:column;gap:16px}
.jt-fussnote{color:var(--muted);margin-top:20px}

/* ---------- Pfeillink: die Randgeste der Seite ---------- */
.jt-pfeillink{position:relative;display:inline-block;font-family:var(--anzeige);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);text-decoration:none}
.jt-pfeillink::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-schnell) var(--ease)}
.jt-pfeillink:hover::after,.jt-pfeillink:focus-visible::after{transform:scaleX(1)}
.jt-pfeillink>span{display:inline-block;transition:transform var(--t-schnell) ease-out}
.jt-pfeillink:hover>span,.jt-pfeillink:focus-visible>span{transform:translateX(4px)}

/* ---------- 03 · Sofort dabei ---------- */
.jt-dabei-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.jt-dabei-liste{list-style:none;margin:0;padding:0}
.jt-dabei-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;row-gap:4px;padding:20px 0;border-top:1px solid var(--hairline);align-items:baseline}
.jt-dabei-liste li:last-child{border-bottom:1px solid var(--hairline)}
.jt-dabei-titel{grid-column:1;font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(17px,1.9vw,23px);color:var(--tinte)}
.jt-dabei-satz{grid-column:1;font-family:var(--lauf);font-weight:300;font-size:15px;line-height:1.5;color:var(--sekundaer);max-width:52ch}
.jt-dabei-liste .jt-pfeillink{grid-column:2;grid-row:1;justify-self:end}
.jt-dabei-bild{margin:0}
.jt-dabei-bild img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:60% 30%;border-radius:var(--r-flaeche)}

/* ---------- 04 · Die Pause ---------- */
.jt-pause{position:relative;min-height:min(64svh,620px);display:grid;place-items:center;overflow:hidden;margin-top:var(--luft)}
.jt-pause-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* Verlauf statt Grau: belegt den Kontrast des Satzes auf dem Bild. */
.jt-pause::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,48,31,0) 30%,rgba(7,48,31,.62) 100%)}
.jt-pause-inhalt{position:relative;z-index:1;text-align:center;padding:64px var(--inset)}
.jt-pause-kontur{font-family:var(--anzeige);font-weight:700;font-size:clamp(64px,10vw,150px);line-height:.9;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.92);margin:0}
.jt-pause-satz{font-family:var(--lauf);font-weight:300;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:#fff;max-width:44ch;margin:14px auto 0}

/* ---------- 05 · Der Abschluss ---------- */
.jt-cta{background:var(--tanne);color:#fff;margin-top:var(--luft);padding:calc(var(--luft) + 16px) var(--inset)}
.jt-cta-titel{margin:0 0 22px}
.jt-cta-zeile{display:block;font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;font-size:clamp(44px,7vw,108px)}
.jt-cta-outline{color:transparent;-webkit-text-stroke:2px var(--lime)}
.jt-cta-text{font-family:var(--lauf);font-weight:300;font-size:18px;line-height:1.55;color:rgba(255,255,255,.8);max-width:52ch;margin:0 0 28px}
.jt-cta-kontakt{color:rgba(255,255,255,.62);margin:24px 0 0}
.jt-cta-kontakt a{color:var(--lime);text-underline-offset:3px}

/* ---------- Fokus ---------- */
.jt-cta a:focus-visible,.jt-kalender a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.jt-tarife a:focus-visible,.jt-dabei a:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* ---------- Bewegung: Zähler und Blätter am Scrollweg ----------
   Beides hängt direkt an der Rollbewegung (Andreas, 02.09.2026):
   jetzt-starten.js rechnet den Fortschritt der Sektion im Fenster und
   setzt Zählerstand, Blatt-Masken und die Jahresgruppe als Inline-Stile —
   vor wie zurück. Hier steht nur die Glättung; ohne JavaScript und bei
   reduzierter Bewegung bleibt alles offen (das Skript fasst dann nichts
   an, es gibt keinen versteckten Ausgangszustand im CSS). */
.jt-kalender .jt-frei{transition:clip-path .12s linear}
.jt-kalender .jt-gruppe-jahr{transition:opacity .12s linear,transform .12s linear}

@media (prefers-reduced-motion:reduce){
  .jt-kalender .jt-frei,.jt-kalender .jt-gruppe-jahr{transition:none}
  .jt-pfeillink::after,.jt-pfeillink>span{transition:none}
}

/* ---------- Schmale Fenster ---------- */
@media (max-width:900px){
  .jt-tarif-raster,.jt-dabei-raster{grid-template-columns:1fr;gap:32px}
  .jt-marginalie{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:18px}
  .jt-dabei-bild{order:-1}
  .jt-dabei-bild img{aspect-ratio:16/10;object-position:60% 22%}
}
@media (max-width:560px){
  .jt-zahlzeile{padding-top:26px}
  .jt-zahl-text{padding-bottom:0}
  .jt-blatt{width:64px;height:88px;padding-top:13px}
  .jt-leiste{gap:18px}
  /* Tabellen- und Grid-Anzeige vertragen sich nicht halb: unter 560 px
     wird die ganze Tabelle zu Block + Grid-Zeilen, sonst rechnet der
     Tabellenalgorithmus die Spalten weiter und Preis und Name überlagern
     sich. Die Semantik (th scope) bleibt unangetastet. */
  .jt-tabelle,.jt-tabelle thead,.jt-tabelle tbody{display:block}
  .jt-tabelle thead tr,.jt-tabelle tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .jt-tabelle thead .jt-sp-bedingung{display:none}
  .jt-tabelle tbody tr{border-bottom:1px solid var(--hairline)}
  .jt-tabelle tbody th,.jt-tabelle tbody td{border-bottom:0;padding:16px 0 4px}
  .jt-tabelle tbody td.jt-preis{grid-column:2;grid-row:1;padding-top:16px;align-self:start}
  .jt-tabelle tbody td.jt-sp-bedingung{grid-column:1 / -1;grid-row:2;padding-top:0;font-size:14px;padding-bottom:14px}
}