/* ===== Untertitel-Fonts (gebündelt, OFL Montserrat) =====
   Genau dieselben Dateien nutzt das Burn-in (libass via fontsdir) → Vorschau == Export.
   Jeder Schnitt ist eine eigene Familie mit weight:normal, damit der Browser NICHT
   synthetisch fettet (Gewicht steckt in der Datei). Familienname == ASS-Fontname. */
@font-face{font-family:"Montserrat";src:url("/static/fonts/Montserrat_400Regular.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat SemiBold";src:url("/static/fonts/Montserrat_600SemiBold.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat ExtraBold";src:url("/static/fonts/Montserrat_800ExtraBold.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat Black";src:url("/static/fonts/Montserrat_900Black.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
/* Premium-Erweiterung (alle OFL/frei, einbett- und verteilbar) */
@font-face{font-family:"DM Serif Display";src:url("/static/fonts/DMSerifDisplay_400Regular.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"DM Sans";src:url("/static/fonts/DMSans_700Bold.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"Fraunces Black";src:url("/static/fonts/Fraunces_900Black.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans ExtraBold";src:url("/static/fonts/PlusJakartaSans_800ExtraBold.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}

/* ===== Layout shell ===== */
.app{max-width:1040px;margin:0 auto;padding:0 28px 96px;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 0 22px;margin-bottom:8px;
}
.brand{display:flex;align-items:center;gap:14px;}
.app-name{display:flex;flex-direction:column;line-height:1.15;}
.app-name .kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);}
.app-name .title{font-size:18px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;}
.beta-badge{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
  background:var(--gold-tint);color:var(--gold-press);border:1px solid var(--gold);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.topbar-right{display:flex;align-items:center;gap:14px;}

/* ===== Page intro ===== */
.page-head{margin:14px 0 26px;}
.page-head h1{font-size:30px;font-weight:700;margin:0 0 6px;color:var(--ink);letter-spacing:-.01em;}
.page-head p{margin:0;color:var(--taupe);font-size:15px;max-width:62ch;}

/* ===== Cards ===== */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 28px;margin-bottom:22px;position:relative;
}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.card-num{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--gold-tint);
  color:var(--gold-deep);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.card-ico{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--gold-tint);
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center;
}
.card-head h2{font-size:17px;font-weight:700;margin:0;color:var(--ink);}
.card-head .sub{font-size:13px;color:var(--taupe);margin-top:2px;font-weight:400;}
.card-head .grow{flex:1;}

/* ===== Form controls ===== */
.field{display:flex;flex-direction:column;gap:8px;}
.label{font-size:13px;font-weight:600;color:var(--ink-2);}
.row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;}
.input,.select{
  width:100%;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px 15px;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{color:var(--taupe-soft);}
.input:focus,.select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(189,159,102,.16);}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F665A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:var(--radius-sm);font-weight:600;font-size:15px;
  padding:13px 22px;transition:background .15s, transform .05s, box-shadow .15s;white-space:nowrap;
  text-decoration:none;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--gold);color:#fff;box-shadow:0 2px 6px rgba(166,134,63,.28);}
.btn-primary:hover{background:var(--gold-deep);}
.btn-primary:disabled{background:var(--cream-deep);color:var(--taupe-soft);box-shadow:none;cursor:not-allowed;}
.btn-ghost{background:var(--paper);color:var(--ink-2);border:1.5px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep);}
.btn-soft{background:var(--gold-tint);color:var(--gold-deep);}
.btn-soft:hover{background:#E7DCC2;}
.btn-icon{padding:13px;width:48px;}
.btn svg{flex:0 0 auto;}

/* ===== Existing project status ===== */
.proj-status{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.proj-status .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 auto;}
.proj-status .meta{font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;}
.proj-status .meta b{font-weight:600;color:var(--ink);}
.proj-status .meta .muted{color:var(--taupe);}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:999px;letter-spacing:.01em;}
.pill-created{background:var(--gold-tint);color:var(--gold-deep);}
.pill-done{background:var(--ok-bg);color:var(--ok-ink);}
.pill-platform{background:var(--cream-deep);color:var(--ink-2);}

/* ===== Upload ===== */
.dropzone{
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);background:var(--paper-alt);
  padding:30px;text-align:center;transition:border-color .15s, background .15s;cursor:pointer;
}
.dropzone:hover{border-color:var(--gold);background:var(--gold-tint-2);}
.dropzone.drag-over{border-color:var(--gold);background:var(--gold-tint-2);border-style:solid;}
.dropzone.has{border-style:solid;border-color:var(--gold);background:var(--gold-tint-2);}
.dropzone .dz-ico{width:46px;height:46px;border-radius:12px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.dropzone .dz-title{font-weight:600;font-size:15px;color:var(--ink);}
.dropzone .dz-sub{font-size:13px;color:var(--taupe);margin-top:4px;}
.filelist{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.fileitem{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--paper-alt);
  border:1px solid var(--line);border-radius:10px;}
.fileitem .fi-ico{width:30px;height:30px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.fileitem .fi-name{font-size:14px;font-weight:500;color:var(--ink-2);flex:1;}
.fileitem .fi-size{font-size:12px;color:var(--taupe);}
.fileitem .fi-rm{border:none;background:transparent;color:var(--taupe-soft);padding:4px;border-radius:6px;}
.fileitem .fi-rm:hover{background:var(--err-bg);color:var(--err-ink);}
/* Kompakte Dropzone fuer optionale Zusatzdateien (Marke/Zielgruppe). Gleiche Sprache wie der
   Video-Upload, nur kleiner — es ist ein Nebenfeld und soll das Pflichtfeld nicht ueberstrahlen.
   Als <label> um ein verstecktes <input type="file">: Das native Feld sieht in jedem Browser
   anders aus und passt in keinem zum Rest. */
.dropzone-klein{display:flex;align-items:center;gap:11px;padding:12px 14px;text-align:left;}
.dropzone-klein .dz-ico{width:34px;height:34px;border-radius:9px;margin:0;flex:0 0 auto;}
.dropzone-klein .dz-title{font-size:14px;}
.dropzone-klein .dz-sub{margin-top:2px;}
.dropzone-klein input{display:none;}
/* Entfernen-Knopf in der Dateizeile: quadratisch wie .btn-icon, aber auf Zeilenhoehe gestutzt. */
.fileitem .fi-rm-btn{padding:7px;width:34px;height:34px;flex:0 0 auto;}

/* ===== Pipeline ===== */
.steps{display:flex;flex-direction:column;gap:12px;}
.step{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--paper-alt);transition:background .2s, border-color .2s;
}
.step.running{border-color:var(--gold);background:var(--gold-tint-2);}
.step.done{border-color:var(--ok-line);background:var(--ok-bg);}
.step .st-ico{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--cream-deep);color:var(--taupe);}
.step.running .st-ico{background:var(--gold);color:#fff;}
.step.done .st-ico{background:var(--ok-ink);color:#fff;}
.step .st-body{flex:1;min-width:0;}
.step .st-title{font-size:15px;font-weight:600;color:var(--ink);}
.step.pending .st-title{color:var(--taupe);}
.step .st-desc{font-size:13px;color:var(--taupe);margin-top:2px;}
.step .st-state{font-size:12px;font-weight:600;letter-spacing:.02em;}
.step.pending .st-state{color:var(--taupe-soft);}
.step.running .st-state{color:var(--gold-deep);}
.step.done .st-state{color:var(--ok-ink);}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(166,134,63,.3);
  border-top-color:var(--gold-deep);animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.progress{height:6px;border-radius:999px;background:var(--cream-deep);overflow:hidden;margin-top:18px;position:relative;}
.progress .bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  border-radius:999px;transition:width .5s ease;}
/* Indeterminate-Bewegung während eines Schritts — sanftes Pulsieren */
.progress.running::after{
  content:"";position:absolute;top:0;left:0;height:100%;width:40%;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-30%);opacity:0;}
  50%{opacity:1;}
  100%{transform:translateX(280%);opacity:0;}
}
.pipeline-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;flex-wrap:wrap;}
.pipeline-status{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--gold-deep);}

