/* ==========================================================================
   OnwardPR – Trends & Recht
   1. Hero und Sprungmarken
   2. Richtungen (weg von → hin zu)
   3. Branchen (Tabs)
   4. Rechtliches (Karten mit Datum)
   5. Betreuung (Vergleich, Hybrid, Checkliste)
   6. Motion & Responsive
   ========================================================================== */

/* ---------- 1. Hero ------------------------------------------------------- */

.tr-hero{padding:64px 0 30px}
.tr-hero h1{font-size:clamp(2.6rem,6.5vw,5rem);max-width:16ch;margin-bottom:26px}
.tr-lead{max-width:68ch;margin:0 0 38px}
.tr-text{max-width:74ch;font-size:1.02rem;line-height:1.85;color:var(--gray);margin:0 0 32px}

.tr-jump{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.tr-jump a{
  display:flex;flex-direction:column;gap:8px;padding:22px 18px;
  background:linear-gradient(180deg,#f7f7f8,var(--bg));
  font-weight:700;color:var(--navy);
  transition:background .3s var(--ease),color .3s ease;
}
.tr-jump a span{
  font-family:"Agency","Archivo Black",sans-serif;font-size:1.5rem;
  color:var(--gold-dark);line-height:1;
}
.tr-jump a:hover{background:var(--navy);color:#fff}
.tr-jump a:hover span{color:var(--gold)}

/* ---------- 2. Richtungen ------------------------------------------------- */

.shift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.shift{
  position:relative;padding:28px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.shift:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.shift-num{
  position:absolute;top:22px;right:26px;
  font-family:"Agency","Archivo Black",sans-serif;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(214,148,4,.5);
}
.shift h3{color:var(--navy);margin-bottom:20px;padding-right:60px;font-size:1.45rem}

.shift-flow{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;
  margin-bottom:18px;
}
.shift-from,.shift-to{padding:16px 18px;border-radius:18px}
.shift-from{background:rgba(103,112,119,.09)}
.shift-to{background:rgba(214,148,4,.12)}
.shift-from span,.shift-to span{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;margin-bottom:7px;
}
.shift-from span{color:var(--gray)}
/* 11px-Label auf hellem Grund: Gold-Dark käme nur auf 3,58:1. */
.shift-to span{color:var(--navy)}
.shift-from p,.shift-to p{margin:0;font-size:.92rem;line-height:1.6;color:var(--dark)}
.shift-arrow{
  align-self:center;width:34px;height:2px;background:var(--gold);position:relative;flex:none;
}
.shift-arrow::after{
  content:"";position:absolute;right:0;top:50%;
  width:9px;height:9px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);
  transform:translateY(-50%) rotate(45deg);
}
.shift-note{margin:0;font-size:.95rem;line-height:1.78;color:var(--gray)}

/* ---------- 3. Branchen --------------------------------------------------- */

.branch{
  border-radius:var(--radius);overflow:hidden;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
}
.branch-tabs{
  display:flex;flex-wrap:wrap;gap:0;
  background:rgba(37,40,57,.04);border-bottom:1px solid var(--border);
}
.branch-tab{
  flex:1 1 auto;border:0;background:none;cursor:pointer;
  padding:16px 18px;font-size:.88rem;font-weight:700;color:var(--gray);
  border-bottom:3px solid transparent;white-space:nowrap;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.branch-tab:hover{color:var(--navy);background:rgba(255,255,255,.6)}
.branch-tab.is-active{color:var(--navy);background:var(--card);border-bottom-color:var(--gold-dark)}
.branch-tab:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

.branch-panel{padding:34px}
.branch-panel[hidden]{display:none}
.branch-panel h3{color:var(--navy);font-size:1.6rem;margin-bottom:10px}
.branch-lead{font-size:1.02rem;line-height:1.75;color:var(--gray);margin:0 0 24px;max-width:70ch}
.branch-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0}
.branch-specs > div{padding-top:16px;border-top:2px solid var(--border)}
.branch-specs dt{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);font-weight:700;margin-bottom:9px;
}
.branch-specs dd{margin:0;font-size:.94rem;line-height:1.72;color:var(--gray)}

/* ---------- 4. Rechtliches ------------------------------------------------ */

.disclaimer{
  border-left:4px solid var(--gold);background:rgba(214,148,4,.08);
  border-radius:0 18px 18px 0;padding:20px 24px;margin:0 0 26px;max-width:80ch;
}
.disclaimer p{margin:0;font-size:.95rem;line-height:1.75;color:var(--gray)}
.disclaimer strong{color:var(--dark)}

.law-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.law{
  padding:28px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.law:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.law-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.law-date{
  font-family:"Agency","Archivo Black",sans-serif;font-size:1.15rem;letter-spacing:.5px;
  color:var(--navy);background:rgba(37,40,57,.07);
  padding:5px 13px;border-radius:8px;
}
.law-tag{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:5px 11px;border-radius:999px;
  background:rgba(103,112,119,.14);color:var(--gray);
}
.law-tag-hot{background:rgba(179,38,30,.12);color:#b3261e}
.law-tag-new{background:rgba(29,122,79,.14);color:#1d7a4f}
.law h3{color:var(--navy);font-size:1.42rem;margin-bottom:12px}
.law p{font-size:.96rem;line-height:1.78;color:var(--gray);margin:0 0 12px}
.law ul{margin:0 0 14px;padding-left:20px}
.law li{font-size:.94rem;line-height:1.72;color:var(--gray);margin-bottom:8px}
.law strong{color:var(--dark)}
.law-do{
  margin:0;padding:14px 16px;border-radius:14px;
  background:rgba(34,56,105,.06);font-size:.92rem;line-height:1.7;
}

/* ---------- 5. Betreuung -------------------------------------------------- */

.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:22px}
.compare-col{
  padding:30px;border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.compare-in{background:var(--card)}
.compare-ex{background:linear-gradient(160deg,rgba(37,40,57,.97),rgba(34,56,105,.94));color:#f4f5f8}
.compare-kicker{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  margin:0 0 10px;color:var(--navy);
}
/* Der Verlauf läuft bis #223869; dort erreicht reines Gold nur 4,41:1. #f6e0b0 ist
   der bereits im Projekt genutzte helle Goldton (band-chip) und kommt auf 9,8:1. */
.compare-ex .compare-kicker{color:#f6e0b0}
.compare-col h3{font-size:1.45rem;margin-bottom:18px}
.compare-in h3{color:var(--navy)}
.compare-ex h3{color:#fff}
.compare-col ul{margin:0 0 18px;padding-left:20px}
.compare-col li{font-size:.95rem;line-height:1.75;margin-bottom:11px}
.compare-in li{color:var(--gray)}
.compare-in strong{color:var(--dark)}
.compare-ex li{color:#cfd5e2}
.compare-ex strong{color:#fff}
.compare-warn{
  margin:0;padding:15px 17px;border-radius:14px;font-size:.92rem;line-height:1.7;
}
.compare-in .compare-warn{background:rgba(214,148,4,.1);color:var(--gray)}
.compare-ex .compare-warn{background:rgba(255,255,255,.08);color:#cfd5e2}

.hybrid{
  padding:34px;border-radius:var(--radius);margin-bottom:22px;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
  border-top:4px solid var(--gold);
}
.hybrid h3{color:var(--navy);font-size:1.6rem;margin-bottom:14px}
.hybrid p{font-size:1rem;line-height:1.82;color:var(--gray);margin:0 0 14px;max-width:78ch}
.hybrid p:last-child{margin-bottom:0}
.hybrid strong{color:var(--dark)}

.checklist{padding:34px;border-radius:var(--radius);background:rgba(37,40,57,.04);border:1px solid var(--border)}
.checklist h3{color:var(--navy);font-size:1.45rem;margin-bottom:20px}
.checklist ol{margin:0 0 20px;padding-left:0;list-style:none;counter-reset:cl}
.checklist li{
  counter-increment:cl;position:relative;padding-left:46px;margin-bottom:14px;
  font-size:.98rem;line-height:1.75;color:var(--gray);
}
.checklist li::before{
  content:counter(cl,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:"Agency","Archivo Black",sans-serif;font-size:1.5rem;color:var(--gold-dark);
}
.checklist-note{
  margin:0;padding:16px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--border);font-size:.94rem;line-height:1.72;color:var(--gray);
}
.checklist-note strong{color:var(--dark)}

.lab-cta{text-align:center}
.lab-cta .lead{max-width:60ch;margin:0 auto 24px}
.lab-cta .hero-actions{justify-content:center}

/* ---------- 6. Motion & Responsive ---------------------------------------- */

@media (prefers-reduced-motion: no-preference){
  .reveal.visible .shift,.reveal.visible .law{animation:fadeUp .7s var(--ease) both}
  .reveal.visible .shift:nth-child(2),.reveal.visible .law:nth-child(2){animation-delay:.08s}
  .reveal.visible .shift:nth-child(3),.reveal.visible .law:nth-child(3){animation-delay:.16s}
  .reveal.visible .shift:nth-child(4),.reveal.visible .law:nth-child(4){animation-delay:.24s}
  .reveal.visible .shift:nth-child(5),.reveal.visible .law:nth-child(5){animation-delay:.32s}
  .reveal.visible .shift:nth-child(6),.reveal.visible .law:nth-child(6){animation-delay:.4s}
  .branch-panel{animation:fadeUp .45s var(--ease) both}
}

@media (max-width: 980px){
  .shift-grid,.law-grid,.compare{grid-template-columns:1fr}
  .tr-jump{grid-template-columns:repeat(2,1fr)}
  .branch-specs{grid-template-columns:1fr;gap:18px}
  .branch-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .branch-tab{flex:0 0 auto}
  .branch-panel{padding:26px}
}
@media (max-width: 640px){
  .tr-hero{padding:40px 0 20px}
  .tr-jump{grid-template-columns:1fr}
  .shift,.law,.compare-col,.hybrid,.checklist{padding:24px}
  .shift-flow{grid-template-columns:1fr;gap:10px}
  .shift-arrow{width:2px;height:22px;justify-self:center}
  .shift-arrow::after{
    right:50%;top:auto;bottom:0;
    transform:translateX(50%) rotate(135deg);
  }
  .shift h3{padding-right:48px;font-size:1.3rem}
}