/* Klarclip App – Ergänzungen zum Website-Stil */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.app{flex:1;padding-block:28px 64px}
.top nav a.btn{color:var(--fg)}
.ftitle{font-size:clamp(32px,6vw,48px)}
.afoot{border-top:1px solid var(--line);padding-block:18px calc(18px + env(safe-area-inset-bottom));font-size:14px;color:var(--muted)}
.afoot .wrap{display:flex;flex-wrap:wrap;gap:8px 18px}.afoot a{color:var(--muted)}
.ups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.ups{grid-template-columns:minmax(0,1fr)}}
.upbox{position:relative}
.upl{display:flex;gap:12px;align-items:center;border:1.5px dashed var(--line);background:var(--bg);border-radius:14px;padding:12px;cursor:pointer;min-height:76px}
.upl b{display:block}.upl small{color:var(--muted);font-size:14px;display:block;line-height:1.35}
.upbox input:focus-visible+.upl{outline:3px solid var(--accent);outline-offset:2px}
.thumb{width:52px;height:52px;border-radius:12px;background:var(--surface2) center/contain no-repeat;flex:none;display:grid;place-items:center;border:1px solid var(--line)}
.thumb:empty::after{content:"+";font:800 26px var(--fd);color:var(--accent)}
.more{padding:12px 16px}.more summary{font-size:16px}.more .fld{margin-top:10px}
select{width:100%;font:inherit;font-weight:400;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px}
.recent{margin-top:18px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;font-size:15px}
.recent a{display:inline-block;margin-right:14px}
/* Fortschritt */
.prog{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:14px}
.prog h1{font-size:clamp(28px,5vw,40px)}
.bar2{height:14px;border-radius:999px;background:var(--surface2);overflow:hidden}
.bar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#5B7BFF);border-radius:999px;transition:width .8s ease}
.pstat{font-weight:700}
.psteps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.psteps li{display:flex;gap:10px;align-items:center;color:var(--muted)}
.psteps li::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.psteps li.on{color:var(--fg);font-weight:700}.psteps li.on::before{border-color:var(--accent);border-top-color:transparent;animation:spin 1s linear infinite}
.psteps li.done{color:var(--fg)}.psteps li.done::before{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--ok)}
@keyframes spin{to{transform:rotate(360deg)}}
.waitbox{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px;justify-items:start}
.mailf{width:100%}.row{display:flex;gap:8px}.row input{flex:1;min-width:0}
/* Vorschau / Download */
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px;align-items:start;max-width:1000px;margin-inline:auto}
@media (max-width:860px){.vgrid{grid-template-columns:minmax(0,1fr);gap:22px}}
.player{max-width:360px;margin-inline:auto;border-radius:28px;background:#0E1526;padding:8px;box-shadow:0 30px 60px -24px rgba(14,21,38,.4)}
.player.land{max-width:100%}
.player video{width:100%;border-radius:21px;background:#1d2540;aspect-ratio:9/16}
.player.land video{aspect-ratio:16/9}
@media (max-width:860px){.player{max-width:300px}.player.land{max-width:100%}}
.side{display:grid;gap:14px}.side h1{font-size:clamp(30px,5vw,42px)}
.buy{background:var(--surface);border:2px solid var(--accent);border-radius:var(--r);padding:20px;display:grid;gap:12px}
.buyh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.buyh .price{font-size:34px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:15px}
.ticks li{padding-left:26px;position:relative}.ticks li::before{content:"";position:absolute;left:2px;top:5px;width:14px;height:8px;border-left:3px solid var(--ok);border-bottom:3px solid var(--ok);transform:rotate(-45deg)}
.acts{display:grid;gap:10px}
.okbox.slim{padding:14px 18px;gap:4px}
.panel{max-width:1000px;margin:40px auto 0;display:grid;gap:10px}
.panel h2{font-size:26px}.panel h2 small{font:400 15px var(--fb);color:var(--muted);margin-left:8px}
.panel summary{font-size:17px}
.edf{display:grid;gap:12px;margin-top:14px}
.scn{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;background:var(--bg)}
.scn>b{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
@media (max-width:640px){.app{padding-top:18px}fieldset{padding:16px}.prog{padding:20px}}
.testnote{background:#FFF1C2;border:1px solid #F3E2A0;border-radius:10px;padding:8px 12px;font-size:14px;margin-bottom:14px}