/* ============================================================
   CX-UI — Components
   Setzt tokens.css + base.css voraus.
   Loest ab: 15 Button-Paddings, 6 Radien, ~20 USP-Klassensets.
   ============================================================ */

/* --- Buttons ------------------------------------------------
   Genau 3 Varianten x 3 Groessen. Mehr gibt es nicht.
   .cx-btn                  dunkel (Primaeraktion, neutral)
   .cx-btn--accent          Akzentfarbe der Site
   .cx-btn--ghost           Outline
   Groessen: --sm | (default) | --lg    Modifier: --block
   ------------------------------------------------------------ */

.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cx-s2);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--cx-r);
  font-family: inherit;
  font-size: var(--cx-fs-base);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cx-t), color var(--cx-t), border-color var(--cx-t), box-shadow var(--cx-t);
  background: var(--cx-text);
  color: var(--cx-white);
}
.cx-btn:hover { background: #333; color: var(--cx-white); }
.cx-btn:active { transform: translateY(1px); }
.cx-btn[disabled], .cx-btn--disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

.cx-btn--accent { background: var(--cx-accent); color: var(--cx-white); }
.cx-btn--accent:hover { background: var(--cx-accent-hover); color: var(--cx-white); }

.cx-btn--ghost {
  background: transparent;
  color: var(--cx-text);
  border-color: var(--cx-border);
}
.cx-btn--ghost:hover { background: var(--cx-bg-alt); color: var(--cx-text); border-color: var(--cx-border-dark); }

.cx-btn--sm { padding: 6px 14px; font-size: var(--cx-fs-sm); }
.cx-btn--lg { padding: 14px 28px; font-size: var(--cx-fs-md); }
.cx-btn--block { display: flex; width: 100%; }

/* --- Card ---------------------------------------------------- */

.cx-card {
  background: var(--cx-white);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  padding: var(--cx-s5);
  transition: box-shadow var(--cx-t), border-color var(--cx-t);
}
.cx-card--link { display: block; color: inherit; }
.cx-card--link:hover { box-shadow: var(--cx-sh-lg); border-color: var(--cx-border-dark); color: inherit; }
.cx-card--flat { border-radius: var(--cx-r); box-shadow: none; }
.cx-card--pad-lg { padding: var(--cx-s6); }

.cx-card__title { font-size: var(--cx-fs-md); font-weight: 600; margin-bottom: var(--cx-s2); }
.cx-card__text  { font-size: var(--cx-fs-base); color: var(--cx-text-light); margin: 0; }
.cx-card__media { margin: calc(var(--cx-s5) * -1) calc(var(--cx-s5) * -1) var(--cx-s4); }
.cx-card__media img { width: 100%; aspect-ratio: 2/1; object-fit: cover; border-radius: var(--cx-r-lg) var(--cx-r-lg) 0 0; }

/* --- Badge --------------------------------------------------- */

.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s1);
  padding: 3px 10px;
  border-radius: var(--cx-r-full);
  font-size: var(--cx-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--cx-bg-alt);
  color: var(--cx-text-mid);
  border: 1px solid var(--cx-border);
}
.cx-badge--accent  { background: var(--cx-accent-light);  color: var(--cx-accent);  border-color: transparent; }
.cx-badge--success { background: var(--cx-success-light); color: var(--cx-success); border-color: transparent; }
.cx-badge--warn    { background: var(--cx-warn-light);    color: var(--cx-warn);    border-color: transparent; }
.cx-badge--danger  { background: var(--cx-danger-light);  color: var(--cx-danger);  border-color: transparent; }
.cx-badge--solid   { background: var(--cx-text); color: var(--cx-white); border-color: transparent; }

/* --- USP-Grid (ersetzt ~20 Einzelklassensets) ---------------- */

