/* Kluge Finanz — Business-Übersicht
   Ergänzt site.css ausschließlich um Komponenten, die auf dieser Seite vorkommen.
   Alle Farb-, Typografie-, Abstands- und Bewegungswerte werden aus site.css
   (:root-Variablen) übernommen — keine neuen Farbwerte, keine neue Easing-Kurve. */

/* ---------- Anker-Ziele: Ausgleich für die fixierte Navigation ---------- */
#biz-bereiche,
#biz-intro,
#biz-services {
  scroll-margin-top: var(--nav-h);
}

/* ---------- Aktuelle Seite in der Navigation ---------- */
.nav-links a[aria-current="page"],
.mobile-panel a[aria-current="page"],
.footer-col a[aria-current="page"] {
  color: var(--c-gold);
}
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Mini-Hero ---------- */
/* Identisches Muster wie .kk-hero/.kt-hero/.kd-hero/.fw-hero/.fn-hero
   (jeweils eigene Seiten-CSS) — dieselben padding-Werte, damit die
   Hero-Gesamthöhe sitewide identisch bleibt (~489px bei 1280px Breite). */
.biz-hero {
  min-height: auto;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 4vw, 3rem));
  padding-bottom: clamp(1.75rem, 5vw, 3.5rem);
}
/* .hero-visual-slot (site.css) ist auf Mobile sitewide ausgeblendet, solange
   keine Grafik vorhanden ist. Diese Seite hat eine echte Grafik
   (hero-Business.png) — Override nur für diese Seite, damit sie auf Mobile
   sichtbar bleibt, ohne die anderen Hauptseiten zu beeinflussen. Gleiches
   Prinzip wie .kk-hero/.kt-hero/.fn-hero auf den anderen Hauptseiten. */
@media (max-width: 1080px) {
  .biz-hero .hero-visual-slot {
    display: block;
    margin-top: 2.5rem;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
}

/* ---------- SEO-Einleitung: volle Contentbreite ---------- */
/* Gleiche Situation wie bei #fn-intro (finanz-news.css): site.css begrenzt
   .section-head/.section-head p standardmäßig auf 620px/46ch — für den
   längeren Einleitungstext hier zu schmal. Override nur für diesen Bereich. */
#biz-intro .section-head,
#biz-intro .section-head p {
  max-width: none;
}

/* ---------- "Business-Finanzen nach Bereichen": volle Breite, eine Zeile ---------- */
/* Gleiche Ursache wie bei #biz-intro oben: site.css begrenzt .section-head
   standardmäßig auf 620px — bei dieser Überschrift erzwingt das auf Desktop
   einen unnötigen Zeilenumbruch, obwohl ausreichend Platz vorhanden wäre.
   Override nur für diesen Bereich, kein <br>, keine Schriftgrößenänderung,
   kein white-space:nowrap (Mobile bricht weiterhin normal um). */
#biz-bereiche .section-head {
  max-width: none;
}

/* ---------- Kompaktere Abstände auf der Business-Seite ---------- */
/* Bewusst nur hier gescopt (#biz-intro/#biz-bereiche), keine sitewide
   Änderung an .section/.section-head/.section-prose. Werte per
   offsetTop/offsetHeight im Browser gemessen (bei erst nach dem Laden
   ausgelöster data-reveal-Animation verfälscht ein reiner
   getBoundingClientRect-Snapshot sonst leicht das Ergebnis, da diese
   Elemente initial per transform verschoben sind).

   Erste Korrekturrunde (Ausgangswerte = ursprüngliche Default-Section-
   Abstände von site.css, ohne jede Anpassung):
   - SEO-Einleitung → "Themenbereiche": 296px → 234px → 192px
   - Reiter-/Produktbereich → unterer Ad: 205px → 206px → 167px

   Diese zweite Korrekturrunde reduziert nochmals um ca. 30–40 % gegenüber
   dem jeweils VORHERIGEN (bereits reduzierten) Stand von 192px/167px:
   - SEO-Einleitung → "Themenbereiche"-Überschrift: 192px → 126px (−34 %)
   - Überschrift → Reiter: unverändert 28px (bereits sehr kompakt, siehe
     vorherige Korrektur — Vorgabe "direkt unter der Überschrift")
   - Reiter-/Produktbereich → unterer Ad-Platzhalter: 167px → 108px (−35 %)
   Hero-Abstände (.biz-hero) bleiben unverändert. */
#biz-intro.section--compact {
  padding-bottom: 0;
}
#biz-intro .section-prose {
  margin-bottom: 1.75rem;
}
#biz-bereiche {
  padding-top: 5.5rem;
  padding-bottom: 2.75rem;
}
#biz-bereiche .section-head {
  margin-bottom: 1.75rem;
}

/* ---------- Business-Reiter (Tabs) ---------- */
/* Exakt dasselbe optische Muster wie .fn-archiv-tablist/.fn-archiv-tab/
   .fn-archiv-panel (finanz-news.css, News-Archiv-Seite) — eigene Klassen
   (biz- statt fn-), damit die Business-Seite nicht von einem
   Finanz-News-spezifischen Namensraum abhängt, aber identisches Verhalten
   und Erscheinungsbild. Flex-wrap sorgt dafür, dass Reiter auf schmalen
   Breiten sauber umbrechen statt horizontal zu scrollen oder überzulaufen. */