/* ===== Claude decisions ===== */
.decisions{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.decision{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-alt);}
.decision.rejected{opacity:.55;}
.decision .d-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.decision .d-time{font-size:12px;font-weight:600;color:var(--gold-deep);font-variant-numeric:tabular-nums;
  background:var(--gold-tint);padding:3px 9px;border-radius:6px;}
.decision .d-tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--taupe);}
.decision .d-text{font-size:14px;color:var(--ink-2);line-height:1.5;}
.decision .d-text b{color:var(--ink);font-weight:600;}

/* ===== Result ===== */
.result{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.result-preview{width:240px;height:auto;border-radius:14px;flex:0 0 auto;position:relative;overflow:hidden;
  background:#0F0D0B;border:1px solid var(--line-strong);}
.result-preview video{display:block;width:100%;height:auto;}
.result-info{flex:1;min-width:220px;}
.result-info h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--ink);}
.result-info .ri-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px;}
.result-info .ri-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ===== Alert ===== */
.alert{display:flex;gap:12px;padding:15px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:14px;line-height:1.5;}
.alert-err{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-ink);}
.alert b{font-weight:600;}

.muted{color:var(--taupe);}
.divider{height:1px;background:var(--line);margin:22px 0;}

@media (max-width:720px){
  .app{padding:0 18px 80px;}
  .decisions{grid-template-columns:1fr;}
  .topbar{flex-wrap:wrap;gap:14px;}
}

/* ===== Main Navigation ===== */
.main-nav{
  display:flex;gap:4px;
  border-bottom:1.5px solid var(--line);
  margin-bottom:28px;padding-bottom:0;
}
.nav-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;
  font-family:inherit;font-size:14px;font-weight:600;
  color:var(--taupe);background:none;border:none;
  border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
  border-radius:0;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.nav-tab:hover{color:var(--ink-2);background:none;}
