/* BIKEBOX Block Leasing-Ende auf /leasing/ (Kategorie 986) – ShopBuilder-Code-Widget. Nutzt die Theme-Schriften der Seite. v4 (30.10.): Ablauf, Vorteile, Rechner, Leasing-Ende und Fragen im eigenen Block. Bei Aenderungen NEUEN Dateinamen (v5) verwenden, CDN cached. */
.ble{font-family:sourcesans-regular,'Source Sans Pro',sans-serif;font-size:14px;line-height:25px;color:#636363;width:100%}
.ble *,.ble *:before,.ble *:after{box-sizing:border-box}
.ble p{margin:0 0 12px 0}
.ble-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.ble-anchor{scroll-margin-top:140px}
.ble-h2{font-family:reforma-semibold,sans-serif !important;font-weight:normal !important;font-size:55px !important;line-height:1.05 !important;color:#00476B !important;text-transform:uppercase !important;text-align:center;margin:0 0 14px 0 !important}
.ble-h3{font-family:reforma-semibold,sans-serif !important;font-weight:normal !important;font-size:35px !important;line-height:1.1 !important;color:#00476B !important;text-transform:uppercase !important;margin:0 0 14px 0 !important}
.ble-intro{text-align:center;max-width:720px;margin:0 auto 40px auto !important}

/* Grauer Bereich mit schraeger Unterkante wie „Unsere Leasingpartner“ */
.ble-grey{background:#f5f5f5;padding:70px 0 90px 0;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),0 100%)}

/* Dank nach Bewertung (nur sichtbar ueber #danke) */
.ble-danke{display:none}
.ble-danke:target{display:block}
.ble-danke-box{max-width:720px;margin:0 auto 40px auto;background:#fff;border-left:5px solid #00CAE8;padding:18px 22px 8px 22px;text-align:left}
.ble-danke-box strong{display:block;font-family:reforma-semibold,sans-serif;font-weight:normal;font-size:22px;line-height:1.2;color:#00476B;text-transform:uppercase;margin:0 0 6px 0}

/* Drei Wege, Badges wie bei „Deine Vorteile“ */
.ble-ways{display:grid;grid-template-columns:1fr;gap:34px}
.ble-way{text-align:center}
.ble-badge{width:104px;height:96px;margin:0 auto 22px auto;background:#3cc2e1;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);display:flex;align-items:center;justify-content:center;padding-bottom:12px;font-family:reforma-semibold,sans-serif;font-size:56px;line-height:1;color:#fff}
.ble-label{display:block;font-family:sourcesans-regular,sans-serif;font-weight:600;font-size:14px;color:#333;text-transform:uppercase;margin:0 0 10px 0}
.ble-way p{max-width:280px;margin:0 auto}

/* Rueckruf, zweispaltig wie „Vorteile fuer Arbeitnehmer“ / „Ersparnis berechnen“ */
.ble-call{padding:60px 0 40px 0}
.ble-cols{display:grid;grid-template-columns:1fr;gap:30px}
.ble-steps{margin:0 0 12px 0;padding-left:18px}
.ble-steps li{margin:0 0 4px 0}
.ble-btn{display:inline-block;background:#00476B;color:#fff !important;font-family:sourcesans-regular,sans-serif;font-size:14px;line-height:25px;padding:10px 20px;border-radius:0;text-decoration:none !important;text-transform:uppercase;margin:4px 0 12px 0}
.ble-btn:hover,.ble-btn:focus{background:#00374f;color:#fff !important}
.ble-small{font-size:12px;line-height:20px;color:#8a8a8a}
.ble-link{color:#00476B !important;font-weight:600;text-decoration:underline !important}

@media (min-width:768px){
.ble-ways{grid-template-columns:repeat(3,1fr);gap:30px}
.ble-cols{grid-template-columns:7fr 5fr;gap:60px}
}
@media (max-width:767px){
.ble-h2{font-size:38px !important}
.ble-h3{font-size:28px !important}
.ble-grey{padding:50px 0 70px 0}
.ble-btn{display:block;text-align:center}
}

/* „Hast du noch Fragen?“ im Stil der FAQ-Seite (/infos/faq/, faq-v2.css). Greift nur auf /leasing/, weil diese Datei nur dort eingebunden ist. */
body .widget-code:has(+ .widget-tab) h2{font-family:reforma-semibold,sans-serif !important;color:#00476B !important;text-transform:uppercase !important;font-size:55px !important;line-height:1.05 !important;text-align:center !important;margin:0 0 30px 0 !important}
body .widget-code:has(+ .widget-tab) .widget-inner{margin-top:60px !important}
body .widget-tab .accordion{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;gap:10px;max-width:1160px;margin:0 auto 60px auto}
body .widget-tab .accordion-item{width:100% !important;max-width:100% !important;flex:0 0 auto !important;margin:0 !important;border:1px solid #BFE3F1 !important;border-radius:6px !important;background:#fff !important;overflow:hidden}
body .widget-tab .accordion-header{margin:0 !important;font-family:sourcesans-semibold,sans-serif !important;font-size:17px !important;line-height:1.35 !important;text-transform:none !important;letter-spacing:0 !important;color:#00476B !important}
body .widget-tab .accordion-button{background:#E5F4FA !important;color:#00476B !important;padding:14px 18px !important;line-height:1.35 !important;width:100% !important;text-align:left !important;box-shadow:none !important;border:0 !important;font-family:sourcesans-semibold,sans-serif !important;font-size:17px !important;text-transform:none !important;letter-spacing:0 !important}
body .widget-tab .accordion-button:hover{background:#d6eef7 !important}
body .widget-tab .accordion-button:not(.collapsed){background:#00476B !important;color:#fff !important}
body .widget-tab .accordion-body{background:#fff !important;color:#333 !important;font-size:16px;line-height:1.55;padding:16px 18px !important}
body .widget-tab .accordion-button.collapsed::after{filter:brightness(0.35) !important;opacity:1 !important}
body .widget-tab .accordion-button:not(.collapsed)::after{filter:brightness(0) invert(1) !important;opacity:1 !important}
@media (max-width:575px){
body .widget-tab .accordion-header,body .widget-tab .accordion-button{font-size:16px !important}
body .widget-code:has(+ .widget-tab) h2{font-size:38px !important}
}

/* ===== Leasingseite am Handy entschlacken (v3, 30.10.) – wirkt nur auf /leasing/ ===== */
/* Texte mit Calibri (am iPhone nicht vorhanden -> Times) in der Seitenschrift */
#page-body span[style*="Calibri"]{font-family:sourcesans-regular,sans-serif !important;font-size:14px !important}
@media (max-width:767px){
/* weniger Leerraum */
#page-body .widget-inner[style*="margin-top: 100px"]{margin-top:40px !important}
/* „Was ist Bikeleasing?“: zweites Foto weglassen */
#page-body .widget-two-col:has(a[href*="leasing-anfrage"]) .widget-image-box{display:none !important}
/* Leasingpartner: Logos zu zweit nebeneinander, Logos sind selbst verlinkt */
#page-body .widget-four-col:has(.widget-image-box):has(a[href*="/leasing/"]){margin:0 5px !important}
#page-body .widget-four-col:has(.widget-image-box):has(a[href*="/leasing/"]) > .widget-inner{flex:0 0 50% !important;max-width:50% !important;padding-left:5px !important;padding-right:5px !important;margin-bottom:10px !important}
#page-body .widget-four-col:has(.widget-image-box):has(a[href*="/leasing/"]) .widget-image-box{min-height:0 !important;height:auto !important;margin:0 !important}
/* „Mehr zu …“-Linklisten ausblenden (doppelt zu den Logos) */
#page-body .widget-four-col:not(:has(.widget-image-box)):has(a[href*="/leasing/"]){display:none !important}
/* große Symbol-Schilder bei „Wie läuft es ab?“ und „Deine Vorteile“ ausblenden, die Texte bleiben */
#page-body .widget-four-col:has(.widget-image-box):not(:has(a[href*="/leasing/"])){display:none !important}
/* Texte zu „Wie läuft es ab?“ und „Deine Vorteile“ zu zweit nebeneinander */
#page-body .widget-four-col:not(:has(.widget-image-box)):not(:has(a[href*="/leasing/"])) > .widget-inner{flex:0 0 50% !important;max-width:50% !important;padding-left:8px !important;padding-right:8px !important}
#page-body .widget-four-col:not(:has(.widget-image-box)):not(:has(a[href*="/leasing/"])) p{margin-bottom:6px !important;line-height:1.45 !important}
/* „Vorteile für …“: Fließtext etwas kleiner, Überschriften kleiner */
#page-body .widget-two-col .widget-text p,#page-body .widget-two-col .widget-text li{font-size:15px !important;line-height:1.55 !important}
#page-body .widget-two-col .widget-text h3{font-size:28px !important}
/* Leasing-Ende-Abschnitt: drei Wege kompakt, Schild links, Text rechts */
.ble-ways{gap:18px}
.ble-way{display:grid;grid-template-columns:56px 1fr;column-gap:14px;text-align:left;align-items:start}
.ble-badge{width:56px;height:52px;margin:0;font-size:30px;padding-bottom:6px;grid-row:span 2}
.ble-label{margin:2px 0 2px 0}
.ble-way p{max-width:none;margin:0}
.ble-intro{margin-bottom:26px !important}
}

/* ===== v4: Ablauf, Vorteile, Rechner, Fragen ===== */
.ble-sec{padding:70px 0 20px 0}
.ble-sec-tight{padding-top:50px}
.ble-steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:30px}
.ble-step{text-align:center}
.ble-step img{display:block;width:120px;height:auto;margin:0 auto 16px auto}
.ble-step p{max-width:240px;margin:0 auto}
.ble-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.ble-adv-item{background:#E5F4FA;border-top:4px solid #3cc2e1;padding:20px 18px 10px 18px}
.ble-adv-item .ble-label{color:#00476B}
.ble-cta{background:#00476B;color:#E5F4FA;margin:60px 0 50px 0;padding:40px 0}
.ble-cta p{color:#E5F4FA;margin:0}
.ble-cta-inner{display:grid;grid-template-columns:3fr 2fr;gap:30px;align-items:center}
.ble-h3-light{color:#fff !important;margin-bottom:8px !important}
.ble-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.ble-btn-yellow{background:#E8E000 !important;color:#192947 !important;margin:0}
.ble-btn-yellow:hover,.ble-btn-yellow:focus{background:#fff200 !important;color:#192947 !important}
.ble-btn-line{background:transparent !important;border:1px solid #fff !important;color:#fff !important;margin:0}
.ble-btn-line:hover,.ble-btn-line:focus{background:#fff !important;color:#00476B !important}
.ble-faq{padding:30px 0 70px 0}
.ble-faq-list{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.ble-faq details{border:1px solid #BFE3F1;border-radius:6px;background:#fff;overflow:hidden}
.ble-faq summary{cursor:pointer;list-style:none;background:#E5F4FA;color:#00476B;font-family:sourcesans-semibold,sans-serif;font-size:17px;line-height:1.35;padding:14px 46px 14px 18px;position:relative}
.ble-faq summary::-webkit-details-marker{display:none}
.ble-faq summary:hover{background:#d6eef7}
.ble-faq summary:after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.ble-faq details[open] summary{background:#00476B;color:#fff}
.ble-faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.ble-faq-a{padding:16px 18px 6px 18px;color:#333;font-size:16px;line-height:1.55}
@media (max-width:767px){
.ble-sec{padding:44px 0 10px 0}
.ble-steps4{grid-template-columns:1fr 1fr;gap:22px 14px;margin-top:20px}
.ble-step img{width:64px;margin-bottom:8px}
.ble-adv{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ble-adv-item{padding:14px 12px 6px 12px}
.ble-adv-item p{font-size:13px;line-height:20px}
.ble-cta{margin:40px 0 30px 0;padding:30px 0}
.ble-cta-inner{grid-template-columns:1fr;gap:18px}
.ble-cta-btns{justify-content:stretch}
.ble-cta-btns .ble-btn{flex:1 1 100%;text-align:center}
.ble-faq summary{font-size:16px}
.ble-faq{padding:10px 0 50px 0}
}