.cx-usp {
  display: grid;
  gap: var(--cx-s5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cx-usp__item {
  display: flex;
  gap: var(--cx-s3);
  align-items: flex-start;
}
.cx-usp__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--cx-r);
  background: var(--cx-accent-light);
  color: var(--cx-accent);
  font-size: var(--cx-fs-lg);
}
.cx-usp__title { font-size: var(--cx-fs-md); font-weight: 600; margin: 0 0 var(--cx-s1); }
.cx-usp__text  { font-size: var(--cx-fs-base); color: var(--cx-text-light); margin: 0; }

/* Kompakte Trust-Leiste (Icon + Text in einer Zeile) */
.cx-usp--bar {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--cx-s4);
  padding: var(--cx-s4) 0;
  border-block: 1px solid var(--cx-border);
}
.cx-usp--bar .cx-usp__item { align-items: center; gap: var(--cx-s2); }
.cx-usp--bar .cx-usp__icon { width: 28px; height: 28px; font-size: var(--cx-fs-base); border-radius: var(--cx-r-sm); }
.cx-usp--bar .cx-usp__title { font-size: var(--cx-fs-sm); }
.cx-usp--bar .cx-usp__text { display: none; }

/* --- Stat / Kennzahl ----------------------------------------- */

.cx-stats {
  display: grid;
  gap: var(--cx-s4);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.cx-stat {
  background: var(--cx-bg-alt);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  padding: var(--cx-s4) var(--cx-s5);
  text-align: center;
}
.cx-stat__num {
  display: block;
  font-size: var(--cx-fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cx-text);
}
.cx-stat__label {
  display: block;
  margin-top: var(--cx-s1);
  font-size: var(--cx-fs-xs);
  font-weight: 500;
  color: var(--cx-text-light);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cx-stat--accent .cx-stat__num { color: var(--cx-accent); }

/* --- Hero ---------------------------------------------------- */

.cx-hero { padding-block: var(--cx-s9) var(--cx-s8); }
.cx-hero--alt { background: var(--cx-bg-alt); }
.cx-hero--dark { background: var(--cx-bg-dark); color: var(--cx-white); }
.cx-hero--dark h1, .cx-hero--dark .cx-hero__sub { color: var(--cx-white); }
.cx-hero__badge { margin-bottom: var(--cx-s4); }
.cx-hero__title { font-size: var(--cx-fs-4xl); margin-bottom: var(--cx-s4); }
.cx-hero__sub {
  font-size: var(--cx-fs-lg);
  color: var(--cx-text-mid);
  max-width: 62ch;
  margin: 0 0 var(--cx-s6);
}
.cx-hero__actions { display: flex; gap: var(--cx-s3); flex-wrap: wrap; }

/* --- CTA-Band ------------------------------------------------ */

.cx-cta {
  background: var(--cx-bg-dark);
  color: var(--cx-white);
  border-radius: var(--cx-r-xl);
  padding: var(--cx-s8) var(--cx-s6);
  text-align: center;
}
.cx-cta h2 { color: var(--cx-white); }
.cx-cta p { color: rgba(255,255,255,.75); max-width: 60ch; margin-inline: auto; }
.cx-cta .cx-btn--ghost { color: var(--cx-white); border-color: rgba(255,255,255,.3); }
.cx-cta .cx-btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--cx-white); }

/* --- Breadcrumb ---------------------------------------------- */

.cx-breadcrumb {
  padding-block: var(--cx-s4);
  font-size: var(--cx-fs-sm);
  color: var(--cx-text-light);
}
.cx-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cx-s2); }
.cx-breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--cx-s2); }
.cx-breadcrumb li + li::before { content: '/'; color: var(--cx-border-dark); }
.cx-breadcrumb a { color: var(--cx-text-light); }
.cx-breadcrumb a:hover { color: var(--cx-accent); }
.cx-breadcrumb [aria-current] { color: var(--cx-text); font-weight: 500; }

/* --- Tabelle -------------------------------------------------- */