.nav-tab.active{color:var(--gold-deep);border-bottom-color:var(--gold-deep);}

/* ===== Analyst — Input Toggle ===== */
.analyst-toggle{
  display:flex;gap:6px;margin-bottom:20px;padding:4px;
  background:var(--paper-alt);border:1px solid var(--line);
  border-radius:var(--radius-sm);width:fit-content;
}
.analyst-toggle-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--taupe);background:none;border:none;border-radius:10px;
  cursor:pointer;transition:background .15s,color .15s;
}
.analyst-toggle-btn:hover{color:var(--ink-2);background:var(--cream-deep);}
.analyst-toggle-btn.active{
  background:var(--paper);color:var(--gold-deep);
  box-shadow:var(--shadow-sm);
}

/* ===== Analyst — URL ===== */
.analyst-detected{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;font-size:12px;font-weight:600;
  color:var(--ok-ink);background:var(--ok-bg);
  padding:4px 11px;border-radius:999px;width:fit-content;
}
.analyst-platforms{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.platform-tag{
  font-size:12px;font-weight:600;padding:4px 12px;
  border-radius:999px;background:var(--cream-deep);color:var(--ink-2);
  transition:background .15s,color .15s;
}
.platform-tag.active{background:var(--gold-tint);color:var(--gold-deep);}

/* ===== Analyst — Features ===== */
.analyst-features{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;
}
.analyst-feature{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;background:var(--paper-alt);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
.analyst-feature-ico{font-size:22px;line-height:1;flex:0 0 auto;}
.analyst-feature-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.analyst-feature-desc{font-size:12px;color:var(--taupe);line-height:1.45;}

/* ===== Analyst — Start Button ===== */
.analyst-action{display:flex;flex-direction:column;gap:10px;}
.analyst-start-btn{width:100%;padding:17px;font-size:16px;}

/* ===== Analyst — Result Placeholder ===== */
.analyst-result-placeholder{
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;
}
.analyst-result-inner{
  display:flex;flex-direction:column;align-items:center;gap:4px;max-width:340px;
}
.analyst-result-source{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12px;color:var(--taupe);background:var(--cream-deep);
  padding:6px 14px;border-radius:999px;max-width:100%;overflow:hidden;
}
.analyst-result-source span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media(max-width:720px){
  .analyst-features{grid-template-columns:1fr;}
  .analyst-toggle{width:100%;}
  .analyst-toggle-btn{flex:1;justify-content:center;}
}
.page-hidden{display:none !important;}

/* ===== MultiCut ===== */
.mc-switch-card{
  display:flex;align-items:center;gap:16px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:22px;box-shadow:var(--shadow-sm);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.mc-switch-card.active{
  border-color:var(--gold);background:linear-gradient(135deg,var(--paper) 60%,var(--gold-tint-2));
  box-shadow:0 1px 2px rgba(34,30,24,.05), 0 10px 28px rgba(166,134,63,.14);
}
.mc-switch-ico{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-tint);color:var(--gold-deep);flex:0 0 auto;
}
.mc-switch-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mc-switch-text b{font-size:15.5px;}
.mc-switch-text span{font-size:13px;color:var(--taupe);line-height:1.5;}
.mc-switch{position:relative;display:inline-block;width:52px;height:30px;flex:0 0 auto;margin-left:auto;cursor:pointer;}
.mc-switch input{opacity:0;width:0;height:0;}
.mc-slider{
  position:absolute;inset:0;border-radius:999px;background:var(--line-strong);
  transition:background .2s;
}
.mc-slider:before{
  content:"";position:absolute;width:24px;height:24px;border-radius:50%;
  left:3px;top:3px;background:#fff;box-shadow:0 1px 3px rgba(34,30,24,.25);
  transition:transform .2s;
}
.mc-switch input:checked + .mc-slider{background:var(--gold-deep);}
.mc-switch input:checked + .mc-slider:before{transform:translateX(22px);}

.mc-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.mc-progress-info{display:inline-flex;align-items:center;gap:8px;font-size:14px;}
.mc-reasoning{
  font-size:13px;color:var(--taupe);background:var(--paper-alt);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 16px;margin-bottom:18px;line-height:1.55;
}
.mc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:16px;margin-bottom:20px;
}
.mc-tile{
  position:relative;overflow:hidden;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  transition:opacity .25s, border-color .25s, box-shadow .3s, transform .3s;
}
.mc-tile.off{opacity:.45;}
.mc-tile.cutting{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint);}
.mc-tile.done{border-color:var(--ok-line);background:linear-gradient(165deg,var(--paper) 70%,var(--ok-bg));}
.mc-tile.celebrate{
  animation:mcGlow 1.6s ease-out;
  border-color:var(--gold-deep);
}
@keyframes mcGlow{
  0%{box-shadow:0 0 0 0 rgba(166,134,63,.55);transform:scale(1);}
  18%{transform:scale(1.025);}
  45%{box-shadow:0 0 0 14px rgba(166,134,63,0);}
  100%{box-shadow:0 0 0 0 rgba(166,134,63,0);transform:scale(1);}
}
.mc-tile-head{display:flex;align-items:flex-start;gap:10px;}
.mc-check input{width:17px;height:17px;accent-color:var(--gold-deep);cursor:pointer;margin-top:2px;}
.mc-title{min-width:0;flex:1;}
.mc-title b{font-size:14px;line-height:1.35;display:block;}
.mc-meta{display:flex;gap:10px;margin-top:4px;font-size:12px;color:var(--taupe);}
.mc-dur{font-weight:600;color:var(--gold-deep);}
.kpi-badge{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  background:var(--cream-deep);border-radius:999px;padding:5px 10px;font-size:11.5px;
}
.kpi-badge b{color:var(--ink-2);}
.kpi-dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);}
.kpi-dot.on{background:var(--gold-deep);}
.kpi-4 .kpi-dot.on,.kpi-5 .kpi-dot.on{background:var(--ok-ink);}
.kpi-badge.kpi-5{background:var(--ok-bg);}
.mc-transcript{
  font-size:13px;color:var(--ink-2);line-height:1.55;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-style:italic;
}
.mc-transcript.open{display:block;-webkit-line-clamp:unset;}
.mc-rationale{font-size:12px;color:var(--taupe);line-height:1.5;}
.mc-tile-foot{display:flex;align-items:center;font-size:12.5px;margin-top:auto;}
.mc-status{display:inline-flex;align-items:center;gap:7px;}
.mc-status.cutting{color:var(--gold-deep);font-weight:600;}
.mc-status.done{color:var(--ok-ink);font-weight:600;}
.mc-status.error{color:var(--err-ink);font-weight:600;}
.mc-status.pending{color:var(--taupe-soft);}
.mc-preview{display:flex;flex-direction:column;gap:8px;}
.mc-preview video{
  width:100%;max-height:340px;border-radius:10px;background:#000;
  aspect-ratio:9/16;object-fit:contain;
}
.mc-dl{align-self:flex-start;padding:7px 14px;font-size:12.5px;}
.mc-actions{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:3;}
.confetti span{
  position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:0;
  animation:mcConfetti 1.5s ease-out forwards;
}
@keyframes mcConfetti{
  0%{opacity:1;transform:translate(0,0) rotate(0deg);}
  100%{opacity:0;transform:translate(var(--cx,0),260px) rotate(var(--cr,180deg));}
}
@media(max-width:720px){
  .mc-grid{grid-template-columns:1fr;}
  .mc-switch-card{flex-wrap:wrap;}
}

