/* COINBEGLEITER — Hero-Produkt-Panel (#73, 14.08.2026, Evolution in Denis-Abnahmen).
   PLAKAT-UMBAU 19.08.2026 (Denis): Label-Leiste BLICK INS TOOL entfernt (ihr
   Platz ging an die Karten, Fenster-Gesamtgroesse UNVERAENDERT); Karten von
   Mini-Daten auf PLAKAT (grosses Symbol + Name): Kuchen/Portfolio-Tracker ->
   Paragraf/Steuerreport -> Lupe/Audit; Haltefrist-Karte entfaellt, Zyklus
   12s (3 x 4s, rein CSS, kein JS) — Desktop links neben dem Hero-Text,
   mobil unter dem vertikal zentrierten Text. Grund Desktop-Slideshow:
   Laptop-Befund Denis (4-Karten-Stack kollidierte mit der Headline, der
   Flach-Fallback zeigte nur 2 Karten — Stack + Fallback beide ersetzt).
   EIGENE DATEI nach dem hero.css-Muster: keine neuen Tailwind-Klassen, kein
   Rebuild noetig, ueberlebt Purges. Farben/Typo = Marken-Token aus
   tailwind.config.js (paper #faf9f5, ink #16130f, muted #8a8477, line #e6e2d9,
   accent #987a4e). WORTWAHL = Werbeaussagen-Disziplin (A1): "erstellt" statt
   "abgabefertig", "erfuellt" statt "steuerfrei". Breakpoint 767px = md:.
   Historie der Iterationen: Changelog/Archiv 14.08. */

