@charset "UTF-8";
/* ── HellSpin DE — eigene Ergänzungen zum Template ────────────── */

/* Logo als Bild */
.lh-logo-img { height: 42px; width: auto; display: block; }
@media (max-width: 600px) { .lh-logo-img { height: 34px; } }

/* Kein Trennen von Wörtern buchstabenweise */
body, p, li, td, th, h1, h2, h3, h4, span, a {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ── Tabellen aus den Quelltexten ────────────────────────────── */
.dx-tablewrap {
  margin: 20px 0 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-border));
  background: var(--c-surface);
  box-shadow: 0 4px 22px -12px color-mix(in srgb, var(--c-accent) 32%, transparent);
}
.dx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--c-text);
}
.dx-table th, .dx-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.dx-table th:last-child, .dx-table td:last-child { border-right: none; }
.dx-table thead th {
  background: color-mix(in srgb, var(--c-accent) 18%, var(--c-primary));
  color: var(--c-text);
  font-weight: 700;
  font-size: 13.5px;
}
.dx-table tbody tr:last-child td,
.dx-table tbody tr:last-child th { border-bottom: none; }
.dx-table tbody tr:nth-child(even) td,
.dx-table tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--c-primary) 35%, transparent);
}
/* erste Spalte als Zeilenkopf (2-Spalten-Fakten) */
.dx-table.dx-keyval th[scope="row"] {
  color: var(--c-text-muted);
  font-weight: 600;
  width: 38%;
}
.dx-table .dx-pos { color: #4caf50; font-weight: 700; }
.dx-table .dx-neg { color: var(--c-accent); font-weight: 700; }

/* Desktop: KEIN horizontaler Scroll — Tabelle passt in den Container */
@media (min-width: 761px) {
  .dx-tablewrap { overflow: visible; }
  .dx-table.dx-wide { font-size: 13px; }
  .dx-table.dx-wide th, .dx-table.dx-wide td { padding: 9px 10px; }
}
/* Mobil: Tabelle darf scrollen */
@media (max-width: 760px) {
  .dx-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dx-table.dx-wide { min-width: 680px; }
  .dx-table.dx-keyval { min-width: 0; }
}

/* ── Einfache Textabschnitte / Listen aus den Quelltexten ────── */
.dx-tablewrap, .dx-table, .dx-list, .dx-steps, .dx-note, .dx-author { text-align: left; }
.dx-list { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dx-list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.6;
  color: var(--c-text);
}
.dx-list li::before {
  content: "";
  position: absolute;
  left: 8px; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}
.dx-steps { counter-reset: dxstep; margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dx-steps li {
  counter-increment: dxstep;
  position: relative;
  padding-left: 42px;
  line-height: 1.6;
  min-height: 28px;
  display: flex;
  align-items: center;
  color: var(--c-text);
}
.dx-steps li::before {
  content: counter(dxstep);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dx-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
  border-radius: 0 10px 10px 0;
  line-height: 1.6;
}
.dx-author {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
  line-height: 1.7;
}
.dx-author strong { color: var(--c-text-muted); }

/* ── Pro-/Contra-Block: Icon-Badge statt nackter Zahl ────────── */
.rq52-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rq52-num svg { width: 22px; height: 22px; }
.rq52-num-pro { background: color-mix(in srgb, #57b85c 22%, transparent); color: #57b85c; }
.rq52-num-con { background: color-mix(in srgb, var(--c-accent) 20%, transparent); color: var(--c-accent); }
.rq52-item-pro svg { color: #57b85c; }
.rq52-item-con svg { color: var(--c-accent); }

/* ── Mobiles Menü: Navigationslinks zentrieren ───────────────── */
.lh-mobile-nav .h15_mnav { align-items: center; }
.lh-mobile-nav .h15_mnav .lh-nav-link { text-align: center; }

/* ── Bis 450px: im Header nur Logo (links) und Burger (rechts), CTA-Buttons ausblenden ── */
@media (max-width: 450px) {
  .h15_cta .h15_cta-desktop { display: none !important; }
  .h15_menu-btn { display: inline-flex !important; }
}

/* ── Tabellen-Sektionen: Einleitungstext über die volle Breite + Absatzabstände ── */
.bu89-intro { max-width: none; }
.bu89-lead { margin: 0 0 14px; }
.bu89-lead:last-child { margin-bottom: 0; }
.dx-tablewrap + .bu89-lead { margin-top: 18px; }

/* ── Zurück-nach-oben-Button ─────────────────────────────────── */
.dx-totop {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
  z-index: 95;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.65);
}
.dx-totop.show { opacity: 1; visibility: visible; transform: none; }
.dx-totop:hover { background: var(--c-btn); color: var(--c-primary); }

/* ── Banner: Hintergrundbild auf allen Bannern und Bildschirmen wie in der Hero-Sektion
   abdunkeln (dunkel links -> transparent rechts) ── */
.cb35-overlay, .ru19-overlay, .py14-overlay, .lz60-overlay, .ok46-overlay {
  background: linear-gradient(89deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.88) 28%,
    rgba(0, 0, 0, 0.7) 52%,
    transparent 100%) !important;
}

/* Mobil (<=768px): Text/Buttons zentriert, kompaktere Bonus-Banner-Höhe */
@media (max-width: 768px) {
  .cb35-card { min-height: 250px; }
  .cb35-glass { text-align: center; }
  .ru19-content { text-align: center; }
  .ru19-cta-row { justify-content: center; }
}

/* ── Banner-Karten: kleinere Innenabstände bis 450px ─────────── */
@media (max-width: 450px) {
  .cb35-card { padding: 14px; }
  .cb35-glass { padding: 16px 15px; }
  .ru19-content { padding: 20px 16px; }
  .py14-content { padding: 18px 15px; }
  .lz60-content { padding: 20px 16px; }
  .ok46-content { padding: 20px 16px; }

  /* Abstand zwischen den Sektionen bis 450px um das 1,5-Fache verkleinern */
  .lh-section    { padding-top: 27px; padding-bottom: 27px; }
  .lh-section-sm { padding-top: 18px; padding-bottom: 19px; }
  .lh-section-xs { padding-top: 12px; padding-bottom: 12px; }
}