/* ===== Video Analyst: Ergebnis ===== */
.analyst-eval{display:flex;flex-direction:column;gap:16px;margin-bottom:18px;}
.analyst-score{
  display:flex;align-items:baseline;gap:12px;padding:16px 18px;
  background:var(--gold-tint-2);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.analyst-score-num{font-size:42px;font-weight:800;color:var(--gold-deep);line-height:1;}
.analyst-score-label{font-size:13px;color:var(--taupe);font-weight:600;}
.analyst-eval-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.analyst-eval-block{
  padding:14px 16px;background:var(--paper-alt);border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.analyst-eval-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.analyst-eval-text{font-size:13px;color:var(--ink-2);line-height:1.55;}
.analyst-tipps{background:var(--gold-tint-2);}
.analyst-list{margin:0;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.6;}
.analyst-list li{margin-bottom:4px;}
.analyst-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.analyst-stat-chip{
  font-size:12.5px;font-weight:600;color:var(--ink-2);padding:7px 12px;
  background:var(--cream-deep);border:1px solid var(--line);border-radius:999px;
}
.analyst-section-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.analyst-scenes{margin-bottom:16px;}
.analyst-scene{
  display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.55;
}
.analyst-scene:last-child{border-bottom:none;}
.analyst-scene-time{
  flex:0 0 auto;font-weight:700;color:var(--gold-deep);font-variant-numeric:tabular-nums;
  min-width:84px;
}
.analyst-scene-body{color:var(--ink-2);}
.analyst-scene-meta{font-size:12px;color:var(--taupe);margin-top:3px;}
.analyst-scene-err{color:var(--err-ink);}
.analyst-transcript summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);padding:6px 0;
}
.analyst-transcript p{font-size:13px;color:var(--ink-2);line-height:1.7;white-space:pre-wrap;}
@media(max-width:720px){
  .analyst-eval-grid{grid-template-columns:1fr;}
}

