/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: May 22 2026 | 15:32:43 */
#bildverkleinerer-app *{box-sizing:border-box}
#bildverkleinerer-app{max-width:980px;margin:30px auto;font-family:Arial,sans-serif;color:#222}
#bildverkleinerer-app .box{background:#fff;border-radius:26px;box-shadow:0 12px 35px rgba(0,0,0,.12);overflow:hidden;border:1px solid #eee}
#bildverkleinerer-app .head{padding:28px;background:linear-gradient(135deg,#002960,#0c4da2);color:#fff;text-align:center}
#bildverkleinerer-app .title{margin:0 0 8px;font-size:30px;font-weight:700}
#bildverkleinerer-app .sub{margin:0;font-size:16px}
#bildverkleinerer-app .upload{margin:26px;padding:35px;border:2px dashed #002960;border-radius:22px;text-align:center;background:#eef4ff;cursor:pointer;transition:.25s;display:block}
#bildverkleinerer-app .upload:hover{background:#dde9ff}
#bildverkleinerer-app .upload strong{display:block;font-size:20px;margin-bottom:8px}
#bildverkleinerer-app .upload input{display:none}
#bildverkleinerer-app .workspace{display:none;grid-template-columns:1.1fr .9fr;gap:24px;padding:26px}
#bildverkleinerer-app .preview{background:#f7f7f7;border-radius:22px;padding:18px;text-align:center;border:1px solid #e8e8e8}
#bildverkleinerer-app .preview img{max-width:100%;max-height:360px;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
#bildverkleinerer-app .info{margin-top:14px;font-size:14px;color:#555}
#bildverkleinerer-app .panel{background:#fafafa;border-radius:22px;padding:22px;border:1px solid #eee}
#bildverkleinerer-app .panel-title{margin:0 0 18px;font-size:22px;font-weight:700}
#bildverkleinerer-app .field{margin-bottom:16px}
#bildverkleinerer-app .field label{display:block;font-weight:700;margin-bottom:7px;font-size:14px}
#bildverkleinerer-app .field input,#bildverkleinerer-app .field select{width:100%;height:46px;padding:0 14px;border:1px solid #ddd;border-radius:14px;font-size:15px;background:#fff;color:#222}
#bildverkleinerer-app .field input:focus,#bildverkleinerer-app .field select:focus{border-color:#002960;outline:none;box-shadow:0 0 0 4px rgba(0,41,96,.12)}
#bildverkleinerer-app .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#bildverkleinerer-app .check{display:flex;gap:9px;align-items:center;margin:10px 0 18px;font-size:14px}
#bildverkleinerer-app .check input{width:18px;height:18px;accent-color:#002960}
#bildverkleinerer-app .range-value{font-weight:700;color:#002960}
#bildverkleinerer-app .actions{display:grid;gap:12px;margin-top:18px}
#bildverkleinerer-app .btn{border:none;border-radius:16px;padding:14px 18px;font-size:16px;font-weight:700;cursor:pointer;transition:.25s}
#bildverkleinerer-app .btn-main{background:#002960;color:#fff;box-shadow:0 10px 25px rgba(0,41,96,.25)}
#bildverkleinerer-app .btn-main:hover{background:#001f48;transform:translateY(-2px)}
#bildverkleinerer-app .btn-secondary{background:#222;color:#fff}
#bildverkleinerer-app .btn-secondary:hover{background:#000}
#bildverkleinerer-app .btn-light{background:#eee;color:#222}
#bildverkleinerer-app .btn-light:hover{background:#e2e2e2}
#bildverkleinerer-app .result{display:none;margin-top:18px;padding:14px;background:#fff;border-radius:16px;border:1px solid #c8d9ff;font-size:14px;line-height:1.5}
#bildverkleinerer-app input[type=range]{accent-color:#002960}
@media(max-width:800px){
#bildverkleinerer-app .workspace,#bildverkleinerer-app .row{grid-template-columns:1fr}
#bildverkleinerer-app .title{font-size:24px}
}