/* ============================================================
   PDF komprimieren – imifactory.ch
   Basis: imifactory Master UI-Standard v3.0 (FROZEN Rahmen)
   ============================================================ */

/* ─── Basis / Rahmen (FROZEN) ─────────────────────────────── */

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#f8fafc;
  margin:0;
  color:#333;
  line-height:1.6
}

header{
  background:linear-gradient(90deg,#05263d 0%,#0b3c5d 100%);
  padding:15px 25px;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3)
}

.sitename{
  font-size:24px;
  font-weight:700;
  text-decoration:none;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:10px
}

.breadcrumb{
  margin-top:8px;
  font-size:12px;
  color:#cbd5e1
}
.breadcrumb a{color:#fff;text-decoration:none}
.breadcrumb a:hover{color:#00bfae}

.container{
  max-width:1000px;
  margin:30px auto;
  padding:0 20px
}

.back-link{
  display:inline-block;
  margin-bottom:15px;
  text-decoration:none;
  color:#0b3c5d;
  font-size:14px;
  font-weight:700
}
.back-link:hover{color:#00897b}

.imi-intro{
  background:linear-gradient(90deg,#e7f3fd,#f4faff);
  border-left:5px solid #0b3c5d;
  padding:24px 28px;
  border-radius:4px;
  margin-bottom:22px
}
.imi-intro h2{margin:0 0 10px;color:#0b3c5d;font-size:20px}
.imi-intro p{font-size:15px;color:#444;margin:0}

.content-box{
  background:#fff;
  border:1px solid #d1dce6;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  margin-bottom:22px
}

.box-header{
  background:#0b3c5d;
  color:#fff;
  padding:12px 20px;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.box-body{padding:24px 28px}

footer{
  text-align:center;
  font-size:13px;
  color:#64748b;
  margin-top:40px;
  padding-bottom:30px
}
footer a{color:#0b3c5d;text-decoration:none;margin:0 10px}
footer a:hover{color:#00897b}

/* ─── Formulare (Standard) ────────────────────────────────── */

label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#5a7080;
  margin-bottom:4px;
  margin-top:14px
}

input[type=text]#targetSize,
select{
  width:100%;
  max-width:450px;
  padding:9px 12px;
  border:1px solid #d1dce6;
  border-radius:6px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:#333;
  box-sizing:border-box
}

input:focus,
select:focus{
  outline:none;
  border-color:#0b3c5d
}

/* Sichtbarer Fokus-Indikator für Tastaturbedienung (WCAG 2.4.7) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible{
  outline:3px solid #00bfae;
  outline-offset:2px
}

/* ─── Tool-spezifisch ─────────────────────────────────────── */

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

.drop-zone{
  display:block;
  width:100%;
  border:2px dashed #0b3c5d;
  border-radius:6px;
  padding:56px 20px;
  text-align:center;
  background:#fff;
  cursor:pointer;
  font-family:inherit;
  color:#333;
  transition:background .2s,border-color .2s
}
.drop-zone:hover,
.drop-zone.dragover{
  background:#f0f7ff;
  border-color:#00bfae
}
.drop-zone-title{
  display:block;
  font-size:18px;
  font-weight:700;
  color:#0b3c5d
}
.drop-zone-sub{
  display:block;
  font-size:14px;
  color:#5a7080;
  margin-top:6px
}

.file-info-text{
  font-weight:700;
  font-size:15px;
  margin:18px 0 4px
}
.file-name{color:#555;font-weight:400;word-break:break-all}
.file-size{color:#b91c1c;font-weight:400;margin-left:8px}

.level-info{
  background:#f4faff;
  border-left:4px solid #0b3c5d;
  border-radius:0 4px 4px 0;
  padding:12px 16px;
  margin:12px 0;
  font-size:14px;
  color:#444
}

.hint-text{
  font-size:13px;
  color:#5a7080;
  margin-top:6px;
  max-width:640px
}

input[type=range]{
  width:100%;
  max-width:450px;
  accent-color:#0b3c5d;
  min-height:44px;
  margin:0
}

.info-alert{
  background:#fff4e5;
  border-left:5px solid #ffa117;
  padding:15px;
  margin:16px 0;
  font-size:14px;
  color:#664d03;
  border-radius:0 4px 4px 0
}

.error-alert{
  background:#fef2f2;
  border-left:5px solid #ef5350;
  padding:15px;
  margin:16px 0;
  font-size:14px;
  color:#7f1d1d;
  border-radius:0 4px 4px 0
}

.action-row{
  text-align:center;
  margin-top:20px
}

.imi-support-btn{
  background:#0b3c5d;
  color:#fff;
  padding:12px 25px;
  border-radius:6px;
  font-weight:700;
  font-size:14px;
  font-family:inherit;
  border:none;
  cursor:pointer;
  transition:background .2s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px
}
.imi-support-btn:hover{background:#1565a0}
.imi-support-btn:disabled{background:#94a3b8;cursor:not-allowed}

.btn-download{background:#1b7a43}
.btn-download:hover{background:#166534}

.status-text{
  text-align:center;
  font-size:14px;
  color:#0b3c5d;
  min-height:22px;
  margin-top:14px
}

#resultArea{
  margin-top:20px;
  padding:22px;
  border:2px solid #22c55e;
  background:#f0fdf4;
  border-radius:8px;
  text-align:center
}
.success-msg{
  font-weight:700;
  color:#166534;
  font-size:19px;
  margin:0 0 12px
}
.result-details{
  list-style:none;
  padding:0;
  margin:0 0 16px;
  font-size:14px;
  color:#334155;
  text-align:center
}
.result-details li{margin:3px 0}

.reset-row{
  text-align:center;
  margin-top:26px;
  border-top:1px dashed #ccc;
  padding-top:18px
}

.link-btn{
  background:none;
  border:none;
  cursor:pointer;
  color:#0b3c5d;
  font-weight:700;
  font-size:14px;
  font-family:inherit;
  padding:10px 16px;
  min-height:44px
}
.link-btn:hover{color:#00897b}

.level-dl dt{
  font-weight:700;
  color:#0b3c5d;
  margin-top:14px
}
.level-dl dt:first-child{margin-top:0}
.level-dl dd{
  margin:4px 0 0;
  font-size:14px;
  color:#444
}

.privacy-list{line-height:2;font-size:15px}
.tech-note{font-size:13px;color:#5a7080;margin-bottom:0}

/* ─── Touch & Motion (WCAG 2.5.5 / 2.3.3) ─────────────────── */

@media (pointer:coarse){
  .imi-support-btn,
  .link-btn,
  select,
  input[type=text]#targetSize{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important
  }
}

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width:680px){
  .box-body{padding:18px 16px}
  .drop-zone{padding:40px 14px}
}