/* Paketkarten und Bestellfenster der Bestellseiten (webhosting.html, cloud-backup.html).
   Das Praefix wh- stammt von der Webhosting-Seite, die das zuerst hatte. */
.wh-pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.6rem; max-width:1050px; margin:0 auto; }
.wh-plan { background:#fff; border:1px solid #e5eaf0; border-radius:14px; padding:2rem 1.8rem; display:flex; flex-direction:column; position:relative; box-shadow:0 4px 18px rgba(27,47,94,.06); }
.wh-plan.featured { border:2px solid #00BCD4; box-shadow:0 8px 28px rgba(0,188,212,.16); }
.wh-flag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#00BCD4; color:#fff; font-size:.78rem; font-weight:700; padding:.25rem .9rem; border-radius:99px; white-space:nowrap; }
.wh-plan h3 { color:#1B2F5E; margin:0 0 .3rem; font-size:1.25rem; }
.wh-price { color:#1B2F5E; margin:.6rem 0 .2rem; }
.wh-price strong { font-size:2.1rem; font-weight:700; }
.wh-price span { color:#6b7a8d; font-size:.9rem; }
.wh-permonth { color:#6b7a8d; font-size:.85rem; margin-bottom:1.1rem; }
.wh-plan ul { list-style:none; padding:0; margin:0 0 1.5rem; flex:1; }
.wh-plan li { display:flex; align-items:center; gap:.55rem; padding:.38rem 0; color:#3b4a5e; font-size:.94rem; }
.wh-plan li i { color:#00BCD4; }
.wh-order-btn { display:block; text-align:center; text-decoration:none; background:#1B2F5E; color:#fff; font-weight:600; padding:.85rem 1rem; border-radius:9px; border:0; cursor:pointer; font-size:1rem; font-family:inherit; width:100%; transition:background .2s; }
.wh-order-btn:hover { background:#24407e; }
.wh-plan.featured .wh-order-btn { background:#00BCD4; }
.wh-plan.featured .wh-order-btn:hover { background:#00a5bb; }
.wh-loginhint { max-width:1120px; margin:0 auto 1.6rem; background:#eef6f8; border:1px solid #cfe6ec;
                border-radius:10px; padding:.8rem 1.1rem; color:#1a3d4f; font-size:.88rem;
                display:none; align-items:center; gap:.6rem; }
.wh-loginhint.show { display:flex; }
.wh-loginhint a { color:#1B2F5E; font-weight:600; }
.wh-readonly { background:#f3f6fa; color:#3b4a5e; }
.wh-fieldnote { font-size:.78rem; color:#6b7a8d; margin:.3rem 0 0; }
.wh-fieldnote a { color:#1B2F5E; }
.wh-features { display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; max-width:1050px; margin:0 auto; }
.wh-feature { flex:1 1 220px; max-width:290px; text-align:center; padding:1.2rem; }
.wh-feature i { font-size:2rem; color:#00BCD4; }
.wh-feature h4 { color:#1B2F5E; margin:.6rem 0 .3rem; }
.wh-feature p { color:#6b7a8d; font-size:.9rem; margin:0; }
.wh-feature p a { color:#1B2F5E; font-weight:600; white-space:nowrap; }
/* Bestell-Modal */
.wh-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; place-items:center; z-index:100; padding:1rem; }
.wh-modal-bg.open { display:grid; }
.wh-modal { background:#fff; border-radius:14px; padding:1.8rem; width:min(520px,96vw); max-height:92vh; overflow:auto; }
.wh-modal h3 { color:#1B2F5E; margin:0 0 .3rem; }
.wh-modal .sub { color:#6b7a8d; font-size:.9rem; margin:0 0 1.2rem; }
.wh-modal label { display:block; font-size:.85rem; font-weight:600; color:#1B2F5E; margin:.9rem 0 .25rem; }
.wh-modal input, .wh-modal textarea { width:100%; padding:.65rem .75rem; border:1px solid #d7e0ec; border-radius:8px; font:inherit; box-sizing:border-box; }
.wh-modal textarea { resize:vertical; min-height:70px; }
.wh-summary { background:#f3f6fa; border-radius:9px; padding:.8rem 1rem; margin-top:1.1rem; display:flex; justify-content:space-between; font-weight:600; color:#1B2F5E; }
.wh-legal { font-size:.78rem; color:#6b7a8d; margin-top:.8rem; }
.wh-legal a { color:#1B2F5E; }
.wh-consent { margin-top:1rem; }
.wh-check { display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; font-weight:400;
            line-height:1.45; color:#33475b; cursor:pointer; padding:.35rem 0; }
.wh-check input { width:auto; margin:.15rem 0 0; flex-shrink:0; accent-color:#1B2F5E; }
.wh-check a { color:#1B2F5E; }
.wh-details { margin-top:.35rem; font-size:.78rem; color:#6b7a8d; }
.wh-details summary { cursor:pointer; color:#1B2F5E; width:fit-content; padding:.15rem 0; }
.wh-details summary:hover { text-decoration:underline; }
.wh-details p { margin:.55rem 0 0; line-height:1.55; }
.wh-details a { color:#1B2F5E; }
.wh-modal-actions { display:flex; gap:.7rem; margin-top:1.1rem; }
.wh-cancel { background:#fff; border:1px solid #d7e0ec; color:#1B2F5E; border-radius:9px; padding:.85rem 1.2rem; cursor:pointer; font:inherit; font-weight:600; }
.wh-error { color:#a12626; font-size:.87rem; margin-top:.7rem; display:none; }
.wh-success { text-align:center; padding:1.5rem 0; }
.wh-success i { font-size:3rem; color:#0d7a52; }