.biz-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.biz-tab {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-off-dim);
  background: rgba(244, 239, 228, 0.02);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-lux), color var(--dur-fast) var(--ease-lux), background var(--dur-fast) var(--ease-lux);
}
.biz-tab:hover { border-color: var(--c-line-strong); color: var(--c-off); }
.biz-tab[aria-selected="true"] {
  color: var(--c-obsidian);
  background: var(--c-gold);
  border-color: var(--c-gold);
}
.biz-panel[hidden] { display: none; }

/* ---------- Produkt-Grid je Reiter ---------- */
/* Identisches Muster wie .kk-grid (kreditkarten.css): CSS-Grid mit
   3 → 2 → 1 Spalten, beliebig viele Karten möglich (kein hartcodiertes
   Limit). Karten selbst nutzen unverändert das bestehende, generische
   .product-card/.cc-card-System aus site.css — keine neue
   Kartenkomponente. */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.biz-grid > * { min-width: 0; }
@media (max-width: 1080px) {
  .biz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .biz-grid { grid-template-columns: 1fr; }
}

/* ---------- Kachel-Kopfzeile: Produktname links, Typ-Badge rechts ---------- */
/* Exakt derselbe Mechanismus wie bei der awa7-Referenzkachel
   (kreditkarten.css: ".kk-card .product-top { padding-right: 0; }") und
   den bestehenden Konten-Kacheln (konten.css: ".kt-account .product-top
   { padding-right: 0; }") — KEINE neue Technik, nur dieselbe, bereits an
   zwei Stellen etablierte Regel, hier auf .biz-grid gescoped. .product-top
   ist sitewide bereits ein Flex-Header mit justify-content:space-between
   (site.css, unverändert); die einzige Abweichung der Business-Kacheln
   war der dort noch aktive padding-right:2.6rem-Puffer (für das
   Bonus-Geschenk-Icon gedacht, bei diesen Produkten ohne Bonus nicht
   benötigt). Mit padding-right:0 steht dem Header dieselbe Breite wie bei
   awa7 zur Verfügung, wodurch Produktname und Typ-Badge nativ über
   space-between exakt wie im Master zusammenspielen — kein
   margin-left:auto, kein min-width:0, keine Sonderregel. */
.biz-grid .product-top {
  padding-right: 0;
}

/* ---------- Business-Services (externe Dienste, keine Finanzprodukte) ---------- */
/* Eigenständige Rubrik unterhalb der Reiter. Nutzt das bestehende
   .biz-grid-Raster (1 Karte startet links, weitere Karten ohne Platzhalter
   möglich) und die generischen .cc-*-Bausteine aus site.css. Die Karte ist
   bewusst KEINE .product-card (kein Tilt/Glow, keine Kreditkarten-/Konten-
   Optik), sondern ein ruhigerer Container mit denselben Tokens. */
#biz-services {
  padding-top: 0;
  padding-bottom: 2.75rem;
}
#biz-services .biz-services-wrap {
  border-top: 1px solid var(--c-line);
  padding-top: 3.25rem;
}
#biz-services .section-head,
#biz-services .section-head p {
  max-width: none;
}
#biz-services .section-head {
  margin-bottom: 1.75rem;
}
/* Die lange H2 braucht bei der Standard-Schriftgröße von .section-head h2
   (max. 2.7rem) ca. 1237px und bricht daher selbst bei voller Contentbreite
   (1160px) um. Leicht reduzierte Skalierung nur für diese Überschrift, damit
   sie ab ca. 1024px einzeilig bleibt; auf schmaleren Breiten bricht sie
   natürlich um (pretty statt balance, keine künstlich schmalen Zeilen). */
#biz-services .section-head h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.4rem);
  text-wrap: pretty;
}
.biz-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: linear-gradient(180deg, rgba(244, 239, 228, 0.03), rgba(244, 239, 228, 0.012));
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 1.9rem;
  transition: border-color var(--dur-fast) var(--ease-lux);
}
.biz-service-card:hover { border-color: var(--c-line-strong); }
.biz-service-card h3 { font-size: 1.25rem; }
.biz-service-card .product-top {
  gap: 0.75rem;
  flex-wrap: wrap;
}
.biz-service-card .cc-hero-value {
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
}
/* Interner Ratgeber-Link (kein Partnerlink): bewusst als dezenter Textlink
   unterhalb des Partnerhinweises, optisch sekundär zum Haupt-Button. */
.biz-service-guide {
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-gold);
  border-bottom: 1px solid var(--c-gold-dim);
  transition: color var(--dur-fast) var(--ease-lux), border-color var(--dur-fast) var(--ease-lux);
}
.biz-service-guide:hover {
  color: var(--c-gold-bright);
  border-bottom-color: var(--c-gold-bright);
}
.biz-service-points {
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.biz-service-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-off);
}
.biz-service-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
}