/* AerIQ Datentransfer-Portal — eigenständiges Stylesheet im Design der Hauptseite
   (dunkles Navy-Theme, orange Akzente). CSP-konform: keine Inline-Styles in den
   Seiten, alles hier. Palette gespiegelt von www.aeriq.de (header.php :root). */
:root{
  color-scheme:dark; /* fest dunkles Design — verhindert Auto-Dark-Umfärbung (Samsung/Chrome Android) */
  --bg:#0f172a; --bg2:#1e293b; --card:#1a1a1a; --card2:#15151f; --border:#2a2a2a;
  --primary:#ff8800; --primary-d:#a84d0e; --primary-l:#ffae5c;
  --text:#f1f5f9; --text2:#cbd5e1; --muted:#94a3b8;
  --ok:#22c55e; --ok-bg:#064e3b; --err:#fca5a5; --err-bg:#7f1d1d;
  --radius:12px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body.tp{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-l);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
.is-hidden{display:none!important}
/* Inline-SVG-Icons (CSP-konform statt Font-Awesome); Standard = orange */
.tp-i{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.15em;color:var(--primary)}
.tp-btn .tp-i,.tp-back .tp-i,.tp-pcard-go .tp-i{color:inherit}

/* ---------- Header (Navbar im Hauptseiten-Stil) ---------- */
.tp-header{position:sticky;top:0;z-index:1000;background:rgba(15,23,42,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
.tp-nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.85rem 1.25rem}
.tp-brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.tp-logo{height:38px;width:auto;display:block}
.tp-portal-tag{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:#fff;font-size:1.02rem;letter-spacing:.01em;border-left:1px solid rgba(255,255,255,.18);padding-left:.8rem}
.tp-portal-tag .pill{background:linear-gradient(135deg,var(--primary-d),var(--primary));color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .5rem;border-radius:999px}
.tp-headnav{margin-left:auto;display:flex;align-items:center;gap:.8rem;min-width:0}
.tp-username{color:var(--text2);font-size:.9rem;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-headnav .tp-back{color:var(--muted);font-size:.85rem;white-space:nowrap}

/* ---------- Layout ---------- */
.tp-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:1.8rem 1.25rem 3rem}
.tp-h1{font-size:2rem;font-weight:800;line-height:1.15;margin:.2rem 0 .5rem;background:linear-gradient(135deg,#f5e6d3 0%,#ff8800 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tp-sub{color:var(--text2);margin:.2rem 0 1.4rem;max-width:760px}
.tp-muted{color:var(--muted)}
.tp-section-h{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:700;color:#fff;margin:1.8rem 0 .9rem}
.tp-section-h i{color:var(--primary)}
.tp-count-pill{background:var(--primary);color:#fff;font-size:.8rem;font-weight:700;border-radius:999px;padding:.05rem .55rem}

/* ---------- Buttons ---------- */
.tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:8px;padding:.62rem 1.15rem;font-size:.95rem;font-weight:600;cursor:pointer;text-align:center;font-family:inherit;line-height:1.2}
.tp-btn-primary{background:var(--primary);color:#fff}
.tp-btn-primary:hover{background:var(--primary-l);color:#fff}
.tp-btn-ghost{background:transparent;color:var(--text2);border:1px solid #475569}
.tp-btn-ghost:hover{background:#1e293b;color:#fff}
.tp-btn-grey{background:#334155;color:#e2e8f0}
.tp-btn-grey:hover{background:#475569}
.tp-btn-danger{background:#b91c1c;color:#fff}
.tp-btn-danger:hover{background:#991b1b}
.tp-btn-sm{padding:.4rem .75rem;font-size:.85rem}
.tp-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Cards (allgemein) ---------- */
.tp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ================= ANMELDUNG — 1:1 im Design von www.aeriq.de/kundenbereich.php =================
   Wunsch Martin 30.07.2026: „genau so umsetzen, die einzigen Unterschiede sind die Texte und
   dass es kein 'Zugang anfragen' geben soll."

   Die Werte unten sind am Live-Kundenbereich GEMESSEN (nicht nachempfunden): Karte #1e293b,
   Radius 16px, Padding 32px, Titel 40px/700 in #f1f5f9, Tab-Leiste 2px #e2e8f0 mit 3px #ff8800,
   Untertitel #cbd5e1 mit 48px Abstand, Felder #1e293b/#f1f5f9, Button #a84d0e (nicht voll breit),
   Link #fb923c. Der Hover macht die Karte bewusst fast durchsichtig — genau wie im Kundenbereich.

   ⚠️ ZWEI DOCROOTS, KEIN GEMEINSAMES CSS. www.aeriq.de liefert diese Regeln aus css/style.css +
   dem Inline-Block in kundenbereich.php; hier sind sie kopiert und auf .tp-login-wrap begrenzt
   (sonst kollidieren die generischen Namen .card/.btn/.tab mit dem übrigen Portal und uppy).
   Ändert sich der Kundenbereich-Login, muss dieser Block nachgezogen werden. */

/* Kopfleiste der Anmeldung: dunkle Leiste im Hauptseiten-Look, aber bewusst OHNE Menü —
   ein zweites Menü in einem eigenen Docroot läuft mit der Hauptseite auseinander
   (Entscheidung Martin 30.07.2026). */
.tp-loginbar{position:sticky;top:0;z-index:1000;background:rgba(15,23,42,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
.tp-loginbar-inner{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem}
.tp-loginbar-brand{display:block;flex:0 0 auto}
.tp-loginbar-brand img{width:80px;height:80px;display:block}
.tp-loginbar-back{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;color:var(--text2);font-weight:500}
.tp-loginbar-back:hover{color:var(--primary-l)}

.tp-login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:4rem 0;min-height:70vh;position:relative;overflow:hidden}
/* Hintergrund-Loop (30.07.2026): <aeriq-login-bg> liegt als position:absolute;inset:0 über dem
   Wrapper und ist pointer-events:none — der Inhalt muss darüber liegen. */
/* Breiten-Mechanik exakt wie die Hauptseite: Flex-Element mit auto-Basis, gedeckelt auf 550px
   (dort `.container` + inline max-width:550px). Bewusst KEIN width:100% — sonst wird die Karte
   breiter als im Kundenbereich. Die verbleibende Differenz kommt allein von den Texten. */
.tp-login-container{position:relative;z-index:1;max-width:550px;margin:0 auto;padding:0 1.5rem}

.tp-login-wrap .card{background-color:#1e293b;border-radius:1rem;padding:2rem;border:1px solid rgba(255,255,255,.1);transition:transform .3s ease,opacity .3s ease;min-height:320px;contain:layout style;backface-visibility:hidden;transform:translateZ(0)}
.tp-login-wrap .card:hover{box-shadow:0 25px 50px rgba(0,0,0,.35);border-color:#a84d0e;background:linear-gradient(135deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.01) 100%)}
.tp-login-wrap .card h2{font-size:2.5rem;font-weight:700;line-height:1.2;color:#f1f5f9;margin:0 0 2rem}

.tp-login-wrap .tabs{display:flex;border-bottom:2px solid #e2e8f0;margin-bottom:30px}
.tp-login-wrap .tab{flex:1;padding:15px;text-align:center;cursor:pointer;background:transparent;border:none;font-family:inherit;font-size:16px;font-weight:600;color:#64748b;transition:all .3s ease}
.tp-login-wrap .tab.active{color:#ff8800;border-bottom:3px solid #ff8800;margin-bottom:-2px}
.tp-login-wrap .tab-content{display:none}
.tp-login-wrap .tab-content.active{display:block}

.tp-login-wrap .text-center{text-align:center}
.tp-login-wrap .text-gray{color:#cbd5e1}
.tp-login-wrap .text-primary{color:#fb923c}
.tp-login-wrap .mb-6{margin-bottom:3rem}
.tp-login-wrap .mt-4{margin-top:2rem}
.tp-login-wrap p{margin:0 0 1rem;line-height:1.6}

.tp-login-wrap .form-group{margin-bottom:1.5rem}
.tp-login-wrap .form-label{display:block;margin-bottom:.5rem;color:#f1f5f9;font-weight:500}
.tp-login-wrap .form-input{width:100%;padding:.75rem 1rem;background-color:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;color:#f1f5f9;font-family:inherit;font-size:1rem;transition:transform .3s ease,opacity .3s ease}
.tp-login-wrap .form-input:focus{outline:none;border-color:#a84d0e;box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.tp-login-wrap .form-input:focus-visible{outline:3px solid #fb923c;outline-offset:1px;box-shadow:none}

.tp-login-wrap .btn{display:inline-block;padding:.75rem 1.5rem;border-radius:.5rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.6;transition:transform .3s ease,opacity .3s ease;cursor:pointer;border:none;text-align:center}
.tp-login-wrap .btn-primary{background-color:#a84d0e;color:#fff}
.tp-login-wrap .btn-primary:hover{background-color:#c2410c;color:#fff;transform:translateY(-2px);box-shadow:0 10px 25px rgba(168,77,14,.3)}
/* Die Inline-SVG-Icons sind global orange (.tp-i). In Button, Reiter und Link müssen sie die
   Textfarbe annehmen — auf der Hauptseite macht das Font Awesome von selbst. */
.tp-login-wrap .btn .tp-i,.tp-login-wrap .tab .tp-i,.tp-login-wrap .text-primary .tp-i,.tp-loginbar-back .tp-i{color:inherit}

/* Mobil wie die Hauptseite (≤768px): kompaktere Karte, kleinerer Titel. */
@media (max-width:768px){
  .tp-loginbar-inner{padding:.75rem 1rem}
  .tp-loginbar-brand img{width:64px;height:64px}
  .tp-login-wrap{padding:2rem 0;min-height:0}
  .tp-login-container{padding:0 1rem}
  .tp-login-wrap .card{padding:1.5rem 1rem;min-height:260px}
  .tp-login-wrap .card h2{font-size:1.25rem;line-height:1.3;margin-bottom:1.5rem}
  /* Die Reiter bleiben bewusst bei 15px/16px: der Kundenbereich hat für .tab keine
     Mobil-Regel, und mit nur einem Reiter ist hier auch keine nötig. */
}

.tp-alert{padding:.7rem .9rem;border-radius:8px;margin:.2rem 0 1rem;font-size:.9rem;text-align:left}
.tp-alert-ok{background:var(--ok-bg);color:#a7f3d0;border:1px solid #065f46}
.tp-alert-err{background:var(--err-bg);color:#fecaca;border:1px solid #991b1b}

/* ---------- Intro / Orientierung ---------- */
.tp-intro{display:flex;gap:1rem;align-items:flex-start;background:linear-gradient(135deg,rgba(168,77,14,.16),rgba(255,136,0,.06));border:1px solid rgba(255,136,0,.28);border-radius:var(--radius);padding:1.1rem 1.25rem;margin:.4rem 0 1.4rem}
.tp-intro .ic{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:rgba(255,136,0,.15);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.tp-intro h2{margin:0 0 .25rem;font-size:1.05rem;color:#fff}
.tp-intro p{margin:.15rem 0;color:var(--text2);font-size:.9rem}
.tp-steps{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.tp-step{display:inline-flex;align-items:center;gap:.4rem;background:rgba(15,23,42,.6);border:1px solid var(--border);border-radius:999px;padding:.25rem .7rem;font-size:.8rem;color:var(--text2)}
.tp-step i{color:var(--primary)}

/* ---------- Kontaktbox ---------- */
.tp-contact{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.15rem;margin:1.2rem 0}
.tp-contact .lab{font-weight:700;color:#fff;font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.tp-contact .lab i{color:var(--primary)}
.tp-contact a,.tp-contact span.ci{display:inline-flex;align-items:center;gap:.45rem;color:var(--text2);font-size:.9rem}
.tp-contact a i,.tp-contact .ci i{color:var(--primary)}

/* ---------- Projekt-Karten (wie transfer.php-Übersicht) ---------- */
.tp-cardgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tp-pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.3);padding:1.05rem 1.2rem;color:var(--text);transition:border-color .15s,transform .1s,box-shadow .15s}
.tp-pcard:hover{border-color:var(--primary);box-shadow:0 6px 22px rgba(255,136,0,.18);transform:translateY(-2px);text-decoration:none}
.tp-pcard-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
.tp-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.03em}
.tp-pnum{font-family:ui-monospace,Consolas,monospace;font-size:.76rem;font-weight:700;color:var(--primary);border:1px solid var(--primary);border-radius:6px;padding:.12rem .5rem;white-space:nowrap}
.tp-pcard-name{font-size:1.12rem;font-weight:700;color:#fff;margin:.1rem 0 .5rem}
.tp-pcard-meta{display:flex;align-items:center;gap:.5rem;color:var(--text2);font-size:.86rem;margin:.2rem 0;min-width:0}
.tp-pcard-meta i{color:var(--primary);width:1rem;text-align:center;flex:0 0 auto}
.tp-pcard-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-pcard-stages{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--border);display:grid;gap:.32rem}
.tp-pcard-stage{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.84rem}
.tp-pcard-stage .l{color:var(--text2);display:flex;align-items:center;gap:.45rem;min-width:0}
.tp-pcard-stage .l i{color:var(--primary);width:1rem;text-align:center;flex:0 0 auto}
.tp-pcard-stage .v{color:#fff;font-weight:600;white-space:nowrap}
.tp-pcard-go{margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-weight:600;font-size:.85rem}
/* Status-Badge-Farben */
.tp-st-offen{background:#334155;color:#cbd5e1}
.tp-st-in_bearbeitung{background:#78350f;color:#fcd34d}
.tp-st-wartend{background:#1e3a5f;color:#bfdbfe}
.tp-st-abgeschlossen{background:#065f46;color:#a7f3d0}
.tp-st-gesperrt{background:#7f1d1d;color:#fecaca}
.tp-st-archiviert{background:#1e293b;color:#94a3b8}

.tp-empty{padding:1.5rem;text-align:center;color:var(--muted)}

/* ---------- Projekt-Detail ---------- */
.tp-back{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.6rem;font-size:.9rem;color:var(--muted)}
.tp-detail-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin:.2rem 0 .3rem}
.tp-detail-head h1{font-size:1.55rem;font-weight:800;color:#fff;margin:0}
.tp-note{display:flex;gap:.8rem;align-items:flex-start;background:var(--card2);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:10px;padding:.9rem 1.1rem;margin:1rem 0 1.6rem;color:var(--text2);font-size:.9rem}
.tp-note i{color:var(--primary);font-size:1.1rem;margin-top:.1rem;flex:0 0 auto}
.tp-note b{color:#fff}

/* ---------- Bereiche (Upload / Ergebnisse) ---------- */
.tp-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.35rem;margin:0 0 1.4rem}
.tp-section > h2{font-size:1.1rem;margin:0 0 .3rem;display:flex;align-items:center;gap:.55rem;color:#fff}
.tp-section > h2 i{color:var(--primary)}
.tp-section-sub{color:var(--muted);margin:.1rem 0 1rem;font-size:.9rem}
.tp-subhead{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;color:#fff;margin:1.3rem 0 .6rem}
.tp-subhead .tp-i{color:var(--primary)}

/* Upload (Uppy-Container) — gebrandete dunkle Dropzone im Look von Screenshot 1 */
#tp-uppy{margin-top:.4rem}
#tp-uppy .uppy-Dashboard-inner{background:var(--card2);border:1px solid var(--border);border-radius:var(--radius);min-height:300px}
#tp-uppy .uppy-Dashboard-AddFiles{margin:16px;border:2px dashed rgba(255,136,0,.5);border-radius:12px;background-color:rgba(255,136,0,.03);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff8800' d='M7 18h11a4 4 0 0 0 .6-7.95 6 6 0 0 0-11.6-1.55A4.5 4.5 0 0 0 7 18z'/%3E%3Cpath fill='%23ffffff' d='M11 16v-3.6l-.7.7L9 11.8 12 9l3 2.8-1.3 1.3-.7-.7V16z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center 26px;background-size:50px;padding-top:94px}
#tp-uppy .uppy-Dashboard-AddFiles:hover{border-color:var(--primary);background-color:rgba(255,136,0,.07)}
#tp-uppy .uppy-Dashboard-AddFiles-title{color:#fff;font-weight:600;font-size:1.02rem}
#tp-uppy .uppy-Dashboard-browse{color:var(--primary);font-weight:700}
#tp-uppy .uppy-Dashboard-browse:hover{color:var(--primary-l);border-bottom-color:var(--primary-l)}
#tp-uppy .uppy-Dashboard-note{color:var(--muted);font-size:.85rem}
.tp-uploadrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

/* „Meine Uploads" / Listen */
.tp-filelist{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.tp-fileitem{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--card2);min-width:0}
.tp-filename{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-filesize{color:var(--muted);font-size:.82rem;white-space:nowrap}
.tp-state{font-size:.8rem;color:var(--muted);white-space:nowrap}
.tp-state.is-done{color:#6ee7b7}
.tp-state.is-err{color:var(--err)}

/* Ergebnis-Liste */
.tp-dllist{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.5rem}
.tp-dlitem{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:8px;background:var(--card2);min-width:0}
.tp-dlitem .tp-filename{font-weight:500;color:var(--text)}
.tp-bulk{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 .9rem}

/* ---------- Fortschritts-Overlay (ZIP / Sammel-Download) ---------- */
.tp-ovl{position:fixed;inset:0;background:rgba(2,6,23,.78);display:none;align-items:center;justify-content:center;z-index:1100;padding:1rem}
.tp-ovl.open{display:flex}
.tp-ovl-box{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:1.5rem 1.6rem;max-width:440px;width:100%;text-align:center}
.tp-ovl-box h3{margin:0 0 .4rem;font-size:1.1rem;color:#fff}
.tp-ovl-msg{color:var(--text2);font-size:.9rem;margin:.2rem 0 1rem;min-height:1.2em}
.tp-ovl-msg.is-err{color:var(--err)}
.tp-bar{height:12px;border-radius:999px;background:#1e293b;overflow:hidden;border:1px solid #334155}
.tp-bar > i{display:block;height:100%;width:0;background:var(--primary);transition:width .25s}
.tp-ovl-pct{margin-top:.5rem;font-weight:700;color:#fff}
.tp-ovl-actions{margin-top:1.1rem;display:flex;gap:.6rem;justify-content:center}

/* ---------- Footer ---------- */
.tp-footer{background:var(--bg2);border-top:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:.85rem;padding:1.4rem 1.25rem;margin-top:auto}
.tp-footer-inner{max-width:1100px;margin:0 auto;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.tp-legal{margin-left:auto;display:flex;gap:1.25rem}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .tp-nav{flex-wrap:wrap;gap:.6rem}
  .tp-portal-tag{font-size:.9rem;padding-left:.6rem}
  .tp-h1{font-size:1.6rem}
  .tp-main{padding:1.2rem .95rem 2.2rem}
  .tp-username{max-width:42vw}
}

/* ---------- Ordner-Ansicht Ergebnisse (Wunsch Martin 15.08.2026) ----------
   details/summary statt JS: die Portal-CSP (script-src 'self', keine Inline-
   Skripte/Styles) erlaubt nur Klassen + externe Dateien. */
.tp-dlfolder{list-style:none;min-width:0}
.tp-folder{width:100%}
.tp-folder-head{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:8px;background:var(--bg2);cursor:pointer;user-select:none}
.tp-folder-head:hover{border-color:var(--primary-d)}
.tp-folder-head::marker{content:''}
.tp-folder-head::-webkit-details-marker{display:none}
.tp-folder-head .tp-filename{font-weight:600;color:var(--text)}
.tp-foldermeta{flex:0 0 auto;color:var(--muted);font-size:.85rem}
.tp-folder[open]>.tp-folder-head{border-bottom-left-radius:0;border-bottom-right-radius:0}
.tp-dllist-nested{margin:0 0 .5rem;padding:.5rem .5rem .5rem 1.1rem;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;background:var(--card2)}
/* Ordner-Aktionen (ZIP / einzeln je Ordner, 15.08.2026) im summary-Kopf */
.tp-folder-actions{display:flex;gap:.4rem;flex:0 0 auto}
.tp-folder-actions .tp-btn{padding:.3rem .6rem;font-size:.8rem}
@media (max-width:640px){
  .tp-foldermeta{display:none}
}

/* ---------- Admin-Kundenansicht (Impersonation, 17.08.2026) ----------
   Balken-Muster von kundenbereich.php gespiegelt; die Portal-CSP erlaubt
   keine Inline-Styles → alles hier. Während der Ansicht ist .tp-header
   bewusst nicht sticky (Konkurrenz um top:0 — Muster .cbnav-static). */
.tp-impbar{position:sticky;top:0;z-index:1001;background:linear-gradient(90deg,#b45309,#d97706);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 2px 12px rgba(0,0,0,.35);font-size:14px}
.tp-impbar>.tp-i{color:#fff;width:1.25em;height:1.25em}
.tp-impbar-txt{min-width:0}
.tp-impbar-txt u{text-decoration:underline}
.tp-impbar-form{margin:0 0 0 auto}
.tp-impbar-btn{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:#b45309;border:none;border-radius:7px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:13.5px;white-space:nowrap;font-family:inherit;text-decoration:none}
.tp-impbar-btn:hover{background:#ffe9d6;color:#b45309}
.tp-impbar-btn .tp-i{color:#b45309}
body.tp-imp .tp-header{position:static}

/* ============================================================
   §2bw H5 (20.08.2026): Hilfe-Seite (/hilfe.php) — servergerendert,
   Kapitel-Liste + Artikel + Suche. hp-*-Klassen kommen aus dem
   zentralen Hilfe-Renderer (hilfe-lib.php).
   ============================================================ */
.tp-help-search { display:flex; gap:10px; margin:0 0 18px; }
.tp-help-search input {
  flex:1; background:#0f1524; border:1px solid #334155; border-radius:10px;
  color:#f1f5f9; padding:10px 14px; font:inherit; font-size:0.95rem; outline:none;
}
.tp-help-search input:focus { border-color:rgba(255,136,0,0.55); }
.tp-help-list { list-style:none; margin:0; padding:0; }
.tp-help-list li { border-bottom:1px solid rgba(51,65,85,0.6); }
.tp-help-list a {
  display:flex; align-items:center; gap:10px; padding:12px 4px;
  color:#e2e8f0; text-decoration:none; font-size:0.98rem;
}
.tp-help-list a:hover { color:#ff8800; }
.tp-help-list .tp-i { width:18px; height:18px; color:#ff8800; flex:0 0 auto; }
.tp-help-art h1 { color:#f1f5f9; font-size:1.25rem; margin:6px 0 10px; }
.tp-help-art h2 { color:#f1f5f9; font-size:1.02rem; margin:18px 0 6px; padding-top:12px; border-top:1px solid rgba(51,65,85,0.6); }
.tp-help-art h3 { color:#ff8800; font-size:0.92rem; margin:12px 0 5px; }
.tp-help-art p { margin:6px 0; color:#a8b3c7; font-size:0.92rem; line-height:1.6; }
.tp-help-art ul, .tp-help-art ol { margin:6px 0 10px; padding-left:20px; color:#a8b3c7; font-size:0.92rem; }
.tp-help-art li { margin:4px 0; line-height:1.55; }
.tp-help-art strong { color:#f1f5f9; }
.tp-help-art code { background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; color:#ff8800; font-size:0.85em; }
.tp-help-art a { color:#ff8800; }
.tp-help-art a.hp-int { text-decoration:none; border-bottom:1px dotted rgba(255,136,0,0.6); }
.tp-help-art .hp-scroll { overflow-x:auto; margin:8px 0; }
.tp-help-art table { border-collapse:collapse; width:100%; font-size:0.86rem; color:#a8b3c7; }
.tp-help-art td { border:1px solid rgba(51,65,85,0.8); padding:6px 9px; vertical-align:top; }
.tp-help-art .hp-callout { border-left:3px solid #ff8800; background:rgba(255,136,0,0.07); border-radius:0 8px 8px 0; padding:8px 12px; margin:10px 0; }
.tp-help-art .hp-note { color:#64748b; font-size:0.84rem; font-style:italic; }