/* ===== Video Analyst V1.1: Funnel, Ratings, Engagement ===== */
.analyst-funnel{
  margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.04em;
  color:var(--gold-press);background:var(--paper);border:1px solid var(--gold);
  border-radius:999px;padding:6px 14px;align-self:center;
}
.analyst-funnel-why{font-size:12.5px;color:var(--taupe);margin-top:-8px;line-height:1.5;}
.analyst-ratings{
  display:flex;flex-direction:column;gap:8px;padding:14px 16px;
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.analyst-rating-row{display:flex;align-items:center;gap:10px;}
.analyst-rating-label{flex:0 0 160px;font-size:13px;font-weight:600;color:var(--ink-2);}
.analyst-rating-num{font-size:12px;color:var(--taupe);font-variant-numeric:tabular-nums;}
.analyst-dots{display:inline-flex;gap:4px;}
.analyst-dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--cream-deep);border:1px solid var(--line-strong);
}
.analyst-dot.on{background:var(--gold);border-color:var(--gold-deep);}
.analyst-rating-detail{font-size:12.5px;color:var(--taupe);line-height:1.5;margin-top:2px;}
.analyst-eval-hint{font-size:11px;font-weight:500;color:var(--taupe-soft);}
.analyst-engagement-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:13px;}
.analyst-engagement-label{flex:0 0 92px;font-weight:600;color:var(--ink-2);}
.analyst-engagement-badge{
  flex:0 0 auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  border-radius:999px;padding:2px 9px;border:1px solid var(--line-strong);color:var(--taupe);background:var(--cream-deep);
}
.analyst-engagement-badge.lvl-hoch{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-line);}
.analyst-engagement-badge.lvl-mittel{color:var(--gold-press);background:var(--gold-tint);border-color:var(--gold);}
.analyst-engagement-badge.lvl-niedrig{color:var(--err-ink);background:var(--err-bg);border-color:var(--err-line);}
.analyst-engagement-text{color:var(--ink-2);line-height:1.5;}
@media(max-width:720px){
  .analyst-rating-label{flex-basis:120px;}
  .analyst-engagement-row{flex-wrap:wrap;}
}

/* ===== Video Analyst V2: schlanke Score-Chips + Hover-Info ===== */
.analyst-zielgruppe{
  font-size:14px;color:var(--ink-2);line-height:1.5;padding:12px 16px;
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius-sm);
}
/* Relevanz fuer die Zielgruppe — steht im selben Kasten, nur abgesetzt. */
.analyst-zielgruppe-relevanz{margin-top:7px;font-size:13.5px;}
.analyst-zielgruppe-abgleich{margin-top:7px;font-size:13.5px;font-weight:600;}
/* Dartscheibe vor der Zielgruppen-Zeile: Der Kasten sagt schon in der ersten Sekunde, worum es
   geht, ohne dass man den Satz gelesen haben muss. */
.analyst-zielgruppe-ico{margin-right:7px;font-size:15px;line-height:1;}
.sc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;
  align-items:start;
}
/* Eine Zelle = eine Kachel samt ihrem Feedback-Block. Als Geschwister im Raster belegten die
   beiden zwei Zellen, und in der Admin-Ansicht stand dann jede zweite Kachel auf halber Breite. */
.sc-zelle{min-width:0;}
.sc-chip{
  padding:13px 15px;background:var(--paper-alt);border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
/* ZWEI Zeilen: Label oben ueber die volle Breite, darunter Punkte, Wert und der Klick-Hinweis.
   Nebeneinander (Stand bis 2026-09-13) teilten sich fuenf Elemente eine Zeile — bei schmaler
   Kachel lief der Label-Text unter den Punkten durch, weil er mit `min-width:0` schmaler wurde
   als sein Inhalt und ohne Umbruchregel einfach ueberstand. */
.sc-top{display:flex;flex-direction:column;gap:7px;}
.sc-label{font-size:13px;font-weight:700;color:var(--ink);min-width:0;overflow-wrap:anywhere;}
.sc-row{display:flex;align-items:center;gap:9px;min-width:0;}
.sc-num{font-size:12px;font-weight:600;color:var(--taupe);font-variant-numeric:tabular-nums;}

/* Aufklapper statt Hover-Tooltip (siehe ScoreChip in app.jsx). Reines <details>/<summary>:
   kein Klapp-JavaScript, tastaturbedienbar, und der Text ist auf dem Handy erreichbar — ein
   Hover-Tooltip war dort gar nicht zu oeffnen. */
.sc-klapp>summary{cursor:pointer;list-style:none;outline:none;}
.sc-klapp>summary::-webkit-details-marker{display:none;}
.sc-klapp>summary::marker{content:"";}
/* Der Klick-Hinweis. Eine Kachel, die aussieht wie eine Anzeige, laedt niemanden zum Tippen ein —
   also steht dran, dass da etwas drin ist. Nur im geschlossenen Zustand: Ist die Kachel offen,
   sieht man die Antwort ja schon. Klein und in Taupe, damit er die Zahl nicht ueberstimmt. */
/* Schiebt sich ans rechte Ende der Bewertungszeile, damit Punkte und Wert links zusammenbleiben. */
.sc-mehr{flex:0 0 auto;margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--taupe-soft);transition:color .12s;}
/* Ohne den Hinweis (offene Kachel) uebernimmt der Pfeil das Abstandhalten. */
.sc-klapp[open]>summary .sc-pfeil{margin-left:auto;}
.sc-klapp[open]>summary .sc-mehr{display:none;}
.sc-klapp>summary:hover .sc-mehr,
.sc-klapp>summary:focus-visible .sc-mehr{color:var(--gold-deep);}
.sc-pfeil{flex:0 0 auto;color:var(--taupe);font-size:11px;line-height:1;transition:transform .12s;}
.sc-klapp[open]>summary .sc-pfeil{transform:rotate(90deg);}
.sc-klapp>summary:hover .sc-label,
.sc-klapp>summary:focus-visible .sc-label{color:var(--gold-deep);}
.sc-auf{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);}
.sc-h{font-size:11.5px;font-weight:700;letter-spacing:.01em;margin-bottom:3px;}
.sc-h-gut{color:var(--ok-ink);}
.sc-h-besser{color:var(--gold-deep);}
.sc-text{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0 0 11px;}
.sc-auf>.sc-text:last-child{margin-bottom:0;}
@media(max-width:720px){
  /* Eine Spalte statt zwei: Bei 228px Mindestbreite je Kachel waeren zwei Spalten auf dem Handy
     schmaler als der Inhalt — genau der Fall, der die Labels kaputtgemacht hat. */
  .sc-grid{grid-template-columns:1fr;}
}

