/* ============================================================
   TIPPS – Klick-Ziele der Nurture-Mails (/tipps/<slug>)
   Eine schmale Lesespalte, große Schrift, Karten im shadcn-Look.
   Nur tp-*-Klassen, easy.css bleibt unverändert.
   ============================================================ */
.tp-spalte{max-width:720px;margin:0 auto}
.tp-hero{padding:140px 0 44px}
.tp-seite .tp-hero h1{font-size:clamp(30px,4.6vw,48px);line-height:1.08;margin-top:16px;text-wrap:balance}
.tp-hero .lead{margin-top:18px;max-width:none;font-size:18px;color:#525252}
.tp-main{padding:0 0 96px}

/* ---------- Einblenden: reines CSS, damit der Inhalt auch ohne JavaScript sichtbar ist ---------- */
@keyframes tp-ein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tp-hero .tp-spalte > *,.tp-main .tp-karte,.tp-main .tp-cta{animation:tp-ein .7s cubic-bezier(.2,.8,.2,1) both}
.tp-hero .tp-spalte > :nth-child(2){animation-delay:.06s}
.tp-hero .tp-spalte > :nth-child(3){animation-delay:.12s}
.tp-main .tp-karte:nth-of-type(1),.tp-zwei .tp-karte{animation-delay:.2s}
.tp-main .tp-spalte > .tp-karte:nth-of-type(2){animation-delay:.28s}
.tp-main .tp-spalte > .tp-karte:nth-of-type(n+3),.tp-main .tp-cta{animation-delay:.36s}
.tp-zwei .tp-nachher{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){.tp-hero .tp-spalte > *,.tp-main .tp-karte,.tp-main .tp-cta{animation:none}}

/* ---------- Karten ---------- */
.tp-karte{
  background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-card);
  padding:30px 32px 32px;margin-top:20px;
}
.tp-karte h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin-bottom:16px;text-wrap:balance}
.tp-karte p{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.tp-karte p + p{margin-top:12px}
.tp-label{
  font-family:var(--mono);font-size:11.5px !important;font-weight:500;letter-spacing:.8px;
  text-transform:uppercase;color:var(--brand-deep) !important;margin-bottom:8px;
}
.tp-hin{margin-top:16px !important;font-size:15px !important;color:var(--mid) !important}

.tp-liste{margin:4px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.tp-liste li{font-size:17px;line-height:1.55;color:var(--ink-soft);padding-left:4px}
.tp-liste li::marker{color:var(--brand-deep);font-weight:600}
.tp-karte p + .tp-liste,.tp-kopie + .tp-liste{margin-top:18px}

/* ---------- Kopier-Block ---------- */
.tp-kopie{
  background:var(--surface-alt);border:1px solid var(--hairline);border-radius:16px;
  padding:18px 20px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.tp-karte .tp-kopie-tx{font-size:17px;line-height:1.55;color:var(--ink)}
.tp-kopie-btn{height:40px}
.tp-kopie-btn.ok{background:var(--brand-wash);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(0,125,130,.25)}
.tp-karte p + .tp-kopie{margin-top:14px}
.tp-knoepfe{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.tp-kopie-klein{background:transparent;box-shadow:none;color:var(--mid);padding:0 12px;text-decoration:underline;text-underline-offset:4px}
.tp-kopie-klein:hover{background:transparent;color:var(--ink);transform:none}
.tp-druck{margin-top:22px;height:40px}

/* ---------- Zähler ---------- */
.tp-zaehl{display:flex;flex-direction:column;margin-top:18px;border:1px solid var(--hairline);border-radius:16px;overflow:hidden}
.tp-zeile{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-top:1px solid var(--hairline)}
.tp-zeile:first-child{border-top:none}
.tp-zn{flex:1;font-size:16.5px;font-weight:500}
.tp-zeile button{
  width:44px;height:44px;border-radius:12px;border:none;background:var(--canvas);
  font-size:22px;line-height:1;color:var(--ink);transition:background .15s;
}
.tp-zeile button:hover{background:#e9e9e9}
.tp-zeile button:last-child{background:var(--ink);color:#fff}
.tp-zeile button:last-child:hover{background:#262626}
.tp-zeile output{width:40px;text-align:center;font-family:var(--mono);font-size:18px;font-weight:500}

/* ---------- Ergebnis ---------- */
.tp-ergebnis{margin-top:22px;padding:22px 24px;border-radius:16px;background:var(--brand-wash-soft);box-shadow:inset 0 0 0 1px rgba(0,125,130,.18)}
.tp-ergebnis[hidden]{display:none}
.tp-karte .tp-gross{font-size:clamp(34px,7vw,46px);line-height:1.05;font-weight:600;letter-spacing:-.04em;color:var(--ink);margin-bottom:8px}
.tp-ergebnis p{font-size:16.5px}
.tp-ergebnis .tp-liste{margin-top:10px}

/* ---------- Rechner ---------- */
.tp-form{display:flex;flex-direction:column;gap:18px}
.tp-form label{display:flex;flex-direction:column;gap:8px;font-size:16.5px;font-weight:500;color:var(--ink)}
.tp-form small{font-weight:400;color:var(--mid);font-size:14px}
.tp-feld{display:flex;align-items:center;gap:10px}
.tp-feld em{font-style:normal;color:var(--mid);font-weight:400}
.tp-feld input{
  width:150px;height:52px;border-radius:14px;border:1px solid #d4d4d4;background:var(--paper);
  padding:0 16px;font:500 20px var(--mono);color:var(--ink);
}
.tp-feld input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.tp-karte .tp-formel{font-family:var(--mono);font-size:19px;margin-top:14px;color:var(--ink)}

/* ---------- Selbsttest ---------- */
.tp-test{display:flex;flex-direction:column;gap:16px}
.tp-test fieldset{border:1px solid var(--hairline);border-radius:16px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px}
.tp-test legend{float:left;width:100%;font-size:17px;font-weight:500;line-height:1.45;margin-bottom:6px;padding:0}
.tp-test label{
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:14px;
  background:var(--canvas);font-size:16px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;
}
.tp-test input{position:absolute;opacity:0;pointer-events:none}
.tp-test label:has(input:checked){background:var(--ink);color:#fff}
.tp-test label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Vorher / Nachher ---------- */
.tp-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.tp-zwei .tp-karte{margin-top:0;padding:26px 24px}
.tp-zwei .tp-karte h2{font-size:19px}
.tp-zwei .tp-karte p{font-size:15.5px;line-height:1.55}
.tp-vorher{background:var(--surface-alt)}
.tp-vorher h2,.tp-vorher p{color:var(--mid)}
.tp-vorher .tp-label{color:var(--mid) !important}
.tp-nachher{box-shadow:var(--sh-card),inset 0 0 0 2px var(--brand)}

/* ---------- Abschluss ---------- */
.tp-cta{
  margin-top:44px;padding:36px 32px;border-radius:var(--r-card);background:var(--ink);color:#fafafa;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.tp-cta h2{font-size:clamp(22px,3vw,28px);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.tp-cta p{font-size:16.5px;line-height:1.55;color:#d4d4d4}
.tp-cta .btn{margin-top:6px}
.tp-cta .tp-cta-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:#a3a3a3}

@media(max-width:720px){
  .tp-hero{padding:118px 0 32px}
  .tp-hero .lead{font-size:17px}
  .tp-karte{padding:24px 20px 26px;border-radius:20px}
  .tp-zwei{grid-template-columns:1fr}
  .tp-cta{padding:30px 22px}
  .tp-cta .btn{width:100%;justify-content:center}
  .tp-kopie-btn{width:100%;justify-content:center}
  .tp-knoepfe{flex-direction:column}
  .tp-druck{display:none}
  .tp-feld input{flex:1;min-width:0;width:auto}
  .tp-main{padding-bottom:72px}
}
@media print{
  nav,footer,.tp-cta,.tp-kopie-btn,.tp-knoepfe,.tp-druck,.cur-dot,.cur-ring{display:none !important}
  .tp-hero{padding:0 0 16px}
  .tp-karte{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .rv{opacity:1 !important;transform:none !important}
}