/* AutoCut – Look: Nachtblau, leuchtende blaue Lichtstreifen, warmes Orange-Glühen von unten,
   elegante Serifen-Überschriften, kleine Mono-Labels, Glas-Karten (Vorlage: Nutzer-Screenshot „FluxEdit“). */
@font-face{font-family:"Satoshi";font-style:italic;src:url(fonts/Satoshi-VariableItalic.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Variable.ttf);font-weight:100 900}
@font-face{font-family:"Satoshi";src:url(fonts/Satoshi-Variable.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--bg:#04060F;--navy:#0A1030;--blue:#3D7BFF;--blue2:#8FB4FF;--orange:#FF7A2E;--peach:#FFB27A;--pink:#F0567A;
  --text:#F3F5FB;--muted:#9AA5C4;--glass:rgba(255,255,255,.055);--glass2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12);--ok:#45E09A;--err:#FF6B7A;--r:24px;
  --serif:var(--sans);--mono:var(--sans);   /* einheitlich Satoshi */
  --sans:"Satoshi","Inter",-apple-system,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:16px/1.55 var(--sans);letter-spacing:.1px;
  background:transparent;overflow-x:hidden}
/* Licht: blaue Strahlen + oranges Glühen unten, fest im Hintergrund */
body:before{content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(75% 42% at 50% 100%,rgba(255,122,46,1) 0%,rgba(255,150,90,.75) 22%,rgba(240,86,122,.45) 42%,rgba(61,123,255,0) 75%),
    radial-gradient(34% 80% at 50% 45%,rgba(61,123,255,.75) 0%,rgba(61,123,255,.25) 45%,transparent 78%),
    radial-gradient(90% 60% at 50% -10%,#0B1440 0%,transparent 70%),
    linear-gradient(180deg,#03050D 0%,#071037 45%,#0B1A55 75%,#1B1E52 100%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.8;
  background:repeating-linear-gradient(90deg,rgba(143,180,255,.0) 0px,rgba(143,180,255,.0) 9px,rgba(143,180,255,.16) 10px,rgba(143,180,255,0) 12px);
  -webkit-mask-image:radial-gradient(55% 75% at 50% 55%,#000 0%,transparent 75%);mask-image:radial-gradient(55% 75% at 50% 55%,#000 0%,transparent 75%)}
a{color:inherit;text-decoration:none}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;padding-top:max(14px,env(safe-area-inset-top));background:linear-gradient(180deg,rgba(4,6,15,.85),rgba(4,6,15,.35));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo{display:flex;align-items:center;gap:11px}
.logo .mark{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 10px rgba(110,107,255,.45))}
.logo span{font:600 23px/1 var(--sans);letter-spacing:-.5px;color:#fff}
nav{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(5,8,20,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav a{padding:8px 16px;border-radius:999px;color:var(--muted);font:500 14.5px var(--sans)}
nav a.on{background:#fff;color:#0A1030}
main{max-width:980px;margin:0 auto;padding:10px 16px 150px}

/* Überschriften */
.hero{text-align:center;padding:34px 6px 30px}
.kicker,.label{font:600 12.5px var(--sans);color:var(--blue2);letter-spacing:1.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.kicker:before,.label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px var(--orange)}
h1{font:700 clamp(40px,9vw,76px)/1.02 var(--sans);letter-spacing:-.045em;margin:14px 0 16px}
h1 em{font-style:italic;font-weight:600;background:linear-gradient(90deg,#fff,#C9D6FF 55%,#FFB27A);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hero p,.sub{color:#C5CDE6;font:400 17px/1.6 var(--sans);max-width:560px;margin:0 auto}
h2{font:700 27px/1.15 var(--sans);margin:6px 0 16px;letter-spacing:-.03em}
h2 small{font:400 14px var(--sans);color:var(--muted);margin-left:6px}

/* Glas-Karten */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px;
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.card .label{margin-bottom:6px}

/* Drop-Feld */
.drop{display:block;position:relative;border-radius:20px;padding:34px 18px;text-align:center;cursor:pointer;transition:.25s;
  background:radial-gradient(80% 120% at 50% 120%,rgba(255,122,46,.28),transparent 60%),rgba(255,255,255,.035);
  border:1px dashed rgba(255,255,255,.22)}
.drop.over,.drop:hover{border-color:var(--peach);background:radial-gradient(80% 120% at 50% 120%,rgba(255,122,46,.45),transparent 65%),rgba(255,255,255,.05)}
.drop .orb{width:74px;height:74px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 8px rgba(255,255,255,.05),0 10px 40px rgba(255,122,46,.4);font-size:28px}
.drop b{display:block;font:700 21px var(--sans);letter-spacing:-.02em;margin-bottom:2px}
.drop span{color:var(--muted);font:14px var(--sans)}
.files{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.file .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14.5px}
.file .m{color:var(--muted);font:13px var(--sans)}
.file .x{color:var(--muted);cursor:pointer;padding:4px 6px}
.bar{height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--peach),var(--orange));transition:width .4s;
  box-shadow:0 0 14px rgba(255,122,46,.7)}
.file .bar{width:90px}

/* Optionen */
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-top:1px solid rgba(255,255,255,.08)}
.opt:first-of-type{border-top:0;padding-top:6px}
.opt .t{font-weight:600;font-size:15.5px}
.opt .d{color:var(--muted);font:14px/1.5 var(--sans);margin-top:3px}
.sw{position:relative;width:54px;height:32px;flex:none}
.sw input{display:none}
.sw span{position:absolute;inset:0;background:rgba(255,255,255,.12);border:1px solid var(--line);border-radius:99px;transition:.25s;cursor:pointer}
.sw span:after{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.25s;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.sw input:checked+span{background:linear-gradient(135deg,var(--orange),var(--pink));border-color:transparent;box-shadow:0 0 18px rgba(255,122,46,.55)}
.sw input:checked+span:after{transform:translateX(22px)}
.more{padding:0 0 14px;display:none}
.more.on{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#DCE3F5;border-radius:999px;padding:8px 14px;
  font:500 14px var(--sans);cursor:pointer;transition:.2s}
.chip:hover{background:rgba(255,255,255,.1)}
.chip.on{background:#fff;color:#0A1030;border-color:#fff;box-shadow:0 0 22px rgba(143,180,255,.45)}
.range{display:flex;align-items:center;gap:12px;color:var(--muted);font:14px var(--sans)}
.range b{color:var(--text)}
input[type=range]{flex:1;accent-color:var(--orange)}
.step{display:flex;align-items:center;gap:8px}
.step button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--text);font-size:18px;cursor:pointer}
.step b{min-width:22px;text-align:center;font:700 22px var(--sans)}
textarea,input[type=text],input[type=email],input[type=password],select{width:100%;background:rgba(4,6,15,.45);border:1px solid var(--line);color:var(--text);
  border-radius:16px;padding:14px 16px;font:16px/1.5 var(--sans);outline:none}
select{width:auto;font:14px var(--sans)}
textarea{min-height:104px;resize:vertical}
textarea:focus,input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--peach);box-shadow:0 0 0 4px rgba(255,178,122,.12)}
.examples{margin-top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:13px 24px;font:600 15px var(--sans);letter-spacing:.1px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,255,255,.35),rgba(255,255,255,.06) 60%),rgba(255,122,46,.25);
  box-shadow:0 0 0 6px rgba(255,255,255,.04),0 10px 40px rgba(255,122,46,.35);backdrop-filter:blur(10px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:none;border-color:var(--line)}
.btn.small{padding:9px 16px;font-size:14px}
.cta{position:fixed;left:0;right:0;bottom:0;padding:16px;padding-bottom:max(18px,env(safe-area-inset-bottom));z-index:5;
  display:flex;justify-content:center;background:linear-gradient(180deg,transparent,rgba(4,6,15,.75) 45%)}
.cta .btn{width:100%;max-width:520px;padding:17px;font-size:16px;letter-spacing:.1px}

/* Auftrag */
.status{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;color:#C5CDE6;font:15px var(--sans)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);animation:p 1.2s infinite}
@keyframes p{50%{opacity:.25}}
.bar.big{height:8px;max-width:560px;margin:0 auto 10px}
.notes{color:#DCE3F5;font:15px/1.6 var(--sans);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;margin:16px auto 0;max-width:720px}
.err{color:#FFD0D5;background:rgba(255,107,122,.12);border:1px solid rgba(255,107,122,.4);border-radius:16px;padding:12px 16px;font:15px var(--sans)}
.head-row{display:flex;justify-content:space-between;align-items:center;margin:34px 0 14px;gap:10px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.reel{border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,178,122,.12));border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 60px rgba(255,122,46,.12);backdrop-filter:blur(16px)}
.reel video{width:100%;aspect-ratio:9/16;background:#000;display:block;object-fit:cover;border-radius:16px}
.reel .b{padding:12px 6px 6px;display:flex;flex-direction:column;gap:10px}
.reel .h{font:700 19px/1.25 var(--sans);letter-spacing:-.02em}
.reel .meta{color:var(--muted);font:13px var(--sans)}
.reel .row{display:flex;gap:8px;flex-wrap:wrap}
.edit{display:none;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.edit.on{display:flex}
.edit label{font:500 13px var(--sans);color:var(--blue2)}
.tests{display:flex;gap:6px;overflow-x:auto}
.tests a{flex:none;font:500 13px var(--sans);background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.list{display:flex;flex-direction:column}
.list a.job{display:flex;align-items:center;gap:12px;justify-content:space-between}
.list .tt{font:700 19px/1.25 var(--sans);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .meta{color:var(--muted);font:13px var(--sans)}
.pill{font:600 12.5px var(--sans);padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);flex:none}
.pill.done{background:rgba(69,224,154,.14);color:#9FF5CB}
.pill.failed{background:rgba(255,107,122,.15);color:#FFC2C9}
.pill.running,.pill.revising,.pill.queued{background:rgba(255,122,46,.18);color:#FFD2B5}
.empty{color:var(--muted);text-align:center;padding:40px 0;font:15px var(--sans)}
#toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);background:rgba(10,16,48,.9);border:1px solid var(--line);
  color:#fff;padding:12px 18px;border-radius:999px;font:500 14px var(--sans);opacity:0;transition:.25s;pointer-events:none;z-index:20;
  max-width:90vw;backdrop-filter:blur(12px)}
#toast.on{opacity:1}

/* Linien-Icons statt Emojis */
.ic{width:1.05em;height:1.05em;flex:none;vertical-align:-.15em}
.btn .ic{width:16px;height:16px}
.drop .orb .ic{width:30px;height:30px;stroke-width:1.6}
.notes{display:flex;gap:12px;align-items:flex-start}
.notes .ic.lead{width:20px;height:20px;margin-top:2px;color:var(--peach)}
.notes b{font-weight:600;color:#fff}
.file .x .ic{width:16px;height:16px}
.file .m .ic,#inspoFile .ic{color:var(--ok)}

/* Anleitung „Zum Home Bildschirm“ */
.install .iapp{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.install .iapp img{width:58px;height:58px;border-radius:14px;box-shadow:0 8px 24px rgba(110,107,255,.35)}
.install .iapp b{display:block;font-size:18px}.install .iapp span{color:var(--muted);font-size:14px}
.istep{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.55}
.istep:last-of-type{border-bottom:0}
.inum{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;
  background:linear-gradient(135deg,var(--orange),var(--pink));box-shadow:0 0 16px rgba(255,122,46,.45)}
.kbd{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;margin-left:4px;
  vertical-align:middle;background:rgba(255,255,255,.1);border:1px solid var(--line);color:#8FB4FF}
.kbd .ic{width:17px;height:17px}
/* Menü oben rechts */
nav{position:relative}
.menu-btn{width:34px;height:34px;border-radius:50%;border:0;margin-left:2px;cursor:pointer;font:700 14px var(--sans);color:#fff;
  background:linear-gradient(135deg,#3FA2FF,#B23CFF)}
.menu{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;display:none;flex-direction:column;padding:8px;z-index:30;
  background:rgba(10,16,48,.96);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(16px)}
.menu.on{display:flex}
.menu a{padding:11px 12px;border-radius:12px;color:#DCE3F5;font-size:15px}
.menu a:hover{background:rgba(255,255,255,.07)}
.menu-head{padding:8px 12px 10px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
/* App-Modus: Platz für die Statusleiste */
@media (display-mode: standalone){.top{padding-top:max(14px,env(safe-area-inset-top))}}
nav:empty{display:none}
/* Kopfzeile: Navigation mit Symbolen (Computer: oben, Handy: Leiste unten) */
nav a{display:inline-flex;align-items:center;gap:7px}
nav a .ic{width:16px;height:16px}
.acct{position:relative;display:flex;align-items:center}
.top{gap:12px}
@media (min-width:561px){ .top nav{margin-left:auto} }
@media (max-width:560px){
  .top{padding-left:16px;padding-right:14px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,6,15,.94)}
  .logo span{display:inline;font-size:21px}
  .top nav{position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));z-index:20;justify-content:space-around;
    padding:6px;border-radius:22px;background:rgba(8,12,34,.86);box-shadow:0 18px 50px rgba(0,0,0,.55);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .top nav:empty{display:none}
  .top nav a{flex:1;flex-direction:column;gap:3px;padding:8px 4px;border-radius:16px;font-size:11.5px;font-weight:600}
  .top nav a .ic{width:21px;height:21px}
  .top nav a.on{background:rgba(255,255,255,.95);color:#0A1030}
  main{padding-bottom:190px}
  .cta{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 72px);background:none;padding-bottom:6px}
  #toast{bottom:170px}
}

.pwrules{list-style:none;margin:10px 2px 2px;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--muted)}
.pwrules li{display:flex;align-items:center;gap:8px;transition:.2s}
.pwrules .ic{width:15px;height:15px;opacity:.35}
.pwrules li.ok{color:#9FF5CB}.pwrules li.ok .ic{opacity:1;color:var(--ok)}
.legal-links{text-align:center;margin:22px 0 0;font-size:13.5px;color:var(--muted)}.legal-links a{color:var(--muted)}
/* iPhone „Gummiband“ beim Runterziehen: kein Nachfedern, und falls doch, bleibt über der Kopfzeile alles dunkel */
html,body{overscroll-behavior:none}
html{background:#04060F}
.top::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:rgba(4,6,15,.94)}
.top{position:sticky}
/* Scroll-Leiste ausblenden (wirkt wie eine App) – Scrollen funktioniert weiter */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}