/* Skip-Eval-Checkbox + Gemma-Rohanalyse-Dropdown */
.alert-info{background:var(--gold-tint);border:1px solid var(--gold);color:var(--gold-press);}
.analyst-skipeval{
  display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;margin-bottom:12px;font-weight:600;
}
.analyst-skipeval input{width:16px;height:16px;accent-color:var(--gold-deep);cursor:pointer;}
.analyst-queue{
  margin-top:12px;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--gold-tint);border:1px solid var(--gold);
  color:var(--gold-press);font-size:13.5px;font-weight:600;line-height:1.45;
}
.analyst-cache-hinweis{
  margin-bottom:16px;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--paper-alt);border:1px solid var(--line-strong);
  color:var(--ink-soft, var(--ink));font-size:13.5px;line-height:1.45;
}
/* Absicht gegen Wirkung: Geometrie wie .analyst-cache-hinweis, aber in den Warnfarben
   (Gold = Aufmerksamkeit, wie .analyst-queue). Kein Rot — ein Video, das auf eine andere
   Funnel-Stufe einzahlt, ist kein Fehler, sondern eine Information. */
.analyst-funnel-warnung{
  padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--gold-tint);border:1px solid var(--gold);
  color:var(--gold-press);font-size:13.5px;line-height:1.5;
}
/* Die Handlungsempfehlung steht im selben Kasten, aber abgesetzt: erst der Befund, dann der
   Schritt. */
.analyst-funnel-empfehlung{margin-top:7px;}
.analyst-rawdump{
  margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 16px;background:var(--paper-alt);
}
.analyst-rawdump > summary{
  cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);list-style:none;
}
.analyst-rawdump > summary::-webkit-details-marker{display:none;}
.analyst-rawjson{margin-top:6px;}
.analyst-rawjson summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--taupe);}
.analyst-rawjson pre{
  margin:6px 0 0;padding:10px 12px;background:var(--ink);color:#e8e2d4;
  border-radius:8px;font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ===== V1.1 Chat =====
   Farben ausschließlich über die bestehenden Variablen aus templates/index.html.
   Eine zweite, um 2 % abweichende Beige-Palette sieht aus wie ein Rendering-Fehler,
   nicht wie Design. */
.chat-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}

/* Auf- und Zuklappen über grid-template-rows 0fr → 1fr. Der Umweg über Grid ist nötig,
   weil sich `height:auto` nicht animieren lässt und eine feste max-height entweder
   abschneidet oder am Ende sichtbar nachruckelt. */
.chat-klapp{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1);
}
.chat-card.ist-offen .chat-klapp{grid-template-rows:1fr;}
.chat-klapp-inner{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(-6px);
  transition:opacity .26s ease .06s, transform .3s cubic-bezier(.22,1,.36,1) .06s;
}
.chat-card.ist-offen .chat-klapp-inner{opacity:1; transform:none;}
.chat-card.ist-offen .chat-stream{height:440px; max-height:60vh;}
@media (prefers-reduced-motion:reduce){
  .chat-klapp, .chat-klapp-inner{transition:none;}
}

.chat-head{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:16px 20px; border:none; background:transparent;
  text-align:left; font-family:inherit; cursor:pointer;
  border-bottom:1px solid transparent; transition:background .15s, border-color .25s;
}
.chat-head:hover{background:var(--paper-alt);}
.chat-card.ist-offen .chat-head{border-bottom-color:var(--line);}
.chat-head-text{min-width:0; flex:1;}

