/* Ratenzahlung / Finanzierung – Startseite (Monate nur im HTML-Template home.html ändern) */
.raten{background:#eeece6;padding:clamp(56px,6vw,96px) clamp(16px,4vw,64px);font-family:'DM Sans',sans-serif;color:#24241f;border-top:1px solid rgba(38,38,31,.08)}
.raten-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.raten .eyebrow{color:#9d343a;font-size:11px;font-weight:700;letter-spacing:.16em;margin:0 0 18px;text-transform:uppercase}
.raten h2{font:500 clamp(36px,4.2vw,60px)/1.05 'Manrope',sans-serif;letter-spacing:-.04em;margin:0 0 20px}
.raten h2 em{font-style:normal;color:#b62d30}
.raten-copy p{color:#626256;font-size:16px;line-height:1.7;margin:0 0 26px;max-width:520px}
.raten-cta{display:inline-flex;align-items:center;gap:14px;background:#b62d30;color:#fff;border-radius:30px;padding:16px 24px;font-size:14px;font-weight:600;box-shadow:0 8px 25px #aa2b3022;transition:transform .3s,background .3s}
.raten-cta:hover{background:#9c2628;transform:translateY(-2px)}
.raten-cta svg{width:18px;height:18px}
.raten-card{background:#fff;border-radius:24px;padding:clamp(24px,3vw,40px);box-shadow:0 24px 60px rgba(16,17,17,.08);border:1px solid rgba(38,38,31,.06)}
.raten-card small{display:block;color:#6c685d;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.raten-months{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.raten-months li{border:1px solid rgba(182,45,48,.25);border-radius:16px;padding:16px 6px 12px;text-align:center;background:#fbf8f6}
.raten-months b{display:block;font:600 clamp(26px,2.6vw,36px)/1 'Manrope',sans-serif;color:#b62d30;letter-spacing:-.03em}
.raten-months span{display:block;margin-top:6px;font-size:11px;color:#6c685d;letter-spacing:.08em;text-transform:uppercase}
.raten-pts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.raten-pts li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:#3a3a32}
.raten-pts svg{flex:none;width:18px;height:18px;color:#b62d30;margin-top:1px}
@media(max-width:820px){.raten-in{grid-template-columns:1fr}.raten h2{font-size:38px}.raten-copy p{font-size:15px}.raten-months{gap:8px}.raten-months li{padding:14px 4px 10px;border-radius:14px}.raten-cta{width:100%;justify-content:space-between}}
.raten-visual{position:relative}
.raten-photo{display:block;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(16,17,17,.1)}
.raten-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.raten-visual .raten-card{position:relative;margin:-90px 24px 0 -40px;z-index:1}
@media(max-width:820px){.raten-visual .raten-card{margin:-48px 12px 0}.raten-photo{border-radius:20px}}
.raten-pts{gap:14px}.raten-pts li{align-items:center;gap:14px}
.raten-pts li>span:last-child{display:block;font-size:13.5px;color:#6c685d;line-height:1.45}
.raten-pts li b{display:block;font-size:14.5px;font-weight:600;color:#24241f}
.raten-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fbf3f1;border:1px solid rgba(182,45,48,.18);color:#b62d30}
.raten-ic svg{width:24px;height:24px;margin:0;stroke-width:1.4;color:#b62d30}
/* Scroll-Reveal + sehr leichte Ruhebewegung */
.raten-js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*110ms)}
.raten-js.raten-shown [data-r]{opacity:1;transform:none}
@keyframes ratenFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
.raten-shown .raten-photo{animation:ratenFloat 8s ease-in-out 1.6s infinite}
.raten-shown .raten-card{animation:ratenFloat 7s ease-in-out 2.4s infinite}
.raten-shown .raten-months li{animation:ratenFloat 6s ease-in-out infinite}
.raten-shown .raten-months li:nth-child(1){animation-delay:1.2s}.raten-shown .raten-months li:nth-child(2){animation-delay:2s}.raten-shown .raten-months li:nth-child(3){animation-delay:2.8s}.raten-shown .raten-months li:nth-child(4){animation-delay:3.6s}
.raten-shown .raten-ic{animation:ratenFloat 5.5s ease-in-out infinite}
.raten-shown .raten-pts li:nth-child(1) .raten-ic{animation-delay:1.5s}.raten-shown .raten-pts li:nth-child(2) .raten-ic{animation-delay:2.6s}.raten-shown .raten-pts li:nth-child(3) .raten-ic{animation-delay:3.7s}
@media(prefers-reduced-motion:reduce){.raten-js [data-r]{opacity:1!important;transform:none!important;transition:none!important}.raten .raten-photo,.raten .raten-card,.raten .raten-months li,.raten .raten-ic{animation:none!important}}
/* Dekorative Akzent-Badges */
.raten{overflow-x:clip}.raten-copy{position:relative}
.raten-deco{position:absolute;z-index:2;width:58px;height:58px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 14px 34px rgba(16,17,17,.12);border:1px solid rgba(182,45,48,.12);color:#b62d30;pointer-events:none}
.raten-deco svg{width:28px;height:28px;stroke-width:1.4}
.rd-coin{right:4%;top:-8px}
.rd-card{left:-26px;top:34px}
.rd-cal{right:-22px;top:-22px}
.raten-shown .raten-deco{animation:ratenFloat 6.5s ease-in-out infinite}
.raten-shown .rd-coin{animation-delay:1s}.raten-shown .rd-card{animation-delay:2.2s;animation-duration:7.5s}.raten-shown .rd-cal{animation-delay:3.1s;animation-duration:7s}
@media(max-width:820px){.raten-deco{width:44px;height:44px;border-radius:13px}.raten-deco svg{width:22px;height:22px}.rd-coin{right:0;top:-14px}.rd-card{left:-6px;top:-14px}.rd-cal{right:-6px;top:-14px}}
@media(prefers-reduced-motion:reduce){.raten .raten-deco{animation:none!important}}