/* ============================================================
   kapy-hero-uniform.css — Universal Hero-Vereinheitlichung
   ============================================================ */

/* === Topbar Status-Pill (grüner Live-Dot) === */
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(5,150,105,.10);
  color: #047857 !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s;
}
.topbar-status:hover { background: rgba(5,150,105,.18); }
.topbar-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105,.20);
  animation: kpStatusPulse 2.4s ease-in-out infinite;
}
@keyframes kpStatusPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

/* === BASIS: Padding, BG, Hairline === */
.hero-home, .hero-pro,
.brand-hero, .calc-hero, .cl-hero, .hs-hero, .ir-hero, .legal-hero,
.lp-hero, .pg-hero, .pr-hero, .rm-hero, .st-hero, .uc-hero, .vh-hero, .vs-hero{
  padding: clamp(168px, 16vw, 200px) 24px clamp(56px, 7vw, 88px) !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #f1f5f9 !important;
  position: relative;
  overflow: hidden;
}
.hero-home{
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(234,88,12,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%) !important;
}

/* === CONTAINER === */
.hero-home .container, .hero-pro .container,
.brand-hero .container, .calc-hero .container, .hs-hero .container,
.legal-hero .container, .pg-hero .container, .pr-hero .container,
.st-hero .container, .uc-hero .container, .vh-hero .container, .vs-hero .container,
.cl-hero .container, .ir-hero .container, .rm-hero .container,
.hero-pro__container{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === H1 === */
.hero-home h1, .hero-pro h1, .hero-pro__title,
.brand-hero h1, .calc-hero h1, .cl-hero h1, .hs-hero h1, .ir-hero h1,
.legal-hero h1, .pg-hero h1, .pr-hero h1, .rm-hero h1, .st-hero h1,
.uc-hero h1, .vh-hero h1, .vs-hero h1{
  font-size: clamp(34px, 5.2vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  margin: 0 0 18px !important;
}
.hero-home h1 .accent, .hero-pro h1 .accent,
.brand-hero h1 .accent, .calc-hero h1 .accent, .hs-hero h1 .accent,
.legal-hero h1 .accent, .pg-hero h1 .accent, .pr-hero h1 .accent,
.uc-hero h1 .accent, .vh-hero h1 .accent, .vs-hero h1 .accent,
.cl-hero h1 .accent, .ir-hero h1 .accent, .rm-hero h1 .accent, .st-hero h1 .accent{
  color: #c2410c !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* === LEAD === */
.hero-home .hero-text, .hero-pro__lead,
.brand-hero p.lead, .calc-hero p.lead, .cl-hero p.lead, .hs-hero p.lead,
.ir-hero p.lead, .legal-hero p.lead, .pg-hero p.lead, .pr-hero p.lead,
.rm-hero p.lead, .st-hero .lead, .uc-hero p.lead, .vh-hero p.lead, .vs-hero p.lead{
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.6 !important;
  color: #475569 !important;
}

/* === EYEBROW-PILL (gehören weg, falls noch da) === */
.hero-pro__eyebrow,
.brand-hero .pill, .calc-hero .pill, .cl-hero .pill, .hs-hero .pill,
.ir-hero .pill, .legal-hero .pill, .pg-hero .pill, .pr-hero .pill,
.rm-hero .pill, .st-hero .pill, .uc-hero .pill, .vh-hero__pill, .vs-hero .pill,
.hero-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFF7ED !important;
  border: 1px solid #FED7AA !important;
  color: #9a3412 !important;
  padding: 7px 14px !important;
  border-radius: 2px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
  text-decoration: none !important;
}

/* === ACTIONS === */
.hero-home .hero-actions, .hero-pro__actions,
.brand-hero .actions, .vh-hero__actions, .vs-hero__actions{
  display: inline-flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* === Sekundärer CTA als Text-Link (statt zweitem Button) === */
.hero-pro__textlink {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #c2410c;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color .15s;
}
.hero-pro__textlink:hover {
  color: #9a3412;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* === Homepage-Hero: Screenshot prominent, 2-col Layout schützen === */
.hero-home .container { max-width: 1280px !important; }
.hero-home .hero-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}
.hero-home .mockup-wrap {
  position: relative;
  display: block !important;
  z-index: 2;
}
.hero-home .product-shot {
  display: block !important;
  width: 100% !important;
  border-radius: 3px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.20), 0 12px 24px -12px rgba(15,23,42,.10);
  overflow: hidden;
  background: #FFFFFF;
}
.hero-home .product-shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 880px){
  .hero-home .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* === Mobile === */
@media (max-width: 880px){
  .hero-home, .hero-pro, .brand-hero, .calc-hero, .cl-hero, .hs-hero,
  .ir-hero, .legal-hero, .pg-hero, .pr-hero, .rm-hero, .st-hero,
  .uc-hero, .vh-hero, .vs-hero{
    padding: clamp(140px, 18vw, 168px) 20px clamp(40px, 6vw, 64px) !important;
  }
}

/* === ANNOUNCEMENT BAR (top, über Topbar) === */
.kapy-announce {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  background: #0f172a;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 12.5px;
  letter-spacing: .02em;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.kapy-announce__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.kapy-announce__flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.kapy-announce strong {
  font-weight: 700;
  letter-spacing: .04em;
}
.kapy-announce__sep {
  opacity: .35;
  font-weight: 300;
}
.kapy-announce__item {
  color: rgba(255,255,255,.85);
  font-weight: 500;
}

/* Topbar/Header verschoben für Announce-Bar */
.topbar { top: 36px !important; }
.header { top: 72px !important; }
@media (max-width: 768px){
  .header { top: 36px !important; }
}
@media (max-width: 640px){
  .kapy-announce { padding: 7px 12px; font-size: 11px; }
  .kapy-announce__inner { gap: 8px; }
}

/* ============================================ */
/* Trust-Badge-Strip im Footer (DD-Signale)     */
/* ============================================ */
.kapy-trust-strip {
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 20px 0;
  margin: 24px 0 16px;
}
.kapy-trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  align-items: center;
}
.kapy-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.kapy-trust-badge:hover {
  background: rgba(251,146,60,.06);
  border-color: rgba(251,146,60,.40);
  color: #1B253E;
}
.kapy-trust-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #ea580c;
}
.kapy-trust-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .kapy-trust-strip { padding: 14px 0; }
  .kapy-trust-strip__inner { gap: 8px 12px; }
  .kapy-trust-badge { font-size: 11px; padding: 5px 10px; }
}