/* Plus wird zu Minus: der senkrechte Strich fährt zusammen, das Zeichen dreht sich mit. */
.chat-toggle{
  position:relative; width:30px; height:30px; flex:none; border-radius:9px;
  background:var(--gold-tint-2); color:var(--gold-deep);
  display:grid; place-items:center;
  transition:transform .38s cubic-bezier(.22,1,.36,1), background .15s;
}
.chat-card.ist-offen .chat-toggle{transform:rotate(180deg); background:var(--gold-tint);}
.chat-toggle-bar{
  position:absolute; width:13px; height:2px; border-radius:2px; background:currentColor;
}
.chat-toggle-bar-v{
  transform:rotate(90deg);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.chat-card.ist-offen .chat-toggle-bar-v{transform:rotate(90deg) scaleX(0);}
@media (prefers-reduced-motion:reduce){
  .chat-toggle, .chat-toggle-bar-v{transition:none;}
}
.chat-badge{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep)); color:#fff; flex:none;
}
.chat-titel{font-size:18px; font-weight:700; color:var(--ink);}
.chat-sub{font-size:12px; color:var(--taupe-soft); margin-top:2px;}

.chat-stream{
  flex:1; overflow-y:auto; padding:24px;
  display:flex; flex-direction:column; gap:16px; background:var(--paper-alt);
}

.chat-zeile{display:flex; flex-direction:column; gap:4px;}
.chat-zeile.ist-user{align-items:flex-end;}
.chat-zeile.ist-ki{align-items:flex-start;}

.chat-bubble{padding:12px 16px; font-size:14px; line-height:1.5; overflow-wrap:anywhere;}
.bubble-user{
  max-width:75%; color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  border-radius:18px 18px 4px 18px;
}
.bubble-ki{
  max-width:85%; color:var(--ink);
  background:var(--cream); border:1px solid var(--line);
  border-radius:18px 18px 18px 4px;
}
.bubble-ki p{margin:0 0 8px;}
.bubble-ki p:last-child{margin-bottom:0;}
.chat-liste{margin:0 0 8px; padding-left:20px;}
.chat-liste:last-child{margin-bottom:0;}
.chat-liste li{margin:3px 0;}
.chat-zeit{font-size:11px; color:var(--taupe-soft); padding:0 4px;}

