/* ============================================================
   Betsa Design System — Base Stylesheet
   Gemeinsame Stildefinitionen für die Hauptseite (index.html)
   und die Cluster-/Supporting-Pages (cluster-page.html).
   Eine Quelle — keine Stil-Duplizierung.
   Version: 1.1.0
   ============================================================ */

@font-face{font-family:"Play";src:url("/assets/fonts/play-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Play";src:url("/assets/fonts/play-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-600-latin.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap;}

/* ===== Brand tokens ===== */
:root{
  --red:#9B1427; --red-dark:#441216; --black:#191818;
  --grey:#F2F2F2; --grey-mid:#e7e7e7; --grey-line:#ebebeb; --white:#ffffff;
  --fg1:#191818; --fg2:#6b6b6b; --fg-inv:#ffffff; --fg-inv-2:rgba(255,255,255,0.6);
  --font-display:'Play','Times New Roman',serif;
  --font-text:'Montserrat',system-ui,sans-serif;
  --container:1280px; --pad:32px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --clip-btn:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --clip-btn-sm:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --clip-sub:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--white);color:var(--fg1);font-family:var(--font-text);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;}
.icon{width:1em;height:1em;display:inline-block;fill:currentColor;flex:0 0 auto;}
::selection{background:var(--red);color:#fff;}

/* ===== Layout ===== */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad);}
.section{padding:96px 0;position:relative;overflow:hidden;}
.section.dark{background:var(--black);color:#fff;}
.section.grey{background:var(--grey);}
.section.white{background:var(--white);}

/* ===== Type ===== */
.h1{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-0.01em;margin:0;overflow-wrap:break-word;hyphens:auto;}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(27px,3.4vw,40px);line-height:1.1;letter-spacing:-0.01em;margin:0;overflow-wrap:break-word;hyphens:auto;}
.h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;margin:0;overflow-wrap:break-word;}
.lede{font-size:15px;line-height:1.7;color:var(--fg2);max-width:620px;margin:0;}
.dark .lede{color:rgba(255,255,255,0.62);}
.num{font-family:var(--font-display);font-weight:700;letter-spacing:0.02em;}

/* ===== Eyebrow ===== */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-text);font-weight:600;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);margin-bottom:18px;}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;}
.dark .eyebrow{color:#fff;}
.dark .eyebrow::before{background:var(--red);}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-text);font-weight:600;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;padding:16px 26px;border:0;cursor:pointer;text-decoration:none;transition:background var(--ease) .2s,color var(--ease) .2s,border-color .2s;}
.btn .arw{transition:transform .2s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}
.btn-primary{background:var(--red);color:#fff;clip-path:var(--clip-btn);}
.btn-primary:hover{background:var(--red-dark);}
.btn-ghost{background:transparent;color:var(--red);border:1.5px solid var(--red);clip-path:var(--clip-btn);}
.btn-ghost:hover{background:var(--red);color:#fff;}
.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.3);}
.dark .btn-ghost:hover{background:#fff;color:var(--black);border-color:#fff;}
.btn-sm{padding:10px 16px;font-size:11px;clip-path:var(--clip-btn-sm);}

/* ===== Decorative motifs ===== */
.dots{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.08) 1px,transparent 0);background-size:22px 22px;pointer-events:none;}
.ghostnum{position:absolute;font-family:var(--font-display);font-weight:700;line-height:1;pointer-events:none;color:var(--red);user-select:none;}
.hairline{height:1px;background:var(--grey-line);border:0;}

/* ============================================================
   HEADER (lite) — Logo + ein CTA. Für Cluster-Pages.
   ============================================================ */
.cp-topbar{position:sticky;top:0;left:0;right:0;z-index:90;height:64px;display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--grey-line);}
.cp-topbar .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}
.cp-topbar .brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.cp-topbar .brand img{height:28px;width:auto;}
.cp-topbar .brand .tagmark{font-weight:600;font-size:10px;letter-spacing:0.14em;color:var(--red);text-transform:uppercase;border-left:1px solid var(--grey-line);padding-left:14px;}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.cp-breadcrumb{border-bottom:1px solid var(--grey-line);background:var(--white);}
.cp-breadcrumb .wrap{padding-top:16px;padding-bottom:16px;}
.cp-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;font-size:12px;letter-spacing:0.04em;color:var(--fg2);}
.cp-breadcrumb a{color:var(--fg2);text-decoration:none;transition:color .18s;}
.cp-breadcrumb a:hover{color:var(--red);}
.cp-breadcrumb li::after{content:"/";margin-left:10px;color:var(--grey-mid);}
.cp-breadcrumb li:last-child::after{content:"";margin:0;}
.cp-breadcrumb li[aria-current]{color:var(--black);font-weight:600;}

