
.ff-area-box{box-sizing:border-box;margin:24px 0;padding:0;background:#eaf6ff;border:1px solid #b8ddf5;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(29,89,133,.08);color:#16354c}
.ff-area-box *{box-sizing:border-box}
.ff-area-header{padding:23px 24px 19px;background:linear-gradient(115deg,#d4edff,#edf8ff);border-bottom:1px solid #c6e3f7}
.ff-area-kicker{display:inline-block;color:#17669c;font-size:11px;letter-spacing:1.5px;font-weight:800}
.ff-area-header h3{margin:7px 0 6px;font-size:23px;line-height:1.25;color:#113d5b}
.ff-area-header p{margin:0;color:#45677e;font-size:14px}
.ff-area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 24px}
.ff-area-field{min-width:0;padding:16px;background:white;border:1px solid #cae3f3;border-radius:13px;box-shadow:0 2px 6px rgba(30,90,130,.04)}
.ff-area-field label{display:block!important;margin-bottom:10px;font-size:15px;font-weight:750;color:#173c57}
.ff-area-field label span{font-weight:400;color:#6d879a}
.ff-area-input-wrap{position:relative}
.ff-area-input-wrap input{display:block!important;width:100%!important;max-width:none!important;min-height:48px!important;padding:10px 45px 10px 13px!important;font-size:19px!important;font-weight:700!important;line-height:1.2;background:#f7fcff!important;border:1px solid #b6d6ec!important;border-radius:9px!important;color:#143a56!important}
.ff-area-input-wrap input:focus{outline:2px solid #4aabec!important;outline-offset:1px}
.ff-area-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:650;color:#6c8da4;pointer-events:none}
.ff-area-field small{display:block;margin-top:9px;font-size:12px;color:#5c7a91}
.ff-area-summary{margin:0 24px 16px;padding:18px 18px 12px;border:1px solid #cae2f2;border-radius:14px;background:white}
.ff-area-summary-heading{font-size:15px;font-weight:800;color:#164666;margin-bottom:12px}
.ff-area-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:14px;color:#57748a}
.ff-area-line strong{font-weight:750;color:#153c5a;text-align:right}
.ff-area-grand{border-top:1px solid #cfe3f0;margin-top:8px;padding-top:14px;color:#153c5a;font-weight:800;font-size:17px}
.ff-area-grand strong{font-size:23px;color:#0869ab}
.ff-area-error{margin:9px 0 2px;color:#b42318;font-size:13px;font-weight:650}
.ff-area-footnote{margin:0;padding:0 24px 20px;color:#5d7b91;font-size:12px;line-height:1.5}
@media(max-width:540px){.ff-area-header{padding:20px 17px}.ff-area-grid{grid-template-columns:1fr;padding:16px 17px}.ff-area-summary{margin:0 17px 14px}.ff-area-footnote{padding:0 17px 18px}.ff-area-header h3{font-size:21px}}

/* Elbfolien-inspirierte, helle Bento-Karten – nur dieses Produkt */
.ff-area-box{box-shadow:0 12px 32px rgba(21,74,116,.13);transition:box-shadow .22s ease}
.ff-area-field,.ff-area-summary{box-shadow:0 5px 17px rgba(27,86,130,.08);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
@media(hover:hover){.ff-area-field:hover,.ff-area-summary:hover{box-shadow:0 12px 25px rgba(27,86,130,.14);transform:translateY(-2px);border-color:#93cbed}}
.ff-bento-info{background:linear-gradient(145deg,#eaf7ff,#f6fbff);border:1px solid #c4e5f6;border-radius:18px;padding:clamp(18px,3vw,30px);margin:24px 0;box-shadow:0 14px 35px rgba(24,87,128,.11);color:#153c5a}
.ff-bento-info *{box-sizing:border-box}
.ff-bento-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#1676ae}
.ff-bento-info-head h2{font-size:clamp(21px,2.4vw,29px);line-height:1.2;color:#153c5a;margin:9px 0}
.ff-bento-info-head p{font-size:14px;color:#4c6d81;line-height:1.7;margin:0}
.ff-bento-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.ff-bento-info-tile{background:#fff;border:1px solid #d3e8f5;border-radius:14px;padding:19px;box-shadow:0 5px 17px rgba(29,89,133,.07);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ff-bento-icon{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px;background:#e6f5ff;color:#1477ad;font-size:22px;font-weight:700;margin-bottom:11px}
.ff-bento-info-tile h3{font-size:16px;line-height:1.35;color:#153c5a;margin:0 0 9px}
.ff-bento-info-tile p{font-size:13px;line-height:1.65;color:#516f82;margin:0}
.ff-bento-tolerance{margin:17px 0 0;background:#e4f4fd;border-left:3px solid #2798d0;padding:12px 14px;border-radius:8px;font-size:12px;line-height:1.6;color:#355e78}
@media(hover:hover){.ff-bento-info-tile:hover{transform:translateY(-4px);box-shadow:0 15px 27px rgba(29,89,133,.16);border-color:#90c8e9}}
@media(max-width:650px){.ff-bento-info-grid{grid-template-columns:1fr}.ff-bento-info-tile{padding:16px}}
@media(prefers-reduced-motion:reduce){.ff-area-field,.ff-area-summary,.ff-bento-info-tile{transition:none}}


/* v3.8.3 – 15 % kompaktere Bento-Boxen bei gleicher responsiver Breite */
.ff-bento-info{padding:clamp(15px,2.55vw,25.5px);border-radius:15px;margin:20px 0}
.ff-bento-info-head h2{font-size:clamp(19px,2.1vw,25px);margin:8px 0}
.ff-bento-info-head p{font-size:13px;line-height:1.55}
.ff-bento-info-grid{gap:12px;margin-top:17px}
.ff-bento-info-tile{padding:16px;border-radius:12px;box-shadow:0 5px 16px rgba(29,89,133,.09)}
.ff-bento-info-tile h3{font-size:14px;margin-bottom:7px}
.ff-bento-info-tile p{font-size:12px;line-height:1.55}
.ff-bento-icon{width:30px;height:30px;border-radius:9px;font-size:19px;margin-bottom:9px}
.ff-bento-tolerance{margin-top:14px;padding:10px 12px;font-size:11px}
.ff-area-header{padding:20px 20px 16px}
.ff-area-header h3{font-size:20px}
.ff-area-grid{gap:12px;padding:17px 20px}
.ff-area-field{padding:14px}
.ff-area-summary{margin:0 20px 14px;padding:15px 15px 10px}
.ff-area-footnote{padding:0 20px 17px}
@media(max-width:650px){.ff-bento-info-grid{grid-template-columns:1fr}.ff-bento-info-tile{padding:14px}}
@media(max-width:540px){.ff-area-header{padding:17px 15px}.ff-area-grid{padding:14px 15px}.ff-area-summary{margin:0 15px 12px}.ff-area-footnote{padding:0 15px 15px}}
