:root{
  --bg: #0A0F1A;
  --panel: #111827;
  --panel-2: #0D1420;
  --border: #1E293B;
  --border-soft: #18202F;
  --text: #E5EAF1;
  --muted: #6B7686;
  --muted-2: #4A5568;
  --accent: #4FD8C4;
  --accent-dim: rgba(79,216,196,0.12);
  --accent-2: #F0B429;
  --success: #3ECF8E;
  --danger: #F0576B;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
}
/* "System" (Standard): folgt der Geräte-Einstellung, solange der Account
   keine bewusste Wahl getroffen hat (kein data-theme-Attribut gesetzt). */
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    --bg: #F3F5F8;
    --panel: #FFFFFF;
    --panel-2: #EDF0F4;
    --border: #D7DDE6;
    --border-soft: #E5E9EF;
    --text: #1A2233;
    --muted: #667085;
    --muted-2: #8A94A6;
    --accent: #0F9C86;
    --accent-dim: rgba(15,156,134,0.12);
    --accent-2: #B9790A;
    --success: #1E9E63;
    --danger: #D63D52;
  }
}
/* Bewusste Wahl "Hell" im Konto, unabhängig von der Geräte-Einstellung. */
html[data-theme="light"]{
  --bg: #F3F5F8;
  --panel: #FFFFFF;
  --panel-2: #EDF0F4;
  --border: #D7DDE6;
  --border-soft: #E5E9EF;
  --text: #1A2233;
  --muted: #667085;
  --muted-2: #8A94A6;
  --accent: #0F9C86;
  --accent-dim: rgba(15,156,134,0.12);
  --accent-2: #B9790A;
  --success: #1E9E63;
  --danger: #D63D52;
}
/* Bewusste Wahl "Dunkel" im Konto — überschreibt auch dann, wenn das
   Gerät selbst auf Hell eingestellt ist. */
html[data-theme="dark"]{
  --bg: #0A0F1A;
  --panel: #111827;
  --panel-2: #0D1420;
  --border: #1E293B;
  --border-soft: #18202F;
  --text: #E5EAF1;
  --muted: #6B7686;
  --muted-2: #4A5568;
  --accent: #4FD8C4;
  --accent-dim: rgba(79,216,196,0.12);
  --accent-2: #F0B429;
  --success: #3ECF8E;
  --danger: #F0576B;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--sans); background: var(--bg); color: var(--text);
  min-height:100vh; -webkit-font-smoothing: antialiased;
  transition: background-color .15s ease, color .15s ease;
}
#root{min-height:100vh;}
a{color:inherit;}
button{font-family:inherit;}

/* ================= LOGIN SCREEN ================= */
.shell{
  display:flex; min-height:100vh; position:relative;
  /* Innerhalb der gesamten Login-Fläche bleiben alle Farben fest auf
     Dunkel, egal welches Design gewählt ist — reine Marken-/Login-Fläche,
     das Logo ist für dunklen Hintergrund gestaltet (helle/silberne
     Schrift). Der Verlauf sitzt bewusst hier am gemeinsamen Container statt
     einzeln pro Panel, damit links und rechts EIN durchgehender
     Hintergrund sind statt zwei unterschiedlicher (auch auf Mobile, wo die
     Panels untereinander stehen). */
  --bg: #0A0F1A; --panel: #111827; --panel-2: #0D1420;
  --border: #1E293B; --border-soft: #18202F;
  --text: #E5EAF1; --muted: #6B7686; --muted-2: #4A5568;
  --accent: #4FD8C4; --accent-dim: rgba(79,216,196,0.12); --accent-2: #F0B429;
  --success: #3ECF8E; --danger: #F0576B;
  color: var(--text);
  background: radial-gradient(ellipse at 20% 20%, rgba(79,216,196,0.07), transparent 55%),
    linear-gradient(180deg, var(--panel-2) 0%, #090D16 100%);
}
.infra-panel{
  position:relative; flex: 1.15;
  overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 44px 48px; border-right:1px solid var(--border-soft); min-height: 100vh;
}
.infra-panel canvas, .auth-panel canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.55; }
.infra-top{position:relative; z-index:2;}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:30px; height:30px; border-radius:8px;
  background: linear-gradient(135deg, var(--accent), #2A9D8F);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-weight:700; font-size:14px; color:#041713; flex-shrink:0;
}
.brand-name{ font-family: var(--mono); font-weight:600; font-size:15px; letter-spacing:0.02em; }
.brand-with-logo{ display:block; }
.brand-logo{ max-width: 340px; width:100%; height:auto; display:block; }
.brand-sidebar{
  display:block; background:#0A0F1A; border-radius:10px; padding:14px 16px;
}
.sidebar-wordmark{ width:100%; height:auto; display:block; }
.infra-headline{ margin-top: 72px; max-width: 460px; }
.eyebrow{
  font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(62,207,142,0.18); }
.infra-headline h1{ font-size: 34px; line-height:1.22; font-weight:700; letter-spacing:-0.01em; }
.infra-headline p{ margin-top:14px; color:var(--muted); font-size:14.5px; line-height:1.6; max-width:400px; }

.auth-panel{ position:relative; overflow:hidden; flex:1; display:flex; align-items:center; justify-content:center; padding: 32px 24px; }
.auth-card{ position:relative; z-index:2; width:100%; max-width: 380px; }
.auth-card-header{margin-bottom:28px;}
.auth-card-header h2{ font-size:22px; font-weight:700; }
.auth-card-header p{ color:var(--muted); font-size:13.5px; margin-top:6px; }

