/* Branchenseiten, Ergaenzung zu v2.css.
   Nur was auf der Startseite nicht vorkommt. Gleiche Tokens, gleiche Rhythmik. */

/* Zeilenumbruch in Zwischenüberschriften. v2.css kennt das nur für .h1,
   die Branchenseiten brauchen es auch in h2, sonst laufen Sätze breit. */
.h2 .l{display:block}

/* ---------- Beleg: eine gemessene Zahl mit ihrer Herkunft ---------- */
.beleg{
  margin-top:clamp(44px,6vh,68px);
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,3vw,40px);background:var(--card);
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);align-items:start;
}
.beleg-num span{
  display:block;font-size:clamp(2.6rem,5.4vw,4rem);font-weight:300;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.beleg-num p{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.55}
.beleg blockquote{margin:0}
.beleg blockquote p{color:var(--text-2);font-size:clamp(.98rem,1.3vw,1.1rem);line-height:1.62}
.beleg figcaption{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
  grid-column:2;
}

/* ---------- Übersicht: Raster der Branchen ---------- */
.hero-kurz{min-height:auto;padding-bottom:clamp(20px,4vh,48px)}
.bgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.bcard{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,2.8vw,34px);background:var(--card);
  text-decoration:none;color:inherit;min-height:44px;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.bcard:hover,.bcard:focus-visible{border-color:var(--line-2);background:rgba(255,255,255,.045);transform:translateY(-2px)}
.bcard-kurz{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.bcard-hook{color:var(--text-2);font-size:14.5px;line-height:1.55;margin-top:4px}
.bcard-mehr{
  margin-top:auto;padding-top:16px;font-size:13px;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;
}
.bcard-mehr .ar{opacity:.9}
.bhinweis{
  margin-top:clamp(30px,4vh,44px);color:var(--text-3);font-size:14px;line-height:1.6;
  max-width:62ch;
}

/* ---------- Querverweis am Seitenende ---------- */
.bpills{margin-top:clamp(40px,5.5vh,62px);text-align:center}
.bpills-lead{
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:16px;
}
.bpill{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;margin:5px 4px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--text-2);text-decoration:none;font-size:13.5px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.bpill:hover,.bpill:focus-visible{border-color:var(--line-2);color:var(--text)}

/* ---------- Schmal ---------- */
@media (max-width:860px){
  .beleg{grid-template-columns:1fr;gap:22px}
  .beleg figcaption{grid-column:1}
  .bgrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .bcard,.bpill{transition:none}
  .bcard:hover,.bcard:focus-visible{transform:none}
}

/* Hero auf schmalen Geräten: die Branchen-Hooks sollen einzeilig bleiben.
   Regel ist Schrift kleiner statt eine Zeile mehr. */
@media (max-width:480px){
  .hero .h1{font-size:1.7rem;letter-spacing:-.03em}
}

/* Inline-Link im Hinweis. v2.css stylt .link nur innerhalb des Footers,
   ausserhalb bliebe er im Blau des Browsers stehen. */
.bhinweis .link{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(74,222,128,.35);
  padding-bottom:1px;transition:border-color .25s var(--ease);
}
.bhinweis .link:hover,.bhinweis .link:focus-visible{border-bottom-color:var(--accent)}