/* ---------- Panel (Desktop-Basis) ---------- */
.cb-hk-cluster {
  position: absolute;
  left: 5vw;                 /* Denis: links neben dem Text */
  top: 42%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: 340px;
  z-index: 10;
  /* Einfaden rein per CSS (Safari-IO-Falle 08.07.) */
  opacity: 0;
  animation: cb-hk-ein 0.9s ease-out 0.9s forwards;
}
@keyframes cb-hk-ein {
  from { opacity: 0; transform: translateY(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.cb-hk-fenster {
  background: #f3f1ec;
  border: 1px solid #e6e2d9;
  border-radius: 16px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.30);
  overflow: hidden;
}
.cb-hk-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  background: #faf9f5;
  border-bottom: 1px solid #e6e2d9;
}
.cb-hk-url {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #987a4e;
}

/* ---------- Slideshow (gilt fuer ALLE Geraete) ---------- */
.cb-hk-inhalt {
  position: relative;
  height: 202px;            /* Slot inkl. Ex-Kopfleisten-Platz (19.08.); Fenster-Gesamthoehe wie vorher */
  padding: 12px;
}
.cb-hk-card {
  position: absolute;
  inset: 12px;
  background: #faf9f5;
  border: 1px solid #e6e2d9;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  color: #16130f;
  font-family: "Beausite Classic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
  animation: cb-hk-slide 12s infinite;
}
.cb-hk-card--kuchen { animation-delay: 0s; }
.cb-hk-card--report { animation-delay: 4s; }
.cb-hk-card--audit  { animation-delay: 8s; }
@keyframes cb-hk-slide {
  0%    { opacity: 1; }
  30.5% { opacity: 1; }
  33.3% { opacity: 0; }
  96.7% { opacity: 0; }
  100%  { opacity: 1; }
}

/* ---------- Karten-Innenleben ---------- */
.cb-hk-eyebrow {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #987a4e;
  margin-bottom: 8px;
}
.cb-hk-zahl {
  font-family: "Rhymes Display", Georgia, serif;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cb-hk-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
}
.cb-hk-zeile + .cb-hk-zeile { border-top: 1px solid #efece5; }
.cb-hk-muted { color: #8a8477; }
.cb-hk-gruen { color: #3d7a4e; font-weight: 500; }

/* Kuchendiagramm (CSS-conic, fiktive Demo-Verteilung) */
.cb-hk-kuchenzeile { display: flex; align-items: center; gap: 16px; padding-top: 2px; }
.cb-hk-kuchen {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: conic-gradient(#987a4e 0 58%, #5f5a4f 58% 85%, #d9d4c9 85% 100%);
  border: 1px solid #e6e2d9;
}
.cb-hk-legende { flex: 1; display: flex; flex-direction: column; }
.cb-hk-lp {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; position: relative; top: -1px;
}
.cb-hk-lp1 { background: #987a4e; }
.cb-hk-lp2 { background: #5f5a4f; }
.cb-hk-lp3 { background: #d9d4c9; }

/* ---------- Plakat-Layout (19.08.2026): grosses Symbol + Name ---------- */
.cb-hk-plakat {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
}
.cb-hk-plakat-label {
  font-family: "Rhymes Display", Georgia, serif;
  font-size: 24px; letter-spacing: -0.01em; color: #16130f;
}
.cb-hk-kuchen--gross { width: 76px; height: 76px; }
.cb-hk-para {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 52px; line-height: 1; color: #987a4e;
}
.cb-hk-lupe { width: 56px; height: 56px; }
/* 19.08. Runde 2 (Denis: "kleines Detail, minimalistisch"): dezente
   Mono-Unterzeile unter dem Namen — nur Report + Audit, Portfolio bleibt pur. */
.cb-hk-plakat-sub {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #987a4e; margin-top: -5px;
}

/* Mobil-Zusatz-Abdunkler existiert nur mobil */
.cb-hk-dim-oben { display: none; }

/* Reduced Motion (alle Geraete): keine Slideshow — Report-Karte statisch */
@media (prefers-reduced-motion: reduce) {
  .cb-hk-cluster { opacity: 1; animation: none; }
  .cb-hk-card { animation: none; opacity: 1; }
  .cb-hk-card--kuchen, .cb-hk-card--audit { display: none; }
}

/* ---------- Mobil (synchron mit Tailwind md:) ---------- */
@media (max-width: 767px) {
  /* Text OBEN, vertikal zentriert zwischen Nav und Panel (Denis 14.08.):
     data-hero-copy als flex-Zone — ueberschreibt die Tailwind-bottom-
     Verankerung, weil hero-karten.css NACH styles.css laedt. */
  [data-hero-copy] {
    top: 60px;
    bottom: calc(100lvh - 100svh + 80px + 200px);
    padding-bottom: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* CTA ans Textende (neutralisiert max-md:order-first vom 04.08.) */
  [data-hero-copy] > div { order: 99; margin-top: 20px; margin-bottom: 0; }
  /* KOSTENLOS STARTEN etwas kleiner (Denis: „nur etwas") */
  [data-hero-copy] > div a { height: 44px; width: 252px; font-size: 11px; }
  /* Zusatz-Abdunkler oben — Text steht auf der hellen Bildhaelfte */
  .cb-hk-dim-oben {
    display: block; position: absolute; inset: 0 0 auto 0; height: 62%;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.28) 55%, rgba(0,0,0,0));
    pointer-events: none;
  }

  /* Panel unten, mittig, 320px (Denis) — mit lvh/svh+80px-Kompensation */
  .cb-hk-cluster {
    left: auto; right: 50%; transform: translate(50%, 0);
    top: auto; bottom: calc(100lvh - 100svh + 28px + 80px);
    width: 320px;
  }
  @keyframes cb-hk-ein {
    from { opacity: 0; transform: translate(50%, 14px); }
    to   { opacity: 1; transform: translate(50%, 0); }
  }

  .cb-hk-kopf { padding: 7px 10px; }
  .cb-hk-url { font-size: 8.5px; }
  .cb-hk-inhalt { height: 147px; padding: 8px; }
  .cb-hk-card { inset: 8px; padding: 10px 13px; border-radius: 10px; }
  .cb-hk-eyebrow { font-size: 9px; letter-spacing: 0.15em; margin-bottom: 3px; }
  .cb-hk-zahl { font-size: 21px; }
  .cb-hk-zeile { font-size: 11px; padding: 3px 0; gap: 8px; }
  .cb-hk-plakat { gap: 9px; }
  .cb-hk-plakat-label { font-size: 18px; }
  .cb-hk-kuchen--gross { width: 56px; height: 56px; }
  .cb-hk-para { font-size: 38px; }
  .cb-hk-lupe { width: 42px; height: 42px; }
  .cb-hk-plakat-sub { font-size: 8.5px; margin-top: -3px; }
}