/* ================= FORM ELEMENTS (shared) ================= */
.field{margin-bottom:16px;}
.field label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; background: var(--panel); border:1px solid var(--border); color:var(--text);
  font-family:var(--sans); font-size:14.5px; padding:11px 13px; border-radius:8px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:90px; font-family:var(--sans);}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-2);}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.btn{
  background: linear-gradient(135deg, var(--accent), #2A9D8F);
  color:#041713; border:none; font-family:var(--sans); font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; gap:8px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 18px rgba(79,216,196,0.16);
}
.btn:hover:not(:disabled){transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79,216,196,0.24);}
.btn:active:not(:disabled){transform: translateY(0);}
.btn:disabled{opacity:0.55; cursor:not-allowed;}
.btn.block{width:100%;}
.btn.secondary{ background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none; }
.btn.secondary:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.btn.danger{ background:transparent; color:#FF8FA0; border:1px solid rgba(240,87,107,0.35); box-shadow:none; }
.btn.danger:hover:not(:disabled){ background:rgba(240,87,107,0.1); border-color:var(--danger); }
.btn.small{ padding:7px 12px; font-size:12.5px; }
.icon-btn{ padding:7px 9px; }

.file-menu-wrap{ position:relative; }
.file-menu{
  position:absolute; right:0; top:calc(100% + 4px);
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,0.45); z-index:30; min-width:170px; overflow:hidden;
}
.file-menu-item{
  display:block; width:100%; text-align:left; background:transparent; border:none;
  color:var(--text); font-size:13px; padding:10px 14px; cursor:pointer;
  text-decoration:none; font-family:var(--sans);
}
.file-menu-item:hover{ background: rgba(255,255,255,0.05); }
.file-menu-item.danger{ color:#FF8FA0; }
.file-menu-item.danger:hover{ background: rgba(240,87,107,0.1); }

.preview-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:100100;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.preview-modal{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  /* Feste Größe unabhängig vom jeweils geöffneten Bild/Video, damit das
     Modal beim Durchblättern nicht ständig die Größe wechselt — nur der
     Inhalt darin (img/video) skaliert sich per object-fit auf diese
     feste Fläche. */
  width:min(1100px, 92vw); height:min(760px, 92vh);
  display:flex; flex-direction:column; overflow:hidden;
}
.preview-modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.preview-modal-title{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-modal-close{
  background:transparent; border:none; color:var(--muted); font-size:26px; line-height:1;
  cursor:pointer; padding:0 4px; flex-shrink:0;
}
.preview-modal-close:hover{ color:var(--text); }
.preview-modal-body{
  position:relative;
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  overflow:auto; background:#000;
}
.preview-modal-body img{ max-width:100%; max-height:100%; object-fit:contain; }
.preview-modal-body video{ max-width:100%; max-height:100%; object-fit:contain; }
.preview-modal-body iframe{ width:100%; height:100%; border:none; background:#fff; }

.preview-video-spinner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:none; pointer-events:none; z-index:5;
}
.preview-video-spinner.active{ display:block; }

.preview-nav-btn{
  display:none; position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.5); color:#fff; border:none; width:44px; height:44px;
  border-radius:50%; font-size:26px; line-height:1; cursor:pointer; z-index:10;
  align-items:center; justify-content:center;
}
.preview-nav-btn.prev{ left:14px; }
.preview-nav-btn.next{ right:14px; }
@media (hover:hover) and (pointer:fine){
  .preview-nav-btn{ display:flex; }
}
.preview-nav-btn:hover{ background:rgba(0,0,0,0.75); }

/* Gezoomtes Bild (lightbox.js attachZoom): keine Scrollleisten, Hand zum Schieben. */
.preview-modal-body.lb-zoomed{ overflow:hidden; }
.lb-zoomed img{ cursor:grab; }

/* Bildbetrachter für Galerie/Bild-Baustein: ganzer Bildschirm, Bild mittig. */
.lightbox{ padding:0; background:rgba(0,0,0,0.94); flex-direction:column; }
.lb-stage{ position:relative; flex:1; width:100%; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lb-img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; cursor:zoom-in; }
.lb-zoomed .lb-img{ cursor:grab; }
.lb-close{ position:absolute; top:max(10px, env(safe-area-inset-top)); right:14px; z-index:11; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,0.5); color:#fff; font-size:28px; }
.lb-caption{ color:#fff; font-size:14.5px; text-align:center; padding:10px 16px max(14px, env(safe-area-inset-bottom)); min-height:1em; }
.lb-caption:empty{ padding:0 0 max(8px, env(safe-area-inset-bottom)); }
.lb-count{ position:absolute; top:max(20px, env(safe-area-inset-top)); left:16px; color:#ddd; font:12px var(--mono); z-index:11; }
.lb-hint{ position:absolute; bottom:70px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.65); color:#fff; font-size:12.5px; padding:6px 12px; border-radius:999px; pointer-events:none; transition:opacity .4s; white-space:nowrap; }
.lb-hint-hidden .lb-hint{ opacity:0; }
@media (hover:hover) and (pointer:fine){ .lb-hint{ display:none; } }

.sidebar-transfer{
  position:relative;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-bottom:14px;
}
.sidebar-transfer .label,
.transfer-toast .label{
  font-size:12.5px; font-weight:600; margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:20px;
}
.sidebar-transfer .sub,
.transfer-toast .sub{ font-size:11px; color:var(--muted); font-family:var(--mono); margin-bottom:8px; }
.sidebar-transfer .bar-track,
.transfer-toast .bar-track{ height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
.sidebar-transfer .bar-fill,
.transfer-toast .bar-fill{ height:100%; background:var(--accent); transition:width .15s ease; }
.sidebar-transfer .pct,
.transfer-toast .pct{ margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.transfer-toast-cancel{
  position:absolute; top:10px; right:10px; background:transparent; border:none;
  color:var(--danger); font-size:16px; line-height:1; cursor:pointer; padding:2px 5px; border-radius:5px;
}
.transfer-toast-cancel:hover{ background:var(--danger); color:#2b0409; }

.transfer-hint{
  position:fixed; right:20px; bottom:20px; z-index:200;
  background: linear-gradient(135deg, var(--accent), #2A9D8F);
  border:1px solid var(--accent); border-radius:10px; color:#041713; font-weight:600;
  padding:10px 14px; font-size:12.5px;
  box-shadow:0 10px 30px rgba(79,216,196,0.35);
  animation: transfer-hint-fade 4s ease forwards;
  pointer-events:none;
}
@keyframes transfer-hint-fade{
  0%{ opacity:0; transform:translateY(6px); }
  12%{ opacity:1; transform:translateY(0); }
  75%{ opacity:1; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .transfer-hint{ animation:none; } }

.paypal-donate-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:#0070ba; color:#fff; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:999px; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,112,186,0.35); transition:background .15s ease, transform .1s ease;
}
.paypal-donate-btn:hover{ background:#005ea6; }
.paypal-donate-btn:active{ transform:scale(0.98); }
.no-spinner::-webkit-outer-spin-button, .no-spinner::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.no-spinner{ -moz-appearance:textfield; }

.btn-icon-round{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700;
  flex-shrink:0; transition: filter .12s ease;
}
.btn-icon-round.success{ background: var(--success); color:#04210f; }
.btn-icon-round.danger{ background: var(--danger); color:#2b0409; }
.btn-icon-round:hover{ filter:brightness(1.1); }

.hint{ font-size:11.5px; color:var(--muted-2); margin-top:6px; }

.msg{ display:flex; align-items:flex-start; gap:8px; font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px; line-height:1.45; }
.msg.error{background:rgba(240,87,107,0.1); color:#FF8FA0; border:1px solid rgba(240,87,107,0.25);}
.msg.success{background:rgba(62,207,142,0.1); color:#7EE7B2; border:1px solid rgba(62,207,142,0.25);}
.msg.info{background:rgba(240,180,41,0.08); color:#F5CD7C; border:1px solid rgba(240,180,41,0.25);}

.auth-footnote{ margin-top:22px; font-size:12px; color:var(--muted-2); line-height:1.6; font-family:var(--mono); }

.loading-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right:2px; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:0.25;} 50%{opacity:1;} }

.kolonas-spinner-gear{
  transform-box: fill-box; transform-origin: center;
  animation: kolonas-spin 3s linear infinite;
}
@keyframes kolonas-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.kolonas-spinner-k{ font-family: var(--mono); font-weight:800; fill: var(--text); }
@media (prefers-reduced-motion: reduce){ .kolonas-spinner-gear{ animation:none; } }

/* ================= APP SHELL (nach Login) ================= */
.app-shell{ display:flex; align-items:flex-start; min-height:100vh; }
.sidebar{
  width:240px; flex-shrink:0; background: var(--panel-2); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; padding:22px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{ padding:0 8px; margin-bottom:30px; }
.nav-list{ list-style:none; display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
  border-left:2px solid transparent; transition: background .12s ease, color .12s ease;
}
.nav-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted-2); flex-shrink:0; transition: background .12s ease; }
.nav-item:hover{ background: rgba(255,255,255,0.03); color:var(--text); }
.nav-item.active{ background: var(--accent-dim); color:var(--accent); border-left-color:var(--accent); }
.nav-item.active .dot{ background: var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }

.nav-chevron{ margin-left:auto; font-size:12px; transition: transform .15s ease; color:var(--muted-2); }
.nav-chevron.open{ transform: rotate(180deg); }
.nav-sublist{ list-style:none; display:flex; flex-direction:column; gap:2px; margin:2px 0 2px 18px; }
.nav-subitem{ font-size:12.5px; padding:8px 12px; }

.new-badge{
  display:inline-block; background: var(--accent); color:#041713;
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 6px; border-radius:999px; margin-left:6px;
  vertical-align:middle;
}

.fb-crumb{ cursor:pointer; color:var(--accent); }
.fb-crumb:hover{ text-decoration:underline; }

.view-toggle-btn{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:none; cursor:pointer;
  padding:6px; flex-shrink:0;
}
.view-toggle-track{
  width:32px; height:18px; border-radius:999px; background:var(--border);
  position:relative; flex-shrink:0; transition: background .15s ease;
}
.view-toggle-thumb{
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--muted); transition: transform .15s ease, background .15s ease;
}
.view-toggle-btn.on .view-toggle-track{ background: var(--accent-dim); }
.view-toggle-btn.on .view-toggle-thumb{ transform: translateX(14px); background: var(--accent); }

.view-eye-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background: var(--accent-dim); border:none; cursor:pointer;
  font-size:12px; line-height:1; vertical-align:middle;
}
.view-eye-icon:hover{ background: var(--accent); }

.sidebar-footer{ border-top:1px solid var(--border-soft); padding-top:14px; margin-top:10px; }
.sidebar-user{ display:flex; align-items:center; gap:10px; padding:0 8px 12px; }
.sidebar-avatar{
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent), #2A9D8F);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; color:#041713; font-size:14px;
}
.sidebar-user .name{ font-size:13px; font-weight:700; line-height:1.3; }
.sidebar-user .role{ font-size:11px; color:var(--muted); font-family:var(--mono); }
.sidebar .logout-btn{
  width:100%; background:transparent; border:1px solid var(--border); color:var(--muted);
  font-weight:600; font-size:12.5px; padding:9px 0; border-radius:8px; cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.sidebar .logout-btn:hover{ border-color: var(--danger); color:#FF8FA0; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  padding:22px 34px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:99999; background:var(--bg);
}
.topbar-logo, .topbar-logo-chip{ display:none; }

.topbar-row2{ display:flex; align-items:center; gap:10px; width:100%; }
.topbar h1{ font-size:19px; font-weight:700; }
.topbar p{ font-size:12.5px; color:var(--muted); margin-top:3px; font-family:var(--mono); }
.page{ padding:30px 34px 60px; max-width:840px; }
.page.wide{ max-width:none; }

.card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:18px; }
.card h3{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
.card .card-sub{ font-size:12.5px; color:var(--muted); margin-bottom:16px; }

.card-header-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; user-select:none; }
.card-header-toggle .card-sub{ margin-bottom:0 !important; }
.card-header-toggle .chevron{ font-size:16px; color:var(--muted); transition: transform .15s ease; flex-shrink:0; }
.card-header-toggle .chevron.open{ transform: rotate(180deg); }
.card-body-collapsible{ margin-top:18px; }

.empty-state{ text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px; border:1px dashed var(--border); border-radius:12px; }

.announcement{ border-bottom:1px solid var(--border-soft); padding:16px 0; }
.announcement:last-child{ border-bottom:none; }
.announcement-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.announcement-head h4{ font-size:14.5px; font-weight:700; }
.announcement-meta{ font-size:11px; color:var(--muted-2); font-family:var(--mono); margin-top:2px; }
.announcement-body{ font-size:13.5px; color:var(--muted); line-height:1.6; white-space:pre-wrap; }
.announcement-body a{ color:var(--accent); text-decoration:underline; word-break:break-all; }
.announcement-body a:hover{ color:#fff; }
.copy-chip{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:var(--bg); border:1px dashed var(--border); border-radius:6px;
  padding:1px 7px; font-family:var(--mono); font-size:12.5px; color:var(--text);
}
.copy-chip:hover{ border-color:var(--accent); }
.copy-chip .copy-icon{ font-size:12px; color:var(--muted); }
.editor-toolbar{ display:flex; gap:6px; margin-bottom:6px; }

.info-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color:var(--muted); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; }
.info-row .v{ font-weight:600; }

.user-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
.user-row:last-child{ border-bottom:none; }
.user-row .u-info{ min-width:180px; flex:1 1 180px; }
.user-row .u-info .name{ font-weight:700; font-size:13.5px; }
.user-row .u-info .sub{ font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.user-row .u-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.user-row select{ background: var(--bg); border:1px solid var(--border); color:var(--text); font-size:12.5px; padding:7px 9px; border-radius:6px; outline:none; }
.role-badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:5px; background:var(--accent-dim); color:var(--accent); }
.role-badge.user{ background:rgba(107,118,134,0.15); color:var(--muted); }

/* Admin -> Wunschanfragen (Seerr) */
.req-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.req-filter{ background:var(--bg); border:1px solid var(--border); color:var(--muted); font-size:12px; padding:5px 11px; border-radius:999px; cursor:pointer; }
.req-filter.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.req-row{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); text-decoration:none; }
.req-row:last-child{ border-bottom:none; }
/* Wunschanfragen: Poster + Text als Link, daneben Status und ⋮-Menü. */
.req-main{ display:flex; gap:12px; align-items:center; flex:1; min-width:0; color:inherit; text-decoration:none; }
.req-menu{ flex-shrink:0; }
.req-notes{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:12px; }
.req-note{ color:var(--accent); }
.req-note.admin{ color:var(--accent); }
.req-poster{ width:40px; height:60px; flex-shrink:0; border-radius:5px; object-fit:cover; background:var(--panel-2); }
.req-poster.square{ width:52px; height:52px; }
.req-info{ flex:1; min-width:0; }
.req-title{ font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.req-sub{ color:var(--muted); font-size:12px; margin-top:3px; }
.req-status{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:5px; white-space:nowrap; flex-shrink:0; }
.req-status.pending{ background:rgba(240,180,41,0.14); color:var(--accent-2); }
.req-status.approved{ background:var(--accent-dim); color:var(--accent); }
.req-status.partial{ background:rgba(62,207,142,0.14); color:var(--success); }
.status-badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:5px; }
.status-badge.enabled{ background:rgba(62,207,142,0.12); color:var(--success); }
.status-badge.disabled{ background:rgba(240,87,107,0.12); color:#FF8FA0; }

.file-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 10px; border-bottom:1px solid var(--border-soft);
  border-radius:8px; transition: background .12s ease;
}
.file-row:last-child{ border-bottom:none; }
@media (hover:hover) and (pointer:fine){
  .file-row:hover{ background: rgba(255,255,255,0.035); }
}
.file-row .u-info{ min-width:0; flex:1 1 auto; overflow:hidden; }
.file-row .u-info .name{ font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .u-info .sub{ font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.file-row .u-controls{ flex-shrink:0; }

.install-banner{
  display:flex; align-items:center; gap:12px;
  background: var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin: 0 34px 18px;
}
.install-banner .install-icon{
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent), #2A9D8F);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; color:#041713; font-size:15px;
}
.install-banner .install-text{ flex:1; min-width:0; }
.install-banner .install-text .t{ font-size:13.5px; font-weight:700; }
.install-banner .install-text .s{ font-size:12px; color:var(--muted); margin-top:2px; }
.install-banner .install-actions{ display:flex; gap:8px; flex-shrink:0; }
.install-banner .install-dismiss{
  background:transparent; border:none; color:var(--muted); font-size:18px; line-height:1;
  cursor:pointer; padding:4px 6px;
}
.install-banner .install-dismiss:hover{ color:var(--text); }

/* ---------------- mobiles Seitenmenü ---------------- */
.menu-toggle-btn{
  display:none;
  background:transparent; border:1px solid var(--border); color:var(--text);
  width:38px; height:38px; border-radius:8px; cursor:pointer;
  align-items:center; justify-content:center; flex-shrink:0;
}
.menu-toggle-btn:hover{ border-color: var(--accent); }
.menu-toggle-btn .bar{ display:block; width:16px; height:2px; background:currentColor; position:relative; }
.menu-toggle-btn .bar::before, .menu-toggle-btn .bar::after{
  content:''; position:absolute; left:0; width:16px; height:2px; background:currentColor;
}
.menu-toggle-btn .bar::before{ top:-5px; }
.menu-toggle-btn .bar::after{ top:5px; }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55);
  z-index:100040; opacity:0; transition:opacity .2s ease;
}
.sidebar-overlay.open{ display:block; opacity:1; }

@media (max-width: 900px){
  .app-shell{ flex-direction:column; align-items:stretch; }
  .menu-toggle-btn{ display:inline-flex; }
  .sidebar{
    position:fixed; left:0; width:270px; max-width:82vw;
    top: var(--mobile-drawer-top, 96px);
    min-height:0;
    height: calc(100vh - var(--mobile-drawer-top, 96px));
    height: calc(100dvh - var(--mobile-drawer-top, 96px));
    height: var(--mobile-drawer-height, calc(100dvh - var(--mobile-drawer-top, 96px)));
    z-index:100050; transform:translateX(-100%); transition:transform .22s ease;
    flex-direction:column; align-items:stretch; padding:16px 14px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y:auto; overflow-x:hidden; box-shadow: 8px 0 30px rgba(0,0,0,0.4);
    border-top:1px solid var(--border-soft);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar .brand-sidebar{ display:none; }
  .nav-list{ flex-direction:column; gap:2px; }
  .nav-item{ white-space:normal; }
  .sidebar-footer{ display:block; flex-shrink:0; }
  .sidebar-overlay{
    top: var(--mobile-drawer-top, 96px);
    height: calc(100vh - var(--mobile-drawer-top, 96px));
    height: calc(100dvh - var(--mobile-drawer-top, 96px));
    height: var(--mobile-drawer-height, calc(100dvh - var(--mobile-drawer-top, 96px)));
  }
  .topbar{
    flex-direction:column; align-items:stretch; gap:10px;
    padding:14px 16px; position:sticky; top:0; z-index:99999; background:var(--bg);
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .topbar-logo-chip{
    display:block; align-self:center; background:#0A0F1A; border-radius:10px; padding:8px 14px;
  }
  .topbar-logo{ display:block; height:44px; width:auto; }
  .page{ padding:20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .install-banner{ margin: 0 20px 16px; flex-wrap:wrap; }
}
@media (max-width: 860px){
  .shell{flex-direction:column;}
  .infra-panel{ min-height:auto; padding: 28px 24px; padding-top: max(28px, env(safe-area-inset-top)); }
  .infra-headline{margin-top:32px;}
  .infra-headline h1{font-size:26px;}
  .auth-panel{padding:36px 22px 60px;}
}
@media (max-width: 480px){
  .user-row .u-controls{ width:100%; }
  .user-row select, .user-row .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){ .loading-dot{animation:none;} }

/* ================= SEITEN-BAUKASTEN ================= */
.nav-draft{ margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); border:1px dashed var(--border); border-radius:4px; padding:1px 5px; }
.pb-editor{ border:1px solid var(--border); border-radius:12px; padding:18px; background:var(--panel-2); }
.pb-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 12px; }
.pb-admin-bar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:14px; }
.pb-button-row{ margin-bottom:16px; }
.pb-button-row .btn{ display:inline-block; text-decoration:none; }
.pb-image-frame{ position:relative; max-width:100%; min-width:10%; }
.pb-image-frame img{ display:block; width:100%; height:auto; border-radius:8px; }
/* Admin: Größe per Anfasser unten rechts ziehen (wie bei Textfeldern). */
.pb-resize-handle{ position:absolute; right:-9px; bottom:-9px; width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid var(--panel); cursor:nwse-resize; touch-action:none; box-shadow:0 2px 6px rgba(0,0,0,0.35); }
.pb-resize-label{ position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:5px; background:rgba(10,15,26,0.75); color:#E5EAF1; opacity:0; transition:opacity .12s ease; pointer-events:none; }
.pb-image-frame video{ display:block; width:100%; height:auto; border-radius:8px; background:#000; }
/* Beim Video sitzt der Anfasser rechts mittig, damit er nicht auf den Player-Knöpfen liegt. */
.pb-pdf{ display:flex; align-items:center; gap:16px; }
.pb-pdf h3{ margin-bottom:10px; }
.pb-pdf .btn{ display:inline-block; text-decoration:none; }
.pb-pdf-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:56px; flex-shrink:0; border-radius:6px; background:var(--danger); color:#fff; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; }
.pb-media-chip{ font-family:var(--mono); font-size:12.5px; padding:9px 11px; border:1px solid var(--accent); border-radius:8px; background:var(--accent-dim); color:var(--text); word-break:break-all; }
.pb-media-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pb-picker-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
.pb-picker-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); color:var(--text); cursor:pointer; text-align:center; }
.pb-picker-item:hover{ border-color:var(--accent); }
.pb-picker-item img, .pb-picker-item video{ width:100%; height:90px; object-fit:cover; border-radius:6px; background:#000; }
.pb-picker-item .pb-pdf-icon{ height:90px; width:70px; }
.pb-picker-name{ font-size:11.5px; word-break:break-all; color:var(--muted); }
/* Bildunterschriften (Bild, Video, Galerie): gut lesbar, mittig unter dem Medium. */
.pb-image figcaption, .pb-gallery-item figcaption{ margin-top:10px; font-size:14.5px; line-height:1.45; color:var(--text); text-align:center; }
.pb-divider{ border:none; border-top:1px solid var(--border); margin:8px 0 24px; }
.pb-yt{ position:relative; width:100%; aspect-ratio:16 / 9; border-radius:8px; overflow:hidden; background:#000; }
.pb-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Zeilen & Spalten eigener Seiten: Breiten über flex-grow (Prozentwerte),
   auf dem Handy untereinander. */
.pb-page{ max-width:1100px; }
.pb-row{ display:flex; gap:18px; align-items:stretch; justify-content:center; margin-bottom:18px; }
/* Breite je Baustein über flex-basis (Prozent der Zeile, zusammen höchstens
   100); flex-shrink zieht die Abstände dazwischen anteilig ab. */
.pb-col{ flex:0 1 50%; min-width:0; display:flex; flex-direction:column; }
.pb-col > .card{ flex:1; margin-bottom:0; }
.pb-col > .pb-button-row, .pb-col > .pb-divider{ margin-bottom:0; }
.pb-notice{ font-size:12.5px; color:var(--success); margin-right:auto; }

/* Galerie: seitwärts wischen, Pfeile am Rand (nur mit Maus). */
.pb-gallery-wrap{ position:relative; }
.pb-gallery-track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:thin; }
.pb-gallery-item{ flex:0 0 auto; scroll-snap-align:start; max-width:85%; }
.pb-gallery-item img, .pb-gallery-item video{ display:block; width:auto; max-width:100%; object-fit:cover; border-radius:8px; background:#000; }
.pb-gallery-yt{ position:relative; aspect-ratio:16 / 9; border-radius:8px; overflow:hidden; background:#000; }
.pb-gallery-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* In der Galerie so breit wie das Bild/Video darüber und dann umbrechen,
   statt das Element zu verbreitern (width:0 + min-width:100%). */
.pb-gallery-item figcaption{ width:0; min-width:100%; }
.pb-gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:20px; line-height:1; cursor:pointer; display:none; box-shadow:0 2px 8px rgba(0,0,0,0.35); }
.pb-gallery-nav.prev{ left:-10px; } .pb-gallery-nav.next{ right:-10px; }
/* Wunschseite: "Nichts Passendes dabei? Eigenen Wunsch eingeben". */
/* JDownloader: Prüfliste nach "Screenshot auslesen". */
.jd-review-row{ display:flex; gap:10px; align-items:flex-start; padding:10px; margin-bottom:8px; border:1px solid var(--border); border-left:3px solid var(--border); border-radius:8px; }
.jd-review-row.ok{ border-left-color:var(--accent); }
.jd-review-row.unsicher, .jd-review-row.edited{ border-left-color:var(--accent-2); }
.jd-review-row.format{ border-left-color:var(--danger, #e5484d); }
.jd-review-num{ font:600 13px var(--mono); color:var(--muted); min-width:22px; padding-top:2px; }
.jd-review-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.jd-review-crop{ display:block; max-width:100%; height:auto; border-radius:4px; background:#fff; image-rendering:auto; }
.jd-review-text{ font:13px/1.5 var(--mono); word-break:break-all; color:var(--muted); }
.jd-review-text mark{ background:var(--accent-2); color:#000; border-radius:2px; padding:0 1px; font-weight:700; }
.jd-review-input{ width:100%; font:13px/1.45 var(--mono); resize:vertical; word-break:break-all; }
.jd-review-status{ font-size:12.5px; color:var(--muted); }
.jd-review-row.format .jd-review-status{ color:var(--danger, #e5484d); }
.jd-review-row.unsicher .jd-review-status{ color:var(--accent-2); }
/* Admin -> Protokoll */
.admin-log-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.admin-log-row{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.admin-log-row:last-child{ border-bottom:none; }
.admin-log-icon{ width:20px; flex-shrink:0; text-align:center; }
.admin-log-row.error .admin-log-icon{ color:var(--danger); }
.admin-log-row.warn .admin-log-icon{ color:var(--accent-2); }
.admin-log-main{ flex:1; min-width:0; }
.admin-log-text{ font-size:13px; margin-top:2px; word-break:break-word; }
.admin-log-row.error .admin-log-text{ color:var(--danger); }
.dl-log-path{ color:var(--muted); }
#dl-log-user{ background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:13px; }
.settings-subhead{ margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--border-soft); font-size:14px; }
.admin-log-count{ font:600 11px var(--mono); color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:1px 7px; margin-left:6px; }
.admin-log-meta{ font:11.5px var(--mono); color:var(--muted); margin-top:3px; }
.jd-error{ color:var(--danger); word-break:break-word; }
/* Fenster "Hauptseite löschen": Auswahl, was mit den Unterseiten passiert. */
.pb-del-option{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin-bottom:8px; border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.pb-del-option.active{ border-color:var(--accent); background:var(--accent-dim); }
.pb-del-option input{ margin-top:3px; }
.pb-del-extra{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.pb-del-check{ display:flex; gap:8px; align-items:center; cursor:pointer; }
/* Baukasten-Liste: Unterseiten eingerückt unter ihrer Hauptseite. */
.user-row.pb-subpage{ padding-left:24px; }
.pb-sub-arrow{ color:var(--muted); margin-right:6px; }
/* Sidebar: eigene Seite mit Unterseiten (Aufklapp-Menü wie "Wünsche"). */
.nav-group{ display:flex; align-items:center; gap:2px; }
.nav-group > .nav-item{ flex:1; min-width:0; }
.nav-group-toggle{ background:none; border:none; color:var(--muted); cursor:pointer; padding:6px 10px; border-radius:8px; line-height:1; }
.nav-group-toggle:hover{ color:var(--text); background:var(--panel-2); }
.wp-custom-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); color:var(--muted); font-size:13.5px; }
/* Bilder in Galerie und Bild-Baustein lassen sich groß öffnen (lightbox.js). */
.pb-gallery-item > img, .pb-image-frame > img{ cursor:zoom-in; }
.pe-canvas .pb-gallery-item > img, .pe-canvas .pb-image-frame > img{ cursor:auto; }
@media (hover:hover) and (pointer:fine){ .pb-gallery-wrap:hover .pb-gallery-nav{ display:block; } }

/* ---------- Visueller Editor ---------- */
.pe-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; margin-bottom:18px; border:1px solid var(--accent); border-radius:12px; background:var(--accent-dim); }
.pe-toolbar-spacer{ flex:1; }
.pe-dirty{ font-size:12px; color:var(--accent-2); font-family:var(--mono); }
.pe-canvas{ position:relative; }
.pe-row{ gap:0; }
.pe-block{ position:relative; border:1px dashed var(--border); border-radius:12px; padding:6px; transition:opacity .12s ease, border-color .12s ease; }
.pe-block:hover{ border-color:var(--accent); }
.pe-block.pe-dragging{ opacity:.35; }
.pe-block-bar{ display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:12px; color:var(--muted); }
.pe-block-type{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-handle{ cursor:grab; touch-action:none; user-select:none; font-size:16px; line-height:1; padding:4px 6px; border-radius:6px; color:var(--text); background:var(--panel-2); border:1px solid var(--border); }
.pe-handle:active{ cursor:grabbing; }
.pe-icon-btn{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:3px 8px; font-size:12.5px; cursor:pointer; }
.pe-icon-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.pe-icon-btn.danger:hover:not(:disabled){ border-color:var(--danger); color:#FF8FA0; }
.pe-icon-btn:disabled{ opacity:.4; cursor:default; }
.pe-block-body{ display:flex; flex-direction:column; flex:1; }
.pe-block-body > .card{ flex:1; margin-bottom:0; }
.pe-block-body > .pb-button-row, .pe-block-body > .pb-divider{ margin:6px 0; }
.pe-empty-block{ color:var(--muted); font-size:13px; text-align:center; border-style:dashed; }
.pe-is-dragging iframe, .pe-is-dragging video{ pointer-events:none; }
.pe-divider{ flex:0 0 18px; position:relative; cursor:col-resize; touch-action:none; display:flex; align-items:center; justify-content:center; }
.pe-divider-grip{ width:4px; height:40px; border-radius:2px; background:var(--border); transition:background .12s ease; }
.pe-divider:hover .pe-divider-grip, .pe-divider.active .pe-divider-grip{ background:var(--accent); }
.pe-divider.active::after{ content:attr(data-label); position:absolute; top:-26px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:5px; background:var(--accent); color:#041713; }
.pe-indicator{ position:absolute; z-index:5; background:var(--accent); border-radius:2px; box-shadow:0 0 0 3px var(--accent-dim); pointer-events:none; }
.pe-indicator-label{ position:absolute; font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:5px; background:var(--accent); color:#041713; white-space:nowrap; }
.pe-indicator.horizontal .pe-indicator-label{ left:50%; top:-24px; transform:translateX(-50%); }
.pe-indicator.vertical .pe-indicator-label{ top:50%; left:8px; transform:translateY(-50%); }
.pe-guide{ position:absolute; z-index:4; width:0; border-left:1px dashed var(--accent); pointer-events:none; }
.pe-guide-label{ position:absolute; top:-18px; left:4px; font-family:var(--mono); font-size:10.5px; color:var(--accent); }
.pe-ghost{ position:fixed; left:0; top:0; z-index:100200; pointer-events:none; padding:6px 12px; border-radius:8px; background:var(--accent); color:#041713; font-size:12.5px; font-weight:600; box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.pe-add-end{ width:100%; padding:18px; border:2px dashed var(--border); border-radius:12px; background:transparent; color:var(--muted); font-size:13.5px; cursor:pointer; }
.pe-add-end:hover{ border-color:var(--accent); color:var(--accent); }

/* Fenster des Editors (überschreibt die feste Größe der Vorschau-Modals). */
.pe-modal{ height:auto; max-height:min(820px, 92vh); width:min(620px, 94vw); }
.pe-modal.wide{ width:min(860px, 94vw); }
.pe-modal-body{ padding:20px; overflow-y:auto; flex:1; min-height:0; }
.pe-modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border-soft); flex-shrink:0; }
.pe-picker-overlay{ z-index:100150; }
.pe-type-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.pe-type-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; text-align:left; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); color:var(--text); cursor:pointer; transition:border-color .12s ease, transform .12s ease; }
.pe-type-card:hover{ border-color:var(--accent); transform:translateY(-1px); }
.pe-type-icon{ font-size:22px; }
.pe-type-label{ font-weight:700; font-size:14px; }
.pe-type-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.pb-picker-item{ position:relative; }
.pb-picker-item.selected{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.pb-picker-check{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:2px solid var(--border); background:var(--panel); color:var(--accent); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.pb-picker-item.selected .pb-picker-check{ border-color:var(--accent); background:var(--accent); color:#041713; }
.pe-gallery-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.pe-gallery-entry{ display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--border); border-radius:8px; }
.pe-gallery-thumb{ width:64px; height:44px; flex-shrink:0; border-radius:6px; overflow:hidden; background:#000; }
.pe-gallery-thumb img, .pe-gallery-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-gallery-entry input{ flex:1; min-width:0; }
.pe-gallery-entry-actions{ display:flex; gap:4px; flex-shrink:0; }
.pe-gallery-url{ display:flex; gap:8px; margin-top:8px; }
.pe-gallery-url input{ flex:1; min-width:0; }

@media (max-width: 640px){
  .pb-row{ flex-direction:column; gap:18px; }
  .pb-col{ flex:none !important; width:100%; }
  .pe-divider{ display:none; }
  .pe-row{ gap:12px; }
  .pb-gallery-item{ max-width:88%; }
  /* Feste Höhe + schmaler Bildschirm hat breite Bilder (Screenshots) seitlich
     abgeschnitten -- am Handy stattdessen im Seitenverhältnis verkleinern,
     höchstens so hoch wie eingestellt (--gh). */
  .pb-gallery-track{ align-items:center; }
  .pb-gallery-item > img, .pb-gallery-item > video{ height:auto !important; width:auto; max-width:100%; max-height:var(--gh); object-fit:contain; }
}

/* Bild/Video ohne Text: Karte so breit wie das Medium, mittig in der Spalte. */
/* Bild/Video mit Text daneben bzw. darunter. */
.pb-media-with-text{ display:flex; align-items:center; gap:22px; }
.pb-media-with-text.text-left{ flex-direction:row-reverse; }
.pb-media-with-text.text-below{ flex-direction:column; align-items:stretch; }
.pb-media-with-text.text-below .pb-media-main{ align-self:center; }
.pb-media-main{ flex:none; min-width:0; max-width:100%; }
.pb-media-main .pb-image-frame{ width:100%; }
.pb-media-text{ flex:1; min-width:0; }
.pe-picker-upload{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.pe-upload-btn{ cursor:pointer; }
.pe-upload-progress{ flex:1; min-width:220px; }
.pe-upload-label{ font-size:12.5px; color:var(--muted); margin-bottom:6px; font-family:var(--mono); }
@media (max-width: 640px){
  .pb-media-with-text, .pb-media-with-text.text-left{ flex-direction:column; align-items:stretch; }
  .pb-media-main{ width:100% !important; }
}
.pe-upload-progress .bar-track{ height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
.pe-upload-progress .bar-fill{ height:100%; background:var(--accent); transition:width .15s ease; }

/* ---------- Formatierter Text (Baukasten) ---------- */
.rt-content{ font-size:13.5px; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.rt-content p, .rt-content div{ margin:0; }
.rt-content ul, .rt-content ol{ margin:6px 0 6px 22px; }
.rt-content b, .rt-content strong{ color:var(--text); font-weight:700; }
.rt-content a{ color:var(--accent); text-decoration:underline; }
.rt-content a:hover{ color:var(--text); }
.rt-size-s{ font-size:0.85em; }
.rt-size-l{ font-size:1.3em; line-height:1.4; }
.rt-size-xl{ font-size:1.75em; line-height:1.3; }
.rt-font-serif{ font-family:'Lora', Georgia, serif; }
.rt-font-mono{ font-family:var(--mono); }
.rt-font-hand{ font-family:'Caveat', 'Segoe Script', cursive; font-size:1.35em; }
.rt-wrap{ border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.rt-wrap:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.rt-toolbar{ display:flex; flex-wrap:wrap; gap:4px; padding:6px; border-bottom:1px solid var(--border-soft); }
.rt-btn{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 9px; font-size:12.5px; cursor:pointer; min-width:30px; }
.rt-btn:hover{ border-color:var(--accent); color:var(--accent); }
.rt-select{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 6px; font-size:12.5px; cursor:pointer; width:auto !important; }
.rt-editor{ min-height:120px; max-height:45vh; overflow-y:auto; padding:11px 13px; outline:none; color:var(--text); font-size:14px; }
.rt-wrap .hint{ padding:0 13px 8px; }
.field .rt-select{ width:auto; padding:4px 6px; font-size:12.5px; border-radius:6px; background:var(--panel-2); }

/* Ziehbare Karten/Medien im Editor: Anfasser unten rechts, Prozent oben rechts. */
.pe-sizable{ position:relative; outline:1px dashed transparent; outline-offset:3px; transition:outline-color .12s ease; }
.pe-sizable:hover, .pe-sizable.resizing{ outline-color:var(--accent); }
.pe-sizable > .pb-resize-label{ position:absolute; top:8px; right:8px; z-index:3; }
.pe-sizable:hover > .pb-resize-label, .pe-sizable.resizing > .pb-resize-label{ opacity:1; }
.pe-sizable > .pb-resize-handle{ z-index:3; }
/* Medium in einer Karte mit Text: beim Video Anfasser rechts mittig (nicht auf den Player-Knöpfen). */
.pb-video .pb-media-main > .pb-resize-handle{ bottom:auto; top:50%; transform:translateY(-50%); }
/* Gemeinsames Seitenverhältnis mehrerer Bilder/Videos einer Zeile. */
.pb-image-frame.pb-ratio{ overflow:hidden; border-radius:8px; background:#000; }
.pb-image-frame.pb-ratio > img, .pb-image-frame.pb-ratio > video{ width:100%; height:100%; object-fit:cover; }
.pb-image-frame.pb-ratio > .pb-yt{ aspect-ratio:auto; height:100%; }
.pe-row-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 6px; font-size:12px; color:var(--muted); }
.pe-row-tools select{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:3px 6px; font-size:12px; }
@media (max-width: 640px){
}

/* Bild/Video ohne Text: füllt Karte und Baustein; nebeneinander gleich hoch
   (die Karte mit der längsten Unterschrift bestimmt die Höhe), Medien oben bündig. */
.pb-media-fill .pb-image-frame{ width:100%; }
.pb-col > .pb-media-fill, .pe-block-body > .pb-media-fill{ flex:1; }
/* Anfasser am Baustein selbst (Ecke unten rechts) + Breitenanzeige. */
.pe-block-resize{ position:absolute; right:-8px; bottom:-8px; z-index:4; width:18px; height:18px; border-radius:5px; background:var(--accent); border:3px solid var(--bg); cursor:se-resize; touch-action:none; opacity:.55; transition:opacity .12s ease, transform .12s ease; }
.pe-block:hover .pe-block-resize, .pe-block.pe-resizing .pe-block-resize{ opacity:1; transform:scale(1.1); }
.pe-block-size{ position:absolute; right:8px; bottom:8px; z-index:4; font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:5px; background:var(--accent); color:#041713; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.pe-block:hover .pe-block-size, .pe-block.pe-resizing .pe-block-size{ opacity:1; }
.pe-block.pe-resizing{ border-color:var(--accent); border-style:solid; }
.pe-divider-off{ cursor:default; }
.pe-divider-off .pe-divider-grip{ display:none; }
.rt-btn.rt-icon{ display:inline-flex; align-items:center; justify-content:center; padding:3px 6px; }
.rt-sep{ width:1px; align-self:stretch; background:var(--border); margin:0 2px; }
.pe-heading-row{ display:flex; gap:8px; align-items:center; }
.pe-heading-row input{ flex:1; min-width:0; }
.pe-heading-align{ display:flex; gap:4px; flex-shrink:0; }
.rt-btn.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.pb-button-card .pb-button-row{ margin:14px 0 0; }
/* Platzhalter für eine eingebundene, inzwischen gelöschte Datei. */
.pb-missing{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:160px; height:100%; padding:16px; text-align:center; border:2px dashed var(--border); border-radius:8px; background:var(--panel-2); color:var(--muted); font-size:13.5px; }
.pb-missing-icon{ font-size:26px; color:var(--accent-2); }
.pb-missing small{ font-size:11.5px; color:var(--muted-2); word-break:break-all; }
.pb-image-frame.pb-ratio > .pb-missing{ min-height:0; }
.pb-gallery-missing .pb-missing{ min-height:0; }
.pb-media-chip.missing{ border-color:var(--accent-2); background:rgba(240,180,41,0.08); color:var(--accent-2); }
.pe-gallery-thumb-missing{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--accent-2); font-size:18px; background:var(--panel-2); }
.pe-publish{ background:var(--accent-2); color:#1a1300; }
.pe-published{ font-size:12px; color:var(--success); font-family:var(--mono); padding:0 4px; }
/* Schloss: nur für Admins sichtbar (Sidebar, Seitentitel). */
.admin-only-icon{ display:inline-flex; align-items:center; margin-left:6px; color:var(--accent-2); opacity:.85; vertical-align:middle; flex-shrink:0; }
.admin-only-icon svg{ display:block; }
.admin-only-icon.in-title{ margin-left:8px; }
.admin-only-icon.in-title svg{ width:15px; height:15px; }
/* Im Button dieselbe Farbe wie in der Sidebar. */
.btn .admin-only-icon{ margin-left:5px; }
/* Dateityp-Symbole in der Dateiliste (gleiche Breite wie Bild-/Video-Vorschauen). */
.file-type-thumb{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:34px; margin:0 3px; flex-shrink:0; border-radius:4px; color:#fff; font-family:var(--mono); font-weight:700; letter-spacing:.02em; line-height:1; overflow:hidden; }
.file-zip-thumb{ display:block; flex-shrink:0; }
/* PDF/Download: Symbol + Knopf ausrichten. */
.pb-pdf.align-center{ justify-content:center; }
.pb-pdf.align-right{ justify-content:flex-end; }
.pb-pdf.align-center .pb-pdf-info{ text-align:center; }
.pb-pdf.align-right .pb-pdf-info{ text-align:right; }
.pb-download-icon{ display:inline-flex; flex-shrink:0; transform:scale(1.5); transform-origin:center; margin:0 10px; }
.pb-download-name{ margin-top:6px; font-size:12px; color:var(--muted); font-family:var(--mono); word-break:break-all; }
.pb-picker-item .file-type-thumb, .pb-picker-item .file-zip-thumb{ transform:scale(2); margin:28px 0; }
/* Baustein "Externer Ordner" + Ordner-Auswahl im Editor. */
.pb-ext-list, .pe-folder-list{ display:flex; flex-direction:column; gap:6px; }
.pb-ext-row{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border:1px solid var(--border-soft); border-radius:10px; background:var(--panel-2); color:var(--text); text-align:left; font:inherit; }
.pb-ext-dir{ cursor:pointer; }
.pb-ext-dir:hover{ border-color:var(--accent); }
.pb-ext-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; flex-shrink:0; font-size:22px; }
.pb-ext-name{ flex:1; min-width:0; font-size:13.5px; overflow-wrap:anywhere; }
.pb-ext-name small{ display:block; margin-top:2px; font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.pb-ext-open{ color:var(--muted); font-size:18px; }
.pb-ext-row .btn{ flex-shrink:0; text-decoration:none; }
.pb-ext-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-bottom:10px; font-size:13px; color:var(--muted); }
.pb-ext-crumb{ background:none; border:none; color:var(--accent); cursor:pointer; font:inherit; padding:2px 4px; border-radius:4px; }
.pb-ext-crumb:hover{ background:var(--accent-dim); }
.pb-ext-loading{ display:flex; align-items:center; gap:10px; color:var(--muted); font-family:var(--mono); font-size:13px; }
/* "Herunterladen" steht immer im ⋮-Menü; der große Knopf daneben nur, wenn
   der Baustein breit genug ist (nicht auf dem Handy / in schmalen Spalten). */
.pb-ext{ container-type:inline-size; }
.pb-ext-menu-dl{ display:block; text-decoration:none; color:inherit; }
@container (max-width: 560px){
  .pb-ext-row .pb-ext-dl{ display:none; }
}
.pe-docker-hint{ margin-top:10px; padding:10px 12px; border:1px solid rgba(240,180,41,0.25); border-radius:8px; background:rgba(240,180,41,0.06); color:var(--muted); font-size:12.5px; line-height:1.55; }
.pe-docker-hint strong{ color:var(--text); }
.pe-docker-hint code{ font-family:var(--mono); font-size:11.5px; color:var(--text); }
.pe-docker-hint pre{ margin:6px 0; padding:6px 9px; border-radius:6px; background:var(--bg); color:var(--accent); font-family:var(--mono); font-size:12px; overflow-x:auto; }
.pe-docker-hint ol{ margin:8px 0 8px 18px; padding:0; }
.pe-docker-hint li{ margin-bottom:6px; }
.pe-docker-hint kbd{ display:inline-block; padding:0 5px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; background:var(--panel); color:var(--text); font-family:var(--mono); font-size:11px; }
.pe-copy-wrap{ position:relative; }
.pe-copy-wrap pre{ padding-right:96px; }
.pe-copy-btn{ position:absolute; top:6px; right:6px; padding:3px 8px; border:1px solid var(--border); border-radius:5px; background:var(--panel); color:var(--text); font-size:11px; cursor:pointer; }
.pe-copy-btn:hover{ border-color:var(--accent); color:var(--accent); }
.pe-copy-btn.done{ border-color:var(--success); color:var(--success); }
.pb-ext-open-btn{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:0; border:none; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pb-ext-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pb-ext-admin-note{ font-size:11.5px; color:var(--muted-2); }
.pb-ext-busy{ margin-bottom:10px; font-family:var(--mono); font-size:12px; color:var(--accent); }
.pb-ext-back{ margin-right:8px; }
.file-menu-note{ padding:8px 12px; max-width:240px; font-size:11.5px; line-height:1.4; color:var(--muted); border-top:1px solid var(--border-soft); white-space:normal; }
.pb-ext-menu-wrap{ position:relative; flex-shrink:0; }
.pb-ext-menu{ right:0; left:auto; }
/* Mehrfachauswahl (Dateiablage + Baustein "Externer Ordner"). */
/* Eigene Kästchen statt der weißen Browser-Standardoptik: dunkel mit
   türkisem Rahmen; angehakt türkis mit dunklem Haken. */
.file-select, .pb-ext-select, .files-select-all input{
  -webkit-appearance:none; appearance:none; width:17px; height:17px; flex-shrink:0; margin:0; cursor:pointer;
  border:1.5px solid var(--accent); border-radius:4px; background:var(--panel-2) center / 12px 12px no-repeat;
  transition:background-color .12s, box-shadow .12s;
}
.file-select:hover, .pb-ext-select:hover, .files-select-all input:hover{ box-shadow:0 0 0 3px var(--accent-dim); }
.file-select:focus-visible, .pb-ext-select:focus-visible, .files-select-all input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.file-select:checked, .pb-ext-select:checked, .files-select-all input:checked{
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%230A0F1A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.files-select-all input:indeterminate{
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%230A0F1A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.file-row.selected, .pb-ext-row.selected{ background:var(--accent-dim); }
.files-selection-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:36px; padding:6px 10px; margin-bottom:8px; border-radius:8px; }
.files-selection-bar.active{ background:var(--accent-dim); border:1px solid var(--accent); }
.files-select-all{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); cursor:pointer; }
.files-selection-bar.active .files-select-all{ color:var(--text); font-weight:600; }
.files-selection-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
/* Inhaltssuche (Baustein "Externer Ordner" + Admin -> Inhaltssuche). */
.cs-searchbar{ display:flex; gap:8px; margin-bottom:12px; }
.cs-searchbar input{ flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:8px 11px; border-radius:8px; font-size:14px; }
.cs-results{ display:flex; flex-direction:column; gap:8px; }
.cs-group{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:10px 0 2px; }
.cs-result{ display:flex; gap:12px; align-items:flex-start; padding:10px; border:1px solid var(--border-soft); border-radius:10px; background:var(--panel-2); }
.cs-poster{ width:52px; height:76px; flex-shrink:0; object-fit:cover; border-radius:6px; background:var(--border-soft); }
.cs-info{ flex:1; min-width:0; }
.cs-title{ font-weight:600; font-size:14px; overflow-wrap:anywhere; }
.cs-year{ color:var(--muted); font-weight:400; }
.cs-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cs-link{ display:inline-block; font-size:12.5px; margin-top:5px; color:var(--accent); }
.cs-action{ flex-shrink:0; align-self:center; }
.cs-requested{ font-size:12.5px; color:var(--accent); font-weight:600; white-space:nowrap; }
@media (max-width:560px){ .cs-result{ flex-wrap:wrap; } .cs-action{ width:100%; } .cs-action .btn{ width:100%; } }
.sa-row{ display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.sa-row-info{ flex:1; min-width:0; }
.sa-row-name{ font-weight:600; font-size:14px; }
.sa-row-url{ font-size:12px; color:var(--muted); font-family:var(--mono); overflow-wrap:anywhere; }
.sa-form{ border:1px solid var(--accent); border-radius:10px; padding:14px; margin:10px 0; background:var(--panel-2); }
.sa-inline{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-top:6px; font-weight:400; }
.sa-test{ margin:6px 0 14px; padding-top:12px; border-top:1px solid var(--border-soft); }
.sa-test > label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.sa-test .cs-result{ margin-top:8px; }
.sa-sample{ margin-top:10px; font-size:12.5px; }
.sa-sample pre{ max-height:260px; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:11.5px; white-space:pre-wrap; overflow-wrap:anywhere; }
.content-req-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.content-req-row .req-title a{ color:inherit; }
.pe-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:400; margin:6px 0; cursor:pointer; }
.field label.pe-check, .field label.sa-inline{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:normal; font-family:var(--sans); font-size:13.5px; color:var(--text); margin:6px 0; cursor:pointer; }
.field input.file-select{ width:17px; padding:0; border-radius:4px; border:1.5px solid var(--accent); background-color:var(--panel-2); }
.field input.file-select:checked{ background-color:var(--accent); }
.field label.sa-inline{ color:var(--muted); }
/* Wunschseite + Zuordnen-Oberfläche des Watchordners. */
.wp-api-chips{ margin-bottom:10px; }
.req-status.done{ background:rgba(62,207,142,0.12); color:var(--success); }
.req-status.declined{ background:rgba(240,87,107,0.12); color:var(--danger); }
.sa-nick{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--accent-dim); color:var(--accent); font-size:11.5px; font-weight:600; }
.fa-section{ margin-bottom:16px; padding:12px; border:1px solid var(--border-soft); border-radius:10px; background:var(--panel-2); }
.fa-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fa-head h4{ margin:0; font-size:14px; }
.fa-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--border-soft); }
.fa-entry{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; font-size:13.5px; }
.fa-path{ font-family:var(--mono); font-size:12.5px; overflow-wrap:anywhere; }
.fa-arrow{ color:var(--accent); }
.fa-entry small{ color:var(--muted); font-size:11.5px; }
.fa-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fa-actions select{ max-width:280px; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:8px; font-size:12.5px; }
/* Wunschseite: Suchfeld mit Lupe/Spinner und X, Trefferliste mit Platz für 5 Einträge. */
.wp-searchbar{ position:relative; }
.wp-searchbar input{ padding-left:36px; padding-right:36px; }
.wp-search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); display:inline-flex; font-size:14px; opacity:0.7; pointer-events:none; }
.wp-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:none; border-radius:50%; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; }
.wp-clear:hover{ background:var(--accent-dim); color:var(--accent); }
/* X nur, wenn etwas eingetippt ist (ohne Neuzeichnen beim Tippen). */
.wp-searchbar input:placeholder-shown ~ .wp-clear{ display:none; }
.wp-results{ max-height:540px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; }
/* Sidebar: Zahl offener Einträge (z. B. Admin -> Wunschanfragen). */
.nav-count{ display:inline-block; min-width:18px; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--border); color:var(--muted); font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.nav-count.changed{ background:var(--accent); color:#0A0F1A; }
.dir-size-busy{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
a.file-menu-item{ display:block; text-decoration:none; color:inherit; }
/* Baustein "Externer Ordner": Suchfeld und Treffer. */
.pb-ext-searchbar{ margin-bottom:10px; }
.pb-ext-search-dl{ flex-shrink:0; text-decoration:none; padding:6px 11px; }
/* Hinweis "als ZIP verfügbar" / "ZIP wird erstellt…" neben dem Ordnernamen. */
.zip-hint{ color:var(--accent); font-weight:600; }
.zip-hint.building{ display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-weight:400; vertical-align:middle; }
.pb-ext-searchrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.pb-ext-searchrow .pb-ext-searchbar{ flex:1; min-width:220px; margin-bottom:0; }
.pb-ext-search-sub{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; }
/* Seitenleiste unter Ordneransichten. */
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.pager-info{ font-size:13px; color:var(--text); }
.pager-info small{ color:var(--muted); font-family:var(--mono); font-size:11.5px; }
.cs-attribution{ font-size:11.5px; color:var(--muted); text-align:right; margin-top:4px; }
.cs-attribution a{ color:var(--accent); }
/* Auswahl beim Anfragen (z. B. Gerät). */
.wp-choices{ display:flex; flex-direction:column; gap:6px; }
.wp-choice{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:14px; }
.wp-choice:hover{ border-color:var(--accent); }
.wp-choice input{ accent-color:var(--accent); width:16px; height:16px; margin:0; }
.wp-choice.taken{ opacity:0.55; cursor:default; }
.wp-choice small{ margin-left:auto; color:var(--muted); font-size:11.5px; }
.req-choice, .cs-taken{ font-size:12.5px; color:var(--accent); font-weight:600; margin-top:3px; }
.wp-choose-body{ overflow-x:hidden; }
/* Admin -> JDownloader (public/js/jdownloader.js). */
.jd-row{ display:flex; gap:10px; flex-wrap:wrap; }
.jd-row .field{ flex:1 1 200px; min-width:0; }
.jd-more{ margin:4px 0 12px; }
.jd-more summary{ cursor:pointer; color:var(--muted); font-size:13px; padding:4px 0; }
.jd-jobs-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:20px 0 4px; }
.jd-jobs-head h4{ margin:0; font-size:14px; }
.jd-job{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.jd-job-main{ flex:1; min-width:0; }
.jd-job-title{ font-weight:600; font-size:14px; overflow-wrap:anywhere; }
.jd-job-count{ font-weight:400; color:var(--muted); font-size:12.5px; }
.jd-job-sub{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.jd-status{ flex-shrink:0; font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.jd-status.jd-added{ color:#7EE7B2; border-color:rgba(62,207,142,0.35); }
.jd-status.jd-waiting{ color:var(--accent); border-color:var(--accent); }
.jd-section{ margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--border-soft); }
.jd-settings{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.jd-settings code, .jd-steps code{ font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }
.jd-steps{ font-size:13px; padding-left:20px; margin:8px 0 12px; }
.jd-steps li{ margin-bottom:6px; }
.jd-script{ margin-bottom:12px; }
.jd-script-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; font-size:13px; }
.jd-script-head .btn{ margin-left:auto; }
.jd-script pre{ background:var(--bg); border:1px solid var(--border-soft); border-radius:8px; padding:10px; font-size:11.5px; max-height:260px; overflow:auto; white-space:pre; }
@media (max-width: 600px){ .jd-job{ flex-wrap:wrap; } }
.jd-unclear{ border:1px solid rgba(240,180,60,0.45); background:rgba(240,180,60,0.07); border-radius:10px; padding:12px 14px; margin-bottom:16px; }
.jd-unclear h4{ margin:0 0 4px; font-size:14px; }
.jd-unclear .jd-job:last-child{ border-bottom:none; }
/* Admin -> Einsortieren (public/js/sortIn.js). */
.si-tabs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.si-tab{ background:var(--panel-2); border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer; }
.si-tab.active{ border-color:var(--accent); color:var(--text); }
.si-count{ display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px; background:var(--accent); color:#0A0F1A; font-size:11px; font-weight:700; text-align:center; }
.si-result{ display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; padding:8px; margin-bottom:6px; border:1px solid var(--border-soft); border-radius:10px; background:var(--panel); color:var(--text); cursor:pointer; font:inherit; }
.si-result:hover{ border-color:var(--accent); }
.si-result .cs-sub{ display:-webkit-box; }
.si-fields{ display:flex; gap:12px; align-items:flex-start; margin-top:12px; }
.si-fields-grid{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:0 10px; }
.si-fields-grid .field:has(textarea){ grid-column:1 / -1; }
.si-preview-img{ width:72px; height:104px; }
.si-target{ font-size:13px; margin:4px 0 10px; overflow-wrap:anywhere; }
.si-target code{ font-family:var(--mono); font-size:12px; }
@media (max-width: 600px){ .si-fields{ flex-direction:column; } }
.si-fields{ scroll-margin-top:110px; }
/* Info-Knopf im Baustein "Externer Ordner". */
.ext-info-btn{ font-size:15px; line-height:1; }
.ext-info-btn.ext-info-missing{ opacity:.45; }
.ext-info-modal{ max-width:640px; }
.ext-info{ display:flex; gap:16px; align-items:flex-start; }
.ext-info-cover{ width:180px; max-width:40%; border-radius:8px; object-fit:cover; background:var(--panel-2); }
.ext-info-main{ flex:1; min-width:0; }
.ext-info-main h3{ margin:0 0 10px; font-size:18px; }
.ext-info-row{ font-size:13px; margin-bottom:4px; overflow-wrap:anywhere; }
.ext-info-row span{ display:inline-block; min-width:92px; color:var(--muted); }
.ext-info-desc{ margin-top:14px; font-size:13.5px; line-height:1.55; white-space:pre-wrap; max-height:40vh; overflow:auto; }
@media (max-width: 600px){ .ext-info{ flex-direction:column; } .ext-info-cover{ max-width:100%; width:100%; } }
.ext-info-sub{ color:var(--muted); font-size:13.5px; margin:-6px 0 10px; }
.jd-jobs-toggle{ display:flex; align-items:center; gap:8px; background:none; border:none; padding:0; color:var(--text); cursor:pointer; font:inherit; text-align:left; }
.jd-jobs-toggle .chevron{ display:inline-block; font-size:16px; transition:transform .15s ease; color:var(--muted); }
.jd-jobs-toggle .chevron.open{ transform:rotate(180deg); }
#ext-info-delete{ margin-right:auto; }
.jd-dlc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.jd-dlc .btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.jd-dlc .btn.disabled{ opacity:.6; pointer-events:none; }
/* Ordner-Auswahl für Verschieben/Kopieren (public/js/folderPicker.js). */
.fp{ border:1px solid var(--border-soft); border-radius:10px; padding:10px; background:var(--panel-2); }
.fp-crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:13px; margin-bottom:8px; }
.fp-crumb{ background:none; border:none; padding:2px 4px; color:var(--accent); cursor:pointer; font:inherit; border-radius:4px; }
.fp-crumb:hover{ background:var(--panel); }
.fp-sep{ color:var(--muted); }
.fp-up{ background:none; border:none; color:var(--muted); cursor:pointer; font:inherit; font-size:13px; padding:4px 2px; margin-bottom:4px; }
.fp-up:hover{ color:var(--text); }
.fp-list{ max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.fp-folder{ display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; background:none; border:none; border-radius:6px; padding:8px; color:var(--text); cursor:pointer; font:inherit; font-size:14px; }
.fp-folder:hover{ background:var(--panel); }
.fp-open{ color:var(--muted); }
.fp-empty{ padding:8px; }
.fp-target{ margin-top:8px; padding-top:8px; border-top:1px solid var(--border-soft); font-size:13px; overflow-wrap:anywhere; }
.fp-target.fp-invalid{ color:var(--muted); }