/* ============================================================
   HERO-LITE
   ============================================================ */
.cp-hero{padding:64px 0 48px;position:relative;border-bottom:1px solid var(--grey-line);}
.cp-hero .wrap{max-width:var(--container);}
.cp-hero .h1{font-size:clamp(30px,4.4vw,48px);margin-top:6px;max-width:18ch;}
.cp-hero .lede{max-width:720px;margin-top:18px;font-size:17px;line-height:1.65;}
.cp-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg2);}
.cp-meta span{display:inline-flex;align-items:center;gap:7px;}
.cp-meta i{font-size:15px;color:var(--red);}

/* ============================================================
   ARTICLE BODY — Lesetypografie für lange Texte
   ============================================================ */
.cp-article{padding:56px 0 24px;}
.cp-article .wrap{max-width:var(--container);}
/* Inhaltsschiene: linksbündig an der Container-Kante (wie „Weitere Ratgeber“).
   Reine Fließtext-Blöcke behalten eine angenehme Lesebreite; Tabellen,
   Vergleich, Schritte, Callout und CTA nutzen die volle Schiene. */
.cp-prose{font-size:17px;line-height:1.75;color:#37352f;max-width:1040px;}
.cp-prose > p,.cp-prose > h2,.cp-prose > h3,.cp-prose > ul,.cp-prose > ol:not(.cp-steps){max-width:780px;}
.cp-prose > *:first-child{margin-top:0;}
.cp-prose h2{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.18;letter-spacing:-0.01em;color:var(--black);margin:48px 0 16px;}
.cp-prose h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;color:var(--black);margin:34px 0 10px;}
.cp-prose p{margin:0 0 18px;}
.cp-prose a:not(.btn){color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.cp-prose strong{color:var(--black);font-weight:600;}
.cp-prose ul,.cp-prose ol{margin:0 0 20px;padding-left:24px;}
.cp-prose li{margin:0 0 9px;}
.cp-prose > hr{margin:40px 0;height:1px;background:var(--grey-line);border:0;}

/* Tables (Kosten / allgemein) */
.cp-table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:14.5px;}
.cp-table caption{text-align:left;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg2);padding-bottom:10px;}
.cp-table th,.cp-table td{border:1px solid var(--grey-line);padding:12px 14px;text-align:left;vertical-align:top;}
.cp-table thead th{background:var(--grey);font-family:var(--font-text);font-weight:600;color:var(--black);}
.cp-table tbody tr:nth-child(even){background:#fafafa;}
.cp-table td.num,.cp-table th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Numbered steps (Checkliste / Ablauf) */
.cp-steps{counter-reset:cpstep;list-style:none;margin:8px 0 28px;padding:0;}
.cp-steps li{position:relative;counter-increment:cpstep;padding:0 0 22px 56px;margin:0;}
.cp-steps li::before{content:counter(cpstep,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--red);}
.cp-steps li::after{content:"";position:absolute;left:14px;top:26px;bottom:0;width:1px;background:var(--grey-line);}
.cp-steps li:last-child::after{display:none;}
.cp-steps li strong{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--black);margin-bottom:4px;}
.cp-steps li p{margin:0;font-size:15px;color:var(--fg2);line-height:1.65;}

/* Comparison — two columns (Vergleich) */
.cp-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 28px;}
.cp-compare .col{border:1px solid var(--grey-line);padding:24px;background:#fff;}
.cp-compare .col.is-accent{border-left:3px solid var(--red);}
.cp-compare .col h4{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);margin:0 0 4px;}
.cp-compare .col .sub{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--red);margin-bottom:14px;}
.cp-compare .col ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--fg2);line-height:1.55;}
.cp-compare .col li{position:relative;padding:7px 0 7px 22px;border-top:1px solid var(--grey-line);}
.cp-compare .col li:first-child{border-top:0;}
.cp-compare .col li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%);}

