/* Download-Seite des Dateiversands. Aussehen wie das Kundenportal: Schwarz und Weiß, ein Rot, Poppins, Ecken aus dem Logo, nichts ist rund.
   Keine Stilangaben im HTML: die CSP der Seite erlaubt nur diese Datei. */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/schrift/poppins-regular.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/schrift/poppins-medium.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/schrift/poppins-semibold.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/schrift/poppins-bold.woff2) format("woff2")}
:root{color-scheme:light;--tinte:#202020;--hell:#e5e5e5;--grund:#f1f1f1;--grau:#a6a6a5;--grau-text:#5b5a59;--linie:#d4d4d4;--rot:#9e2131;--rot-hell:#bd273a;--rot-dunkel:#7e1a27}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100%;background:var(--grund);color:#000;font:400 15px/1.6 Poppins,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--rot-hell);outline-offset:2px}
[hidden]{display:none!important}
h1,h2{font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;overflow-wrap:anywhere;hyphens:auto}
h1{font-size:clamp(26px,4vw,46px)}
h2{font-size:clamp(16px,1.7vw,20px)}
#app{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}

.schnitt{--c:16px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.knopf{--c:10px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 20px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;text-align:center;text-decoration:none;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:background .15s,color .15s}
.knopf[disabled]{opacity:.5;cursor:not-allowed}
.knopf small{font-weight:500;text-transform:none;letter-spacing:0;opacity:.85}
.rot{background:var(--rot);color:#fff}.rot:hover{background:var(--rot-dunkel)}
.tief{background:#000;color:#fff}.tief:hover{background:var(--tinte)}
.klein-k{min-height:34px;padding:6px 12px;font-size:11px;--c:7px;background:var(--hell);color:#000}
.klein-k:hover{background:#d6d6d6}

/* Kopf und Fuß */
.kopf{background:#000;color:#fff;flex:none}
.kopf-in{max-width:1100px;margin:0 auto;padding:0 clamp(16px,3vw,40px);height:68px;display:flex;align-items:center;gap:20px}
.kopf img{height:24px;width:auto;display:block}
.sprachen{margin-left:auto;display:flex;gap:2px}
.sprachen button{padding:5px 8px;font-size:12px;font-weight:500;letter-spacing:.04em;color:inherit;opacity:.75}
.sprachen button:hover{opacity:1}
.sprachen button[aria-pressed=true]{opacity:1;font-weight:600;box-shadow:inset 0 -2px 0 var(--rot-hell)}
main{width:100%;max-width:1100px;margin:0 auto;padding:clamp(24px,4vw,56px) clamp(16px,3vw,40px) 40px;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px);flex:1 0 auto}
.fuss{flex:none;padding:18px clamp(16px,3vw,40px);font-size:12px;color:var(--grau-text)}
.fuss-in{max-width:1100px;margin:0 auto;display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:space-between}
.fuss a{text-decoration:none}.fuss a:hover{text-decoration:underline}

/* Inhalt */
.ober{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--grau-text);font-weight:500}
.leise{color:var(--grau-text)}
.klein{font-size:13px}
.karte{background:#fff;padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;min-width:0}
.dunkel{background:#000;color:#fff}
.dunkel .leise{color:var(--grau)}
.nachricht{white-space:pre-line;overflow-wrap:anywhere;max-width:70ch;font-size:15px}
.zahlen{font-variant-numeric:tabular-nums}
.zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.zeile.weit{justify-content:space-between}

/* Dateibaum */
.baum{display:flex;flex-direction:column}
.baum li{border-top:1px solid var(--linie)}
.baum li:first-child{border-top:0}
.eintrag{display:flex;align-items:center;gap:12px;padding:9px 0;flex-wrap:wrap}
.eintrag .name{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:10px}
.eintrag .groesse{font-size:13px;color:var(--grau-text);white-space:nowrap}
.symbol{flex:none;width:18px;height:14px;display:inline-block;background:var(--grau)}
.symbol.ordner{background:#000;clip-path:polygon(0 0,40% 0,50% 18%,100% 18%,100% 100%,0 100%)}
.symbol.datei{width:13px;height:16px;background:var(--grau);clip-path:polygon(0 0,70% 0,100% 28%,100% 100%,0 100%)}
.ordner-kopf{cursor:pointer;font-weight:600}
.ordner-kopf .pfeil{flex:none;width:0;height:0;border:5px solid transparent;border-left-color:#000;margin-right:-4px;transition:transform .15s}
li.offen>.eintrag .pfeil{transform:rotate(90deg) translateX(2px)}
.kinder{padding-left:22px;border-left:1px solid var(--linie);margin-left:8px}

/* Passwort und Meldungen */
.pw-form{display:flex;flex-direction:column;gap:16px;max-width:420px}
.ein{display:flex;flex-direction:column;gap:4px}
.ein label{font-size:12px;font-weight:500;color:var(--grau-text)}
.ein input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--grau);padding:9px 0;font-size:16px;outline:0}
.ein input:focus{border-color:var(--rot-hell)}
.fehler{border-left:4px solid var(--rot);background:#faf2f3;padding:9px 13px;font-size:13px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#000;color:#fff;padding:11px 18px;font-size:13px;z-index:50;max-width:calc(100vw - 32px);--c:10px}
@media (max-width:520px){.kopf-in{gap:10px;padding:0 14px}.kopf img{height:19px}.eintrag .klein-k{margin-left:28px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Absender ohne Großbuchstaben: der Firmenname heißt genau FrameArt Media S.à r.l. */
.absender{font-size:13px;color:var(--grau);font-weight:500}
/* Upload-Link für Freelancer */
.ablage{border:1px dashed var(--grau);padding:clamp(22px,4vw,40px) 18px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;transition:background .15s,border-color .15s}
.ablage b{font-size:17px;font-weight:600}
.ablage.drueber{border-color:var(--rot);background:#faf2f3}
.ablage.sperre{opacity:.55}
.ablage .zeile{justify-content:center;margin-top:4px}
.hoch-stand{display:flex;flex-direction:column;gap:6px}
.hoch-stand progress{width:100%;height:6px;appearance:none;-webkit-appearance:none;border:0;background:var(--hell)}
.hoch-stand progress::-webkit-progress-bar{background:var(--hell)}
.hoch-stand progress::-webkit-progress-value{background:var(--rot)}
.hoch-stand progress::-moz-progress-bar{background:var(--rot)}
.danke{border-left:4px solid #2f7d4f;background:#eef6f1;padding:10px 14px;font-size:14px;font-weight:500}