.cx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cx-fs-base);
}
.cx-table th, .cx-table td {
  padding: var(--cx-s3) var(--cx-s4);
  text-align: left;
  border-bottom: 1px solid var(--cx-border);
  vertical-align: top;
}
.cx-table th {
  font-weight: 600;
  font-size: var(--cx-fs-sm);
  color: var(--cx-text-mid);
  background: var(--cx-bg-alt);
  white-space: nowrap;
}
.cx-table tbody tr:hover { background: var(--cx-bg-alt); }
.cx-table--num td:not(:first-child), .cx-table--num th:not(:first-child) { text-align: right; }

/* --- Accordion ------------------------------------------------ */

.cx-acc { border: 1px solid var(--cx-border); border-radius: var(--cx-r-lg); overflow: hidden; }
.cx-acc details + details { border-top: 1px solid var(--cx-border); }
.cx-acc summary {
  padding: var(--cx-s4) var(--cx-s5);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--cx-fs-md);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--cx-s4);
}
.cx-acc summary::-webkit-details-marker { display: none; }
.cx-acc summary::after { content: '+'; font-weight: 400; font-size: var(--cx-fs-xl); color: var(--cx-text-light); flex: 0 0 auto; }
.cx-acc details[open] summary::after { content: '\2212'; }
.cx-acc summary:hover { background: var(--cx-bg-alt); }
.cx-acc__body { padding: 0 var(--cx-s5) var(--cx-s5); color: var(--cx-text-mid); font-size: var(--cx-fs-base); }
.cx-acc__body > :last-child { margin-bottom: 0; }

/* --- Header ---------------------------------------------------- */

.cx-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--cx-header-h);
  background: var(--cx-white);
  border-bottom: 1px solid var(--cx-border);
  z-index: 1000;
}
.cx-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--cx-s5);
}
.cx-header__logo {
  font-size: var(--cx-fs-md); font-weight: 700; letter-spacing: -.02em;
  color: var(--cx-text); white-space: nowrap;
}
.cx-header__logo:hover { color: var(--cx-text); }
.cx-header__logo b { color: var(--cx-accent); font-weight: 700; }

.cx-nav { display: flex; align-items: center; gap: var(--cx-s5); }
.cx-nav a {
  font-size: var(--cx-fs-base); font-weight: 500; color: var(--cx-text-mid); white-space: nowrap;
}
.cx-nav a:hover, .cx-nav a[aria-current] { color: var(--cx-accent); }

.cx-header__actions { display: flex; align-items: center; gap: var(--cx-s3); }

.cx-nav__toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: var(--cx-s2); border-radius: var(--cx-r-sm);
  font-size: var(--cx-fs-xl); line-height: 1; color: var(--cx-text);
}

/* Dropdown */
.cx-nav__drop { position: relative; display: flex; align-items: center; }
.cx-nav__menu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 260px; padding: var(--cx-s3);
  background: var(--cx-white);
  border: 1px solid var(--cx-border); border-radius: var(--cx-r-lg);
  box-shadow: var(--cx-sh-lg); z-index: 100;
}
.cx-nav__drop:hover .cx-nav__menu, .cx-nav__drop:focus-within .cx-nav__menu { display: block; }
.cx-nav__cta { display: none; }   /* nur im aufgeklappten Mobil-Panel sichtbar */
.cx-nav__menu a { display: block; padding: var(--cx-s2) var(--cx-s3); border-radius: var(--cx-r-sm); font-size: var(--cx-fs-sm); }
.cx-nav__menu a:hover { background: var(--cx-bg-alt); }

@media (max-width: 1024px) {
  .cx-nav__toggle { display: block; }
  .cx-nav {
    display: none;
    position: absolute; top: var(--cx-header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--cx-s3) var(--cx-gutter) var(--cx-s5);
    background: var(--cx-white);
    border-bottom: 1px solid var(--cx-border);
    box-shadow: var(--cx-sh-lg);
    max-height: calc(100vh - var(--cx-header-h));
    overflow-y: auto;
  }
  .cx-nav.is-open { display: flex; }
  .cx-nav a:not(.cx-nav__cta) { padding: var(--cx-s3) 0; border-bottom: 1px solid var(--cx-border-light); }
  .cx-nav__drop { display: block; }
  .cx-nav__menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 var(--cx-s4); min-width: 0; }
}