/* Callout box */
.cp-callout{border:1px solid var(--grey-line);border-left:3px solid var(--red);background:#fbfbfb;padding:24px 26px;margin:10px 0 28px;}
.cp-callout .label{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--red);margin-bottom:10px;}
.cp-callout .label i{font-size:17px;}
.cp-callout p{margin:0;font-size:15px;line-height:1.65;color:#3a3a3a;}
.cp-callout p + p{margin-top:12px;}

/* ============================================================
   CTA-BANNER (mittig + Ende) → /#anfrage
   ============================================================ */
.cp-cta{background:var(--black);color:#fff;position:relative;overflow:hidden;}
.cp-cta .wrap{max-width:var(--container);padding-top:48px;padding-bottom:48px;position:relative;z-index:1;}
.cp-cta.full{margin:36px 0;}
.cp-cta .tri{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 120px 120px 0;border-color:transparent var(--red) transparent transparent;opacity:0.9;}
.cp-cta h3{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-0.01em;margin:0 0 10px;color:#fff;max-width:720px;}
.cp-cta p{margin:0 0 24px;color:rgba(255,255,255,0.66);font-size:15px;line-height:1.6;max-width:640px;}

/* ============================================================
   MINI-FAQ
   ============================================================ */
.cp-faq{padding:56px 0;background:var(--grey);}
.cp-faq .wrap{max-width:var(--container);}
.cp-faq .sec-eyebrow{margin-bottom:28px;}
.cp-faq-wrap{max-width:1040px;}
.cp-faq-item{border-bottom:1px solid var(--grey-mid);}
.cp-faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);}
.cp-faq-ic{position:relative;width:22px;height:22px;flex:0 0 auto;transition:transform .25s var(--ease);}
.cp-faq-ic::before,.cp-faq-ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--red);transform:translate(-50%,-50%);}
.cp-faq-ic::before{width:14px;height:1.6px;}
.cp-faq-ic::after{width:1.6px;height:14px;}
.cp-faq-item.open .cp-faq-ic{transform:rotate(45deg);}
.cp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.cp-faq-a .inner{font-size:15px;color:var(--fg2);line-height:1.7;padding:0 0 22px;max-width:680px;}

/* ============================================================
   WEITERE RATGEBER — 3 Karten
   ============================================================ */
.cp-related{padding:64px 0;}
.cp-related .sec-eyebrow{margin-bottom:28px;}
.cp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.cp-rcard{display:flex;flex-direction:column;gap:12px;border:1px solid var(--grey-line);padding:26px 24px 24px;text-decoration:none;background:#fff;transition:transform .2s var(--ease),box-shadow .2s var(--ease);min-height:180px;}
.cp-rcard:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(25,24,24,0.08);}
.cp-rcard .kicker{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--red);}
.cp-rcard h4{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.25;color:var(--black);margin:0;}
.cp-rcard p{font-size:13px;color:var(--fg2);line-height:1.6;margin:0;}
.cp-rcard .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--red);}
.cp-rcard .go .arw{transition:transform .2s var(--ease);}
.cp-rcard:hover .go .arw{transform:translateX(4px);}

.sec-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-text);font-weight:600;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);}
.sec-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;}

/* ============================================================
   FOOTER (wie Hauptseite)
   ============================================================ */