/* Tipp-Indikator: drei versetzt pulsierende Punkte, reines CSS */
.chat-tippt{display:flex; gap:5px; align-items:center; padding:14px 18px;}
.chat-tippt span{
  width:7px; height:7px; border-radius:50%; background:var(--taupe-soft);
  animation:chatPuls 1.3s infinite ease-in-out;
}
.chat-tippt span:nth-child(2){animation-delay:.18s;}
.chat-tippt span:nth-child(3){animation-delay:.36s;}
@keyframes chatPuls{
  0%,60%,100%{transform:translateY(0); opacity:.35;}
  30%{transform:translateY(-4px); opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .chat-tippt span{animation:none; opacity:.6;}
}

.chat-fehler{
  align-self:flex-start; font-size:13px; color:var(--err-ink);
  background:var(--err-bg); border:1px solid var(--err-line);
  border-radius:var(--radius-sm); padding:8px 12px;
}

.chat-eingabe{
  display:flex; align-items:flex-end; gap:10px;
  padding:12px 16px; border-top:1px solid var(--line); background:var(--paper);
}
.chat-eingabe textarea{
  flex:1; resize:none; border:1px solid var(--line-strong); border-radius:24px;
  padding:11px 18px; font-size:14px; line-height:1.4; color:var(--ink);
  background:var(--paper); outline:none; max-height:140px; font-family:inherit;
  box-shadow:0 4px 12px rgba(34,30,24,.03);
}
.chat-eingabe textarea:focus{border-color:var(--gold);}
.chat-eingabe textarea:disabled{background:var(--paper-alt); color:var(--taupe);}
.chat-senden{
  width:44px; height:44px; flex:none; border:none; border-radius:14px;
  color:#fff; font-size:18px; line-height:1;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
}
.chat-senden:disabled{opacity:.4; cursor:not-allowed;}

.chat-leer{
  margin:auto; text-align:center; max-width:340px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.chat-leer-badge{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--gold-tint-2); color:var(--gold-deep);
}
.chat-leer-titel{font-size:17px; font-weight:700; color:var(--ink);}
.chat-leer-sub{font-size:13px; line-height:1.5; color:var(--taupe);}

/* Bewertung je KI-Antwort (nur Admin-Ansicht). Breiter als die Blase wäre unruhig,
   schmaler würde das Textfeld unbrauchbar — 85 % deckt sich mit .bubble-ki. */
.chat-feedback{width:85%; max-width:85%;}

/* ===== Video-Player nach der Analyse ===== */
.analyst-quelle-eingabe{display:flex; flex-direction:column; gap:12px; min-width:0;}

/* Dateinamen sind oft lang und enthalten keine Leerzeichen (SnapInsta.to_AQP0iXu…) — ohne
   Begrenzung bricht so ein Name nirgends um und läuft quer aus der Box heraus.
   Eine Zeile mit Auslassungspunkten, der volle Name steht im title-Attribut.
   Bewusst auf .analyst-quelle-eingabe beschränkt: Die Editor-Seite hat dieselbe
   Dropzone-Klasse und wird hier nicht angefasst. */
.analyst-quelle-eingabe .dropzone .dz-title{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.analyst-player-slot{display:flex; justify-content:center;}
/* Rahmen um das Video, damit es als eigener Bereich liest und nicht im Weiß schwebt. */
.analyst-player-rahmen{
  position:relative;
  background:var(--paper-alt); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px;
  display:flex; justify-content:center;
  transition:box-shadow .25s ease;
}
/* width:auto statt 100%: Das Element nimmt die Form des Videos an. Mit fester Breite und
   object-fit:contain bekäme ein 9:16-Reel breite schwarze Balken links und rechts. */
.analyst-player-rahmen video{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:400px;
  border-radius:10px; background:#000;
}

/* Schwebender Player: Scrollt der Player aus dem Bild, wandert er unten rechts mit.
   Es ist DASSELBE <video>-Element — nur dieser Rahmen wechselt die Klasse, damit die
   Wiedergabe beim Umschalten nicht neu startet. Der Slot behält solange seine Höhe,
   sonst springt die Seite in dem Moment, in dem der Rahmen aus dem Fluss geht. */
.analyst-player-rahmen.ist-mini{
  position:fixed; right:16px; bottom:16px; z-index:60;
  padding:8px; border-radius:14px;
  box-shadow:0 10px 34px rgba(34,30,24,.24);
  animation:playerSchwebtRein .3s cubic-bezier(.22,1,.36,1);
}
/* Höhe kommt als Inline-Style aus React (aus dem freien Rand + Seitenverhältnis berechnet,
   vom Nutzer per Anfasser überschreibbar). Der Wert hier ist nur der Notfall-Rückfall,
   falls die Video-Metadaten nie eintreffen. */
.analyst-player-rahmen.ist-mini video{max-height:300px; border-radius:9px;}
@keyframes playerSchwebtRein{
  from{opacity:0; transform:translateY(14px) scale(.96);}
  to{opacity:1; transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .analyst-player-rahmen.ist-mini{animation:none;}
}
@media (max-width:640px){
  .analyst-player-rahmen.ist-mini{right:10px; bottom:10px; padding:6px;}
}
.analyst-mini-zu{
  position:absolute; top:-9px; right:-9px; width:24px; height:24px;
  display:grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--taupe); cursor:pointer;
  box-shadow:0 2px 8px rgba(34,30,24,.18);
}
.analyst-mini-zu:hover{color:var(--err-ink); border-color:var(--err-line);}

/* Anfasser oben links. Bewusst NICHT unten rechts: dort liegen die Video-Steuerelemente,
   ein Griff darüber würde Play und Vollbild abfangen. */
.analyst-mini-griff{
  position:absolute; top:-9px; left:-9px; width:26px; height:26px;
  display:grid; place-items:center; gap:2px;
  border:1px solid var(--line); border-radius:50%;
  background:var(--paper); cursor:nwse-resize; touch-action:none;
  box-shadow:0 2px 8px rgba(34,30,24,.18);
}
.analyst-mini-griff span{
  display:block; width:10px; height:1.5px; border-radius:2px; background:var(--taupe-soft);
  transform:rotate(-45deg);
}
.analyst-mini-griff span:last-child{width:6px;}
.analyst-mini-griff:hover{border-color:var(--gold);}
.analyst-mini-griff:hover span{background:var(--gold-deep);}

.analyst-player-hinweis{
  font-size:13px; line-height:1.5; color:var(--taupe);
  background:var(--paper-alt); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px;
}

/* ===== Rueckfrage-Dialog =====
   Gebaut aus denselben Bausteinen wie der Rest: .card-Flaeche, .btn-Knoepfe, dieselben Variablen.
   Ein fremd aussehender Dialog mitten in der Oberflaeche liest sich wie eine Browser-Warnung —
   und genau in dem Moment soll der Nutzer ruhig eine Frage beantworten, nicht erschrecken. */
.dlg-hinter{
  position:fixed;inset:0;background:rgba(43,38,32,.44);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:120;
}
.dlg{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(43,38,32,.22);padding:26px 28px;max-width:460px;width:100%;
}
.dlg-ico{
  width:44px;height:44px;border-radius:12px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.dlg h3{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--ink);}
.dlg p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 8px;}
.dlg .dlg-meta{font-size:13px;color:var(--taupe);margin-bottom:18px;}
.dlg-knoepfe{display:flex;gap:10px;flex-wrap:wrap;}
.dlg-knoepfe .btn{flex:1 1 170px;}
@media(max-width:520px){ .dlg-knoepfe .btn{flex:1 1 100%;} }