/* ============================================ */
/* Slim Pagehead v2 — Schematic-Swiss-Stil       */
/* Cream BG · Eyebrow mit Hairline · großer Title*/
/* Auf Info-/Conversion-Pages ohne Sales-Hero   */
/* ============================================ */
.kapy-pagehead {
  padding: clamp(120px, 13vw, 144px) 0 clamp(40px, 5vw, 64px);
  background: #FFFAF0;
  border-bottom: 1px solid #E5DECF;
  position: relative;
}
.kapy-pagehead::before {
  /* schematic dotted-line decoration on right (wie Sales-Hero) */
  content: "";
  position: absolute;
  right: 0; top: 50%; bottom: 0;
  width: 1px;
  background-image: linear-gradient(180deg, #E5DECF 50%, transparent 50%);
  background-size: 1px 8px;
  pointer-events: none;
  opacity: .6;
}
.kapy-pagehead .container {
  max-width: 1200px;
  padding: 0 28px;
  margin: 0 auto;
  position: relative;
}

/* Breadcrumb */
.kapy-pagehead__crumbs {
  font-size: 12.5px;
  color: #8E8475;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: .015em;
}
.kapy-pagehead__crumbs a {
  color: #8E8475;
  text-decoration: none;
  transition: color .15s;
}
.kapy-pagehead__crumbs a:hover { color: #B5710B; }
.kapy-pagehead__crumbs > span[aria-hidden] { color: #E5DECF; }
.kapy-pagehead__crumbs > span[aria-current] {
  color: #0F172A;
  font-weight: 600;
}

/* Eyebrow (UPPERCASE + Hairline) — Status-Page parity */
.kapy-pagehead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 11px / 1 'Inter', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B5710B;
  margin-bottom: 18px;
}
.kapy-pagehead__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: #B5710B;
}

/* Row layout: Title-block left, Meta-pill right */
.kapy-pagehead__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}

/* Big Title — Schematic-Swiss assertive */
.kapy-pagehead__title {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -.028em;
  color: #0F172A;
  margin: 0;
  line-height: 1.06;
}
.kapy-pagehead__title .accent { color: #C2410C; }
.kapy-pagehead__sub {
  display: block;
  margin-top: 14px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  color: #5F5749;
  line-height: 1.6;
  max-width: 720px;
}

/* Meta-Pill (z.B. „Stand 2. Mai 2026") */
.kapy-pagehead__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5F5749;
  background: #fff;
  border: 1px solid #E5DECF;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  margin-bottom: 6px;
}
.kapy-pagehead__meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(5,150,105,.20);
}

@media (max-width: 640px) {
  .kapy-pagehead { padding: clamp(108px, 22vw, 132px) 0 32px; }
  .kapy-pagehead__row { align-items: flex-start; flex-direction: column; gap: 16px; }
  .kapy-pagehead__title { font-size: clamp(28px, 7vw, 36px); }
}