:root{--bg:#0b0c0e;--panel:#121418;--panel2:#191c21;--text:#f4f4f2;--muted:#9da3ad;--line:#2a2f37;--accent:#f5f5f2;--danger:#e36b6b;--ok:#83c69a;--radius:22px}*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;background:radial-gradient(circle at 80% 0,#181b21 0,transparent 34%),var(--bg);color:var(--text);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.shell{width:min(1180px,calc(100% - 36px));margin:auto;padding:38px 0 28px}.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--muted);margin-bottom:7px}.topbar h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.04em;line-height:1;margin:0;font-weight:600}.steps{display:flex;align-items:center;color:#6f7680;font-size:12px;margin:0 0 24px;overflow:auto;white-space:nowrap}.steps i{height:1px;background:var(--line);min-width:22px;flex:1;margin:0 10px}.steps span.active{color:var(--text)}.panel{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,44px);box-shadow:0 30px 100px rgba(0,0,0,.22)}.step{display:none}.step.active{display:block}.section-head{display:grid;grid-template-columns:44px 1fr;gap:16px;margin-bottom:32px}.section-head>span{color:#6f7680;font-size:12px;padding-top:8px}.section-head h2{font-size:clamp(25px,3vw,36px);line-height:1.1;letter-spacing:-.035em;margin:0 0 8px;font-weight:560}.section-head p{margin:0;color:var(--muted);max-width:760px}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid .wide{grid-column:1/-1}.compact{margin-top:18px}label{display:flex;flex-direction:column;gap:7px;color:#c9cdd3;font-size:13px}input,select{width:100%;border:1px solid var(--line);background:#0e1013;color:var(--text);padding:13px 14px;border-radius:12px;outline:none;font:inherit;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:#646b75;box-shadow:0 0 0 3px rgba(255,255,255,.04)}button{border:0;border-radius:12px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer;transition:transform .12s,opacity .12s,background .12s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.35;cursor:not-allowed}.primary{background:var(--accent);color:#101114}.secondary{background:#242830;color:var(--text)}.ghost{background:transparent;border:1px solid var(--line);color:#cdd1d7}.danger{background:#f0eeee;color:#111}.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:28px}.status{margin-top:16px;color:var(--muted)}.status.ok{color:var(--ok)}.status.error{color:#ef8a8a}.warning{border:1px solid #634d2d;background:#211b12;color:#e6c78d;padding:13px 15px;border-radius:12px;margin-top:16px}.hidden{display:none!important}.dropzone{position:relative;min-height:230px;border:1px dashed #474d57;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.015);cursor:pointer}.dropzone.drag{border-color:#aeb4bd;background:rgba(255,255,255,.04)}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone strong{font-size:18px}.dropzone span{color:var(--muted)}.stats{display:flex;gap:18px;color:var(--muted);font-size:13px;margin:14px 0}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.thumb{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:14px;overflow:hidden}.thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.thumb div{padding:9px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumb button{position:absolute;right:7px;top:7px;background:rgba(0,0,0,.7);color:white;padding:6px 9px;border-radius:9px}.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.mode-switch label{position:relative}.mode-switch input{position:absolute;opacity:0}.mode-switch span{display:block;border:1px solid var(--line);border-radius:14px;padding:16px;background:#0f1114;cursor:pointer}.mode-switch input:checked+span{border-color:#747b85;background:#1a1d22;color:#fff}.check{flex-direction:row;align-items:center;margin-top:27px}.check input{width:auto}.review-list{display:grid;gap:10px;margin-top:18px}.review-item{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#101216;border:1px solid var(--line);border-radius:14px;padding:14px 16px}.review-item small{display:block;color:var(--muted);margin-top:3px}.summary-card,.result-card{margin-top:18px;background:#0f1114;border:1px solid var(--line);border-radius:16px;padding:18px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.summary-grid strong{font-size:22px;display:block}.summary-grid span{color:var(--muted);font-size:12px}pre{background:#0b0d10;border:1px solid var(--line);padding:18px;border-radius:14px;overflow:auto;color:#d9dde3}h3{font-size:16px;margin:25px 0 10px}.progress{height:9px;background:#20242a;border-radius:999px;overflow:hidden}.progress div{height:100%;width:0;background:#f1f1ef;transition:width .25s}.result-card strong{font-size:28px;display:block;margin-bottom:8px}footer{text-align:center;color:#626872;font-size:11px;margin-top:18px}@media(max-width:760px){.shell{width:min(100% - 20px,1180px);padding-top:18px}.grid.two,.mode-switch,.summary-grid{grid-template-columns:1fr}.grid .wide{grid-column:auto}.check{margin-top:0}.steps i{min-width:10px;margin:0 6px}.topbar{align-items:flex-start}.actions{flex-wrap:wrap}.actions button{flex:1}.panel{padding:22px}.section-head{grid-template-columns:32px 1fr}}

/* v3 refinements: closer to the restrained pixbymaex portfolio aesthetic */
:root{--bg:#090a0c;--panel:#111316;--panel2:#171a1f;--line:#2a3038;--muted:#959ca6;--ok:#86cfa2;--radius:24px}
body{background:radial-gradient(900px 500px at 78% -10%,rgba(80,95,120,.16),transparent 58%),linear-gradient(180deg,#0d0f12 0,#090a0c 55%,#08090a 100%)}
.shell{width:min(1260px,calc(100% - 48px));padding-top:42px}
.topbar{padding:0 4px}.eyebrow{letter-spacing:.28em}.topbar h1{font-weight:520;font-size:clamp(34px,4.6vw,58px)}
.panel{background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));box-shadow:0 38px 120px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.section-head h2{font-weight:530}.section-head p{font-size:15px}
input,select{min-height:54px;background:rgba(8,10,13,.76);border-color:#303640;border-radius:14px;padding:14px 16px}
button{border-radius:14px;min-height:52px;padding:13px 20px}.primary{background:#f2f2ef}.secondary{background:#242933}
.login-grid{align-items:end}.login-grid .wide{margin-top:2px}
.status.warn{color:#d4bd86}.path-helper{margin-top:18px;padding:18px;border:1px solid #3a4049;border-radius:16px;background:rgba(255,255,255,.02)}.path-helper small{display:block;margin-top:8px;color:var(--muted)}.path-helper code{color:#d8dce2}
.mode-switch.two-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.auto-meta-note,.metadata-note{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.018)}.auto-meta-note strong,.metadata-note strong{font-size:13px;color:#cfd3d9}.auto-meta-note span,.metadata-note span{font-size:13px;color:var(--muted)}
.metadata-note{justify-content:center;min-height:54px;margin-top:27px}
@media(max-width:760px){.shell{width:min(100% - 20px,1260px)}.mode-switch.two-options{grid-template-columns:1fr}.metadata-note{margin-top:0}}


/* ---------- v5: Hintergrund und Footer wie auf der Hauptwebsite ---------- */
html, body { min-height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  background: #0b0b0b;
}

.app-background {
  position: fixed;
  inset: -2%;
  z-index: -3;
  background: #0b0b0b center / cover no-repeat;
  filter: grayscale(1);
  opacity: 0;
  transition: opacity .35s ease;
}

.app-background.ready { opacity: 1; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.54) 46%, rgba(5,5,5,.66) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(5,5,5,.16);
}

.shell { flex: 1 0 auto; }

.panel {
  background: rgba(14,14,14,.72);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

input, select { background: rgba(10,10,10,.82); }

.site-footer {
  margin-top: auto;
  padding: 30px clamp(22px,4vw,64px);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  color: #999994;
  font-size: .78rem;
  background: rgba(11,11,11,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-links { display: flex; gap: 18px; }

.footer-links a {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

.footer-links a:hover { color: #f4f4f0; }

@media (max-width: 780px) {
  .site-footer { flex-direction: column; }
  .footer-links { flex-wrap: wrap; }
}


/* ---------- v5.1: compact centered composition ---------- */
.shell {
  width: min(1260px, calc(100% - 48px));
  margin-inline: auto;
  padding-top: clamp(28px, 4vw, 46px);
  padding-bottom: 30px;
}

.topbar {
  margin-bottom: 26px;
}

.steps {
  margin-bottom: 22px;
}

.panel {
  padding: clamp(24px, 3.4vw, 42px);
}

.section-head {
  margin-bottom: 28px;
}

.site-footer {
  padding-left: max(clamp(22px,4vw,64px), calc((100vw - 1260px) / 2));
  padding-right: max(clamp(22px,4vw,64px), calc((100vw - 1260px) / 2));
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 20px, 1260px);
    padding-top: 18px;
  }
}

/* If a remote image is available, retain enough contrast without hiding it. */
.app-background.ready + .shell .panel {
  background: rgba(12,12,12,.68);
}