@keyframes vt-lade-drehung { to { transform:rotate(360deg); } }
/* HDW Kachel-Studio — CI: Dark #111217, Off-White #F5F2EA, Gold #C49A44 / #E1C870, Montserrat */
@font-face { font-family: Montserrat; src: url(fonts/Montserrat-Regular.ttf); font-weight: 400; }
@font-face { font-family: Montserrat; src: url(fonts/Montserrat-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: Montserrat; src: url(fonts/Montserrat-Bold.ttf); font-weight: 700; }

:root {
  --dark: #111217; --panel: #191b22; --panel2: #20232c;
  --off: #F5F2EA; --gold: #C49A44; --gold2: #E1C870;
  --brand-text: #1b1d23; --brand-font: Montserrat;
  --line: #2a2d38; --muted: #9a9dab;
  /* Groessenskala (Etappe B des Bauplans, 05.09.2026). Gross ist nur, was die
     eine Hauptsache ist. Gilt im Reel-Modus; der Beitragsmodus bleibt, wie er ist. */
  --k-primaer: 40px;   /* genau ein Hauptknopf je Ansicht */
  --k-neben: 30px;     /* Nebenknopf mit Text */
  --k-symbol: 28px;    /* Symbolknopf, Text nur als Tooltip */
  --k-schalter: 18px;  /* Umschalter */
  --k-clip: 56px;      /* Timeline-Clip */
  --s-knopf: 12px;     /* Schrift auf Knoepfen */
  --s-label: 10.5px;   /* Beschriftung ueber Feldern, Versalien */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body.modal-offen { overflow: hidden; }
body { background: var(--dark); color: var(--off); font-family: var(--brand-font), Montserrat, sans-serif; }

/* ---------- Login ---------- */
.login-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(80% 60% at 50% 20%, #1a1d26 0%, var(--dark) 70%); z-index: 50; }
.login-card { width: min(360px, 90vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.login-logo { width: 190px; height: auto; margin: 0 auto 6px; border-radius: 9px; }
.login-card h1 { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.login-label { align-self: flex-start; color: var(--off); font-size: 12px; font-weight: 600; margin: 1px 2px -5px; }
.login-card input { background: var(--panel2); border: 1px solid var(--line); color: var(--off);
  border-radius: 8px; padding: 11px 12px; font: inherit; font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--gold); }
.login-card button { margin-top: 6px; background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #16130a; font-weight: 700; border: 0; border-radius: 8px; padding: 12px; font: inherit; cursor: pointer; }
.login-error { color: #e07a6a; font-size: 13px; }
.login-kicker { color: var(--gold2); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.login-link { margin-top: 0 !important; padding: 4px !important; background: transparent !important; color: var(--gold2) !important; font-size: 11px !important; font-weight: 600 !important; }
.login-legacy-link { color: var(--muted) !important; }
.login-hinweis { color: #9fd6a1; font-size: 13px; line-height: 1.4; }
.customer-select-card { width: min(500px, 92vw); }
.customer-select-choices { display: grid; gap: 9px; text-align: left; }
.customer-select-choice { margin-top: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 14px !important; background: var(--panel2) !important; border: 1px solid var(--line) !important; color: var(--off) !important; text-align: left; }
.customer-select-choice:hover { border-color: var(--gold) !important; background: rgba(196,154,68,.12) !important; }
.customer-select-choice strong, .customer-select-choice small { display: block; }
.customer-select-choice small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.customer-select-arrow { flex: 0 0 auto; color: var(--gold2); font-size: 21px; }

/* ---------- Gabelung (Hub) ---------- */
.hub-overlay { position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: radial-gradient(80% 60% at 50% 0%, #1a1d26 0%, var(--dark) 72%);
  display: flex; align-items: flex-start; justify-content: center; padding: 20px 20px 38px; }
.hub-inner { position: relative; width: min(1120px, 100%); text-align: left; }
.hub-logo { display: block; width: 190px; max-width: 100%; height: auto; max-height: 54px; object-fit: contain; object-position: left center; margin: 0 0 8px; border-radius: 9px; }
.hub-brand-name { display: block; color: var(--muted); font-size: 11px; margin: -2px 0 8px; }
.hub-einstieg { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 0 0 13px; }
.hub-einstieg-text { min-width: 0; }
.hub-kicker { display: block; color: var(--gold2); font-size: 10px; font-weight: 700; letter-spacing: .18em; margin-bottom: 8px; }
.hub-einstieg h1 { font-size: clamp(17px, 2.1vw, 22px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.hub-einstieg p { color: var(--muted); font-size: 11px; line-height: 1.35; max-width: 62ch; }
.hub-settings { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 214px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(32,35,44,.8); color: var(--off); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.hub-settings:hover { border-color: var(--gold); background: rgba(196,154,68,.12); transform: translateY(-1px); }
.hub-settings:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
.hub-kopf-aktionen { display: flex; align-items: stretch; gap: 8px; flex: 0 0 auto; }
.hub-admin { min-width: 198px; }
.hub-logout { position: absolute; top: 0; right: 0; min-width: 148px; }
.hub-settings-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(196,154,68,.18); color: var(--gold2); font-size: 20px; }
.hub-settings strong { display: block; font-size: 12px; }
.hub-settings small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.hub-karten { display: flex; flex-direction: column; gap: 13px; }
.hub-gruppe { background: rgba(25,27,34,.72); border: 1px solid rgba(42,45,56,.9); border-radius: 16px; padding: 13px; }
.hub-gruppe-kopf { display: flex; align-items: flex-start; gap: 12px; }
.hub-gruppe-nr { flex: 0 0 auto; color: var(--gold2); font-size: 12px; font-weight: 700; letter-spacing: .08em; padding-top: 2px; }
.hub-gruppe-kicker { display: block; color: var(--gold2); font-size: 10px; font-weight: 700; letter-spacing: .16em; margin-bottom: 4px; }
.hub-gruppe h2 { font-size: 15px; line-height: 1.2; font-weight: 700; }
.hub-gruppe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px; margin-top: 8px; }
/* 268 statt 226: Die Karte ist jetzt eine Zeile mit Bild links, sie
   braucht Breite statt Hoehe. Auf einem 1440er-Fenster stehen damit
   weiterhin drei nebeneinander — nur sind sie ein Drittel so hoch. */
.hub-gruppe-grid-drei { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.hub-karte { min-width: 0; padding: 0; overflow: hidden; position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  color: var(--off); font: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.hub-karte:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.hub-karte:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
a.hub-karte { text-decoration: none; }
.hub-karte-bild { display: block; width: 100%; aspect-ratio: 16 / 10; min-height: 88px; background-color: #14161c; background-image: linear-gradient(180deg, rgba(17,18,23,0) 55%, rgba(17,18,23,.78) 100%), var(--hub-image); background-position: center; background-size: cover; transition: transform .35s ease; }
.hub-karte:hover .hub-karte-bild { transform: scale(1.025); }
.hub-custom-bild { background-image: linear-gradient(180deg, rgba(17,18,23,0) 55%, rgba(17,18,23,.78) 100%), radial-gradient(120% 90% at 20% 10%, rgba(196,154,68,.28) 0%, rgba(20,22,28,1) 62%); }
.hub-karte-inhalt { min-height: 88px; padding: 10px 12px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.hub-karte-label { color: var(--gold2); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hub-titel { font-size: 14px; line-height: 1.2; font-weight: 700; }
.hub-sub { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
@media (max-width: 760px) {
  .hub-overlay { padding: 24px 14px 42px; }
  .hub-logo { width: 190px; max-width: calc(100% - 158px); height: auto; max-height: 54px; margin-bottom: 9px; }
  .hub-einstieg { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .hub-settings { min-width: 0; width: 100%; }
  .hub-kopf-aktionen { flex-direction: column; }
  .hub-logout { position: static; }
  .hub-gruppe { padding: 14px; border-radius: 18px; }
  .hub-gruppe-grid, .hub-gruppe-grid-drei { grid-template-columns: 1fr; }
  .hub-karte-bild { aspect-ratio: 16 / 7; }
  .hub-karte-inhalt { min-height: 0; }
}

/* ---------- Kundenverwaltung ---------- */
.admin-overlay { position: fixed; inset: 0; z-index: 86; overflow-y: auto; background: var(--dark); }
.admin-inner { width: min(1120px, 94vw); margin: 0 auto; padding: 22px 0 48px; display: flex; flex-direction: column; gap: 18px; }
.admin-intro, .admin-list-section { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 18px; }
.admin-intro { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 22px; align-items: start; }
.admin-intro h3, .admin-list-head h3 { font-size: 18px; }
.admin-intro p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.admin-section-hint { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.admin-customer-overview { border-color: rgba(196,154,68,.48); background: linear-gradient(135deg, rgba(196,154,68,.09), rgba(25,27,34,.96) 34%); }
.admin-customer-overview .admin-list-head { align-items: flex-start; }
.admin-customer-users { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.admin-customer-users-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.admin-customer-user-list { display: grid; gap: 5px; margin-top: 7px; }
.admin-customer-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; background: rgba(17,18,23,.45); border: 1px solid rgba(42,45,56,.8); border-radius: 8px; }
.admin-customer-user-identity { min-width: 0; }
.admin-customer-user-identity strong, .admin-customer-user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-customer-user-identity strong { font-size: 11px; }
.admin-customer-user-identity small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.admin-customer-users-empty { margin-top: 7px; color: var(--muted); font-size: 10px; font-style: italic; }
.admin-remove-btn { color: #e0a099; border-color: rgba(224,122,106,.35); font-size: 10px; padding: 7px 9px; }
.admin-invite-form { display: grid; gap: 9px; }
.admin-invite-form input, .admin-row-actions select, .admin-project-access select { background: var(--panel2); border: 1px solid var(--line); color: var(--off); border-radius: 8px; padding: 10px; font: inherit; font-size: 12px; }
.admin-invite-form input:focus, .admin-row-actions select:focus, .admin-project-access select:focus { outline: none; border-color: var(--gold); }
.admin-field-label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.admin-field-label select { background: var(--panel2); border: 1px solid var(--line); color: var(--off); border-radius: 8px; padding: 10px; font: inherit; font-size: 12px; }
.admin-module-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.admin-module-choice { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(32,35,44,.7); cursor: pointer; }
.admin-module-choice:has(input:checked) { border-color: var(--gold); background: rgba(196,154,68,.1); }
.admin-module-choice input { margin-top: 3px; accent-color: var(--gold); }
.admin-module-choice strong { display: block; font-size: 11px; }
.admin-module-choice small { display: block; color: var(--muted); font-size: 9.5px; line-height: 1.3; margin-top: 2px; }
.admin-status { color: #9fd6a1 !important; overflow-wrap: anywhere; }
.admin-status.error { color: #e07a6a !important; }
.admin-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-active-area { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 15px 18px; background: rgba(196,154,68,.08); border: 1px solid rgba(196,154,68,.45); border-radius: 15px; }
.admin-active-area h3 { margin-top: 4px; font-size: 16px; }
.admin-active-area p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.admin-active-area-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 430px; }
.admin-active-area-actions select { min-width: 0; flex: 1; background: var(--panel2); border: 1px solid var(--line); color: var(--off); border-radius: 8px; padding: 10px; font: inherit; font-size: 12px; }
.admin-tool-card { display: grid; gap: 9px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.admin-tool-card h3 { margin-top: 4px; font-size: 16px; }
.admin-tool-card p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.admin-tool-card input { background: var(--panel2); border: 1px solid var(--line); color: var(--off); border-radius: 8px; padding: 10px; font: inherit; font-size: 12px; }
.admin-tool-card input:focus { outline: none; border-color: var(--gold); }
.admin-accounts { display: grid; gap: 10px; }
.admin-account-row { border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: rgba(32,35,44,.58); }
.admin-account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.admin-account-head strong { display: block; font-size: 13px; }
.admin-account-head small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.admin-badge { color: var(--gold2); border: 1px solid var(--gold); border-radius: 10px; padding: 3px 6px; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.admin-row-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.admin-row-modules .admin-module-choice { padding: 6px; }
.admin-row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.admin-project-access { display: grid; gap: 6px; margin-top: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(16,17,22,.35); }
.admin-project-hint { color: var(--muted); font-size: 10px; line-height: 1.35; }
.admin-project-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 280px; overflow-y: auto; padding-right: 2px; }
.admin-project-choice { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 42px; padding: 9px 10px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; color: var(--off); font-size: 12px; cursor: pointer; }
.admin-project-choice:has(input:checked) { border-color: var(--gold); background: rgba(196,154,68,.1); }
.admin-account-form .admin-project-choice input[type="checkbox"] { flex: 0 0 18px; width: 18px; min-width: 18px; max-width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--gold); }
.admin-project-choice span { display: block; flex: 1 1 0; width: auto; min-width: 0; overflow-wrap: break-word; word-break: normal; line-height: 1.35; }
.admin-inline-status { flex: 1 1 100%; color: var(--muted); font-size: 10px; line-height: 1.35; }
.admin-inline-status.success { color: #9fd6a1; }
.admin-inline-status.error { color: #e07a6a; }
.admin-sicherheitshinweis { color: var(--muted); font-size: 11px; line-height: 1.5; border-left: 3px solid var(--gold); padding: 9px 12px; background: rgba(196,154,68,.08); }
@media (max-width: 760px) {
  .admin-intro { grid-template-columns: 1fr; }
  .admin-module-choices, .admin-row-modules, .admin-project-choices { grid-template-columns: 1fr; }
  .admin-tools-grid { grid-template-columns: 1fr; }
  .admin-active-area { align-items: stretch; flex-direction: column; }
  .admin-active-area-actions { flex-basis: auto; }
  .admin-customer-overview .admin-list-head { flex-direction: column; }
  .admin-customer-user { align-items: flex-start; flex-direction: column; }
}

/* ---------- Kundenverwaltung: Kunde → Mitarbeiter → Rechte ---------- */
.admin-inner-v2 { width: min(1320px, 94vw); }
.admin-head-actions { display: flex; align-items: center; gap: 9px; }
.admin-global-status { margin: 0; padding: 10px 12px; border: 1px solid rgba(104,190,122,.35); border-radius: 10px; background: rgba(72,132,83,.12); }
.admin-global-status.error { border-color: rgba(224,122,106,.42); background: rgba(172,74,62,.11); }
.admin-layout { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); align-items: start; gap: 16px; }
.admin-side, .admin-detail { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.admin-side { position: sticky; top: 16px; padding: 14px; }
.admin-side-head { padding: 3px 4px 13px; border-bottom: 1px solid var(--line); }
.admin-side-head h3 { margin-top: 4px; font-size: 17px; }
.admin-side-head p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.admin-new-customer { width: 100%; margin: 12px 0 8px; }
.admin-customer-nav { display: grid; gap: 5px; }
.admin-customer-nav-item { width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 10px; background: transparent; color: var(--off); text-align: left; cursor: pointer; font: inherit; }
.admin-customer-nav-item:hover { background: rgba(255,255,255,.035); border-color: var(--line); }
.admin-customer-nav-item.is-active { border-color: var(--gold); background: rgba(196,154,68,.12); }
.admin-customer-nav-item strong, .admin-customer-nav-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.admin-customer-nav-item strong { font-size: 12px; }
.admin-customer-nav-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.admin-matrix-nav { margin-bottom: 8px; border-color: rgba(196,154,68,.35); background: linear-gradient(135deg, rgba(196,154,68,.10), rgba(32,35,44,.2)); }
.admin-matrix-nav + .admin-customer-nav-item { padding-top: 13px; border-top-color: var(--line); }
.admin-internal-nav { margin-top: 8px; padding-top: 13px; border-top-color: var(--line); }
.admin-detail { display: grid; gap: 14px; padding: 16px; }
.admin-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 3px 2px 15px; border-bottom: 1px solid var(--line); }
.admin-detail-header h3 { margin-top: 4px; font-size: 24px; }
.admin-detail-header p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.admin-detail-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.admin-detail-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(32,35,44,.58); }
.admin-detail-card h3 { font-size: 16px; }
.admin-detail-card p { color: var(--muted); font-size: 11px; line-height: 1.45; }
.admin-detail-section-head { display: flex; justify-content: space-between; gap: 12px; }
.admin-detail-section-head p { margin-top: 4px; }
.admin-team-card { background: linear-gradient(135deg, rgba(196,154,68,.075), rgba(32,35,44,.58) 42%); }
.admin-person-list { display: grid; gap: 6px; }
.admin-person-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(17,18,23,.42); color: var(--off); text-align: left; cursor: pointer; font: inherit; }
.admin-person-button:hover { border-color: rgba(196,154,68,.5); }
.admin-person-button.is-active { border-color: var(--gold); background: rgba(196,154,68,.12); }
.admin-person-identity { min-width: 0; }
.admin-person-identity strong, .admin-person-identity small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.admin-person-identity strong { font-size: 12px; }
.admin-person-identity small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.admin-person-status { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.admin-person-status.status-active { color: #9fd6a1; border-color: rgba(104,190,122,.4); }
.admin-person-status.status-invited { color: var(--gold2); border-color: rgba(196,154,68,.48); }
.admin-person-status.status-disabled { color: #e0a099; border-color: rgba(224,122,106,.42); }
.admin-account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-account-form input, .admin-account-form select, .admin-invite-form input { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--off); border-radius: 8px; padding: 10px; font: inherit; font-size: 12px; }
.admin-account-form input:focus, .admin-account-form select:focus, .admin-invite-form input:focus { outline: none; border-color: var(--gold); }
.admin-account-form > .admin-row-modules, .admin-account-form > .admin-project-access, .admin-account-form > .admin-row-actions, .admin-account-form > .admin-personal-hint { grid-column: 1 / -1; }
.admin-account-status-control { display: grid; gap: 6px; min-width: 0; align-content: start; }
.admin-resend-invite-btn { justify-self: start; }
.admin-account-status-control .admin-inline-status { margin: 0; }
.admin-personal-hint { margin: 0; padding: 9px 10px; border-left: 3px solid var(--gold); background: rgba(196,154,68,.08); }
.admin-select-hint { margin: 0; padding: 11px; border: 1px dashed var(--line); border-radius: 9px; text-align: center; }
.admin-invite-card { border-color: rgba(196,154,68,.5); }
.admin-internal-account { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(17,18,23,.4); }
.admin-internal-account strong { font-size: 12px; }
.admin-internal-account small { color: var(--muted); font-size: 10px; }
.admin-matrix-card { gap: 14px; }
.admin-matrix-scroll { width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 5px; scrollbar-color: var(--gold) var(--panel2); }
.admin-matrix-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 6px; }
.admin-matrix-table th, .admin-matrix-table td { min-width: 132px; height: 58px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(17,18,23,.42); text-align: center; vertical-align: middle; }
.admin-matrix-table thead th { height: auto; color: var(--muted); font-size: 10px; line-height: 1.25; white-space: normal; }
.admin-matrix-table th:first-child { position: sticky; left: 0; z-index: 2; min-width: 220px; text-align: left; background: var(--panel2); box-shadow: 8px 0 14px rgba(12,13,17,.22); }
.admin-matrix-table thead th:first-child { z-index: 3; }
.admin-matrix-person { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 8px; }
.admin-matrix-person strong, .admin-matrix-person small { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.admin-matrix-person strong { font-size: 12px; }
.admin-matrix-person small { grid-column: 1; color: var(--muted); font-size: 9px; }
.admin-matrix-person .admin-person-status { grid-column: 2; grid-row: 1 / span 2; }
.admin-matrix-check { position: relative; display: inline-grid; width: 38px; height: 38px; place-items: center; cursor: pointer; }
.admin-matrix-check input { position: absolute; opacity: 0; pointer-events: none; }
.admin-matrix-check span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: transparent; background: var(--panel2); font-size: 18px; font-weight: 800; transition: .15s ease; }
.admin-matrix-check:hover span, .admin-matrix-check input:focus-visible + span { border-color: var(--gold); }
.admin-matrix-check input:checked + span { border-color: var(--gold); color: #17140e; background: var(--gold2); box-shadow: 0 0 0 2px rgba(196,154,68,.12); }
.admin-matrix-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.admin-matrix-actions .admin-inline-status { margin: 0; }
.admin-media-folders-card { border-color: rgba(196,154,68,.45); background: linear-gradient(145deg, rgba(196,154,68,.08), rgba(32,35,44,.58) 32%); }
.admin-media-folder-create { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.admin-media-folder-create input { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); color: var(--off); padding: 10px 11px; font: inherit; font-size: 12px; }
.admin-media-folder-create input:focus { outline: none; border-color: var(--gold); }
.admin-media-explorer { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.5fr); min-height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(12,13,17,.35); }
.admin-media-folder-list { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 8px; border-right: 1px solid var(--line); max-height: 480px; overflow-y: auto; }
.admin-media-folder-button { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--off); text-align: left; cursor: pointer; font: inherit; }
.admin-media-folder-button:hover { border-color: var(--line); background: rgba(255,255,255,.035); }
.admin-media-folder-button.is-active { border-color: var(--gold); background: rgba(196,154,68,.13); }
.admin-media-folder-button.is-dragging, .admin-media-entry.is-dragging { opacity: .42; }
.admin-media-folder-button.is-drop-target, .admin-media-entry.is-drop-target, .admin-media-root-target.is-drop-target { border-color: #78d69b; background: rgba(69,178,113,.18); box-shadow: inset 0 0 0 1px rgba(120,214,155,.35); }
.admin-media-folder-icon { flex: 0 0 auto; font-size: 19px; }
.admin-media-folder-label { min-width: 0; }
.admin-media-folder-label strong, .admin-media-folder-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-media-folder-label strong { font-size: 11px; }
.admin-media-folder-label small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.admin-media-folder-content { min-width: 0; padding: 12px; }
.admin-media-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.admin-media-navigation .ghost-btn { padding: 6px 8px; font-size: 9.5px; }
.admin-media-root-target { border-style: dashed !important; }
.admin-media-path { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.admin-media-content-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.admin-media-content-head h4 { overflow-wrap: anywhere; font-size: 14px; }
.admin-media-content-head p { margin-top: 4px; }
.admin-media-folder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.admin-media-folder-actions .ghost-btn { padding: 7px 8px; font-size: 9.5px; }
.admin-media-entry-list { display: grid; gap: 3px; margin-top: 9px; max-height: 360px; overflow-y: auto; }
.admin-media-entry { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--off); font: inherit; font-size: 10.5px; text-align: left; }
.admin-media-entry:nth-child(odd) { background: rgba(255,255,255,.025); }
.admin-media-entry-folder { cursor: pointer; }
.admin-media-entry-folder:hover { border-color: var(--line); background: rgba(255,255,255,.055); }
.admin-media-entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-media-entry-size { color: var(--muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.admin-media-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 10px; line-height: 1.4; }

@media (max-width: 820px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { position: static; }
  .admin-customer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail-header { flex-direction: column; }
  .admin-detail-header-actions { justify-content: flex-start; }
  .admin-media-explorer { grid-template-columns: 1fr; }
  .admin-media-folder-list { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-media-content-head { flex-direction: column; }
  .admin-media-folder-actions { justify-content: flex-start; }
}
@media (max-width: 540px) {
  .admin-inner-v2 { width: min(100% - 22px, 1320px); }
  .admin-head-actions { gap: 5px; }
  .admin-head-actions .ghost-btn { padding: 8px; font-size: 10px; }
  .admin-customer-nav, .admin-account-form { grid-template-columns: 1fr; }
  .admin-detail { padding: 12px; }
  .admin-detail-header h3 { font-size: 20px; }
  .admin-person-button { align-items: flex-start; flex-direction: column; }
  .admin-media-folder-create, .admin-media-folder-list { grid-template-columns: 1fr; }
}

/* ---------- Unternehmenseinstellungen ---------- */
.settings-overlay { position: fixed; inset: 0; z-index: 85; overflow-y: auto; background: var(--dark); }
.settings-inner { width: min(1120px, 94vw); margin: 0 auto; padding: 22px 0 42px; display: flex; flex-direction: column; gap: 18px; }
.settings-kopf { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.settings-kopf > div { flex: 1; min-width: 0; }
.settings-kopf h2 { margin-top: 3px; font-size: clamp(21px, 3vw, 31px); line-height: 1.12; }
.settings-kicker { display: block; color: var(--gold2); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.settings-context { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px; background: var(--panel); border: 1px solid var(--gold); border-radius: 15px; }
.settings-context h3 { margin-top: 4px; font-size: 18px; }
.settings-context p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-context-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 420px; }
.settings-context-actions select { min-width: 0; flex: 1; padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--off); font: inherit; font-size: 12px; }
.settings-context-actions select:focus { outline: none; border-color: var(--gold); }
.settings-upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-upload-card { display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.settings-upload-card h3 { font-size: 19px; }
.settings-upload-card > p { color: var(--muted); font-size: 12px; line-height: 1.45; min-height: 52px; }
.settings-card-nr { color: var(--gold2); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.settings-file-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px dashed #4a4d59; border-radius: 9px; color: var(--off); font-size: 11px; cursor: pointer; }
.settings-file-label:hover { border-color: var(--gold); }
.settings-file-label input { max-width: 52%; min-width: 0; color: var(--muted); font: inherit; font-size: 10px; }
.settings-upload-card .dl { width: 100%; font-size: 12px; padding: 10px; }
.settings-upload-status { min-height: 15px; margin: 0 !important; color: #9fd6a1 !important; font-size: 11px !important; }
.settings-upload-status.error { color: #e07a6a !important; }
.settings-docs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.settings-docs:empty { display: none; }
.settings-doc { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border-radius: 8px; background: var(--panel2); color: var(--muted); font-size: 10px; }
.settings-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--off); flex: 1; }
.settings-doc-size { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.settings-doc-download { flex: 0 0 auto; color: var(--gold2); text-decoration: none; font-size: 13px; }
.settings-doc-logo { flex: 0 0 auto; border: 1px solid var(--gold); border-radius: 6px; background: transparent; color: var(--gold2); padding: 3px 5px; cursor: pointer; font: inherit; font-size: 9px; white-space: nowrap; }
.settings-doc-logo:hover { background: rgba(196,154,68,.14); }
.settings-doc-delete { flex: 0 0 auto; border: 0; background: none; color: #e07a6a; cursor: pointer; font: inherit; }
.settings-privacy { color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-branding-card { display: flex; flex-direction: column; gap: 16px; padding: 19px; border: 1px solid var(--gold); border-radius: 15px; background: linear-gradient(135deg, rgba(196,154,68,.09), var(--panel) 38%); }
.settings-branding-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-branding-head h3 { margin-top: 4px; font-size: 19px; }
.settings-branding-head p { max-width: 700px; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-brand-preview { display: flex; flex: 0 0 190px; align-items: center; gap: 9px; padding: 10px; border-radius: 11px; background: var(--dark); border: 1px solid var(--line); }
.settings-brand-preview img { width: 72px; max-height: 38px; object-fit: contain; object-position: left center; }
.settings-brand-preview span { color: var(--off); font-size: 10px; font-weight: 600; line-height: 1.2; }
.settings-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.settings-brand-grid label, .template-maker-form label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; }
.settings-brand-grid input, .settings-brand-grid select, .template-maker-form input, .template-maker-form select { min-width: 0; background: var(--panel2); border: 1px solid var(--line); color: var(--off); border-radius: 8px; padding: 10px; font: inherit; font-size: 12px; }
.settings-brand-grid input:focus, .settings-brand-grid select:focus, .template-maker-form input:focus, .template-maker-form select:focus { outline: none; border-color: var(--gold); }
.settings-color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-color-row label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.settings-color-row input[type=color] { width: 32px; height: 26px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); cursor: pointer; }
.settings-brand-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.settings-brand-actions .settings-file-label { flex: 1 1 240px; }
.settings-brand-actions > label:not(.settings-file-label) { display: flex; flex: 1 1 220px; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; }
.settings-brand-actions select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--off); padding: 9px; font: inherit; font-size: 11px; }
.settings-brand-actions .dl, .settings-brand-actions .ghost-btn { padding: 10px 12px; font-size: 11px; }
.settings-brand-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.settings-brand-variant { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.settings-brand-variant img { width: 44px; height: 32px; object-fit: contain; }
.settings-brand-variant span { display: grid; gap: 2px; min-width: 0; }
.settings-brand-variant strong { overflow: hidden; color: var(--off); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.settings-brand-variant small, .settings-brand-hint { color: var(--muted); font-size: 10px; line-height: 1.35; }
.settings-brand-hint { margin: -8px 0 0; }
.settings-assets-card { border-color: rgba(199,121,77,.75); background: linear-gradient(135deg, rgba(199,121,77,.1), var(--panel) 42%); }
.settings-brand-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.settings-brand-asset { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.settings-brand-asset img { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; border-radius: 7px; background: rgba(0,0,0,.16); }
.settings-brand-asset.portrait img { border-radius: 50%; object-fit: cover; }
.settings-brand-asset span { display: grid; min-width: 0; gap: 2px; }
.settings-brand-asset strong { overflow: hidden; color: var(--off); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.settings-brand-asset small { color: var(--muted); font-size: 10px; }
.settings-brand-asset button { margin-left: auto; flex: 0 0 auto; border: 0; background: transparent; color: #e07a6a; cursor: pointer; font-size: 17px; }
.settings-assets-empty { color: var(--muted); font-size: 11px; }
.settings-analysis { display: flex; flex-direction: column; gap: 8px; padding: 11px; border: 1px solid rgba(196,154,68,.55); border-radius: 10px; background: rgba(196,154,68,.08); }
.settings-analysis strong { color: var(--off); font-size: 12px; }
.settings-analysis p, .settings-analysis small { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.settings-analysis small { color: var(--gold2); }
.settings-analysis .dl { align-self: flex-start; padding: 9px 11px; font-size: 11px; }
.settings-analysis-status.error { color: #f09b8f; }
.settings-analysis-palette { display: flex; gap: 6px; }
.settings-analysis-palette span { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.template-maker-inner { padding-bottom: 58px; }
.template-maker-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 16px; align-items: stretch; padding: 18px; border: 1px solid var(--gold); border-radius: 15px; background: var(--panel); }
.template-maker-intro h3 { margin-top: 4px; font-size: 19px; }
.template-maker-intro p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.template-maker-preview { min-height: 155px; display: flex; flex-direction: column; justify-content: end; gap: 7px; padding: 18px; border: 1px solid var(--gold); border-radius: 10px; background: linear-gradient(155deg, var(--panel2), var(--dark)); box-shadow: inset 0 0 0 12px rgba(196,154,68,.08); }
.tmp-preview-kicker { color: var(--gold2); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.template-maker-preview strong { font-size: 25px; line-height: 1.1; }
.template-maker-preview small { color: var(--muted); font-size: 10px; }
.template-maker-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.template-maker-form-actions { display: flex; align-items: end; gap: 8px; grid-column: 1 / -1; }
.template-maker-form-actions .dl, .template-maker-form-actions .ghost-btn { padding: 10px 14px; font-size: 11px; }
.template-maker-form .settings-upload-status { grid-column: 1 / -1; }
.settings-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.settings-list-head h3 { margin-top: 4px; font-size: 18px; }
.template-maker-list { display: grid; gap: 8px; }
.template-maker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.template-maker-row strong, .template-maker-row small { display: block; }
.template-maker-row strong { font-size: 13px; }
.template-maker-row small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.template-maker-row-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.template-maker-row-actions .ghost-btn { font-size: 10px; padding: 7px 9px; }
@media (max-width: 760px) {
  .settings-inner { width: min(680px, 94vw); padding-top: 14px; }
  .settings-context { align-items: stretch; flex-direction: column; gap: 12px; }
  .settings-context-actions { flex-basis: auto; }
  .settings-upload-grid { grid-template-columns: 1fr; }
  .settings-upload-card > p { min-height: 0; }
  .settings-branding-head, .template-maker-row { align-items: stretch; flex-direction: column; }
  .settings-brand-preview { flex-basis: auto; }
  .settings-brand-grid, .template-maker-form { grid-template-columns: 1fr; }
  .settings-brand-variants { grid-template-columns: 1fr; }
  .template-maker-intro { grid-template-columns: 1fr; }
  .template-maker-form-actions { grid-column: auto; }
  .template-maker-form .settings-upload-status { grid-column: auto; }
  .template-maker-row-actions { justify-content: start; }
}

/* ---------- Online-Hilfekurs / HDW Medienakademie ---------- */
.hilfe-overlay { position: fixed; inset: 0; z-index: 80; overflow-y: auto; background: var(--dark); }
.hilfe-inner { width: min(1080px, 94vw); margin: 0 auto; padding: 22px 0 42px;
  display: flex; flex-direction: column; gap: 18px; }
.hilfe-kopf { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.hilfe-kopf > div { min-width: 0; flex: 1; }
.hilfe-kicker { display: block; color: var(--gold2); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; }
.hilfe-kopf h2 { margin: 3px 0 0; font-size: clamp(21px, 3vw, 31px); line-height: 1.12; }
.hilfe-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel2); color: var(--off); font: inherit; cursor: pointer; }
.hilfe-x:hover { border-color: var(--gold); color: var(--gold2); }
.hilfe-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px; align-items: end; }
.hilfe-intro > p { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 65ch; }
.hilfe-fortschritt { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.hilfe-fortschritt-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); }
.hilfe-fortschritt-kopf strong { color: var(--off); font-weight: 600; }
.hilfe-fortschritt-kopf span { color: var(--gold2); font-variant-numeric: tabular-nums; }
.hilfe-fortschritt-balken { height: 7px; background: var(--panel2); border-radius: 7px; overflow: hidden; margin-top: 9px; }
.hilfe-fortschritt-balken span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); transition: width .25s ease; }
.hilfe-layout { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: 16px; align-items: start; }
.hilfe-module-nav { display: flex; flex-direction: column; gap: 7px; position: sticky; top: 14px; }
.hilfe-modul-btn { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--off); padding: 11px 12px;
  font: inherit; cursor: pointer; }
.hilfe-modul-btn:hover { border-color: var(--gold); }
.hilfe-modul-btn.on { border-color: var(--gold); background: rgba(196,154,68,.12); }
.hilfe-modul-btn.erledigt .hilfe-modul-nr { background: rgba(159,214,161,.18); color: #9fd6a1; }
.hilfe-modul-nr { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--gold2); font-size: 11px; font-weight: 700; }
.hilfe-modul-btn strong { display: block; font-size: 12.5px; line-height: 1.25; }
.hilfe-modul-btn small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; line-height: 1.25; }
.hilfe-inhalt { min-height: 390px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: clamp(18px, 3vw, 30px); }
.hilfe-inhalt h3 { margin: 0 0 8px; font-size: clamp(20px, 3vw, 28px); line-height: 1.15; }
.hilfe-inhalt h4 { margin: 22px 0 8px; color: var(--gold2); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.hilfe-inhalt p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.hilfe-inhalt ul { margin: 11px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--off); font-size: 13.5px; line-height: 1.45; }
.hilfe-inhalt li::marker { color: var(--gold); }
.hilfe-merksatz { margin-top: 18px; padding: 13px 15px; border-left: 3px solid var(--gold); background: rgba(196,154,68,.1);
  color: var(--off); font-size: 13px; line-height: 1.45; }
.hilfe-merksatz strong { color: var(--gold2); }
.hilfe-score { display: grid; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 7px; margin-top: 13px; }
.hilfe-score div { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 8px; }
.hilfe-score b { display: block; color: var(--gold2); font-size: 17px; }
.hilfe-score span { display: block; color: var(--muted); font-size: 10px; line-height: 1.25; margin-top: 2px; }
.hilfe-checkliste { display: grid; gap: 8px; margin-top: 13px; }
.hilfe-check { display: flex; gap: 9px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px;
  color: var(--off); font-size: 13px; line-height: 1.35; cursor: pointer; }
.hilfe-check input { margin-top: 2px; accent-color: var(--gold); }
.hilfe-check:has(input:checked) { border-color: rgba(159,214,161,.55); color: #cfe8d0; }
.hilfe-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hilfe-fuss .dl { margin-left: auto; }
.hilfe-merker { color: var(--muted); font-size: 11px; }
.hilfe-wege { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 11.5px; }
.hilfe-wege strong { color: var(--off); font-size: 12px; margin-right: 3px; }
.hilfe-wege .ghost-btn { padding: 7px 10px; font-size: 11.5px; }
.kopf-hilfe { margin-left: auto; padding: 7px 10px; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 760px) {
  .hilfe-inner { width: min(680px, 94vw); padding-top: 14px; }
  .hilfe-intro { grid-template-columns: 1fr; gap: 12px; }
  .hilfe-layout { grid-template-columns: 1fr; }
  .hilfe-module-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hilfe-modul-btn { padding: 9px 10px; }
  .hilfe-score { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hilfe-fuss .dl { margin-left: 0; }
}
@media (max-width: 430px) {
  .hilfe-kopf { gap: 8px; }
  .hilfe-kopf .ghost-btn { padding: 7px 9px; font-size: 11px; }
  .hilfe-modul-nav { grid-template-columns: 1fr; }
  .hilfe-score { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .hilfe-score div { padding: 7px 4px; }
  .hilfe-score b { font-size: 14px; }
  .hilfe-score span { font-size: 8.5px; }
}

/* ---------- Foto-Upload ---------- */
.upload-overlay { position: fixed; inset: 0; z-index: 39; overflow-y: auto; background: var(--dark); }
.upload-inner { max-width: 560px; margin: 0 auto; padding: 18px 18px 44px; display: flex;
  flex-direction: column; gap: 10px; }
.upload-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.upload-titel { font-size: 18px; font-weight: 700; }
#upProjekt, #upProjektNeu, #upNotiz { background: var(--panel2); border: 1px solid var(--line);
  color: var(--off); border-radius: 10px; padding: 12px; font: inherit; font-size: 16px; width: 100%; }
#upProjekt:focus, #upProjektNeu:focus, #upNotiz:focus { outline: none; border-color: var(--gold); }
.upload-projekt-btn { align-self: flex-start; color: var(--gold2); }
#upWaehlen { padding: 14px; font-size: 15px; }
.up-ablage { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(25,27,34,.35); transition: border-color .12s, background .12s; }
.up-ablage.dragueber { border-color: var(--gold); border-style: solid; background: rgba(225,200,112,.10); }
.up-ablage.dragueber #upWaehlen { border-color: var(--gold); color: var(--gold2); }
.up-ablage-hinweis { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.up-panel { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.up-panel-rechts { display: flex; align-items: center; gap: 10px; }
.up-leeren { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.up-leeren:hover { color: var(--gold2); }
.up-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.up-panel-count { color: var(--gold2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-vorschau { --up-thumb-size: 84px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--up-thumb-size), 1fr)); align-content: start; gap: 6px; max-height: calc(10 * var(--up-thumb-size) + 9 * 6px + 2px); overflow-y: auto; overscroll-behavior: contain; padding: 1px; border: 1px solid var(--line); border-radius: 10px; background: rgba(25,27,34,.5); scrollbar-gutter: stable; }
.up-vorschau-item { position: relative; min-width: 0; min-height: 84px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel2); }
.up-vorschau-item img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block; }
.up-vorschau-datei { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; text-align: center; }
.up-vorschau-datei-icon { font-size: 1.35rem; line-height: 1; }
.up-vorschau-datei-name { max-width: 100%; color: var(--muted); font-size: 9px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Begleitdateien sind keine Medien — sie sehen deshalb auch nicht so aus. */
.up-vorschau-item.begleit { border-style: dashed; background: rgba(25,27,34,.35); }
.up-vorschau-item.begleit.ohne-partner { border-color: rgba(224,183,106,.7); }
.up-vorschau-partner { max-width: 100%; color: var(--gold2); font-size: 8.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-vorschau-item.ohne-partner .up-vorschau-partner { color: #e0b76a; }
.up-vorschau-entfernen { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(12,13,17,.72); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.up-vorschau-item:hover .up-vorschau-entfernen, .up-vorschau-entfernen:focus-visible { opacity: 1; }
.up-vorschau-entfernen:hover { color: #e07a6a; }
@media (hover: none) { .up-vorschau-entfernen { opacity: 1; } }
.up-status { color: var(--muted); font-size: 14px; margin: 0; }
.up-status.error { color: #e07a6a; }
.up-fortschritt { display: flex; align-items: center; gap: 10px; color: var(--gold2); font-size: 13px; margin: 0; }
.up-spinner { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid rgba(225,200,112,.25);
  border-top-color: var(--gold2); border-radius: 50%; animation: up-spin .8s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
.up-abbrechen { align-self: flex-start; padding: 7px 11px; border-color: rgba(224,122,106,.55); color: #e0a099; font-size: 11px; }
.up-abbrechen:hover:not(:disabled) { border-color: #e0a099; color: #f0c0ba; }
.up-abbrechen:disabled { opacity: .65; }
.up-ergebnis { display: flex; flex-direction: column; gap: 2px; max-height: min(28vh, 220px); overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(25,27,34,.5); font-size: 11.5px; scrollbar-gutter: stable; }
.up-ergebnis > div { min-width: 0; overflow: hidden; padding: 4px 5px; border-bottom: 1px solid rgba(42,45,56,.72); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.up-ergebnis > div:last-child { border-bottom: 0; }
.up-bruecke { display: block; margin-top: 6px; }
.up-ergebnis .ok { color: #9fd6a1; }
.up-ergebnis .warn { color: #e0b76a; }
.up-ergebnis .duplicate { color: var(--gold2); }
.upload-inner small { color: var(--muted); }
@media (max-width: 640px) {
  .up-vorschau { --up-thumb-size: 64px; grid-template-columns: repeat(auto-fill, minmax(var(--up-thumb-size), 1fr)); max-height: calc(5 * var(--up-thumb-size) + 4 * 6px + 2px); gap: 6px; }
  .up-vorschau-item, .up-vorschau-item img { min-height: 64px; height: 64px; border-radius: 7px; }
  .up-ergebnis { max-height: 190px; font-size: 11px; }
  .up-ergebnis > div { padding: 4px; }
}

/* ---------- Onboarding ---------- */
.onboarding-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(10,11,15,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.onboarding-card { width: min(520px, 94vw); background: var(--panel); border: 1px solid var(--gold);
  border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.onboarding-card h2 { font-size: 21px; font-weight: 700; }
.onboarding-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; color: var(--off); }
.onboarding-card p { font-size: 13.5px; color: var(--muted); margin: 0; }
.onboarding-card b { color: var(--gold2); }

/* ---------- Namensmaske + Wertung ---------- */
.name-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.name-chip { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; text-align: center; }
.chip-name { font-size: 14px; font-weight: 600; }
.chip-rolle { font-size: 10.5px; color: var(--muted); }
.name-chip:hover .chip-rolle { color: var(--gold2); }
#nameFeld { background: var(--panel2); border: 1px solid var(--line); color: var(--off);
  border-radius: 10px; padding: 12px; font: inherit; font-size: 16px; width: 100%; }
#nameFeld:focus { outline: none; border-color: var(--gold); }
.wertung-row { display: flex; align-items: center; gap: 10px; }
.sterne { display: flex; gap: 2px; }
.sterne.aus { opacity: .35; pointer-events: none; }
.sterne button { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer;
  color: #3a3e4c; padding: 0 2px; transition: color .15s; }
.sterne button.voll { color: var(--gold); }
.sterne button:hover, .sterne button:hover ~ button { }
.sterne:hover button { color: var(--gold2); }
.sterne button:hover ~ button { color: #3a3e4c; }
#wertungInfo { color: var(--muted); font-size: 11.5px; }

/* ---------- Geführte Tour ---------- */
#tour { position: fixed; inset: 0; z-index: 60; }
#tourLoch { position: fixed; border: 3px solid var(--gold); border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(10,11,15,.74), 0 0 0 0 rgba(196,154,68,.9);
  pointer-events: none; transition: left .4s ease, top .4s ease, width .4s ease, height .4s ease;
  animation: tourPuls 1.6s ease-out infinite; }
@keyframes tourPuls {
  0%   { box-shadow: 0 0 0 100vmax rgba(10,11,15,.74), 0 0 0 0 rgba(196,154,68,.85); }
  70%  { box-shadow: 0 0 0 100vmax rgba(10,11,15,.74), 0 0 0 14px rgba(196,154,68,0); }
  100% { box-shadow: 0 0 0 100vmax rgba(10,11,15,.74), 0 0 0 0 rgba(196,154,68,0); }
}
@media (prefers-reduced-motion: reduce) { #tourLoch { animation: none; transition: none; } }
#tourKarte { position: fixed; width: min(360px, 92vw); background: var(--panel);
  border: 1px solid var(--gold); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  transition: left .4s ease, top .4s ease; }
.tour-schritt { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold2); }
#tourKarte h3 { margin: 0; font-size: 18px; font-weight: 700; }
#tourKarte p { margin: 0; font-size: 13.5px; color: var(--off); }
#tourText { color: var(--muted) !important; }
.tour-nav { display: flex; gap: 8px; margin-top: 6px; }
.tour-nav .dl { flex: 1; margin-top: 0; padding: 10px; font-size: 14px; }
.tour-nav .ghost-btn:disabled { opacity: .4; cursor: default; }
.tour-ende { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px;
  cursor: pointer; align-self: center; margin-top: 2px; }
.tour-ende:hover { color: var(--off); }

/* ---------- Bild-Inspektor ---------- */
.insp-overlay { position: fixed; inset: 0; z-index: 66; background: rgba(10,11,15,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.insp-box { position: relative; width: min(880px, 96vw); max-height: 92vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 16px;
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 0; }
@media (max-width: 700px) { .insp-box { grid-template-columns: 1fr; } }
.insp-bild { background: var(--panel2); display: flex; align-items: center; justify-content: center;
  border-radius: 16px 0 0 16px; overflow: hidden; }
@media (max-width: 700px) { .insp-bild { border-radius: 16px 16px 0 0; } }
.insp-bild img { width: 100%; height: 100%; max-height: 92vh; object-fit: cover; display: block; }
.insp-daten { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.insp-daten h3 { font-size: 18px; font-weight: 700; margin: 0; padding-right: 30px; }
.insp-liste { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
.insp-liste dt { color: var(--muted); font-size: 11.5px; letter-spacing: .04em; }
.insp-liste dd { margin: 0; word-break: break-word; }
.insp-zuordnung { border-top: 1px solid var(--line); padding-top: 14px; display: flex;
  flex-direction: column; gap: 7px; }
.insp-zuordnung h4 { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold2); }
.insp-zuordnung input, .insp-zuordnung select { background: var(--panel2); border: 1px solid var(--line);
  color: var(--off); border-radius: 8px; padding: 10px 11px; font: inherit; font-size: 14px; width: 100%; }
.insp-zuordnung input:focus, .insp-zuordnung select:focus { outline: none; border-color: var(--gold); }
.insp-zuordnung small { color: var(--muted); font-size: 11.5px; }
.insp-zuordnung small.error { color: #e07a6a; }
.insp-schliessen { position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: rgba(17,18,23,.85); color: var(--off);
  font: inherit; font-size: 14px; cursor: pointer; }
.insp-schliessen:hover { background: #a33; }
.archiv-karte { cursor: pointer; }
.archiv-karte:hover { border-color: var(--gold); }

/* ---------- „KI arbeitet"-Overlay ---------- */
.ki-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center;
  justify-content: center; background: rgba(10,11,15,.62); backdrop-filter: blur(3px); }
.ki-box { background: var(--panel); border: 1px solid var(--gold); border-radius: 16px;
  padding: 30px 36px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 22px 60px rgba(0,0,0,.6); min-width: min(320px, 88vw); text-align: center; }
.ki-ring { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-bottom: 4px; position: relative;
  background: conic-gradient(var(--gold) 0deg, var(--gold2) 90deg, rgba(196,154,68,.12) 90deg 360deg);
  animation: kiDreh 1.15s linear infinite; }
.ki-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--panel); }
.ki-funke { position: relative; z-index: 1; font-size: 26px; animation: kiPuls 1.6s ease-in-out infinite; }
@keyframes kiDreh { to { transform: rotate(360deg); } }
@keyframes kiPuls { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .ki-ring { animation: none; } .ki-funke { animation: none; }
}
.ki-titel { margin: 0; font-size: 17px; font-weight: 700; }
.ki-sub { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 34ch; }
.ki-uhr { margin: 4px 0 0; font-size: 26px; font-weight: 700; color: var(--gold2);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- Redaktionsplan ---------- */
.redaktion-inner { max-width: 900px; margin: 0 auto; padding: 18px 18px 48px;
  display: flex; flex-direction: column; gap: 14px; }
.red-kopfzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.red-kopfzeile .ki-btn { margin-left: auto; }
.red-h3 { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 10px; }
.red-projekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.red-karte { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.red-kopf { display: flex; align-items: baseline; gap: 10px; }
.red-name { font-size: 16px; font-weight: 700; }
.red-ampel { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap; }
.red-ampel.warm { background: rgba(159,214,161,.15); color: #9fd6a1; }
.red-ampel.lau  { background: rgba(224,183,106,.15); color: #e0b76a; }
.red-ampel.kalt { background: rgba(224,122,106,.15); color: #e07a6a; }
.red-zahlen { margin: 0; font-size: 12.5px; color: var(--muted); }
.red-letzter { margin: 0; font-size: 13px; }
.red-meta { color: var(--muted); font-size: 11.5px; }
.red-hook { margin: 0; font-size: 12.5px; color: var(--gold2); }
.red-offen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.red-offen-titel { font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); width: 100%; }
.red-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 10px; font: inherit; font-size: 12px; color: var(--off); cursor: pointer; }
.red-chip:hover { border-color: var(--gold); }
.red-chip-n { color: var(--gold2); font-weight: 700; margin-left: 4px; }
.red-vorschlaege { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.red-vorschlag { background: var(--panel); border: 1px solid var(--gold); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.red-vs-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.red-vs-format { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #16130a;
  border-radius: 5px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.red-vs-ort { font-size: 11.5px; color: var(--muted); }
.red-vorschlag h4 { margin: 0; font-size: 17px; font-weight: 700; }
.red-vs-warum { margin: 0; font-size: 13px; color: var(--muted); }
.red-vs-fotos { display: flex; gap: 5px; flex-wrap: wrap; }
.red-vs-fotos img { width: 62px; height: 62px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line); cursor: pointer; }
.red-vs-fotos img:hover { border-color: var(--gold); }

/* ---------- Archiv „Bisher veröffentlicht" ---------- */
.red-archiv-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.red-archiv-kopf .red-h3 { margin: 0; }
.red-archiv-kopf small { color: var(--muted); font-size: 11.5px; }
#archivFilter { background: var(--panel2); border: 1px solid var(--line); color: var(--off);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; }
#archivFilter:focus { outline: none; border-color: var(--gold); }
.archiv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.archiv-karte { margin: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.archiv-karte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.archiv-leer { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--muted); font-size: 12px; }
.archiv-karte figcaption { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 2px; }
.archiv-datum { font-size: 10.5px; color: var(--gold2); letter-spacing: .04em; }
.archiv-titel { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.archiv-projekt { font-size: 11px; color: var(--muted); }
.red-richtung { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.red-richtung.r-weiter { background: rgba(159,214,161,.16); color: #9fd6a1; }
.red-richtung.r-besser { background: rgba(224,183,106,.16); color: #e0b76a; }
.red-richtung.r-neu    { background: rgba(196,154,68,.22); color: var(--gold2); }

/* ---------- Entwürfe / Feed-Vorschau ---------- */
.entwurf-inner { max-width: 640px; margin: 0 auto; padding: 18px 18px 44px; display: flex;
  flex-direction: column; gap: 12px; }
.entwurf-anzahl { margin: -4px 0 0; color: var(--muted); font-size: .82rem; }
.entwurf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #000; }
.entwurf-kachel { position: relative; cursor: pointer; background: var(--panel2); min-height: 40px; }
.entwurf-kachel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.entwurf-kachel:hover img { opacity: .85; }
.entwurf-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px;
  font-size: 11px; color: rgba(245,242,234,.95); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: linear-gradient(transparent, rgba(10,11,15,.85)); }
.entwurf-geteilt { position: absolute; top: 5px; left: 5px; font-size: 13px;
  background: rgba(17,18,23,.75); border-radius: 50%; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; }
.entwurf-anzahl { color: var(--muted, #b7b8c4); font-size: 12px; margin: 0 0 8px; }
/* Markieren statt Knöpfe an jeder Kachel: auswählen, dann sammeln handeln. */
.entwurf-wahl { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(17,18,23,.75); border-radius: 50%; }
.entwurf-wahl input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--gold, #c9a43a); }
.entwurf-kachel.gewaehlt { outline: 3px solid var(--gold, #c9a43a); outline-offset: -3px; }
.entwurf-kachel.gewaehlt img { opacity: .72; }
.entwurf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 9px 11px; border-radius: 11px;
  background: var(--card2, #131c2c); border: 1px solid var(--line, #262a36); }
.entwurf-auswahl-zahl { font-size: 12.5px; font-weight: 700; margin-right: 4px; }
.entwurf-aktionen button { font-size: 12.5px; padding: 7px 11px; }
.entwurf-aktionen button:disabled { opacity: .4; cursor: not-allowed; }
.topbar-aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ghost-btn.app-main-menu { color: #17130a !important; background: linear-gradient(135deg, #d5aa39, #e1c870) !important; border-color: #e1c870 !important; text-decoration: none; }
.ghost-btn.app-main-menu:hover { border-color: #f0d98a !important; filter: brightness(1.07); }
.ghost-btn.app-online-tour { color: #f7e6a1 !important; border-color: rgba(213,170,57,.78) !important; background: #1a1b22 !important; }
.ghost-btn.app-online-tour:hover { border-color: #e1c870 !important; background: #29251b !important; }
.logout-btn { color: var(--muted); }
.logout-btn:hover { color: var(--off); border-color: rgba(224,122,106,.75); }
.logout-btn:disabled, .hub-logout:disabled { cursor: wait; opacity: .58; transform: none; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .topbar-hint { display: none; }
}

/* ---------- Rahmen ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); background: rgba(17,18,23,.9); position: sticky; top: 0; z-index: 10; }
.topbar-logo { height: 34px; }
.topbar-title { font-weight: 700; letter-spacing: .06em; }
.topbar-hint { margin-left: auto; color: var(--muted); font-size: 12px; }

.layout { --library-width: 460px; display: grid;
  grid-template-columns: var(--library-width) minmax(0, 1fr); gap: 0; height: calc(100vh - 55px); }

/* ---------- Bibliothek ---------- */
.library { position: relative; border-right: 1px solid var(--line); display: flex; flex-direction: column;
  min-height: 0; min-width: 0; }
.lib-suche { padding: 12px 12px 0; }
.lib-suche input { display: block; width: 100%; background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px; }
.lib-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 8px; padding: 8px 12px 12px; border-bottom: 1px solid var(--line); }
.lib-filter select { min-width: 0; width: 100%; background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px; }
.lib-werkzeuge { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: rgba(25,27,34,.72); }
.lib-werkzeuge .ghost-btn { padding: 7px 10px; font-size: 11.5px; white-space: nowrap; }
.lib-werkzeuge .ghost-btn[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); background: rgba(196,154,68,.12); }
.grid-groesse { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.grid-groesse input { width: 92px; accent-color: var(--gold); }
.grid-groesse output { min-width: 38px; color: var(--gold2); text-align: right; font-variant-numeric: tabular-nums; }
.bulk-aktionen { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: rgba(196,154,68,.07); }
.bulk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bulk-kopf strong { color: var(--gold2); font-size: 12px; }
.bulk-kopf .ghost-btn { padding: 5px 8px; font-size: 11px; }
.bulk-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.bulk-form .sub-label { margin: 0; font-size: 10.5px; white-space: nowrap; }
.bulk-form select, .bulk-form input { min-width: 0; width: 100%; background: var(--panel2); color: var(--off);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; font: inherit; font-size: 12px; }
.bulk-form input { grid-column: 2; }
.bulk-form select:focus, .bulk-form input:focus { outline: none; border-color: var(--gold); }
.bulk-form .dl { padding: 8px 10px; font-size: 11.5px; white-space: nowrap; }
.bulk-aktionen small { color: var(--muted); font-size: 11px; }
.bulk-aktionen small.error { color: #e07a6a; }
/* Feste Zeilenhöhe: aspect-ratio/%-Padding fließen in Chromes implizite
   Grid-Zeilen nicht ein (Kacheln überlappten) — 104px-Zeilen sind deterministisch. */
.grid { --tile-size: 104px; overflow-y: auto; padding: 12px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr));
  grid-auto-rows: calc(var(--tile-size) + 8px); gap: 8px; }
.grid .tile { position: relative; height: 100%; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--panel2); }
.grid .tile[draggable="true"] { cursor: grab; }
.grid .tile.dragging { opacity: .5; border-color: var(--gold2); cursor: grabbing; }
/* absolut, damit die Grid-Zeile ihre Höhe allein aus dem aspect-ratio des Tiles nimmt
   (sonst kollabieren die Zeilen und die Kacheln überlappen) */
.grid .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.grid .tile:hover { border-color: var(--gold); }
.grid .tile.sel { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(225,200,112,.35); }
.grid.bulk-mode .tile { cursor: crosshair; }
.grid .tile.bulk-sel { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(225,200,112,.30); }
.tile-bulk-check { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(245,242,234,.75); background: rgba(17,18,23,.78); color: transparent;
  display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.grid.bulk-mode .tile-bulk-check { display: flex; }
.grid.bulk-mode .tile.bulk-sel .tile-bulk-check { background: var(--gold2); border-color: var(--gold2); color: #16130a; }
/* ⓘ links oben — erscheint beim Überfahren, öffnet den Bild-Inspektor */
.tile-info { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(225,200,112,.85); background: rgba(17,18,23,.82); color: var(--gold2);
  font: 700 12px/1 Georgia, serif; cursor: pointer; padding: 0; opacity: 0;
  transition: opacity .12s; display: flex; align-items: center; justify-content: center; }
.grid .tile:hover .tile-info, .tile-info:focus-visible { opacity: 1; }
.tile-info:hover { background: var(--gold); color: #16130a; }
.tile-raw { position: absolute; left: 5px; bottom: 5px; z-index: 3; padding: 3px 6px; border: 1px solid rgba(245,242,234,.7); border-radius: 5px; color: #17130a; background: var(--gold2); font: inherit; font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: .06em; cursor: pointer; opacity: .88; }
.tile-raw:hover, .tile-raw:focus-visible { background: var(--off); opacity: 1; }
/* Videokachel: Dauer unten rechts, Warnhinweis bei starker Verwacklung */
.tile-video { position: absolute; right: 4px; bottom: 4px; background: rgba(17,18,23,.85);
  color: var(--off); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.tile-video.wackelt { background: rgba(224,122,106,.9); color: #fff; }
@media (hover: none) { .tile-info { opacity: .9; } }  /* Touch: immer sichtbar */
.grid .empty { grid-column: 1/-1; color: var(--muted); font-size: 13px; padding: 30px 10px; text-align: center; }
@media (max-width: 560px) {
  .lib-filter { grid-template-columns: 1fr 1fr; }
  .lib-filter select { grid-column: 1 / -1; }
  .lib-werkzeuge { align-items: stretch; flex-direction: column; }
  .grid-groesse { justify-content: space-between; }
  .grid-groesse input { flex: 1; width: auto; }
  .bulk-form { grid-template-columns: 1fr; }
  .bulk-form .sub-label, .bulk-form select, .bulk-form input, .bulk-form .dl { grid-column: 1; }
}

/* ---------- Editor ---------- */
.editor { --controls-width: 340px; position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--controls-width); min-height: 0; min-width: 0; }
.panel-resizer { position: absolute; z-index: 12; width: 18px; padding: 0; border: 0; background: transparent;
  cursor: col-resize; touch-action: none; }
.panel-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 2px;
  background: transparent; transition: background .12s, box-shadow .12s; }
.panel-resizer::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 4px;
  width: 10px; height: 72px; transform: translateY(-50%); border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.025), 0 3px 12px rgba(0,0,0,.3);
  transition: background .12s, border-color .12s, box-shadow .12s; }
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, body.panel-resizing .panel-resizer::after {
  background: var(--gold); box-shadow: 0 0 10px rgba(225,200,112,.55); }
.panel-resizer:hover::before, .panel-resizer:focus-visible::before, body.panel-resizing .panel-resizer::before {
  border-color: var(--gold); background: rgba(196,154,68,.28);
  box-shadow: inset 0 0 0 2px rgba(225,200,112,.18), 0 0 14px rgba(225,200,112,.3); }
.panel-resizer:focus-visible { outline: 1px solid var(--gold2); outline-offset: -1px; }
.library-resizer { top: 0; right: -6px; bottom: 0; }
.controls-resizer { top: 0; right: calc(var(--controls-width) - 6px); bottom: 0; }
body.panel-resizing, body.panel-resizing * { cursor: col-resize !important; user-select: none !important; }
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.slot-zeile { display: flex; align-items: flex-end; justify-content: space-between;
  background: var(--dark); border-bottom: 1px solid var(--line); padding-right: 16px; }
.slot-tabs { display: flex; gap: 8px; padding: 10px 24px 0; flex-wrap: wrap; }
.slot-tabs button { background: transparent; color: var(--muted); border: 1px solid transparent;
  border-bottom: 0; border-radius: 10px 10px 0 0; padding: 9px 26px; font: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.slot-tabs button.on { background: var(--panel); color: var(--gold2); border-color: var(--line);
  box-shadow: inset 0 2px 0 var(--gold); }
.slot-tabs .tab-plus { padding: 9px 14px; color: var(--gold2); font-weight: 700; }
.slot-tabs .tab-plus:hover { color: var(--gold); }
.slide-ctl { display: flex; gap: 6px; padding-bottom: 6px; }
.slide-ctl button { background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.slide-ctl button:hover:not(:disabled) { border-color: var(--gold); }
.slide-ctl button:disabled { opacity: .4; cursor: default; }
.slide-ctl [data-aktion="loeschen"]:hover { border-color: #e07a6a; color: #e07a6a; }
.editor-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 18px;
  border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--panel), rgba(26,28,38,.72)); }
.editor-tool-group { display: inline-flex; align-items: center; gap: 5px; }
.editor-tool-divider { width: 1px; height: 24px; flex: 0 0 1px; background: var(--line); margin: 0 2px; }
.editor-tool { position: relative; display: inline-grid; width: 34px; height: 32px; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel2); color: var(--off); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s, transform .12s, opacity .12s; }
.editor-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editor-tool-type { font: 700 14px/1 Montserrat, sans-serif; }
.editor-tool-type em { font-family: Georgia, serif; font-size: 18px; line-height: 1; }
.editor-tool:hover:not(:disabled), .editor-tool:focus-visible:not(:disabled), .editor-tool.on { border-color: var(--gold); color: var(--gold2);
  background: rgba(196,154,68,.14); outline: none; }
.editor-tool:active:not(:disabled) { transform: translateY(1px); }
.editor-tool:disabled { opacity: .35; cursor: not-allowed; }
.editor-tool-primary { border-color: rgba(225,200,112,.72); color: var(--gold2); background: rgba(196,154,68,.11); }
.editor-tool[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(3px); width: max-content; max-width: 180px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: #101116; color: var(--off); font: 600 11px/1.2 Montserrat, sans-serif; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.34); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .12s, transform .12s, visibility .12s; }
.editor-tool[data-tooltip]:hover::after, .editor-tool[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.editor-toolbar-bild-hinweis { animation: editorToolbarHinweis .9s ease-in-out 2; }
@keyframes editorToolbarHinweis { 50% { box-shadow: 0 0 0 3px rgba(225,200,112,.24); border-color: var(--gold2); } }
@media (max-width: 760px) {
  .editor-toolbar { padding: 8px 10px; gap: 6px; }
  .editor-tool { width: 32px; height: 31px; }
  .editor-tool-divider { margin: 0; }
  .editor-tool[data-tooltip]::after { display: none; }
}
.canvas-wrap { display: flex; align-items: center; justify-content: center; position: relative;
  flex: 1; padding: 22px; min-width: 0; min-height: 0; box-sizing: border-box; background:
  radial-gradient(70% 50% at 50% 30%, #171922 0%, var(--dark) 75%); }
.canvas-wrap.drop-ready::after { content: "Bild hier ablegen"; position: absolute; inset: 28px;
  z-index: 8; display: grid; place-items: center; border: 2px dashed var(--gold2); border-radius: 12px;
  background: rgba(196,154,68,.14); color: var(--gold2); font: 700 15px/1 Montserrat, sans-serif;
  letter-spacing: .04em; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
/* Höhe kommt aus dem Layout, nicht aus einer Rechnung mit festen Zahlen: die
   Timeline ist mal 148, mal 132 px hoch, und die Topbar-Höhe ist nirgends fixiert. */
#cv { max-width: 100%; max-height: 100%; border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); cursor: grab; touch-action: none; }
#cv.dragging { cursor: grabbing; }
.canvas-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  color: var(--muted); font-size: 12px; pointer-events: none; }
.reel-programm { display: none; position: absolute; top: 10px; left: 12px; z-index: 4;
  align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: rgba(11,12,16,.86);
  box-shadow: 0 6px 22px rgba(0,0,0,.25); pointer-events: none; }
#app.modus-reel .reel-programm { display: flex; }
.reel-programm strong { color: var(--gold2); font-size: 10px; letter-spacing: .13em; }
.reel-programm span { color: var(--muted); font-size: 11px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.reel-programm[data-phase="vorbereiten"] { border-color: var(--gold); }
.reel-programm[data-phase="vorbereiten"] strong { animation: programmPuls 1.2s ease-in-out infinite; }
.reel-programm[data-phase="spielt"] { border-color: #76b884; }
.reel-programm[data-phase="spielt"] strong { color: #9bd5a7; }
.reel-programm[data-phase="warnung"] { border-color: #e07a6a; }
.reel-programm[data-phase="warnung"] strong,
.reel-programm[data-phase="warnung"] span { color: #f2a092; }
@keyframes programmPuls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .reel-programm[data-phase="vorbereiten"] strong { animation: none; }
}

/* ---------- Sichtfenster der Bibliothek (erst zeigen, dann einfügen) ---------- */
.sicht-box { display: flex; gap: 10px; align-items: center; margin: 0 10px 8px;
  padding: 8px; background: var(--panel); border: 1px solid var(--gold);
  border-radius: 10px; }
.sicht-bild { flex: 0 0 84px; width: 84px; height: 112px; border-radius: 7px;
  background: var(--panel2) center/cover no-repeat; overflow: hidden; position: relative; }
.sicht-bild video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sicht-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sicht-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sicht-text small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.sicht-status { color: var(--gold2) !important; }
.sicht-status.warn { color: #e07a6a !important; }
.sicht-knoepfe { display: flex; flex-direction: column; gap: 6px; }
.sicht-knoepfe .dl { padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
.sicht-knoepfe .ghost-btn { padding: 6px 10px; }
@media (max-width: 1100px) { .sicht-box { max-height: 32vh; } }

/* Im Reel brauchen Bibliothek und Regler weniger Platz als beim Kachel-Bauen —
   die gewonnenen ~140 px gehen an das Vorschaufenster. */
#app.modus-reel .layout { grid-template-columns: var(--library-width) minmax(0, 1fr); }
#app.modus-reel .editor { grid-template-columns: minmax(0, 1fr) var(--controls-width); }

/* ---------- Bühne: Vorschaufenster links, Kachel rechts ----------
   Der 9:16-Canvas lässt links und rechts viel Fläche frei (bei 1440×900 sind das
   299 px, bei 1920×1080 sogar 677 px — nachgemessen). Im Reel steht dort das
   Vorschaufenster. Beide Spalten teilen sich den Platz, deshalb wird auf einem
   schmalen Laptop einfach beides etwas kleiner statt eines abgeschnitten. */
.buehne { flex: 1; display: flex; align-items: stretch; justify-content: center;
  position: relative; min-width: 0; min-height: 0; }
.buehne .canvas-wrap { flex: 1 1 auto; min-width: 0; }
/* Im Reel behält die KACHEL ihre Größe (0 1 auto schrumpft nur im Notfall) und das
   Vorschaufenster verbraucht ausschließlich den Rest. Andersherum — beide teilen
   sich den Platz — würde die Kachel kleiner, und genau das war nicht gewünscht. */
#app.modus-reel .buehne .canvas-wrap { flex: 0 1 auto; }
.vor { display: none; }
#app.modus-reel .vor { display: flex; flex: 1 1 0; max-width: 560px; min-width: 0;
  flex-direction: column; gap: 7px; padding: 14px 6px 14px 18px; min-height: 0; }
.vor-titel { color: var(--gold2); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; }
.vor-buehne { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: #0b0c10; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; }
.vor-buehne img, .vor-buehne video { max-width: 100%; max-height: 100%; display: block;
  object-fit: contain; background: #000; }
.vor-leer { color: var(--muted); font-size: 12px; text-align: center; padding: 16px; }
/* Arbeitsanzeige: liegt ÜBER dem Standbild, damit man sieht, welcher Clip
   gerade vorbereitet wird — eine schwarze Fläche mit Text sieht aus wie ein Fehler. */
.vor-arbeit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 13px;
  background: linear-gradient(180deg, rgba(11,12,16,0) 0%, rgba(11,12,16,.88) 45%); }
.va-balken { height: 6px; border-radius: 3px; background: rgba(245,242,234,.16); overflow: hidden; }
.va-balken span { display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transition: width .35s ease; }
/* Solange noch keine Prozentzahl da ist, wandert ein Streifen — das zeigt
   „ich arbeite" auch ohne Zahl. */
.va-balken.unbestimmt span { width: 38% !important; animation: vaWander 1.25s ease-in-out infinite; }
@keyframes vaWander { 0% { margin-left: -38% } 100% { margin-left: 100% } }
@media (prefers-reduced-motion: reduce) { .va-balken.unbestimmt span { animation: none; width: 100% !important; opacity: .5; } }
.va-text { display: flex; flex-direction: column; gap: 2px; }
.va-text strong { font-size: 12.5px; color: var(--off); }
.va-text small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.vor-nurton { display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--gold2); font-size: 13px; }
.vor-nurton span { font-size: 40px; line-height: 1; }
.vor-leiste { display: flex; align-items: center; gap: 8px; }
.vor-leiste button { background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; min-width: 34px; }
.vor-leiste button:hover:not(:disabled) { border-color: var(--gold); }
.vor-leiste button:disabled { opacity: .4; cursor: default; }
#vorScrub { flex: 1; min-width: 0; accent-color: var(--gold); }
.vor-zeit { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vor-meta { color: var(--muted); font-size: 11.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vor-meta.warn { color: #e07a6a; }
.vor-knoepfe { display: flex; gap: 6px; }
.vor-knoepfe .dl { flex: 1 1 auto; margin-top: 0; padding: 9px 8px; font-size: 12.5px; white-space: nowrap; }
.vor-knoepfe .ghost-btn { flex: 0 1 auto; padding: 9px 9px; font-size: 12px; white-space: nowrap; }
/* Wird der Rest neben der Kachel zu schmal, verschwindet die Vorschau nicht,
   sondern legt sich als Overlay über die linke Bühnenseite. So gibt es weiterhin
   genau EINEN Abspieler und EINEN Weg ins Einfügen. Die Umschaltung misst die
   Bühne (siehe engPruefen in app.js) — eine Media-Query könnte das nicht: die
   Kachelbreite folgt der FENSTERHÖHE, davon weiß eine Breiten-Query nichts. */
#app.modus-reel.eng .vor { position: absolute; left: 0; top: 0; bottom: 0;
  width: min(360px, 92%); z-index: 5; background: #0b0c10;
  border-right: 1px solid var(--line); box-shadow: 0 0 40px rgba(0,0,0,.6); }
#app.modus-reel.eng .vor-zu { display: block; }
.vor-zu { display: none; position: absolute; top: 8px; right: 8px; z-index: 6;
  background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer; }
#app.modus-reel .vor.zu { display: none; }
/* Öffner für die zugeklappte Vorschau. Sitzt am linken Bühnenrand, damit das
   Programmbild frei bleibt — sichtbar macht ihn ausschließlich app.js.
   z-index 6 wie .vor-zu und UNTERHALB des PROGRAMM-Chips (.reel-programm liegt
   bei top 10px/left 12px mit z-index 4, steht im DOM aber NACH diesem Knopf und
   gewänne deshalb bei gleicher Ebene — der Öffner wäre nicht anklickbar). */
.vor-auf { position: absolute; left: 8px; top: 46px; z-index: 6;
  background: var(--panel2); color: var(--gold2); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 11px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; }
.vor-auf:hover { border-color: var(--gold); }
.vor.gesperrt { opacity: .5; pointer-events: none; }
/* Schnitt- und Wackelzonen unter dem Scrub-Regler */
.vor-zonen { position: relative; height: 6px; border-radius: 3px; background: var(--panel2); }
.vz-wackel { position: absolute; top: 0; bottom: 0; background: rgba(224,122,106,.55); }
.vz-schnitt { position: absolute; top: 0; bottom: 0; background: rgba(196,154,68,.45);
  border-left: 1px solid var(--gold2); border-right: 1px solid var(--gold2); }
.vor-spur { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.vor-spur label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.vor-farbprofil { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.vor-farbprofil > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.vor-farbprofil select { min-width: 0; padding: 6px 8px; color: var(--off); background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 11px; }
.vor-farbprofil small { grid-column: 1 / -1; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.vor-farbprofil small.error { color: #e07a6a; }

/* ---------- Schnitt-Timeline (nur im Reel-Modus) ---------- */
#tl { display: none; }
#app.modus-reel #tl { display: flex; flex-direction: column; gap: 6px;
  padding: 0 20px 10px; border-top: 1px solid var(--line); background: var(--dark);
  height: var(--tl-hoehe, auto); flex: 0 0 auto; }
/* Ziehleiste: die Timeline lässt sich damit größer ziehen — Vorschau und Kachel
   darüber schrumpfen automatisch, weil .buehne flex:1 ist. */
.tl-griffleiste { height: 12px; margin: 0 -20px 2px; cursor: ns-resize; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; touch-action: none; }
.tl-griffleiste span { width: 44px; height: 3px; border-radius: 2px; background: var(--line); }
.tl-griffleiste:hover span { background: var(--gold); }
#app.modus-reel.tl-zieht { cursor: ns-resize; user-select: none; }
/* Bei gezogener Höhe darf die Spur den Platz nutzen */
#app.modus-reel #tl[style*="--tl-hoehe"] .tl-spur { flex: 1; min-height: 0; }
#app.modus-reel .slot-zeile { display: none; }   /* die Spur ersetzt die Reiter */
.tl-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Nebenknopf-Hoehe aus der Skala; die reinen Symbolknoepfe (‹ › − ＋) sind quadratisch. */
.tl-kopf button { background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 9px; min-height: var(--k-neben); font: inherit; font-size: var(--s-knopf);
  cursor: pointer; white-space: nowrap; }
.tl-kopf button[data-tl="links"], .tl-kopf button[data-tl="rechts"],
.tl-kopf button[data-tl="zoomAus"], .tl-kopf button[data-tl="zoomEin"], #tlPlay {
  width: var(--k-symbol); min-width: var(--k-symbol); min-height: var(--k-symbol); padding: 0; text-align: center; }
.tl-mehr-halter { position: relative; display: inline-flex; }
.tl-mehr-knopf.on { border-color: var(--gold); color: var(--gold2); }
.tl-mehr { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 220px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.tl-mehr[hidden] { display: none; }
.tl-mehr button { text-align: left; }
.tl-kopf button:hover:not(:disabled) { border-color: var(--gold); }
.tl-kopf button:disabled { opacity: .38; cursor: default; }
.tl-kopf [data-tl="loeschen"]:hover:not(:disabled) { border-color: #e07a6a; color: #e07a6a; }
#tlPlay { min-width: 34px; font-size: 13px; }
.tl-zeit { color: var(--gold2); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 52px; }
.tl-fueller { flex: 1; }
.tl-trenn { width: 1px; align-self: stretch; background: var(--line); margin: 0 3px; }
.tl-hilfe { color: var(--muted); font-size: 11.5px; margin: 0; }

/* position:relative ist Pflicht — der Abspielkopf liegt absolut darin und muss
   im Scrollcontainer mitwandern. */
.tl-spur { position: relative; display: flex; flex-direction: column; min-height: 96px;
  overflow-x: auto; overflow-y: hidden; touch-action: pan-y; scrollbar-width: thin;
  cursor: ew-resize; user-select: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.tl-spur.scrubbt { cursor: grabbing; border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(196,154,68,.28) inset; }
#tlChips { display: flex; align-items: stretch; }
/* max-content: sonst ist das Lineal nur so breit wie der sichtbare Ausschnitt
   und die Sekundenstriche stimmen beim Scrollen nicht mehr. */
/* Genau so breit wie die Chips darunter — kein min-width: sonst reicht die
   Klickfläche über das Ende der Spur hinaus und jeder Klick dort landet stumm
   am Schluss, was sich anfühlt wie „Scrubben geht nicht". */
#tlLineal { position: relative; height: 26px; width: max-content;
  cursor: pointer; flex: 0 0 auto; touch-action: none; }
.tl-strich { position: absolute; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.tl-strich.voll { top: 6px; background: rgba(245,242,234,.35); }
.tl-marke { position: absolute; top: 0; font-size: 9.5px; color: var(--muted);
  transform: translateX(2px); font-variant-numeric: tabular-nums; }
#tlKopf { position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--gold2);
  z-index: 12; will-change: transform; cursor: ew-resize; touch-action: none; }
/* Unsichtbare Greiffläche links und rechts der Nadel — 2 px trifft niemand */
#tlKopf::after { content: ""; position: absolute; top: 0; bottom: 0; left: -7px; right: -7px; }
#tlKopf::before { content: ""; position: absolute; top: 0; left: -6px; width: 14px; height: 13px;
  background: var(--gold2); border-radius: 3px 3px 6px 6px; }
.tl-leer { color: var(--muted); font-size: 12.5px; padding: 22px 14px; }
/* Zweite Reihe: reine Tonclips. Sie liegen bewusst NICHT in #tlChips — tlPxKarte()
   misst genau die Elemente dort, und ein Tonchip darin würde Abspielkopf und
   Lineal verfälschen. */
#tlTon { position: relative; height: 0; margin-top: 0; transition: height .12s; }
#tlTon.hat { height: 26px; margin-top: 4px; }
.tl-tonchip { position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  gap: 4px; padding: 0 5px; background: rgba(196,154,68,.28); border: 1px solid var(--gold);
  border-radius: 5px; font-size: 10.5px; color: var(--off); overflow: hidden;
  white-space: nowrap; cursor: pointer; }
.tl-tonchip:hover { background: rgba(196,154,68,.4); }
.tl-tonchip .tt-name { overflow: hidden; text-overflow: ellipsis; }
.tl-tonchip .tt-weg { background: none; border: 0; color: var(--off); cursor: pointer;
  font-size: 11px; padding: 0 2px; opacity: .7; }
.tl-tonchip .tt-weg:hover { color: #e07a6a; opacity: 1; }

.tl-chip { position: relative; flex: 0 0 auto; height: 64px; border-radius: 8px;
  border: 1px solid var(--line); background-size: cover; background-position: center;
  cursor: ew-resize; overflow: hidden; touch-action: none; }
.tl-chip::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,18,23,.15) 0%, rgba(17,18,23,.72) 100%); }
.tl-chip.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tl-chip.on::after { background: linear-gradient(180deg, rgba(196,154,68,.18) 0%, rgba(17,18,23,.62) 100%); }
.tl-chip .tl-art { position: absolute; top: 3px; left: 4px; z-index: 2; font-size: 11px;
  color: var(--gold2); text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.tl-chip .tl-welle { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
  pointer-events: none; opacity: .95; }
.tl-chip .tl-dauer { position: absolute; bottom: 3px; right: 4px; z-index: 2;
  background: rgba(17,18,23,.85); color: var(--off); border-radius: 4px;
  padding: 1px 4px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.tl-chip .tl-dauer.wackelt { background: rgba(224,122,106,.9); color: #fff; }
/* Abstand 22 px: sonst verschwindet die Nummer unter dem linken Trimmgriff */
.tl-chip .tl-titel { position: absolute; bottom: 3px; left: 22px; z-index: 2; font-size: 10.5px;
  color: rgba(245,242,234,.9); text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.tl-chip .tl-ton { position: absolute; top: 3px; right: 4px; z-index: 3; font-size: 11px;
  background: none; border: 0; color: var(--off); cursor: pointer; padding: 0 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.tl-chip .tl-ton.aus { opacity: .45; }
/* Die roten Streifen markieren wortlos, wo die Wackler sitzen: die erste und
   letzte Sekunde einer Handyaufnahme (Auslöser gedrückt). */
.tl-chip .tl-wackel { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(224,122,106,.42) 0 5px, transparent 5px 10px); }
.tl-griff { position: absolute; top: 0; bottom: 0; width: 13px; z-index: 4; cursor: ew-resize;
  background: rgba(17,18,23,.55); touch-action: none; }
.tl-chip.on .tl-griff { width: 18px; background: linear-gradient(var(--gold), var(--gold2)); opacity: .9; }
.tl-griff.li { left: 0; border-radius: 8px 0 0 8px; }
.tl-griff.re { right: 0; border-radius: 0 8px 8px 0; }
.tl-griff::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 18px;
  transform: translate(-50%, -50%); background: rgba(245,242,234,.75); border-radius: 1px; }
.tl-plakette { position: absolute; z-index: 20; background: var(--panel); color: var(--gold2);
  border: 1px solid var(--gold); border-radius: 6px; padding: 3px 7px; font-size: 11px;
  white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }

/* 28 px + Rahmen: bei „hart" ist das Zeichen ▏ und sähe ohne Rahmen aus wie eine
   Chipkante, nicht wie ein Knopf. */
.tl-uebergang { flex: 0 0 auto; width: 26px; height: 26px; align-self: center; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 6px; margin: 0 3px;
  color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; }
.tl-uebergang:hover { color: var(--gold2); }
.tl-uebergang.aktiv { color: var(--gold); }
.tl-fokus { animation: tlFokus 1.6s ease-out; }
@keyframes tlFokus {
  0%, 35% { box-shadow: 0 0 0 2px var(--gold), 0 0 34px rgba(196,154,68,.32); }
  100% { box-shadow: none; }
}
#tlPlay.laeuft { color: #f2a092; border-color: #e07a6a; }

@media (max-width: 1100px) {
  #app.modus-reel #tl { padding: 8px 12px 10px; }
}

.controls { border-left: 1px solid var(--line); padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; background: var(--dark); }

/* Modus-Schalter: Beitrag oder Reel — bestimmt, welche Rubriken erscheinen */
.modus-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 2px; }
.modus-schalter button { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.modus-schalter button span { font-size: 19px; line-height: 1; }
.modus-schalter button:hover { border-color: var(--gold); }
.modus-schalter button.on { background: linear-gradient(135deg, rgba(196,154,68,.22), rgba(225,200,112,.10));
  border-color: var(--gold); color: var(--gold2); }

/* Klappbare Rubriken — hält die Leiste kurz */
.sec-head { cursor: pointer; user-select: none; }
.sec-head::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 11px;
  transition: transform .18s; }
.sec.zu .sec-head::after { transform: rotate(-90deg); }
.sec.zu .sec-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.sec-body { display: flex; flex-direction: column; gap: 8px; }
.sec.zu .sec-body { display: none; }
.sec-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Rubrik-Karten: jede Sektion klar abgegrenzt, nummeriert = Workflow-Reihenfolge */
.sec { display: flex; flex-direction: column; gap: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.sec-head { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--off);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.sec-num { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #16130a; }
.sec-final { border-color: var(--gold); }
.sub-label { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); }
.regler-wert { float: right; color: var(--gold2); font-weight: 700; letter-spacing: 0;
  text-transform: none; font-variant-numeric: tabular-nums; }
.check-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--off);
  cursor: pointer; }
.check-zeile input { accent-color: var(--gold); width: 16px; height: 16px; }
/* Untertitel-Design (Reel-Export): Kärtchen mit Musterzeile, das „gesprochene" Wort hervorgehoben */
.ut-zeile { display: flex; flex-direction: column; gap: 8px; }
.ut-design { display: flex; flex-direction: column; gap: 8px; }
.ut-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.ut-karte { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--off); cursor: pointer; font: inherit; text-align: left; }
.ut-karte.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.ut-karte strong { font-size: 11.5px; }
.ut-karte small { font-size: 10px; color: var(--muted); line-height: 1.3; }
.ut-muster { display: flex; align-items: center; justify-content: center; gap: .3em; min-height: 46px; padding: 6px 4px;
  border-radius: 6px; background: #3a4a55 linear-gradient(160deg, #56707c, #2b3640); font-family: Montserrat, sans-serif;
  font-size: 11px; line-height: 1.15; text-align: center; overflow: hidden; }
.ut-muster em { font-style: normal; }
.ut-muster.kasten span { background: var(--ut-kasten); padding: 2px 5px; border-radius: 3px; }
.ut-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 11.5px; color: var(--muted); }
.ut-opt-label { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.ut-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ut-seg button { background: transparent; color: var(--off); border: 0; padding: 5px 10px; font: inherit; font-size: 11.5px; cursor: pointer; }
.ut-seg button.on { background: var(--gold); color: #1b1d23; font-weight: 700; }
.ut-hinweis { color: var(--muted); font-size: 11px; line-height: 1.4; }
.ut-regler { flex: 1 1 80px; min-width: 60px; width: auto; accent-color: var(--gold); }
.ut-wert { font-variant-numeric: tabular-nums; min-width: 38px; color: var(--off); }
#reelStatus.error { color: #e07a6a; }
#reelStatus { color: var(--muted); }
/* Das fertige Reel: sichtbar, abspielbar, ein grosser Knopf. Kein Link, den
   man uebersieht. */
.reel-fertig { display: flex; flex-direction: column; gap: 9px; padding: 12px;
  border: 1px solid var(--gold); border-radius: 12px; background: rgba(196,154,68,.09);
  box-shadow: 0 0 0 1px rgba(196,154,68,.18) inset; animation: reelFertigAuf .35s ease-out; }
@keyframes reelFertigAuf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reel-fertig-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.reel-fertig-kopf strong { color: var(--gold2); font-size: 14px; }
.reel-fertig-kopf span { color: var(--muted); font-size: 11px; }
.reel-fertig-zu { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--off); font: inherit; font-size: 14px; cursor: pointer; }
.reel-fertig-schliessen { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--off); font: inherit; font-weight: 600; cursor: pointer; }
.reel-fertig-schliessen:hover, .reel-fertig-zu:hover { border-color: var(--gold); }
#reelFertigVideo { width: 100%; max-height: 360px; border-radius: 9px; background: #000; display: block; }
#reelDownload { text-align: center; text-decoration: none; display: block; }
.reel-speichern { font-size: 16px; padding: 15px; }
.reel-fertig small { line-height: 1.45; }
.reel-original-export { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid rgba(196,154,68,.45); border-radius: 9px; background: rgba(196,154,68,.07); }
/* Der Originalexport ist der Profiweg — eingeklappt, damit er den Hauptknopf
   nicht verstellt. Zugeklappt bleibt nur die Ueberschrift sichtbar. */
.reel-original-export > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.reel-original-export > summary::-webkit-details-marker { display: none; }
.reel-original-export > summary strong { color: var(--off); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.reel-original-export > summary strong::before { content: "▸ "; color: var(--gold2); }
.reel-original-export[open] > summary strong::before { content: "▾ "; }
.reel-original-export > summary span { color: var(--muted); font-size: 10.5px; }
.reel-original-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reel-original-optionen label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.reel-original-optionen select { min-width: 0; padding: 7px 8px; color: var(--off); background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 11px; }
.reel-original-export #reelOriginalStatus { line-height: 1.4; }
.reel-original-export #reelOriginalStatus.error { color: #e07a6a; }
.reel-original-export #reelOriginalStatus.ok { color: #78c58a; }
.sec small { color: var(--muted); font-size: 11px; }
.sec input[type=text] { background: var(--panel2); border: 1px solid var(--line); color: var(--off);
  border-radius: 8px; padding: 10px 11px; font: inherit; font-size: 14px; }
.sec input[type=text]:focus { outline: none; border-color: var(--gold); }
.sec input[type=range] { accent-color: var(--gold); }
.foto-drehknopf-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; }
.foto-drehknopf-row .ghost-btn { min-width: 0; padding: 7px 8px; font-size: 11.5px; }
.foto-drehknopf-row .ghost-btn:first-child { text-align: left; }
.foto-drehknopf-row .ghost-btn:last-child { text-align: right; }
.reel-musik-auswahl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: stretch; }
.reel-musik-auswahl select { min-width: 0; }
.reel-musik-auswahl .ghost-btn, .reel-musik-werkzeuge .ghost-btn { padding: 8px 10px; font-size: 11.5px; white-space: nowrap; }
.reel-musik-auswahl .ghost-btn[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); background: rgba(196,154,68,.12); }
.reel-musik-werkzeuge { display: flex; align-items: center; gap: 7px; }
.reel-musik-werkzeuge small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-musik-trim { display: flex; flex-direction: column; gap: 8px; padding: 9px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(25,27,34,.75); }
.reel-musik-trim-zeile { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; align-items: end; }
.reel-musik-trim-zeile label { display: flex; flex-direction: column; gap: 4px; color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.reel-musik-trim input, .reel-musik-trim select { width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--panel2); color: var(--off); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 8px; font: inherit; font-size: 11px; }
.reel-musik-trim input:focus, .reel-musik-trim select:focus { outline: none; border-color: var(--gold); }
.reel-musik-trim-zeile > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.reel-musik-trim-zeile .dl { padding: 8px 9px; font-size: 10.5px; white-space: nowrap; }
@media (max-width: 560px) { .reel-musik-auswahl { grid-template-columns: 1fr; }
  .reel-musik-trim-zeile { grid-template-columns: 1fr 1fr; }
  .reel-musik-trim-zeile .dl { grid-column: 1 / -1; }
  .reel-original-optionen { grid-template-columns: 1fr; } }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-mini button { padding: 6px 10px; font-size: 11.5px; }
/* Richtungsschalter neben der Sortierung. Quadratisch und schmal — er steht
   neben den Segmentknoepfen und darf sie nicht ueberwiegen; der Pfeil traegt
   die Bedeutung, der Titel den Klartext. */
.sort-richtung { padding: 6px 9px; font-size: 13px; line-height: 1; min-width: 32px; }
.sort-richtung[aria-pressed="true"] { border-color: var(--gold); color: var(--gold2); }
.seg button { background: var(--panel2); color: var(--off); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.seg button.on { border-color: var(--gold); color: var(--gold2); font-weight: 600; }
#srLogoAddBox { margin-top: 11px; }
#srLogoAddBox .sub-label, #srLogoAddBox small { display: block; }
#srLogoAddBox .sub-label { margin-bottom: 6px; }
#srLogoAddBox small { margin-top: 6px; }
/* Template-Picker: Die Vorlagen bleiben im rechten Werkzeugbereich und
   erhalten dort eine eigene, kurze Scrollfläche. Das Canvas muss dafür nicht
   nach unten aus dem Blickfeld wandern. */
.template-category-filter { margin: 0 0 8px; }
.template-picker-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px;
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.template-category-select { min-width: 0; width: 100%; box-sizing: border-box; cursor: pointer;
  background: var(--panel2); color: var(--off); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 10px; font: inherit; font-size: 12px; letter-spacing: normal; text-transform: none; }
.template-category-select:focus { outline: none; border-color: var(--gold); }
.template-picker-bar small { white-space: nowrap; color: var(--muted); font-size: 10px; letter-spacing: normal; text-transform: none; }
@media (max-width: 620px) { .template-picker-bar { grid-template-columns: 1fr; gap: 5px; }
  .template-picker-bar small { display: none; } }
#tplSeg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 330px;
  overflow-y: auto; overscroll-behavior: contain; padding: 2px 5px 3px 1px; scrollbar-color: var(--gold) transparent; }
#tplSeg .template-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: stretch; min-width: 0;
  min-height: 62px; overflow: hidden; padding: 0; text-align: left; border-radius: 8px;
  background: var(--panel2); color: var(--off); }
#tplSeg .template-card:hover { border-color: var(--gold2); background: rgba(243,111,50,.08); }
#tplSeg .template-card.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(243,111,50,.18); }
.template-preview { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  padding: 2px; background: #11131a; }
/* Jede Picker-Karte erhält ihre echte Layout-Miniatur als Canvas. So sind
   Bildanzahl, Format, Aufteilung und die jeweilige Farbdramaturgie bereits
   vor dem Anklicken sichtbar – kein wiederholtes S&R-Platzhalterbild mehr. */
.template-preview-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.template-card-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 7px 8px; gap: 3px; }
.template-card-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.15; }
.template-card-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9.5px; line-height: 1.15; }
@media (max-width: 1120px) { #tplSeg { grid-template-columns: 1fr; max-height: 290px; } }
.dl { margin-top: 4px; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #16130a;
  font-weight: 700; border: 0; border-radius: 10px; padding: 14px; font: inherit; font-size: 15px; cursor: pointer; }
.dl:disabled { opacity: .45; cursor: default; }

/* ---------- Textbearbeitung ---------- */
.text-editor-panel { display: flex; flex-direction: column; gap: 6px; margin: 9px 0 3px;
  padding: 9px; border: 1px solid var(--gold); border-radius: 9px; background: rgba(196,154,68,.08); }
.text-editor-panel label { color: var(--gold2); font-size: 12px; font-weight: 700; }
.text-editor-panel label span { color: var(--muted); font-weight: 500; }
.text-editor-panel textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px;
  padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--dark);
  color: var(--off); font: 500 13px/1.4 Montserrat, sans-serif; }
.text-editor-panel textarea:focus { outline: none; border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(225,200,112,.13); }
.text-editor-panel small { color: var(--muted); line-height: 1.35; }
.text-editor-panel kbd { border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; color: var(--off); }
.text-color-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
.text-color-label { margin-right: 2px; color: var(--off); font-size: 12px; font-weight: 700; }
.text-color-swatch { --swatch-color: var(--gold); display: inline-block; width: 25px; height: 25px; padding: 0;
  border: 2px solid rgba(245,241,232,.42); border-radius: 50%; background: var(--swatch-color); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: transform .12s, border-color .12s, box-shadow .12s, opacity .12s; }
.text-color-swatch:hover:not(:disabled), .text-color-swatch:focus-visible:not(:disabled) { transform: translateY(-1px) scale(1.08); border-color: var(--off); outline: none; }
.text-color-swatch.on { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(196,154,68,.34), inset 0 0 0 1px rgba(0,0,0,.18); }
.text-color-swatch:disabled { opacity: .35; cursor: not-allowed; }
.text-color-reset { background: linear-gradient(135deg, var(--off) 0 46%, var(--dark) 46% 54%, var(--gold) 54% 100%); }
.text-color-hint { flex-basis: 100%; margin-top: -1px; }
#addTextLayer { width: 100%; margin-top: 8px; border-color: rgba(225,200,112,.6); color: var(--gold2); }

/* ---------- Sticker ---------- */
.sticker-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.sticker-thumb { width: 54px; height: 54px; border-radius: 8px; border: 1px solid var(--line);
  background-color: var(--panel2); background-image: linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  cursor: pointer; padding: 5px; }
.sticker-thumb:hover { border-color: var(--gold); }
.sticker-thumb img, .sticker-thumb canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Geschäftsführung: eigener Bereich, runde größere Kacheln passend zu den Kreis-Porträts */
.gf-tray { gap: 8px; padding: 8px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; }
.gf-thumb { width: 62px; height: 62px; border-radius: 50%; padding: 2px; background: transparent;
  border-color: transparent; }
.gf-thumb:hover { border-color: var(--gold2); }
.sticker-thumb.portrait-thumb { width: 62px; height: 62px; border-radius: 50%; padding: 2px; background: transparent; border-color: transparent; }
.sticker-thumb.portrait-thumb:hover { border-color: var(--gold2); }
.sticker-thumb.portrait-thumb img { border-radius: 50%; object-fit: cover; }
.tray-empty { color: var(--muted); font-size: 12px; }
.sticker-ctl { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ki-btn { background: linear-gradient(135deg, rgba(196,154,68,.18), rgba(225,200,112,.12));
  color: var(--gold2); border: 1px solid var(--gold); border-radius: 8px; padding: 10px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ki-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(196,154,68,.32), rgba(225,200,112,.2)); }
.ki-btn:disabled { opacity: .45; cursor: default; }
.suggest-hint { color: var(--muted); }
.suggest-hint.error { color: #e07a6a; }
.caption-out { background: var(--panel2); border: 1px solid var(--line); color: var(--off);
  border-radius: 8px; padding: 10px 11px; font: inherit; font-size: 13.5px; resize: vertical; }
.caption-out:focus { outline: none; border-color: var(--gold); }
#captionHint.error { color: #e07a6a; }
#captionHint { color: var(--muted); }
.ghost-btn { background: var(--panel2); color: var(--off); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ghost-btn:hover:not(:disabled) { border-color: var(--gold); }
.ghost-btn:disabled { opacity: .45; cursor: default; }
.ghost-btn.danger:hover { border-color: #e07a6a; color: #e07a6a; }
.sec code { color: var(--gold2); font-family: inherit; }

/* ---------- KI-Reel-Regisseur ---------- */
.reel-ki-sec { padding: 8px; border-color: rgba(196,154,68,.75); background:
  radial-gradient(circle at 18% 12%, rgba(225,200,112,.12), transparent 44%),
  linear-gradient(145deg, rgba(196,154,68,.08), rgba(25,27,34,.96) 48%); }
.reel-ki-launch { width: 100%; min-height: 112px; display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 12px;
  padding: 16px 14px; border: 1px solid var(--gold); border-radius: 12px;
  background: linear-gradient(135deg, rgba(196,154,68,.22), rgba(17,18,23,.92));
  color: var(--off); text-align: left; font: inherit; cursor: pointer;
  box-shadow: 0 9px 24px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04);
  transition: transform .16s, border-color .16s, background .16s; }
.reel-ki-launch:hover { transform: translateY(-1px); border-color: var(--gold2);
  background: linear-gradient(135deg, rgba(196,154,68,.32), rgba(17,18,23,.88)); }
.reel-ki-launch:focus-visible { outline: 3px solid rgba(225,200,112,.4); outline-offset: 2px; }
.reel-ki-launch-icon, .reel-ki-modal-icon { display: flex; align-items: center; justify-content: center;
  color: var(--gold2); background: rgba(196,154,68,.13); border: 1px solid rgba(225,200,112,.35);
  border-radius: 16px; }
.reel-ki-launch-icon { width: 62px; height: 62px; }
.reel-ki-launch-icon svg, .reel-ki-modal-icon svg { width: 43px; height: 43px; overflow: visible; }
.reel-ki-launch-icon svg path, .reel-ki-modal-icon svg path { fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.reel-ki-launch-icon svg .funke, .reel-ki-modal-icon svg .funke {
  fill: var(--gold2); stroke-width: 1.5; }
.reel-ki-launch-text { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.reel-ki-launch-text strong { color: var(--gold2); font-size: 16px; line-height: 1.2; }
.reel-ki-launch-text small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.reel-ki-launch-pfeil { color: var(--gold2); font-size: 24px; }
.reel-ki-fertig { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px;
  padding: 10px; border: 1px solid rgba(87,168,119,.45); border-radius: 10px;
  background: rgba(87,168,119,.08); }
.reel-ki-fertig > span { color: #7dd39f; font-size: 18px; }
.reel-ki-fertig div { display: flex; flex-direction: column; gap: 3px; }
.reel-ki-fertig strong { font-size: 11.5px; color: #a7e5bf; }
.reel-ki-fertig small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.reel-ki-fertig button { grid-column: 1 / -1; }

.reel-ki-dialog { position: fixed; inset: 0; z-index: 65; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,6,9,.82); backdrop-filter: blur(8px); }
.reel-ki-modal { width: min(930px, 96vw); max-height: min(860px, 94vh);
  display: grid; grid-template-rows: auto auto minmax(0,1fr) auto;
  background: var(--dark); color: var(--off); border: 1px solid var(--gold);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(225,200,112,.08) inset; }
.reel-ki-modal-kopf { display: grid; grid-template-columns: 64px minmax(0,1fr) auto;
  align-items: center; gap: 15px; padding: 20px 22px 17px;
  background: radial-gradient(circle at 12% 0, rgba(225,200,112,.14), transparent 42%),
  var(--panel); border-bottom: 1px solid var(--line); }
.reel-ki-modal-icon { width: 64px; height: 64px; }
.reel-ki-modal-kopf h2 { margin: 3px 0 4px; color: var(--gold2); font-size: 24px; }
.reel-ki-modal-kopf p { margin: 0; color: var(--muted); font-size: 12.5px; }
.reel-ki-schliessen { align-self: start; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel2); color: var(--off);
  font: inherit; cursor: pointer; }
.reel-ki-schliessen:hover { border-color: var(--gold); color: var(--gold2); }
.reel-ki-schritte { list-style: none; display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; padding: 0 22px; margin: 0; background: var(--panel); }
.reel-ki-schritte li { position: relative; display: flex; align-items: center; gap: 8px;
  padding: 12px 0; color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; border-bottom: 2px solid transparent; }
.reel-ki-schritte li:not(:last-child)::after { content: ""; position: absolute;
  left: 35px; right: 14px; top: 50%; height: 1px; background: var(--line); z-index: 0; }
.reel-ki-schritte li span, .reel-ki-schritte li strong { position: relative; z-index: 1; }
.reel-ki-schritte li span { width: 24px; height: 24px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--panel2);
  border: 1px solid var(--line); font-size: 10px; }
.reel-ki-schritte li.erledigt, .reel-ki-schritte li.aktiv { color: var(--gold2); }
.reel-ki-schritte li.erledigt span, .reel-ki-schritte li.aktiv span {
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #16130a;
  border-color: var(--gold2); }
.reel-ki-schritte li.aktiv { border-bottom-color: var(--gold); }
.reel-ki-modal-inhalt { min-height: 0; overflow-y: auto; padding: 26px 28px; }
.reel-ki-panel { display: flex; flex-direction: column; gap: 13px; max-width: 760px; margin: 0 auto; }
.reel-ki-panel h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.reel-ki-panel > p { margin: -4px 0 5px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.reel-ki-kicker { color: var(--gold2); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; }
#reelKiWunsch, .reel-ki-panel select { width: 100%; background: var(--panel2);
  border: 1px solid var(--line); color: var(--off); border-radius: 9px;
  padding: 11px 12px; font: inherit; font-size: 13.5px; }
#reelKiWunsch { resize: vertical; min-height: 132px; line-height: 1.5; }
#reelKiWunsch:focus, .reel-ki-panel select:focus { outline: none; border-color: var(--gold); }
.reel-ki-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reel-ki-zweispaltig label { display: flex; flex-direction: column; gap: 5px; }
.reel-ki-zusammenfassung { display: flex; align-items: center; gap: 10px; margin-top: 4px;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.reel-ki-zusammenfassung span { color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.reel-ki-zusammenfassung strong { margin-left: auto; color: var(--gold2); font-size: 13px; }
.reel-ki-ergebnis { display: flex; flex-direction: column; gap: 9px;
  width: 100%; }
.reel-ki-ergebnis-kopf { display: flex; align-items: flex-start; gap: 8px; }
.reel-ki-ergebnis-kopf h3 { margin: 3px 0 0; font-size: 19px; line-height: 1.3; }
.reel-ki-label { color: var(--gold2); font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; }
.reel-ki-meta { margin-left: auto; flex: 0 0 auto; border: 1px solid var(--gold);
  color: var(--gold2); border-radius: 18px; padding: 4px 8px; font-size: 10px;
  font-variant-numeric: tabular-nums; }
.reel-ki-konzept { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin: 0; }
.reel-ki-szenen { display: flex; flex-direction: column; gap: 5px; }
.reel-ki-szene { display: grid; grid-template-columns: 25px minmax(0,1fr) auto;
  gap: 7px; align-items: center; padding: 7px 8px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; }
.reel-ki-szene-nr { width: 23px; height: 23px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: rgba(196,154,68,.18);
  color: var(--gold2); font-size: 10px; font-weight: 700; }
.reel-ki-szene-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reel-ki-szene-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; }
.reel-ki-szene-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; }
.reel-ki-szene-zeit { color: var(--gold2); font-size: 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel-ki-hinweise { padding: 8px 9px; border-left: 3px solid #e0b76a;
  background: rgba(224,183,106,.08); color: #e0b76a; font-size: 10.5px;
  line-height: 1.45; }
.reel-ki-status { display: block; max-width: 760px; margin: 14px auto 0;
  padding: 10px 12px; border-radius: 8px; color: var(--gold2);
  background: rgba(196,154,68,.08); border: 1px solid rgba(196,154,68,.3); }
.reel-ki-status.error { color: #f2a092; border-color: rgba(224,122,106,.45);
  background: rgba(224,122,106,.08); }
#reelKiCaption { width: 100%; }
.reel-ki-modal-fuss { display: flex; align-items: center; gap: 9px; min-height: 72px;
  padding: 13px 22px; border-top: 1px solid var(--line); background: var(--panel); }
.reel-ki-fuss-hinweis { margin-right: auto; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.reel-ki-modal-fuss .dl { min-width: 210px; padding: 11px 15px; }
.reel-ki-uebernehmen { font-size: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset,
  0 8px 22px rgba(196,154,68,.2); }
.reel-ki-dialog.uebernommen .reel-ki-modal { animation: reelKiFertig .24s ease-out; }
@keyframes reelKiFertig {
  50% { transform: scale(1.012); box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 30px rgba(196,154,68,.22); }
}
@media (max-width: 640px) {
  .reel-ki-dialog { padding: 0; align-items: stretch; }
  .reel-ki-modal { width: 100vw; max-height: none; height: 100vh; border-radius: 0; border-width: 0; }
  .reel-ki-modal-kopf { grid-template-columns: 48px minmax(0,1fr) auto; padding: 15px; }
  .reel-ki-modal-icon { width: 48px; height: 48px; }
  .reel-ki-modal-icon svg { width: 32px; height: 32px; }
  .reel-ki-modal-kopf h2 { font-size: 19px; }
  .reel-ki-modal-kopf p { display: none; }
  .reel-ki-schritte { padding: 0 15px; }
  .reel-ki-schritte li strong { display: none; }
  .reel-ki-modal-inhalt { padding: 20px 16px; }
  .reel-ki-zweispaltig { grid-template-columns: 1fr; }
  .reel-ki-modal-fuss { flex-wrap: wrap; padding: 11px 15px; }
  .reel-ki-fuss-hinweis { display: none; }
  .reel-ki-modal-fuss .dl { flex: 1; min-width: 0; }
}

/* ---------- schmale Screens (Prototyp-Responsive) ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .library { max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .editor { grid-template-columns: 1fr; }
  .panel-resizer { display: none; }
  .controls { border-left: 0; border-top: 1px solid var(--line); }
  #cv { max-height: 60vh; }
  #app.modus-reel #cv { max-height: 48vh; }
}

/* ---------- Effekt-Popover ---------- */
.clip-menue { position: fixed; z-index: 60; width: min(430px, 94vw); max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 12px;
  padding: 12px 13px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.cm-titel { color: var(--gold2); font-size: 11.5px; font-weight: 600; margin: 8px 0 5px;
  letter-spacing: .04em; text-transform: uppercase; }
.cm-titel:first-child { margin-top: 0; }
.cm-reihe { display: flex; flex-wrap: wrap; gap: 5px; }
.cm-knopf { display: flex; align-items: center; gap: 5px; background: var(--panel2); color: var(--off);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12px;
  cursor: pointer; }
.cm-knopf span { color: var(--gold2); }
/* Blenden-Kärtchen im Clip-Menü (K1): Miniatur + Name, Kategorie als Zwischentitel */
.cm-untertitel { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin: 6px 0 3px; }
/* Looks (K2): Raster mit Miniaturen im Reiter Bild */
.look-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.look-kat { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.look-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
.look-karte { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 3px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--off); font: inherit; font-size: 10px; line-height: 1.15; cursor: pointer; }
.look-karte:hover { border-color: var(--gold); }
.look-karte.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: linear-gradient(135deg, rgba(196,154,68,.22), rgba(225,200,112,.10)); }
.look-mini { width: 72px; height: 44px; border-radius: 4px; display: block; background: #111; }
.look-karte span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-regler { display: flex; flex-direction: column; gap: 4px; }
.look-regler-zeile { display: grid; grid-template-columns: 90px 1fr 52px; align-items: center; gap: 6px; font-size: 11px; color: var(--off); }
.look-regler-zeile input { width: 100%; accent-color: var(--gold); }
.look-regler-zeile output { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.look-reset { margin-top: 6px; }
/* Textstile (K6) im Texteditor */
.text-stile { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.text-stile-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.text-stil { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 7px; border: 1px solid var(--line);
  background: #2b3340; color: var(--off); font: inherit; cursor: pointer; }
.text-stil:hover { border-color: var(--gold); }
.text-stil.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.text-stil-probe { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 15px; line-height: 1.2; }
.text-stil small { font-size: 9.5px; color: var(--muted); }
/* Werkzeuge (K4) */
#tlSpur.schnitt .tl-chip { cursor: col-resize; }
.tl-tasten { position: fixed; right: 0; top: 55px; bottom: 0; width: min(380px, 100%); z-index: 45; background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.tl-tasten[hidden] { display: none; }
.tl-tasten .rw-blatt-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tl-tasten-liste { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; padding: 14px 16px; margin: 0; font-size: 12.5px; color: var(--off); }
.tl-tasten-liste dt { font-weight: 700; color: var(--gold2); font-variant-numeric: tabular-nums; }
.tl-tasten-liste dd { margin: 0; color: var(--muted); }
#tlMehr button.on { border-color: var(--gold); color: var(--gold2); }
.cm-blenden { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; }
.cm-blende { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 3px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--off); font: inherit; font-size: 10px; line-height: 1.15;
  cursor: pointer; text-align: center; }
.cm-blende:hover { border-color: var(--gold); }
.cm-blende.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: linear-gradient(135deg, rgba(196,154,68,.22), rgba(225,200,112,.10)); }
.cm-mini { width: 64px; height: 36px; border-radius: 4px; background: #111; display: block; }
.cm-blende span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-knopf:hover { border-color: var(--gold); }
.cm-knopf.on { background: linear-gradient(135deg, rgba(196,154,68,.22), rgba(225,200,112,.10));
  border-color: var(--gold); color: var(--gold2); }
.cm-knopf.schmal { padding: 5px 10px; font-variant-numeric: tabular-nums; }
.cm-zu { margin-top: 11px; width: 100%; background: var(--panel2); color: var(--off);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cm-zu:hover { border-color: var(--gold); }

/* ---------- Textschnitt: gesprochenes Wort ---------- */
.tx { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.tx-kopf { display: flex; align-items: center; gap: 8px; }
.tx-kopf strong { font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold2); }
.tx-fueller { flex: 1; }
.tx-info { color: var(--muted); font-size: 11px; }
.tx-kopf .ghost-btn { padding: 3px 8px; font-size: 11px; }
.tx-worte { flex: 1; min-height: 84px; max-height: 32vh; overflow-y: auto;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 10px; line-height: 2.1; font-size: 13.5px; }
.tx-wort { display: inline; padding: 2px 3px; border-radius: 4px; cursor: pointer;
  transition: background .1s; }
.tx-wort:hover { background: rgba(196,154,68,.28); }
/* Weggeklickte Wörter bleiben lesbar — man muss sehen, was man wegwirft */
.tx-wort.weg { color: var(--muted); text-decoration: line-through;
  text-decoration-color: #e07a6a; opacity: .65; }
.tx-wort.laeuft { background: rgba(225,200,112,.32); color: var(--off); }
/* Nicht angeklickt, faellt aber mit dem Nachbarschnitt weg — sichtbar anders
   als „weggestrichen", damit niemand es fuer eine eigene Entscheidung haelt. */
.tx-wort.verloren { color: var(--muted); opacity: .55; text-decoration: underline dotted; text-underline-offset: 3px; }
.tx-pause { color: var(--muted); opacity: .5; }
.tx-fuss { display: flex; gap: 6px; }
.tx-fuss .dl { flex: 1; margin-top: 0; padding: 8px; font-size: 12.5px; }
.tx-fuss .ghost-btn { padding: 8px 10px; font-size: 12px; }
/* Der Weg hinaus: Fuer ein langes Interview ist dieser Kasten zu klein — er
   sitzt neben der Kachel. Das eigene Werkzeug sagt das und ist einen Klick weg. */
.tx-bruecke-btn { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.tx-leer { color: var(--muted); font-size: 12px; }
/* Trennzeile je Aufnahme — bei einer langen Folge ist sie die Orientierung,
   welcher Clip gerade gelesen wird. */
.tx-clip { display: block; margin: 10px 0 4px; padding-top: 6px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tx-clip:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tx-clip.fokus { color: var(--gold2); }
.tx-leer-clip { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-style: italic; }

/* Kommandocockpit im Hauptmenue — was heute anliegt, ueber den Werkzeugen.

   EIGENE FARBEN, KEINE MARKEN-CI. Die erste Fassung nutzte var(--brand-text)
   und var(--off); beide setzt brand-context.js aus der Kunden-CI, und bei
   Schall & Rauch ergab das dunkelgrauen Text auf dunklem Grund — unlesbar.
   Derselbe Fehler wie am Morgen des 07.08.2026 im Bildbetrachter. Ein Cockpit,
   das man nicht lesen kann, ist schlimmer als keines. */
.hub-lage {
  --cockpit-flaeche: #1b1e26;
  --cockpit-rand: #2b303c;
  --cockpit-text: #f5f2ea;
  --cockpit-leise: #a8acba;
  display: flex; flex-direction: column; gap: 1px; margin: 0 0 22px;
  background: var(--cockpit-rand); border: 1px solid var(--cockpit-rand);
  border-radius: 14px; overflow: hidden;
}
.hub-lage-zeile { display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; background: var(--cockpit-flaeche); }
.hub-lage-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hub-lage-text strong { font-weight: 600; font-size: 16.5px; line-height: 1.35;
  color: var(--cockpit-text); }
.hub-lage-text small { font-size: 13px; color: var(--cockpit-leise); }
.hub-lage-knopf { flex: none; background: var(--gold); color: #17181d;
  border: 1px solid var(--gold); border-radius: 9px; padding: 9px 18px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hub-lage-knopf:hover { background: var(--gold2); border-color: var(--gold2); }
.hub-lage-baustellen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  padding: 13px 18px; background: var(--cockpit-flaeche); }
.hub-lage-baustellen-titel { font-size: 13px; color: var(--cockpit-leise); }
.hub-lage-baustelle { font-size: 13px; color: var(--cockpit-text);
  border: 1px solid var(--cockpit-rand); border-radius: 999px; padding: 4px 11px; }
@media (max-width: 640px) {
  .hub-lage-zeile { flex-wrap: wrap; }
  .hub-lage-knopf { width: 100%; }
}

/* Werkzeuge kompakt: Bild als schmaler Streifen LINKS statt grosser Flaeche
   oben. Eine Kachel war 176px hoch (88 Bild + 88 Inhalt) — 13 Werkzeuge
   ergaben ueber 1000px Scrollstrecke. Bodo am 07.08.2026: "so muss ich mich ja
   trotzdem durch die Kacheln fraesen". Jetzt passen sie auf einen Blick; die
   Bilder bleiben als Wiedererkennung, nur klein. */
.hub-karte { flex-direction: row; align-items: stretch; border-radius: 12px; }
.hub-karte-bild { width: 76px; flex: none; aspect-ratio: auto; min-height: 0;
  border-right: 1px solid var(--line); }
.hub-karte-inhalt { min-height: 0; padding: 10px 14px; justify-content: center; gap: 2px; }
/* Der Beschreibungssatz entfaellt in der kompakten Ansicht. Er stand unter
   jedem Titel und machte jede Karte doppelt so hoch — bei 13 Werkzeugen ist
   das der Unterschied zwischen "auf einen Blick" und "durchfraesen". Der Text
   bleibt als title-Attribut am Element und erscheint beim Verweilen. */
.hub-karte .hub-sub { display: none; }
/* Gleiche Hoehe fuer alle Karten, auch bei zweizeiligem Titel. Ein Raster mit
   unterschiedlich hohen Zeilen wirkt unruhig und laesst die Gruppe groesser
   erscheinen, als sie ist. */
.hub-karte { min-height: 58px; }
.hub-karte .hub-titel { font-size: 14.5px; line-height: 1.25; }
.hub-karte .hub-karte-label { font-size: 10px; letter-spacing: .09em; }
.hub-karte:hover { transform: none; box-shadow: none; }
.hub-karte:hover .hub-karte-bild { transform: none; }
.hub-gruppe-kopf { margin-bottom: 10px; }

/* Markenprofil-Durchsicht in den Einstellungen. Eigene Farben wie im Cockpit:
   Der Block traegt Fliesstext, der gelesen werden muss — var(--brand-text) ist
   bei manchen Kunden fast schwarz und waere auf dunklem Grund unlesbar. */
.settings-profil {
  --profil-flaeche: #1b1e26; --profil-rand: #2b303c;
  --profil-text: #f5f2ea; --profil-leise: #a8acba;
  margin: 22px 0 0; padding: 18px 20px; background: var(--profil-flaeche);
  border: 1px solid var(--profil-rand); border-radius: 14px;
}
.settings-profil-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.settings-profil-kopf h3 { margin: 0; color: var(--profil-text); font-size: 17px; }
.settings-profil-stand { font-size: 12.5px; color: var(--profil-leise);
  border: 1px solid var(--profil-rand); border-radius: 999px; padding: 3px 10px; }
.settings-profil-stand.ist-frei { color: var(--gold2); border-color: var(--gold); }
.settings-profil-hinweis { margin: 8px 0 14px; font-size: 13px; color: var(--profil-leise); }
.settings-profil-warnung { margin: 0 0 12px; padding: 9px 12px; font-size: 13px;
  color: var(--profil-text); background: rgba(196,154,68,.16);
  border-left: 3px solid var(--gold); border-radius: 0; }
.settings-profil-warte { font-size: 13.5px; color: var(--profil-leise); margin: 0; }
.settings-profil-zeile { display: grid; grid-template-columns: 170px 1fr; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--profil-rand); }
.settings-profil-zeile strong { font-size: 13px; font-weight: 500; color: var(--profil-leise); }
.settings-profil-zeile span { font-size: 13.5px; color: var(--profil-text);
  line-height: 1.5; white-space: pre-line; }
.settings-profil-quelle { margin: 12px 0 0; font-size: 12px; color: var(--profil-leise); }
.settings-profil-aktionen { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 640px) { .settings-profil-zeile { grid-template-columns: 1fr; gap: 3px; } }

/* Bearbeitungsmodus des Markenprofils. Eigene Farben wie der Rest des Blocks —
   die Marken-CI setzt --brand-text bei manchen Kunden fast schwarz. */
.settings-profil-zeile.ist-bearbeitung { align-items: start; }
.settings-profil-zeile.ist-bearbeitung label { font-size: 13px; font-weight: 500;
  color: var(--profil-leise); padding-top: 7px; }
.settings-profil-zeile textarea { width: 100%; background: #12141a;
  color: var(--profil-text); border: 1px solid var(--profil-rand); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.settings-profil-zeile textarea:focus { outline: none; border-color: var(--gold); }
.chronik-bereich{margin:1.2rem 0 1.8rem;padding:1.1rem 1.15rem;border:1px solid rgba(196,154,68,.42);border-radius:16px;background:linear-gradient(135deg,rgba(196,154,68,.09),var(--panel) 38%);box-shadow:0 14px 36px rgba(0,0,0,.16)}
.chronik-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.chronik-kopf>div{min-width:0;flex:1 1 430px}.chronik-kicker{display:block;margin-bottom:.35rem;color:var(--gold2);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.chronik-kopf h3{margin:0;color:var(--off);font-size:18px}.chronik-kopf small{display:block;margin-top:.35rem;color:var(--muted);font-size:11.5px;line-height:1.45}
.chronik-lage{flex:0 0 auto;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.chronik-lage.ist-erledigt{color:#9fd6a1;border-color:rgba(159,214,161,.38);background:rgba(159,214,161,.1)}
.chronik-lage.ist-offen{color:var(--gold2);border-color:rgba(196,154,68,.55);background:rgba(196,154,68,.12)}
.chronik-bereich>#chronikStatus:not(:empty){margin-top:.75rem}
.chronik-leer{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;padding:.7rem .8rem;border:1px solid rgba(159,214,161,.2);border-radius:10px;background:rgba(159,214,161,.07);color:var(--muted);font-size:12px}
.chronik-leer-icon{display:grid;flex:0 0 28px;width:28px;height:28px;place-items:center;border-radius:50%;background:rgba(159,214,161,.15);color:#9fd6a1;font-weight:700}.chronik-leer strong{display:block;margin-bottom:.12rem;color:var(--off);font-size:12.5px}
.chronik-gruppe{margin-top:1rem}.chronik-gruppe h4{margin:0 0 .5rem;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.chronik-projekte{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.65rem}
.chronik-verlauf-liste{display:flex;gap:.6rem;flex-wrap:wrap}
.chronik-projekt{min-width:0;text-align:left;padding:.78rem .85rem;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--off);font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.chronik-projekt.ist-offen{border-color:rgba(196,154,68,.55);background:rgba(196,154,68,.1)}
.chronik-projekt.ist-verlauf{min-width:210px;width:auto;background:rgba(32,35,44,.72)}
.chronik-projekt:hover,.chronik-projekt:focus-visible{border-color:var(--gold);background:rgba(196,154,68,.14);outline:none;transform:translateY(-1px)}
.chronik-projekt strong,.chronik-projekt small{display:block}.chronik-projekt strong{font-size:13px}.chronik-projekt small{margin-top:.28rem;color:var(--muted);font-size:11px;line-height:1.35}
.chronik-detail{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px;background:#15171d;color:var(--off)}
.chronik-detail h3,.chronik-detail h4{color:var(--off)}.chronik-detail small{color:var(--muted)}
.chronik-detail-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.chronik-timeline{display:flex;gap:.6rem;overflow-x:auto;padding:.8rem 0}
.chronik-punkt{min-width:190px;padding:.7rem;border-left:4px solid #6f876e;background:var(--panel2);border-radius:8px}
.chronik-punkt p{margin-top:.35rem;color:var(--off);font-size:12px;line-height:1.4}.chronik-punkt.offen{border-color:var(--gold)}.chronik-punkt.verworfen{border-color:#6f727d;opacity:.72}
.chronik-claims{display:grid;gap:.7rem;margin:.8rem 0}.chronik-claim{padding:.75rem;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.chronik-claim p{margin-bottom:.35rem;color:var(--off);font-size:13px;line-height:1.45}
.chronik-belege{display:flex;gap:.45rem;overflow-x:auto;margin-top:.55rem}.chronik-belege img{width:96px;height:76px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.chronik-aktionen{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.chronik-aktionen button{min-height:40px}
.chronik-vergleich{margin:.9rem 0;padding:.85rem;border:1px solid var(--line);border-left:4px solid #6f876e;background:rgba(111,135,110,.1);border-radius:8px}.chronik-vergleich p{margin-top:.45rem;font-size:12.5px;line-height:1.45}.chronik-noch-offen{color:var(--gold2)}
.chronik-vorschlag{margin:.8rem 0;padding:.85rem;border:1px solid rgba(196,154,68,.38);border-radius:12px;background:rgba(196,154,68,.07)}.chronik-vorschlag h4{margin:.2rem 0}.chronik-vorschlag p{margin-top:.45rem;font-size:12.5px;line-height:1.45}
@media(max-width:640px){.chronik-bereich{padding:.9rem}.chronik-kopf{gap:.7rem}.chronik-lage{order:2}.chronik-projekte{grid-template-columns:1fr}.chronik-verlauf-liste .chronik-projekt{width:100%;min-width:0}.chronik-belege img{width:84px;height:68px}}
.admin-project-migration-content,.admin-project-migration-block{display:grid;gap:10px}
.admin-project-migration-block{padding:14px;border:1px solid var(--line,#d7dce2);border-radius:12px;background:rgba(255,255,255,.55)}
.admin-project-migration-block.warning{border-color:#d79a42;background:#fff8eb}
.admin-project-migration-row,.admin-project-migration-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-project-migration-row strong{min-width:180px;flex:1}
.admin-project-migration-actions select{min-width:min(100%,320px);flex:1}
.upload-projekt-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:8px}
.upload-projekt-meta .sub-label{margin:0}
@media(max-width:620px){.upload-projekt-meta{grid-template-columns:1fr}}
.chronik-punkt.veroeffentlicht{border-color:#3f7d64;background:rgba(63,125,100,.1)}
.editorial-strip{margin:10px 12px 4px;padding:11px 14px;border:1px solid rgba(196,154,68,.5);border-radius:11px;background:linear-gradient(100deg,rgba(196,154,68,.14),rgba(28,31,39,.96));color:var(--off)}
.editorial-strip-main{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}.editorial-strip-main strong{font-size:13px}.editorial-strip-main>span:last-child{color:var(--muted);font-size:11px}
.editorial-trust{padding:3px 7px;border-radius:999px;background:var(--gold);color:#151515;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.editorial-trust.client{background:#555b68;color:#f4f5f8}
.editorial-strip>p{margin:6px 0 0;color:#d5d7de;font-size:11.5px;line-height:1.4}.editorial-strip details{margin-top:7px;font-size:11px;color:var(--muted)}
.editorial-alternatives{display:flex;gap:5px;margin-top:8px;align-items:center}.editorial-alternatives::before{content:"Alternativen";margin-right:3px;color:var(--muted);font-size:10px}.editorial-alternatives img{width:42px;height:34px;object-fit:cover;border:1px solid var(--line);border-radius:5px;cursor:pointer}.editorial-alternatives img:hover{border-color:var(--gold)}
.editorial-strip summary{cursor:pointer;color:var(--gold2)}#editorialFactsBody{display:grid;gap:5px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}#editorialFactsBody p{margin:0;line-height:1.4}
.editorial-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.editorial-actions button{border:1px solid rgba(196,154,68,.55);border-radius:7px;background:rgba(196,154,68,.1);color:var(--gold2);padding:6px 9px;font:inherit;cursor:pointer}.editorial-actions button:hover{background:rgba(196,154,68,.2)}
.red-vs-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.red-vs-actions .ghost-btn{flex:1 1 auto;padding:7px 9px;font-size:11px}
.editorial-companion{display:grid;gap:9px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.editorial-companion label{display:grid;gap:5px;color:var(--muted);font-size:11px}.editorial-companion textarea,.editorial-companion input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:7px;background:#15171d;color:var(--off);padding:8px;font:inherit;resize:vertical}.editorial-companion textarea:focus,.editorial-companion input:focus{outline:none;border-color:var(--gold)}
.editorial-approval-notes{padding:8px 10px;border-left:3px solid var(--gold);background:rgba(196,154,68,.09);color:var(--off);font-size:11px;line-height:1.45}
@media(max-width:720px){.editorial-strip{margin:7px 8px 2px}.editorial-strip-main{align-items:flex-start}.editorial-strip-main>span:last-child{width:100%}}

/* Ausschnitt-Regler einer Nebenfläche (Foto 2–4). Foto 1 wird in der Timeline
   getrimmt; die Nebenflächen haben dort keinen eigenen Chip. */
.neben-trim { margin: 10px 0 4px; padding: 10px 10px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel2); }
.neben-trim input[type="range"] { width: 100%; accent-color: var(--gold); }
.neben-trim-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.neben-trim-row small { color: var(--muted); font-size: 11px; line-height: 1.35; }

/* ---- Bildspuren der Mehrbild-Vorlagen ----
   Eine Reihe je Bildfläche, oberhalb der Hauptspur — die Anordnung eines
   Schnittprogramms (V1 unten, Overlays darüber). Die Chips liegen absolut über
   ihrem Clip, exakt wie die Tonchips: Breite und Position kommen aus TLPX,
   NICHT aus dauer*PX_PRO_S. */
#tlNeben { position: relative; }
#tlNeben:empty { display: none; }
.tl-nebenreihe { position: relative; height: 30px; margin-bottom: 3px; }
.tl-nebenchip { position: absolute; top: 0; bottom: 0; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(90,120,160,.34), rgba(60,80,110,.30));
  display: flex; align-items: center; gap: 6px; padding: 0 16px; cursor: pointer; }
.tl-nebenchip:hover { border-color: var(--gold2); }
.tl-nebenchip.aktiv { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tl-nebenchip .tn-name { color: var(--off); font-size: 11px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-nebenchip .tn-slot { color: var(--gold2); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; pointer-events: none; }
/* Griffe zum Trimmen des QUELLmaterials — dieselbe Geste wie in der Hauptspur. */
.tl-nebenchip .tn-griff { position: absolute; top: 0; bottom: 0; width: 12px;
  cursor: ew-resize; background: rgba(245,242,234,.14);
  /* wie .tl-griff: ohne das übernimmt der Browser eine schräge Ziehbewegung als
     Seitenscroll und bricht den Trimm per pointercancel ab */
  touch-action: none; }
.tl-nebenchip .tn-griff:hover { background: var(--gold); }
.tl-nebenchip .tn-griff.links { left: 0; border-radius: 6px 0 0 6px; }
.tl-nebenchip .tn-griff.rechts { right: 0; border-radius: 0 6px 6px 0; }
/* Läuft der Ausschnitt kürzer als der Clip, wiederholt er sich — das zeigt der
   schraffierte Rest, statt eine Lücke vorzutäuschen, die es nicht gibt. */
.tl-nebenwdh { position: absolute; top: 0; bottom: 0; border-radius: 6px;
  pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(245,242,234,.16) 0 6px, rgba(245,242,234,0) 6px 12px); }
.tl-nebenleer { position: absolute; top: 0; bottom: 0; box-sizing: border-box;
  border: 1px dashed var(--line); border-radius: 6px; display: flex;
  align-items: center; padding: 0 10px; color: var(--muted); font-size: 10.5px; }

/* Mit bis zu drei Bildspuren wird der Inhalt höher als die eingestellte
   Timeline-Höhe. Ohne diese Regel schöbe sich die Hauptspur unsichtbar nach
   unten (die Spur hat overflow-y: hidden und feste Höhe, sobald --tl-hoehe
   gesetzt ist). */
#app.modus-reel .tl-spur { overflow-y: auto; }
#tlNeben { flex: 0 0 auto; }
/* Vorlauf: Zeit, in der die Fläche schon steht, ihr Video aber noch nicht läuft. */
.tl-nebenvorlauf { position: absolute; top: 0; bottom: 0; border-radius: 6px;
  border: 1px dashed rgba(245,242,234,.22); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(245,242,234,.07) 0 4px, rgba(245,242,234,0) 4px 8px); }

/* ---------- Groessenskala im Reel-Modus (Etappe B) ---------- */
/* Vorher: Hauptknopf 46 px, Nebenknopf 34 px, alles mit Text — wenn vieles gross
   ist, ist nichts wichtig. Der Beitragsmodus ist bewusst nicht betroffen. */
#app.modus-reel .controls .dl { min-height: var(--k-primaer); padding: 9px 12px; font-size: 14px; border-radius: 9px; }
#app.modus-reel .controls .ghost-btn,
#app.modus-reel .controls .seg button,
#app.modus-reel .vor-knoepfe .ghost-btn { min-height: var(--k-neben); padding: 4px 10px; font-size: var(--s-knopf); }
#app.modus-reel .vor-knoepfe .dl { min-height: var(--k-primaer); padding: 8px 10px; font-size: 13px; }
#app.modus-reel .controls .sub-label { font-size: var(--s-label); }
#app.modus-reel .controls .check-zeile input { width: var(--k-schalter); height: var(--k-schalter); }
#app.modus-reel .tl-chip { height: var(--k-clip); }
#app.modus-reel .reel-speichern { min-height: var(--k-primaer); padding: 10px; font-size: 15px; }

/* Spatial video/audio transitions; independent from the legacy seam buttons. */

#app.modus-reel #tlChips.mit-overlap {display:block!important;position:relative;min-height:58px;gap:0!important}
#app.modus-reel #tlChips.mit-overlap>.tl-uebergang {display:none!important}
#app.modus-reel #tlChips.mit-overlap>.tl-chip {min-width:0!important}
#app.modus-reel .tl-transition {position:absolute;z-index:15;top:3px;height:25px;padding:2px 5px;border:1px solid #81bdff;border-radius:3px;background:#3675b0b8;color:white;overflow:hidden;white-space:nowrap;font-size:11px;text-align:left;cursor:pointer}
#app.modus-reel .tl-transition.audio {border-color:#95e4bf;background:#238966c9;top:22px}
#app.modus-reel .tl-transition.leer {background:#84909c75;border:1px dashed #ccd1d5;pointer-events:none}
#app.modus-reel .tl-transition.rand {top:3px;font-size:9px;height:18px}
#app.modus-reel .tl-audio-vorlage {display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid #43896b;background:#203b30;color:#c5f4de;border-radius:6px;text-align:left;cursor:grab}
#app.modus-reel .tl-audio-vorlage svg {width:80px;height:36px}
#app.modus-reel .tl-clip-menu {position:fixed;z-index:10000;display:flex;flex-direction:column;max-width:min(330px,calc(100vw - 12px));padding:6px;background:#232630;border:1px solid #6b7384;border-radius:6px;box-shadow:0 8px 30px #0008}
#app.modus-reel .tl-clip-menu button {padding:12px;text-align:left;border:0;background:transparent;color:white}
#app.modus-reel #tlSpur.schnitt,#app.modus-reel #tlSpur.schnitt .tl-chip,#app.modus-reel #tlSpur.schnitt .tl-tonchip {cursor:url("/assets/rasierklinge.svg") 5 26,crosshair!important}
#app.modus-reel [data-tl="werkzeug"]::before {content:"";display:inline-block;width:23px;height:20px;background:url("/assets/rasierklinge.svg") center/contain no-repeat;vertical-align:middle;margin-right:5px}

#app.modus-reel .tl-transition-griff {position:absolute;right:0;top:0;bottom:0;width:8px;border-left:2px solid #fff9;cursor:ew-resize;background:#ffffff25}
#app.modus-reel #tlTransitionGhost { position:fixed; z-index:10000; pointer-events:none; padding:10px 16px; border:1px solid #87b9df; border-radius:5px; background:#234a68; color:white; box-shadow:0 4px 16px #0008; }
#app.modus-reel #tlTransitionGhost.audio { background:#205f49; border-color:#7bcdaa; }
#app.modus-reel [data-rwuebergang], #app.modus-reel [data-audio-transition] { touch-action:none; }
/* Equal video tracks: every clip keeps time, source and inspector when changing row. */
#app.modus-reel #tlChips.videospuren {display:block;position:relative;min-height:112px;overflow:visible;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--vt-h) - 1px),#454a5766 calc(var(--vt-h) - 1px),#454a5766 var(--vt-h));}
#app.modus-reel #tlChips.videospuren .tl-chip {min-width:8px;max-width:none;box-sizing:border-box;cursor:grab;touch-action:none;}
#app.modus-reel #tlChips.videospuren .tl-chip:active {cursor:grabbing;}
#app.modus-reel #tlChips.videospuren .tl-transition {z-index:8;max-height:24px;}
#app.modus-reel #tlChips.videospuren .tl-leer {position:absolute;bottom:8px;margin:0 12px;font-size:12px;pointer-events:none;}
#app.modus-reel #tlChips.videospuren .tl-uebergang {display:none!important;}

/* Loading belongs to the inserted clip, not an invisible insertion queue. */
#app.modus-reel .vt-laden { position:absolute; inset:auto 2px 2px; z-index:25; padding:3px 6px; background:#17232fee; color:#fff; font-size:11px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; border-radius:3px; }
#app.modus-reel .vt-laden::before { content:'◌'; display:inline-block; margin-right:5px; animation:vt-lade-drehung 1s linear infinite; }
#app.modus-reel .vt-laden-reserviert { inset:auto; min-height:36px; border:1px dashed #d8b858; pointer-events:auto; }
#app.modus-reel .vt-laden button { float:right; padding:0 5px; }