@media (max-width: 480px) {
  /* Platz fuer Logo + Burger — CTA wandert in das Nav-Panel */
  .cx-header__cta { display: none; }
  .cx-nav__cta { display: flex; margin-top: var(--cx-s4); border-bottom: 0; }
}

/* --- Footer ----------------------------------------------------- */

.cx-footer {
  margin-top: auto;
  background: var(--cx-bg-alt);
  border-top: 1px solid var(--cx-border);
  padding-block: var(--cx-s8) var(--cx-s5);
  font-size: var(--cx-fs-base);
}
.cx-footer__grid {
  display: grid;
  gap: var(--cx-s6);
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  margin-bottom: var(--cx-s7);
}
.cx-footer__col h3 { font-size: var(--cx-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cx-text-light); margin-bottom: var(--cx-s3); }
.cx-footer__col ul { list-style: none; margin: 0; padding: 0; }
.cx-footer__col li { margin-bottom: var(--cx-s2); }
.cx-footer__col a { color: var(--cx-text-mid); font-size: var(--cx-fs-base); }
.cx-footer__col a:hover { color: var(--cx-accent); }
.cx-footer__about p { color: var(--cx-text-light); font-size: var(--cx-fs-base); max-width: 42ch; }
.cx-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--cx-s4);
  flex-wrap: wrap;
  padding-top: var(--cx-s5);
  border-top: 1px solid var(--cx-border);
  font-size: var(--cx-fs-sm);
  color: var(--cx-text-light);
}
.cx-footer__legal { display: flex; gap: var(--cx-s4); flex-wrap: wrap; }
.cx-footer__legal a { color: var(--cx-text-light); }

.cx-footer__trust { display: flex; flex-wrap: wrap; gap: var(--cx-s2) var(--cx-s4); margin-bottom: var(--cx-s4); }
.cx-footer__trust span { display: inline-flex; align-items: center; gap: var(--cx-s1); font-size: var(--cx-fs-sm); color: var(--cx-text-mid); }
.cx-footer__trust i { color: var(--cx-accent); font-style: normal; display: inline-flex; }
.cx-footer__note { font-size: var(--cx-fs-xs); color: var(--cx-text-faint); margin: 0; max-width: 42ch; }

@media (max-width: 1024px) { .cx-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px)  { .cx-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--cx-s5); } }

/* --- Back to top ------------------------------------------------- */

.cx-top {
  position: fixed; right: var(--cx-s5); bottom: var(--cx-s5); z-index: 900;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--cx-text); color: var(--cx-white);
  border: 0; border-radius: var(--cx-r-full);
  box-shadow: var(--cx-sh-lg);
  cursor: pointer;
  transition: background var(--cx-t), transform var(--cx-t);
}
.cx-top:hover { background: var(--cx-accent); transform: translateY(-2px); }
.cx-top[hidden] { display: none; }
@media (max-width: 480px) { .cx-top { right: var(--cx-s4); bottom: var(--cx-s4); width: 40px; height: 40px; } }

/* --- Prose (Fliesstext in Ratgebern) ----------------------------- */

.cx-prose { max-width: 72ch; font-size: var(--cx-fs-md); color: var(--cx-text-mid); }
.cx-prose h2 { margin-top: var(--cx-s8); }
.cx-prose h3 { margin-top: var(--cx-s6); }
.cx-prose > :first-child { margin-top: 0; }
.cx-prose img { border-radius: var(--cx-r-lg); margin-block: var(--cx-s5); }
.cx-prose blockquote {
  margin: var(--cx-s5) 0; padding: var(--cx-s4) var(--cx-s5);
  border-left: 3px solid var(--cx-accent);
  background: var(--cx-bg-alt);
  border-radius: 0 var(--cx-r) var(--cx-r) 0;
  color: var(--cx-text);
}
.cx-prose blockquote > :last-child { margin-bottom: 0; }