#footer{background:#0e0e0e;color:rgba(255,255,255,0.5);padding:60px 0 32px;font-size:13px;line-height:1.75;position:relative;overflow:hidden;}
#footer .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;}
#footer img{height:34px;margin-bottom:18px;}
#footer h4{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;margin:0 0 12px;}
#footer a{color:inherit;text-decoration:none;transition:color .18s;}
#footer a:hover{color:#fff;}
#footer .fcol-links a{display:block;padding:3px 0;}
#footer .fblurb{max-width:300px;}
#footer .fsocial{display:flex;gap:11px;margin-top:24px;}
#footer .fsocial a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.72);transition:background .18s var(--ease),border-color .18s,color .18s;}
#footer .fsocial a:hover{background:var(--red);border-color:var(--red);color:#fff;}
#footer .fsocial i{font-size:19px;}
#footer .fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid rgba(255,255,255,0.08);margin-top:40px;padding-top:22px;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;}
#footer .fbar a{margin-left:22px;}
#footer .fver{color:rgba(255,255,255,0.3);letter-spacing:0.1em;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1120px){
  /* Inhaltsschienen auf die Containerbreite öffnen */
  .cp-prose,.cp-faq-wrap{max-width:none;}
  .cp-prose > p,.cp-prose > h2,.cp-prose > h3,.cp-prose > ul,.cp-prose > ol:not(.cp-steps){max-width:none;}
  .cp-hero .h1{max-width:none;}
}
@media (max-width:860px){
  .cp-compare{grid-template-columns:1fr;}
  .cp-related-grid{grid-template-columns:1fr;}
  #footer .fcols{grid-template-columns:1fr 1fr;}
  .cp-hero{padding:48px 0 36px;}
  .cp-article{padding:44px 0 16px;}
  .cp-cta .tri{border-width:0 84px 84px 0;}
}
@media (max-width:560px){
  :root{--pad:20px;}
  .section{padding:64px 0;}
  .cp-hero .lede{font-size:16px;}
  .cp-prose{font-size:16px;}
  .cp-prose h2{font-size:23px;margin:36px 0 12px;}
  .cp-table{font-size:13px;display:block;overflow-x:auto;white-space:nowrap;}
  .cp-table th,.cp-table td{padding:9px 11px;}
  .cp-steps li{padding-left:46px;}
  .cp-callout{padding:20px 18px;}
  .cp-cta .wrap{padding-top:40px;padding-bottom:40px;}
  .cp-faq-q{font-size:16px;}
  .cp-topbar .brand .tagmark{display:none;}
  #footer .fcols{grid-template-columns:1fr;}
  #footer .fbar{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   RATGEBER (Content-Module) — Sektion der Hauptseite,
   auch standalone nutzbar (ratgeber-section.html).
   Akkordeon-Mechanik wie FAQ, abgesetzt durch Nummer + Icon.
   ============================================================ */
.rg-section{padding:96px 0;background:var(--grey);position:relative;}
.rg-section .sec-head{max-width:720px;margin-bottom:48px;}
.rg-section .sec-head .h2{margin-top:14px;}
.rg-section .sec-head .lede{margin-top:14px;}
.rg-wrap{max-width:920px;}
.rg-item{border-bottom:1px solid var(--grey-line);}
.rg-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:24px 0;gap:24px;}
.rg-qhead{display:flex;align-items:center;gap:18px;min-width:0;}
.rg-num{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--red);letter-spacing:0;flex:0 0 auto;}
.rg-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--grey-line);background:var(--white);flex:0 0 auto;}
.rg-ic i{font-size:22px;color:var(--black);}
.rg-title{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.28;letter-spacing:-0.01em;color:var(--black);}
.rg-pm{position:relative;width:22px;height:22px;flex:0 0 auto;transition:transform .25s var(--ease);}
.rg-pm::before,.rg-pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--red);transform:translate(-50%,-50%);}
.rg-pm::before{width:14px;height:1.6px;}
.rg-pm::after{width:1.6px;height:14px;}
.rg-item.open .rg-pm{transform:rotate(45deg);}
.rg-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.rg-a .inner{font-size:15px;color:var(--fg2);line-height:1.7;max-width:780px;padding:2px 0 30px 60px;}
.rg-a .inner h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--black);margin:20px 0 8px;letter-spacing:-0.01em;}
.rg-a .inner p{margin:0 0 12px;}
.rg-a .inner ul{margin:0 0 14px;padding-left:20px;}
.rg-a .inner li{margin:0 0 6px;}
.rg-a .inner table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:13.5px;}
.rg-a .inner th,.rg-a .inner td{border:1px solid var(--grey-line);padding:9px 13px;text-align:left;vertical-align:top;}
.rg-a .inner th{background:var(--white);font-family:var(--font-text);font-weight:600;color:var(--black);}
.rg-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:var(--font-text);font-weight:600;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);text-decoration:none;}
.rg-more .arw{transition:transform .2s var(--ease);}
.rg-more:hover .arw{transform:translateX(4px);}
@media (max-width:760px){
  .rg-section{padding:64px 0;}
  .rg-q{gap:14px;}
  .rg-qhead{gap:14px;}
  .rg-title{font-size:17px;}
  .rg-a .inner{padding-left:50px;font-size:14.5px;}
}
@media (max-width:560px){
  .rg-q{padding:20px 0;}
  .rg-ic{display:none;}
  .rg-a .inner{padding-left:0;}
  .rg-a .inner table{font-size:12.5px;display:block;overflow-x:auto;white-space:nowrap;}
}