/* Archivo (SIL Open Font License), selbst gehostet: kein Umweg über zwei Google-Server vor dem ersten Bild */
@font-face{font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(/fonts/archivo-latin.woff2) format("woff2");}
/* =====================================================================
   Youtubot – «Schnittraum», lebendige Fassung
   Layout wie gehabt; darüber Apple-Grundsätze: Materialien mit Tiefe,
   Feder-Bewegung, Feedback beim Drücken, Typografie mit Grössenlogik.
   Bausteine: Switch, Infokarte, Suchfeld, Klick-Button, macOS-Fenster,
   Tab-Leiste mit Gleiter, Sign-in-Formular, Account-Popup, Farbdock, Loader.
   ===================================================================== */

:root{
  color-scheme:light;

  /* Flächen */
  --ground:#F2F2F7;
  --surface:#FFFFFF;
  --surface-2:#F5F5F8;
  --window:#F8FBFE;        /* macOS-Fenster der Review-Karten */
  --titlebar:#EEF2F7;
  --field:#FFFFFF;
  --field-border:#D3D3D8;
  --field-border-hover:#BDBDC4;
  --field-border-focus:#8E8E93;

  /* Text */
  --ink:#1D1D1F;
  --ink-2:#515154;
  --ink-3:#6E6E73;
  --rule:#E3E3E8;
  --rule-strong:#C7C7CC;

  /* Interaktion */
  --tint:#0066CC;
  --tint-fill:#0071E3;
  --tint-fill-hover:#0062C4;
  --tint-soft:#EAF2FD;
  --tint-ring:rgba(0,113,227,.37);

  /* Status */
  --go:#1D7A36;            /* Text */
  --go-fill:#1F7A36;       /* Freigabe-Knopf */
  --go-lamp:#34C759;
  --go-soft:#E6F4EA;
  --stop:#C2000F;
  --stop-fill:#D70015;
  --stop-lamp:#FF3B30;
  --stop-soft:#FDECEC;
  --caution:#8F4F00;
  --caution-lamp:#FF9F0A;
  --caution-fill:#B35C00;
  --on-caution:#FFFFFF;

  --frame:#000000;
  --traffic-red:#FF605C;
  --traffic-yellow:#FFBD44;
  --traffic-green:#00CA4E;
  --avatar:#00874A;

  /* Materialien */
  --material:rgba(255,255,255,.72);
  --material-thick:rgba(250,250,252,.86);
  --material-edge:rgba(255,255,255,.65);
  --toast-bg:rgba(29,29,31,.9);
  --toast-ink:#FFFFFF;
  --scrim:rgba(0,0,0,.32);

  /* Tiefe nach Grösse: kleine Chips leicht, Fenster und Dialoge schwer */
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md:0 1px 2px rgba(0,0,0,.04), 0 6px 20px -10px rgba(0,0,0,.12);
  --shadow-lg:0 2px 6px rgba(0,0,0,.05), 0 24px 48px -18px rgba(0,0,0,.22);

  /* Switch */
  --switch-off:#B0B0B0;
  --switch-on:#222222;
  --switch-on-outline:#181818;

  /* Neumorphes Sign-in */
  --neu-bg:#DDE1E7;
  --neu-dark:#BABECC;
  --neu-light:rgba(255,255,255,.45);
  --neu-ink:#595959;
  --neu-ink-2:#5C5C5C;

  /* Loader */
  --dot-a:#B3D4FC;
  --dot-b:#6793FB;
  --dot-glow:rgba(178,212,252,.7);

  /* Clip-Typen im Editor */
  --clip-factcard:#A39E93;
  --clip-infographic:#B279A2;
  --clip-photo:#4C78A8;
  --clip-screenshot:#54A29D;
  --clip-gif:#C2855A;

  /* Aliase: script.js setzt diese Namen in Inline-Styles */
  --bg:var(--ground);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-muted:var(--ink-2);
  --text-faint:var(--ink-3);
  --line:var(--rule);
  --sunken:var(--surface-2);
  --bad:var(--stop);
  --good:var(--go);
  --warn:var(--caution);
  --accent:var(--tint);

  /* Typografie: Systemschrift für die Bedienung, Archivo schmal für Titel und Zahlen */
  --font-ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --font-display:'Archivo', -apple-system, "Segoe UI", system-ui, sans-serif;
  --narrow:74%;

  /* Radien nach Grösse */
  --r-xl:20px;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:8px;
  --r-pill:999px;

  /* Feder: kritisch gedämpft (damping 1.0, response 0.4 s), keine Überschwingung */
  --spring-dur:500ms;
  --spring:linear(0, .186 10%, .465 20%, .682 30%, .821 40%, .903 50%, .949 60%, .973 70%, .986 80%, .993 90%, 1);
  --press:100ms;
  --nav-h:64px;
  --board:minmax(200px,1.6fr) repeat(5,minmax(0,1fr));
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ground:#000000;
  --surface:#1C1C1E;
  --surface-2:#242426;
  --window:#1C1C1E;
  --titlebar:#2A2A2D;
  --field:#2C2C2E;
  --field-border:#3A3A3C;
  --field-border-hover:#545458;
  --field-border-focus:#8E8E93;
  --ink:#F5F5F7;
  --ink-2:#C7C7CC;
  --ink-3:#98989D;
  --rule:#38383A;
  --rule-strong:#545458;
  --tint:#2997FF;
  --tint-soft:#14263A;
  --tint-ring:rgba(41,151,255,.35);
  --go:#30D158;
  --go-lamp:#30D158;
  --go-soft:#10301A;
  --stop:#FF6961;
  --stop-lamp:#FF453A;
  --stop-soft:#3A1614;
  --caution:#FFB340;
  --caution-lamp:#FF9F0A;
  --caution-fill:#FF9F0A;
  --on-caution:#1D1D1F;
  --titlebar:#2A2A2D;
  --material:rgba(28,28,30,.72);
  --material-thick:rgba(36,36,38,.86);
  --material-edge:rgba(255,255,255,.08);
  --toast-bg:rgba(58,58,60,.92);
  --scrim:rgba(0,0,0,.55);
  --shadow-sm:0 0 0 1px rgba(255,255,255,.05);
  --shadow-md:0 0 0 1px rgba(255,255,255,.06), 0 8px 24px -12px rgba(0,0,0,.8);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.08), 0 28px 56px -18px rgba(0,0,0,.9);
  --switch-off:#545458;
  --switch-on:#8E8E93;
  --switch-on-outline:#8E8E93;
  --neu-bg:#2A2D33;
  --neu-dark:#1A1C20;
  --neu-light:rgba(255,255,255,.06);
  --neu-ink:#D8DAE0;
  --neu-ink-2:#A9ADB5;
  --dot-a:#2D4A73;
  --dot-b:#4F8CFF;
  --dot-glow:rgba(79,140,255,.45);
}

/* ============ Basis ============ */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-ui); font-size:.9375rem; line-height:1.5; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* Hell/Dunkel sanft wechseln statt hart zu springen */
  transition:background-color .35s ease, color .35s ease;
}
a{color:inherit;}
button,input,select,textarea{font:inherit; color:inherit;}
img,video{max-width:100%;}
::selection{background:var(--tint-fill); color:#fff;}
:focus-visible{outline:2px solid var(--tint); outline-offset:2px;}

/* Tracking und Zeilenabstand je Grösse: grosse Titel enger, kleine Texte offener */
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-stretch:var(--narrow); font-weight:720; font-optical-sizing:auto;}
h1{font-size:3rem; font-weight:780; line-height:1.02; letter-spacing:-.015em;}
h2{font-size:2rem; line-height:1.08; letter-spacing:-.01em;}
h3{font-size:1.5rem; line-height:1.15; letter-spacing:-.005em;}
h4{font-size:1.125rem; font-weight:680; line-height:1.25;}
p{margin:0;}

.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){ .wrap{padding:0 16px;} }

.hint{color:var(--ink-3); font-size:.8125rem; letter-spacing:.005em;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ============ Barrierefreiheit ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
  .item-color, .item-color::after, .glider{transform:none !important;}
}
@media (prefers-reduced-transparency: reduce){
  .island-wrap, .account-menu, .info--toast, .tabs{background:var(--surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;}
  .modal-overlay{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(0,0,0,.6) !important;}
}
@media (prefers-contrast: more){
  :root, html[data-theme="dark"]{--ink-2:var(--ink); --ink-3:var(--ink); --rule:var(--rule-strong); --field-border:var(--ink-3);}
  .card-base, .mac-card, .progress-job, .editor-beat-card, .tabs, .account-menu{outline:1px solid var(--rule-strong);}
  .island-wrap{background:var(--surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;}
}

/* ============ Navigation: durchscheinende Leiste ============ */
.nav-scrim, .burger-btn, .mobile-menu{display:none;}
.island-wrap{position:sticky; top:0; z-index:500; isolation:isolate;}
/* Material auf einem Pseudo-Element: backdrop-filter direkt auf .island-wrap würde sie zum
   Bezugsrahmen für position:fixed machen, und die mobile Tab-Leiste klebte dann oben statt unten. */
.island-wrap::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--material);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
}
/* Kante erscheint erst, wenn Inhalt unter die Leiste scrollt */
@supports (animation-timeline: scroll()){
  .island-wrap{animation:scroll-edge linear both; animation-timeline:scroll(root); animation-range:0 48px;}
}
@keyframes scroll-edge{
  from{box-shadow:0 1px 0 transparent;}
  to{box-shadow:0 1px 0 var(--rule), 0 10px 24px -18px rgba(0,0,0,.35);}
}
.island{max-width:1200px; margin:0 auto; height:var(--nav-h); padding:0 32px; display:flex; align-items:center; gap:14px;}
.island .link, .island .cta{white-space:nowrap;}
.island.condensed{box-shadow:none;}
.island-brand{
  display:inline-flex; align-items:center; gap:10px; margin-right:auto; white-space:nowrap; text-decoration:none;
  font-family:var(--font-display); font-weight:780; font-stretch:var(--narrow); font-size:1.25rem; letter-spacing:-.01em;
}
.island-brand .dot{width:10px; height:17px; border-radius:3px; background:var(--stop-lamp); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); flex:none;}
.active-tab-label{display:none;}

/* Öffentliche Seiten: Links als Pillen */
#landing-island .island-links{display:flex; gap:2px;}
#landing-island .link{
  appearance:none; background:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:var(--r-pill);
  color:var(--ink-2); font-size:.9375rem; transition:background-color .2s, color .2s, transform var(--press) ease-out;
}
#landing-island .link:hover{background:var(--surface); color:var(--ink);}
#landing-island .link:active{transform:scale(.96);}
#landing-island .link.active{color:var(--ink); font-weight:600;}

/* App-Seiten: Tab-Leiste mit Gleiter */
.tabs{
  position:relative; display:grid; grid-template-columns:repeat(6, 104px); padding:4px;
  background:var(--surface); border-radius:var(--r-pill);
  box-shadow:0 0 1px 0 rgba(0,0,0,.2), 0 6px 12px -6px rgba(0,0,0,.12);
}
html[data-theme="dark"] .tabs{box-shadow:0 0 0 1px var(--rule);}
.tab{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:5px;
  height:36px; padding:0 6px; border-radius:var(--r-pill); text-decoration:none; white-space:nowrap;
  font-size:.8125rem; font-weight:560; letter-spacing:.003em; color:var(--ink-2);
  transition:color .15s ease-in, transform var(--press) ease-out; -webkit-tap-highlight-color:transparent;
}
.tab:hover{color:var(--ink);}
.tab:active{transform:scale(.95);}
.tab.active{color:var(--tint); font-weight:650;}
.tab-icon{display:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.notification{
  display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 5px;
  border-radius:9px; background:var(--tint-soft); color:var(--tint);
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; transition:background-color .15s ease-in, color .15s ease-in;
}
.tab.active .notification{background:var(--tint-fill); color:#fff;}
.glider{
  position:absolute; z-index:1; top:4px; left:4px; height:36px; width:calc((100% - 8px) / 6);
  border-radius:var(--r-pill); background:var(--tint-soft);
  transform:translateX(calc(var(--pos, var(--active)) * 100%));
  transition:transform var(--spring-dur) var(--spring);
}
.tabs[data-active="-1"] .glider{opacity:0;}

@media(max-width:1000px){
  .hide-sm{display:none !important;}
  .island{padding:0 16px; gap:10px;}
  #product-island .brand-name{display:none;}
  #product-island .island-brand{margin-right:0;}
  .active-tab-label{display:block; flex:1; min-width:0; font-family:var(--font-display); font-weight:760; font-stretch:var(--narrow); font-size:1.25rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* Tab-Leiste wandert als schwebende Leiste nach unten, in Daumenreichweite */
  .tabs{
    position:fixed; z-index:600; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(5, minmax(0,1fr)); padding:6px;
    background:var(--material-thick);
    -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
    box-shadow:var(--shadow-lg);
  }
  .tab{flex-direction:column; gap:1px; height:54px; font-size:.6875rem; padding:0 2px;}
  .tab-icon{display:block;}
  .tab[href="app-settings.html"]{display:none;}
  .tab .notification{position:absolute; top:3px; left:calc(50% + 6px); min-width:16px; height:16px; font-size:10px;}
  .glider{top:6px; left:6px; height:54px; width:calc((100% - 12px) / 5);}
  .tabs[data-active="5"] .glider{opacity:0;}
  body:has(.tabs){padding-bottom:88px;}
}
@media(max-width:420px){
  #landing-island .island-brand{margin-right:auto;}
  #landing-island .link{padding:0 8px;}
}

/* ============ Switch ============ */
.switch{font-size:17px; position:relative; display:inline-block; width:3.5em; height:2em; flex:none; -webkit-tap-highlight-color:transparent;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.slider{
  position:absolute; inset:0; cursor:pointer;
  background-color:var(--switch-off); border:1px solid var(--switch-off); border-radius:32px;
  transition:background-color .25s ease, border-color .25s ease;
}
.slider::before{
  content:""; position:absolute; left:-1px; bottom:-1px; width:2em; height:2em; border-radius:1em;
  background:#fff; outline:2px solid var(--switch-off);
  box-shadow:0 2px 4px rgba(0,0,0,.18);
  transition:transform var(--spring-dur) var(--spring), width .2s var(--spring), outline-color .25s ease;
}
.slider-icon{
  position:absolute; z-index:2; right:60%; top:30%; width:12px; height:12px; opacity:0;
  fill:none; stroke:#222222; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  transition:right .3s ease-in-out, opacity .15s ease-in-out;
}
.slider-icon.is-fill{fill:#222222; stroke:none;}
.switch input:checked + .slider{background-color:var(--switch-on); border-color:var(--switch-on);}
.switch input:checked + .slider .slider-icon{opacity:1; right:20%;}
.switch input:checked + .slider::before{transform:translateX(1.5em); outline-color:var(--switch-on-outline);}
/* Beim Drücken dehnt sich der Knopf, wie bei iOS */
.switch:active .slider::before{width:2.4em;}
.switch:active input:checked + .slider::before{transform:translateX(1.1em);}
.switch input:focus-visible + .slider{box-shadow:0 0 0 3px var(--tint-ring);}

/* ============ Knöpfe (Klick-Button) ============ */
.btn-primary, .btn-ghost, .btn-danger, .cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border:0; border-radius:var(--r-sm);
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .3s, color .3s, box-shadow .3s, transform var(--press) ease-out;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary:active:not(:disabled), .btn-ghost:active:not(:disabled), .btn-danger:active:not(:disabled), .cta:active{transform:scale(.97);}
.btn-ghost{background:var(--tint-soft); color:var(--tint);}
.btn-ghost:hover:not(:disabled){background:var(--tint-fill); color:#fff; box-shadow:0 0 0 5px var(--tint-ring);}
.btn-primary, .cta{background:var(--tint-fill); color:#fff;}
.btn-primary:hover:not(:disabled), .cta:hover{background:var(--tint-fill-hover); box-shadow:0 0 0 5px var(--tint-ring);}
.btn-danger{background:var(--stop-soft); color:var(--stop);}
.btn-danger:hover{background:var(--stop-fill); color:#fff; box-shadow:0 0 0 5px rgba(215,0,21,.3);}
.btn-sm{min-height:36px; padding:0 14px; font-size:.875rem;}
button:disabled{opacity:.5; cursor:not-allowed;}
.approve-btn{min-height:46px; padding:0 22px; background:var(--go-fill); color:#fff;}
.approve-btn::before{content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.approve-btn:hover:not(:disabled){background:#1A6A2F; color:#fff; box-shadow:0 0 0 5px rgba(31,122,54,.32);}
.approve-btn:disabled{opacity:1; background:var(--surface-2); color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--rule);}

/* ============ Formularfelder (Suchfeld) ============ */
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-row label, .field-label{font-size:.8125rem; font-weight:600; color:var(--ink-2); letter-spacing:.005em;}
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], select, textarea{
  width:100%; min-height:45px; padding:10px 12px;
  background:var(--field); color:var(--ink);
  border:1.5px solid var(--field-border); border-radius:var(--r-md); outline:none;
  font-size:.9375rem; box-shadow:0 0 20px -18px rgba(0,0,0,.9);
  transition:border-color .3s cubic-bezier(.19,1,.22,1), box-shadow .3s cubic-bezier(.19,1,.22,1), transform .3s cubic-bezier(.19,1,.22,1);
}
input:hover, select:hover, textarea:hover{border-color:var(--field-border-hover); box-shadow:0 0 20px -17px rgba(0,0,0,.9);}
input:focus, select:focus, textarea:focus{border-color:var(--field-border-focus); box-shadow:0 0 0 4px var(--tint-ring);}
.searchbox:active, input[type="search"]:active, .editor-search-row input:active{transform:scale(.97);}
textarea{resize:vertical; line-height:1.45;}
select{
  appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%238E8E93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
}
::placeholder{color:var(--ink-3); opacity:1;}
select:disabled, input:disabled{opacity:.6;}
.inline-input-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.inline-input-row .form-row{flex:1; min-width:140px; margin-bottom:0;}
input[type="range"]{width:100%; margin:0; accent-color:var(--tint-fill); cursor:pointer; min-height:28px;}

/* ============ Infokarte ============ */
.info{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--tint-fill); color:#fff; border-radius:var(--r-sm); box-shadow:0 0 5px -3px #111;
  font-family:var(--font-ui);
}
.info__icon{width:20px; height:20px; flex:none; fill:currentColor; transform:translateY(-1px);}
.info__body{flex:1; min-width:0;}
.info__title{font-weight:500; font-size:.875rem; line-height:1.4;}
.info__close{
  width:28px; height:28px; margin:-4px -6px -4px auto; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background-color .15s, transform var(--press) ease-out;
}
.info__close:hover{background:rgba(255,255,255,.18);}
.info__close:active{transform:scale(.9);}
.info__close svg{width:16px; height:16px; fill:currentColor;}
.info--warn{background:var(--caution-fill); color:var(--on-caution);}
.info--neutral{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-md); border-radius:var(--r-md); padding:16px 18px;}
.info--neutral .info__icon{fill:var(--tint);}
.info--neutral .info__title{font-size:.9375rem;}
.info .btn-ghost{background:rgba(255,255,255,.2); color:inherit;}
.info .btn-ghost:hover:not(:disabled){background:#fff; color:var(--caution-fill); box-shadow:0 0 0 5px rgba(255,255,255,.28);}
html[data-theme="dark"] .info--warn .btn-ghost{background:rgba(0,0,0,.14);}
html[data-theme="dark"] .info--warn .btn-ghost:hover:not(:disabled){background:#1D1D1F; color:var(--caution-fill);}

/* Toast: Infokarte als Material, erscheint und verschwindet auf demselben Weg */
#yt-toast{
  position:fixed; left:50%; bottom:24px; z-index:999; width:min(440px, calc(100vw - 32px)); align-items:center;
  opacity:0; filter:blur(6px); pointer-events:none;
  transform:translateX(-50%) translateY(16px) scale(.96);
  transition:transform var(--spring-dur) var(--spring), opacity .2s ease, filter .25s ease;
}
#yt-toast.show{opacity:1; filter:none; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1);}
.info--toast{
  background:var(--toast-bg); color:var(--toast-ink); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
}
.info--toast .info__title{font-weight:560;}
@media(max-width:1000px){ body:has(.tabs) #yt-toast{bottom:calc(96px + env(safe-area-inset-bottom));} }

/* ============ Loader ============ */
.dots-container{display:flex; align-items:center; gap:8px; height:24px; flex:none;}
.dots-container .dot{width:11px; height:11px; border-radius:6px; background-color:var(--dot-a); animation:pulse 1.5s infinite ease-in-out;}
.dots-container .dot:nth-child(1){animation-delay:-.3s;}
.dots-container .dot:nth-child(2){animation-delay:-.1s;}
.dots-container .dot:nth-child(3){animation-delay:.1s;}
@keyframes pulse{
  0%{transform:scale(.8); background-color:var(--dot-a); box-shadow:0 0 0 0 var(--dot-glow);}
  50%{transform:scale(1.2); background-color:var(--dot-b); box-shadow:0 0 0 6px transparent;}
  100%{transform:scale(.8); background-color:var(--dot-a); box-shadow:0 0 0 0 var(--dot-glow);}
}

/* ============ Account-Popup ============ */
.account-wrap{position:relative; display:inline-block;}
.avatar-btn{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:var(--avatar); color:#fff; font-size:.875rem; font-weight:650; letter-spacing:.02em;
  outline:2px solid transparent; outline-offset:0;
  transition:transform .1s ease-in-out, outline-color .2s, outline-offset .2s;
}
.avatar-btn:hover{transform:scale(1.1);}
.avatar-btn:active{transform:scale(.95);}
.account-wrap:has(.account-menu.open) .avatar-btn{outline-color:var(--avatar); outline-offset:2px;}
/* Öffnet aus dem Avatar heraus (Ursprung oben rechts) und schliesst auf demselben Weg */
.account-menu{
  position:absolute; right:0; top:calc(100% + 12px); z-index:700; min-width:220px; padding:8px 4px;
  background:var(--material-thick); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  transform:scale(.8); transform-origin:top right; opacity:0; visibility:hidden;
  transition:transform var(--spring-dur) var(--spring), opacity .15s ease, visibility 0s linear .2s;
}
.account-menu.open{transform:scale(1); opacity:1; visibility:visible; transition:transform var(--spring-dur) var(--spring), opacity .15s ease, visibility 0s;}
.popup-title{padding:4px 14px 8px; font-size:.75rem; color:var(--ink-3); letter-spacing:.01em;}
.account-menu ul{list-style:none; margin:0; padding:0;}
.account-menu a, .account-menu button{
  display:flex; align-items:center; gap:14px; width:100%; padding:8px 14px; border:0; border-radius:8px;
  background:none; color:var(--ink); font-size:.9375rem; text-align:left; text-decoration:none; white-space:nowrap; cursor:pointer;
}
.account-menu svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--go);}
.account-menu li:nth-child(5) svg{color:var(--ink-3);}
.account-menu .danger svg{color:var(--stop);}
.account-menu a:hover, .account-menu a:focus-visible, .account-menu button:hover, .account-menu button:focus-visible{background:var(--avatar); color:#fff; outline:none;}
.account-menu a:hover svg, .account-menu a:focus-visible svg, .account-menu button:hover svg, .account-menu button:focus-visible svg{color:#fff;}
.account-menu hr{margin:5px 8px; border:none; border-bottom:1px solid var(--rule);}
/* Versionsanzeige: deployter Commit von Server und Pi, klein am Fuss des Konto-Menüs */
.app-version{display:flex; gap:12px; margin:5px 8px 0; padding:8px 6px 2px; border-top:1px solid var(--rule); font-size:.6875rem; color:var(--ink-3); letter-spacing:.01em; white-space:nowrap; cursor:default;}
.app-version code{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.6875rem; color:var(--ink-2);}

/* ============ Dashboard-Grundgerüst ============ */
.app-page{padding:36px 0 96px;}
.dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:24px;}
.dash-head p{color:var(--ink-2); margin-top:8px; max-width:62ch;}
.dash-head .searchbox{max-width:260px;}
@media(max-width:640px){
  .app-page{padding:20px 0 48px;}
  h1{font-size:2.25rem;}
  .dash-head .searchbox{max-width:none;}
}

.card-base{background:var(--surface); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-md);}
.card-base h4{margin-bottom:14px;}
.card-base h4 + .hint{margin:-8px 0 14px;}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:6px 0; font-size:.875rem;}
.empty-hint:not(.info){background:var(--surface); border-radius:var(--r-lg); padding:28px 24px; color:var(--ink-2); box-shadow:var(--shadow-md);}
.card-base .empty-hint:not(.info){box-shadow:none; padding:16px 0 4px;}
.empty-hint a{color:var(--tint);}
.api-note{margin-top:12px;}

/* Status-Lampen */
.status-dot{display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:600; white-space:nowrap; color:var(--ink-3);}
.dotmark{width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none;}
.status-dot.online{color:var(--go);}
.status-dot.online .dotmark{background:var(--go-lamp); box-shadow:0 0 0 3px color-mix(in srgb, var(--go-lamp) 25%, transparent); animation:heartbeat 3s ease-in-out infinite;}
.status-dot.demo{color:var(--caution);}
.status-dot.demo .dotmark{background:var(--caution-lamp);}
@keyframes heartbeat{0%,86%,100%{transform:scale(1);} 90%{transform:scale(1.35);} 94%{transform:scale(1);} 97%{transform:scale(1.2);}}

/* ============ Review ============ */
.stat-row-dash{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px;}
.stat-card{background:var(--surface); border-radius:var(--r-lg); padding:16px 20px; box-shadow:var(--shadow-md);}
.stat-card .lbl{display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:500; color:var(--ink-2);}
.stat-card.is-preview .lbl::before, .stat-card.is-program .lbl::before{content:""; width:8px; height:8px; border-radius:50%; flex:none;}
.stat-card.is-preview .lbl::before{background:var(--tint-fill);}
.stat-card.is-program .lbl::before{background:var(--go-lamp);}
.stat-card .val{font-family:var(--font-display); font-size:3rem; font-weight:780; font-stretch:var(--narrow); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.stat-card .note{font-size:.8125rem; color:var(--ink-3); margin-top:4px;}
@media(max-width:560px){
  .stat-row-dash{gap:8px;}
  .stat-card{padding:12px;}
  .stat-card .val{font-size:2.25rem;}
  .stat-card .note{display:none;}
  .stat-card .lbl{align-items:flex-start;}
  .stat-card.is-preview .lbl::before, .stat-card.is-program .lbl::before{margin-top:.45em;}
}

.dash-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start;}
#review-list, #review-empty{grid-column:1; min-width:0;}
.side-stack{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:12px;}
@media(max-width:1000px){
  .dash-grid{grid-template-columns:minmax(0,1fr);}
  .side-stack{grid-column:1; grid-row:auto;}
}

/* Warteschlange: Fenster liegen nebeneinander, gewechselt wird über Pfeilknöpfe (und ←/→).
   Kein sichtbarer Scrollbalken – der wirkte am Desktop unruhig und war mit dem Mausrad unhandlich. */
.review-track{grid-column:1; min-width:0;}
.review-track:has(#review-list:empty){display:none;}
.review-nav{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:10px;}
.review-nav[hidden]{display:none;}
.review-pos{margin-right:4px; font-size:.8125rem; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.review-arrow{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:0; border-radius:50%; background:var(--window); color:var(--ink-2); cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.12), inset 0 0 0 1px var(--rule-strong);
  transition:transform var(--press) ease-out, color .15s, opacity .15s;
}
.review-arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.review-arrow:hover:not(:disabled){color:var(--tint);}
.review-arrow:active:not(:disabled){transform:scale(.92);}
.review-arrow:disabled{opacity:.35; cursor:default;}
.review-arrow:focus-visible{outline:2px solid var(--tint); outline-offset:2px;}
#review-list{
  position:relative; display:flex; gap:16px; overflow-x:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none; padding:6px 6px 28px; margin:-6px -6px -22px;
}
#review-list::-webkit-scrollbar{display:none;}
#review-list:empty{display:none;}
@media(max-width:720px){
  .review-nav{display:none !important;}
}

/* Speicheranzeige des Pi (freier Platz, Archiv-Belegung) */
.storage-meter{height:6px; margin:2px 0 8px; border-radius:var(--r-pill); background:var(--rule-strong); overflow:hidden;}
.storage-meter[hidden]{display:none;}
.storage-meter span{display:block; width:0; height:100%; border-radius:inherit; background:var(--tint); transition:width .4s ease-out;}
.storage-meter.is-full span{background:var(--caution-lamp);}

/* macOS-Fenster */
.mac-card{
  flex:0 0 calc(100% - 72px); scroll-snap-align:start; margin-bottom:0 !important;
  background:var(--window); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden;
  display:grid; grid-template-columns:minmax(200px,290px) minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr auto; column-gap:28px; padding:0 20px 20px;
}
.mac-card:only-child{flex-basis:100%;}
.mac-tools{
  grid-column:1 / -1; grid-row:1; display:flex; align-items:center; gap:8px;
  margin:0 -20px 18px; padding:10px 16px; background:var(--titlebar);
}
.mac-tools .box{
  position:relative; display:inline-block; width:12px; height:12px; padding:0; border:0; border-radius:50%; cursor:pointer;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2); transition:transform var(--press) ease-out, filter .15s;
}
.mac-tools .box::before{content:""; position:absolute; inset:-6px; border-radius:50%;}   /* grössere Trefferfläche */
.mac-tools .box::after{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; line-height:1; color:rgba(0,0,0,.6); opacity:0; transition:opacity .12s;
}
.mac-tools .red{background:var(--traffic-red);}
.mac-tools .yellow{background:var(--traffic-yellow);}
.mac-tools .green{background:var(--traffic-green);}
.mac-tools .red::after{content:"\21BB";}
.mac-tools .yellow::after{content:"\21A9";}
.mac-tools .green::after{content:"\2713";}
.mac-tools:hover .box:not(:disabled)::after{opacity:1;}
.mac-tools .box:active:not(:disabled){transform:scale(.85); filter:brightness(.9);}
.mac-tools .box:disabled{background:var(--rule-strong); opacity:1;}
.mac-tools .label{margin-left:12px; font-size:.8125rem; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.mac-status{margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:var(--r-pill); font-size:.8125rem; font-weight:600; color:var(--ink-2); background:var(--surface);}
.mac-status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-3);}
.mac-status.idle{color:var(--tint);}
.mac-status.idle::before{background:var(--tint-fill);}
.mac-status.blocked{color:var(--caution);}
.mac-status.blocked::before{background:var(--caution-lamp);}
.mac-status.approved{color:var(--go);}
.mac-status.approved::before{background:var(--go-lamp);}
.mac-video{grid-column:1; grid-row:2 / -1; align-self:start; aspect-ratio:9 / 16; background:var(--frame); border-radius:var(--r-md); overflow:hidden; box-shadow:0 12px 28px -14px rgba(0,0,0,.45);}
.mac-video video{display:block; width:100%; height:100%; object-fit:contain; background:var(--frame);}
.mac-footer{grid-column:2; grid-row:2; min-width:0; margin-bottom:18px;}
.mac-footer .title{font-family:var(--font-display); font-size:2rem; font-weight:740; font-stretch:var(--narrow); line-height:1.06; letter-spacing:-.012em; overflow-wrap:anywhere; max-width:24ch;}
.mac-footer .sub{color:var(--ink-2); margin-top:8px; overflow-wrap:anywhere; max-width:60ch;}
.fact-check-banner{grid-column:2; grid-row:3; align-self:start; margin-bottom:18px;}
.fc-head{font-weight:650;}
.fc-list{margin:6px 0 0; padding-left:18px; font-size:.875rem;}
.fc-list li + li{margin-top:3px;}
.fc-verdict{font-weight:650;}
.fc-note{opacity:.85;}
.ack-fact-check-btn{margin-top:10px; white-space:normal; text-align:left; padding:6px 12px;}
.mac-decide{grid-column:2; grid-row:6; align-self:end;}
.mac-decide label{display:block; font-size:.8125rem; font-weight:600; color:var(--ink-2); margin-bottom:6px;}
.mac-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px;}
.mac-actions .approve-btn{margin-left:auto;}

@media(max-width:720px){
  #review-list{flex-direction:column; overflow:visible; scroll-snap-type:none; gap:16px; padding:0; margin:0;}
  .mac-card{flex:none; grid-template-columns:minmax(0,1fr); grid-template-rows:none; padding:0 16px 16px;}
  .mac-tools{margin:0 -16px 14px;}
  .mac-video, .mac-tools, .mac-footer, .fact-check-banner, .mac-decide{grid-column:1; grid-row:auto;}
  .mac-video{justify-self:center; width:min(100%, calc((100vh - var(--nav-h) - 180px) * 9 / 16)); width:min(100%, calc((100svh - var(--nav-h) - 180px) * 9 / 16)); margin-bottom:16px;}
  .mac-footer .title{font-size:1.5rem;}
  .mac-decide textarea{min-height:45px;}
  .mac-actions .approve-btn{order:-1; flex:1 0 100%; margin-left:0;}
  .mac-actions .btn-ghost{flex:1 1 0; min-width:0; white-space:normal; line-height:1.2; padding:6px 8px;}
}

.render-loader{display:flex; align-items:center; gap:14px; min-height:28px;}
.loader-phrase{font-size:.875rem; color:var(--ink-2); transition:opacity .25s;}
.loader-phrase.fading{opacity:0;}

/* Farbdock: Nachbarn wachsen mit, wie im macOS-Dock */
.theme-swatches{display:flex; flex-direction:column; gap:10px;}
.swatch-group{display:flex; flex-direction:column; gap:2px;}
.swatch-caption{font-size:.75rem; color:var(--ink-3); letter-spacing:.01em;}
.container-items{display:flex; flex-wrap:wrap; row-gap:14px; padding:14px 8px 8px 4px; transform-style:preserve-3d; transform:perspective(1000px);}
.item-color{
  position:relative; flex-shrink:0; width:32px; height:40px; padding:0; border:none; outline:none; background:none; cursor:pointer;
  transition:transform 500ms cubic-bezier(.175,.885,.32,1.1);
}
.item-color::after{
  content:""; position:absolute; inset:0; width:40px; height:40px; border-radius:6px; background-color:var(--sw);
  transform:scale(1.2); pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);
  transition:transform 500ms cubic-bezier(.175,.885,.32,1.1), box-shadow .2s;
}
html[data-theme="dark"] .item-color::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.5);}
.item-color::before{
  content:attr(data-label); position:absolute; left:65%; bottom:52px; z-index:2; transform:translateX(-50%);
  padding:3px 8px; border-radius:6px; background-color:var(--ink); color:var(--ground);
  font-size:11px; line-height:14px; font-weight:600; white-space:nowrap; pointer-events:none;
  opacity:0; visibility:hidden; transition:500ms cubic-bezier(.175,.885,.32,1.1);
}
.item-color.selected::after{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--tint-fill);}
.item-color:focus-visible::after{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--tint);}
.item-color:focus-visible::before{opacity:1; visibility:visible;}
.item-color:active::after{transform:scale(1.1);}
@media(hover:hover){
  .item-color:hover{transform:scale(1.5); z-index:99999;}
  .item-color:hover::before{opacity:1; visibility:visible;}
  .item-color:hover + *{transform:scale(1.3); z-index:9999;}
  .item-color:hover + * + *{transform:scale(1.15); z-index:999;}
  .item-color:has(+ *:hover){transform:scale(1.3); z-index:9999;}
  .item-color:has(+ * + *:hover){transform:scale(1.15); z-index:999;}
}

/* ============ Joblisten ============ */
.job-list{display:flex; flex-direction:column;}
.job-item{position:relative; display:flex; align-items:center; gap:12px; min-height:46px; padding:6px 10px; margin:0 -10px; border-radius:10px; font-size:.875rem; transition:background-color .15s;}
.job-item:hover{background:var(--surface-2);}
.job-item + .job-item::before{content:""; position:absolute; top:0; left:30px; right:10px; height:1px; background:var(--rule);}
.job-item:hover::before, .job-item:hover + .job-item::before{opacity:0;}
.job-dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--ink-3);}
.job-dot.review{background:var(--tint-fill);}
.job-dot.progress{background:transparent; box-shadow:inset 0 0 0 2px var(--ink-3);}
.job-dot.done{background:var(--go-lamp);}
.job-dot.failed{background:var(--stop-lamp);}
.jname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.jmeta{color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums;}
.jstage{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:.75rem; font-weight:600; white-space:nowrap; color:var(--ink-2); background:var(--surface-2);}
.jstage.review{color:var(--tint); background:var(--tint-soft);}
.jstage.done{color:var(--go); background:var(--go-soft);}
.jstage.failed{color:var(--stop); background:var(--stop-soft);}
.job-delete-btn{appearance:none; background:none; border:0; padding:8px; margin-right:-6px; display:inline-flex; color:var(--ink-3); cursor:pointer; border-radius:50%; transition:background-color .15s, color .15s, transform var(--press) ease-out;}
.job-delete-btn:hover{color:var(--stop); background:var(--stop-soft);}
.job-delete-btn:active{transform:scale(.9);}
#all-jobs-list .job-item, #editor-job-list .job-item{font-size:.9375rem; min-height:52px;}
#all-jobs-list .jstage, #editor-job-list .jstage{min-width:0;}
#all-jobs-list .jstage{margin-right:4px;}
#all-jobs-list .jmeta{width:72px; text-align:right;}
@media(max-width:560px){
  #all-jobs-list .job-item{flex-wrap:wrap; row-gap:4px;}
  #all-jobs-list .jname{flex-basis:calc(100% - 60px); white-space:normal;}
  #all-jobs-list .jstage{margin-left:21px;}
  #all-jobs-list .jmeta{width:auto; flex:1; text-align:left;}
}

/* ============ In progress ============ */
.progress-board-head{display:grid; grid-template-columns:var(--board); gap:6px; padding:0 20px 8px; font-size:.8125rem; font-weight:600; color:var(--ink-2);}
.progress-board-head:has(+ #progress-list:empty){display:none;}
#progress-list{display:flex; flex-direction:column; gap:12px;}
#progress-list:empty{display:none;}
.progress-job{display:grid; grid-template-columns:var(--board); gap:6px; align-items:center; background:var(--surface); border-radius:var(--r-lg); padding:16px 20px; box-shadow:var(--shadow-md);}
.pj-head{display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:16px;}
.pj-title{font-family:var(--font-display); font-size:1.125rem; font-weight:720; font-stretch:var(--narrow); line-height:1.2; overflow-wrap:anywhere;}
.pj-meta{font-size:.8125rem; color:var(--ink-3);}
.mini-stepper{display:contents;}
.ms-step{display:flex; flex-direction:column; gap:6px; min-width:0;}
.ms-dot{
  position:relative; overflow:hidden; height:32px; display:flex; align-items:center; padding:0 12px; border-radius:var(--r-sm);
  font-size:.8125rem; font-weight:650; font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--ink-3);
}
.ms-step.done .ms-dot{background:var(--go-soft); color:var(--go);}
.ms-step.active .ms-dot{background:var(--tint-soft); color:var(--tint); box-shadow:inset 0 0 0 1.5px var(--tint-fill);}
.ms-step.active .ms-dot::after{content:""; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--tint-fill) 22%, transparent), transparent); animation:scan 1.8s ease-in-out infinite;}
@keyframes scan{from{transform:translateX(-100%);} to{transform:translateX(250%);}}
.ms-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media(max-width:720px){
  .progress-board-head{display:none;}
  .progress-job{grid-template-columns:repeat(5,minmax(0,1fr)); padding:16px;}
  .pj-head{grid-column:1 / -1; padding:0 0 12px;}
  .ms-dot{padding:0 8px;}
  .ms-label{position:static; width:auto; height:auto; clip:auto; font-size:.6875rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;}
}

/* ============ Topics ============ */
.topics-table{width:100%; border-collapse:collapse;}
.topics-table th{text-align:left; font-size:.8125rem; font-weight:600; color:var(--ink-2); padding:0 16px 10px 0;}
.topics-table td{padding:14px 16px 14px 0; vertical-align:top; box-shadow:inset 0 1px var(--rule);}
.topics-table td:last-child{text-align:right; white-space:nowrap; padding-right:0;}
.topic-name{width:38%; font-family:var(--font-display); font-size:1.125rem; font-weight:720; font-stretch:var(--narrow); line-height:1.25;}
@media(max-width:700px){
  .topics-table thead{display:none;}
  .topics-table, .topics-table tbody, .topics-table tr, .topics-table td{display:block; width:100%;}
  .topics-table tr{padding:12px 0; box-shadow:inset 0 1px var(--rule);}
  .topics-table tr:first-child{box-shadow:none;}
  .topics-table td{box-shadow:none; padding:3px 0; text-align:left !important;}
  .topics-table td:last-child{padding-top:10px;}
}

/* ============ Settings ============ */
.settings-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
@media(max-width:860px){ .settings-grid{grid-template-columns:minmax(0,1fr);} }
.settings-grid .card-base{display:flex; flex-direction:column;}
.card-actions{margin-top:auto; padding-top:18px;}
.ratio-slider-row{display:grid; grid-template-columns:96px minmax(0,1fr) 48px; align-items:center; gap:12px; min-height:40px;}
.rs-label{font-size:.875rem;}
.rs-value{text-align:right; font-weight:650; font-variant-numeric:tabular-nums;}
.ratio-total-hint{margin-top:8px; font-size:.8125rem; color:var(--ink-2);}
.ratio-total-hint.warn{color:var(--caution); font-weight:650;}
.setting-toggle{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:48px;}
.setting-toggle > label:first-child{font-size:.9375rem;}

.fav-search-row, .fav-link-row, .editor-search-row{display:flex; gap:8px; margin-bottom:12px;}
.fav-search-results{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-bottom:12px;}
.fav-search-results:empty, #fav-sfx-search-results:empty{display:none;}
#fav-sfx-search-results{margin-bottom:12px;}
.fav-search-result{position:relative; cursor:pointer; overflow:hidden; border-radius:var(--r-sm); background:var(--surface-2); min-width:0; transition:transform var(--press) ease-out;}
.fav-search-result:active{transform:scale(.97);}
.fav-search-result video{display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--frame);}
.fav-search-result-title{font-size:.75rem; padding:4px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fav-add-badge{position:absolute; top:6px; right:6px; padding:2px 8px; border-radius:var(--r-pill); background:var(--tint-fill); color:#fff; font-size:.75rem; font-weight:650; opacity:0; transition:opacity .15s;}
.fav-search-result:hover .fav-add-badge{opacity:1;}
@media(hover:none){ .fav-add-badge{opacity:1;} }
.fav-list{display:flex; flex-direction:column;}
.fav-item{display:flex; align-items:center; gap:12px; padding:10px 0;}
.fav-item + .fav-item{box-shadow:inset 0 1px var(--rule);}
.fav-thumb{width:56px; height:56px; flex:none; overflow:hidden; border-radius:10px; background:var(--frame); display:flex; align-items:center; justify-content:center;}
.fav-thumb img, .fav-thumb video{display:block; width:100%; height:100%; object-fit:cover;}
.fav-info{flex:1; min-width:0;}
.fav-label{font-size:.875rem; font-weight:600; overflow-wrap:anywhere;}
/* Beat-Tags als Segment-Steuerung in Dramaturgie-Reihenfolge */
.fav-tags{display:inline-flex; flex-wrap:wrap; gap:2px; margin-top:6px; padding:2px; border-radius:9px; background:var(--surface-2);}
.fav-tag-btn{appearance:none; cursor:pointer; padding:3px 9px; border:0; border-radius:7px; background:transparent; color:var(--ink-2); font-size:.75rem; font-weight:500; text-transform:capitalize; transition:background-color .2s, color .2s, box-shadow .2s, transform var(--press) ease-out;}
.fav-tag-btn:hover{color:var(--ink);}
.fav-tag-btn:active{transform:scale(.94);}
.fav-tag-btn.active{background:var(--surface); color:var(--ink); font-weight:650; box-shadow:0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.05);}
html[data-theme="dark"] .fav-tag-btn.active{background:#48484A;}
.fav-remove{appearance:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink-3); display:inline-flex; border-radius:50%; transition:background-color .15s, color .15s;}
.fav-remove:hover{color:var(--stop); background:var(--stop-soft);}
.fav-empty-hint{padding:8px 0; font-size:.875rem; color:var(--ink-3);}

/* ============ Account ============ */
.account-panel{max-width:600px;}
.account-hero{display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-bottom:20px;}
.avatar-lg{width:64px; height:64px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--avatar); color:#fff; font-size:1.375rem; font-weight:650; box-shadow:var(--shadow-md);}
.account-hero .name{font-family:var(--font-display); font-size:1.5rem; font-weight:740; font-stretch:var(--narrow);}
.account-hero .email{font-size:.875rem; color:var(--ink-2);}
.plan-badge{margin-left:auto; padding:4px 10px; border-radius:var(--r-pill); background:var(--surface-2); font-size:.8125rem; color:var(--ink-2);}
.connected-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; box-shadow:inset 0 1px var(--rule);}
.cr-name{font-weight:600;}
.cr-sub{font-size:.8125rem; color:var(--ink-3);}
.badge-connected{display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap; font-size:.8125rem; font-weight:600; color:var(--go); background:var(--go-soft);}
.badge-connected::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.badge-connected.is-static{color:var(--ink-2); background:var(--surface-2);}
.account-foot{display:flex; justify-content:flex-end; padding-top:20px;}

/* ============ Editor ============ */
#editor-workspace{display:flex; flex-direction:column; gap:12px;}
.editor-title{font-family:var(--font-display); font-size:1.5rem; font-weight:740; font-stretch:var(--narrow); line-height:1.15; overflow-wrap:anywhere;}
.timeline-top{display:flex; align-items:flex-end; gap:24px; margin-bottom:20px; flex-wrap:wrap;}
.timeline-video{width:180px; aspect-ratio:9 / 16; flex:none; background:var(--frame); border-radius:var(--r-md); object-fit:contain; box-shadow:0 12px 28px -14px rgba(0,0,0,.45);}
.timeline-legend{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8125rem; color:var(--ink-2);}
.legend-item{display:inline-flex; align-items:center; gap:6px;}
.legend-dot{width:10px; height:10px; border-radius:3px; background:var(--c);}
[data-type="factcard"]{--c:var(--clip-factcard);}
[data-type="infographic"]{--c:var(--clip-infographic);}
[data-type="photo"]{--c:var(--clip-photo);}
[data-type="screenshot"]{--c:var(--clip-screenshot);}
[data-type="gif"]{--c:var(--clip-gif);}
.timeline-scroller{overflow-x:auto; background:var(--surface-2); border-radius:var(--r-md); padding:0 16px 14px;}
.timeline-inner{position:relative; min-width:640px;}
.timeline-ruler{position:relative; height:28px;}
.timeline-tick{position:absolute; top:0; bottom:0; padding-left:5px; line-height:28px; font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums; border-left:1px solid var(--rule-strong); white-space:nowrap;}
.timeline-track{position:relative; margin-top:6px;}
.timeline-track-beats{height:30px;}
.timeline-track-shots{height:64px;}
.beat-block{
  position:absolute; top:0; bottom:0; overflow:hidden; white-space:nowrap; border-radius:6px;
  display:flex; align-items:center; padding:0 10px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule), inset 3px 0 var(--tint-fill);
  font-family:var(--font-display); font-size:.8125rem; font-weight:740; font-stretch:var(--narrow); text-transform:capitalize;
}
.shot-block{position:absolute; top:0; bottom:0; overflow:hidden; cursor:pointer; border-radius:5px; background:var(--c, var(--ink-3)); box-shadow:inset -2px 0 var(--surface-2); transition:filter .15s, transform var(--press) ease-out;}
.shot-block img, .shot-block video{display:block; width:100%; height:100%; object-fit:cover; opacity:.85;}
.shot-block:hover{filter:brightness(1.1);}
.shot-block:active{transform:scaleY(.94);}
.shot-block.selected{z-index:2; box-shadow:0 0 0 2px var(--surface-2), 0 0 0 4px var(--tint-fill);}
.shot-icon{position:absolute; left:4px; bottom:4px; font-size:.75rem; line-height:1;}
.shot-icon.centered{left:50%; top:50%; bottom:auto; transform:translate(-50%,-50%); font-size:1rem;}
.timeline-playhead{position:absolute; top:0; bottom:0; z-index:3; width:2px; margin-left:-1px; background:var(--stop-lamp); pointer-events:none; border-radius:1px;}
.timeline-playhead::before{content:""; position:absolute; top:-2px; left:-5px; width:12px; height:12px; border-radius:3px 3px 6px 6px; background:var(--stop-lamp);}

#editor-beats{display:flex; flex-direction:column; gap:12px;}
#editor-beats:empty{display:none;}
.editor-beat-card{background:var(--surface); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-md); transition:box-shadow .35s ease;}
.editor-beat-card.timeline-highlight{box-shadow:0 0 0 3px var(--tint-ring), var(--shadow-md);}
.editor-beat-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px;}
.editor-beat-name{font-family:var(--font-display); font-size:1.5rem; font-weight:780; font-stretch:var(--narrow); text-transform:capitalize;}
.editor-type-badge{padding:2px 9px; border-radius:var(--r-pill); background:var(--surface-2); font-size:.75rem; font-weight:600; color:var(--ink-2);}
.ed-bars-label{display:block; margin-bottom:6px; font-size:.8125rem; font-weight:600; color:var(--ink-2);}
.editor-bars-row{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 45px; gap:8px; margin-bottom:8px;}
.ed-remove-bar{appearance:none; cursor:pointer; background:var(--surface-2); border:0; border-radius:var(--r-md); color:var(--ink-3); transition:background-color .15s, color .15s;}
.ed-remove-bar:hover{color:var(--stop); background:var(--stop-soft);}
.ed-add-bar{margin-top:4px;}
@media(max-width:560px){
  .editor-bars-row{grid-template-columns:1fr 1fr; grid-template-areas:"label label" "value unit" "remove remove";}
  .ed-bar-label{grid-area:label;} .ed-bar-value{grid-area:value;} .ed-bar-unit{grid-area:unit;}
  .ed-remove-bar{grid-area:remove; min-height:36px;}
}
.editor-thumb-row{display:flex; flex-wrap:wrap; gap:10px;}
.editor-thumb{position:relative; width:90px; aspect-ratio:9 / 16; overflow:hidden; cursor:pointer; border-radius:10px; background:var(--frame); box-shadow:0 6px 16px -10px rgba(0,0,0,.5); transition:transform var(--press) ease-out, box-shadow .2s;}
.editor-thumb:active{transform:scale(.96);}
.editor-thumb img, .editor-thumb video{display:block; width:100%; height:100%; object-fit:cover;}
.thumb-overlay{position:absolute; left:6px; right:6px; bottom:6px; padding:4px 6px; border-radius:6px; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-size:.75rem; font-weight:600; text-align:center; opacity:0; transition:opacity .15s;}
.editor-thumb:hover .thumb-overlay{opacity:1;}
@media(hover:none){ .thumb-overlay{opacity:1;} }
.upload-hint{position:absolute; top:6px; left:6px; right:6px; color:#fff; font-size:.6875rem; font-weight:600; opacity:0;}
.editor-thumb.drag-over{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--tint-fill); transform:scale(1.04);}
.editor-thumb.drag-over .upload-hint{opacity:1;}
.editor-thumb.timeline-highlight{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--tint-fill);}
.ed-search-area{margin-top:14px;}
.editor-search-results{display:flex; flex-wrap:wrap; gap:10px;}
.editor-search-result{width:90px;}
.editor-search-result .editor-thumb{width:100%;}
.editor-search-result-title{margin-top:4px; font-size:.6875rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gif-badge{position:absolute; top:5px; right:5px; padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.6); color:#fff; font-size:.625rem; font-weight:700;}
.editor-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}

/* ============ Dialoge: abdunkeln und fokussieren ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:900; display:none; align-items:center; justify-content:center; padding:20px;
  background:var(--scrim); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.modal-overlay.open{display:flex; animation:scrim-in .25s ease both;}
@keyframes scrim-in{from{opacity:0;}}
.confirm-card{
  position:relative; width:100%; max-width:400px; padding:26px; border-radius:var(--r-xl);
  background:var(--material-thick); box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  animation:materialize var(--spring-dur) var(--spring) both;
}
@keyframes materialize{from{opacity:0; transform:scale(.94); filter:blur(8px);} to{opacity:1; transform:none; filter:none;}}
.confirm-icon{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:14px; border-radius:50%; background:color-mix(in srgb, var(--caution-lamp) 18%, transparent); color:var(--caution);}
.confirm-title{margin-bottom:6px; font-size:1.5rem;}
.confirm-message{margin-bottom:22px; color:var(--ink-2); overflow-wrap:anywhere;}
.confirm-actions{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px;}

/* ============ Sign-in (neumorph) ============ */
.signin-card{
  position:relative; width:100%; max-width:360px; padding:40px 30px 32px; border-radius:var(--r-lg);
  background:var(--neu-bg); color:var(--neu-ink);
  box-shadow:-3px -3px 7px var(--neu-light), 2px 2px 5px rgba(94,104,121,.288);
}
.modal-overlay .signin-card{box-shadow:-3px -3px 7px var(--neu-light), 2px 2px 5px rgba(94,104,121,.288), var(--shadow-lg); animation:materialize var(--spring-dur) var(--spring) both;}
.signin-card .text{font-family:var(--font-display); font-size:2.0625rem; font-weight:700; font-stretch:var(--narrow); line-height:1.1; color:var(--neu-ink); margin-bottom:6px;}
.signin-card .sub{margin:0 0 28px; font-size:.9375rem; color:var(--neu-ink-2);}
.signin-card .signin-hint{margin:18px 4px 0; font-size:.8125rem; line-height:1.45; color:var(--neu-ink-2); text-align:center;}
.signin-card .button{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:14px 0 0; width:100%; height:50px; border:none; border-radius:25px; outline:none; cursor:pointer; text-decoration:none;
  font-size:1.0625rem; font-weight:600; background:var(--neu-bg); color:var(--neu-ink);
  box-shadow:2px 2px 5px var(--neu-dark), -5px -5px 10px var(--neu-light);
  transition:box-shadow .15s ease, color .15s ease;
}
.signin-card .button.primary{color:var(--tint);}
.signin-card .button:active, .signin-card .button:focus-visible{color:var(--tint); box-shadow:inset 2px 2px 5px var(--neu-dark), inset -5px -5px 10px var(--neu-light);}
.close-x{
  position:absolute; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer; background:var(--neu-bg); color:var(--neu-ink-2);
  box-shadow:2px 2px 4px var(--neu-dark), -3px -3px 6px var(--neu-light); transition:box-shadow .15s;
}
.close-x:active{box-shadow:inset 2px 2px 4px var(--neu-dark), inset -3px -3px 6px var(--neu-light);}
.close-x svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round;}
.login-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--neu-bg);}
.login-page .island-brand{margin:0 0 26px; color:var(--neu-ink);}
.login-error{margin-top:18px;}
.login-note{margin-top:18px;}

/* ============ Öffentliche Seiten ============ */
.section{padding:88px 0;}
.section.on-surface{background:var(--surface);}
.section-head{max-width:640px; margin-bottom:40px;}
.section-head p{margin-top:12px; color:var(--ink-2); font-size:1.0625rem;}
.lead{font-size:1.1875rem; line-height:1.5; letter-spacing:-.01em; color:var(--ink-2); max-width:50ch;}
@media(max-width:640px){ .section{padding:56px 0;} }

.hero{padding-top:56px; padding-bottom:88px;}
.hero-grid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:72px; align-items:center;}
.hero-visual{margin:0; width:300px; position:relative;}
.hero-frame{position:relative; aspect-ratio:9 / 16; overflow:hidden; border-radius:28px; background:var(--frame); color:#fff; box-shadow:0 0 0 8px #1D1D1F, 0 0 0 9px #3A3A3C, 0 40px 80px -30px rgba(0,0,0,.55);}
.hf-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;}
.hf-sound{position:absolute; right:14px; bottom:14px; z-index:1; width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; transition:background-color .2s, transform var(--press) ease-out;}
.hf-sound:hover{background:rgba(0,0,0,.65);}
.hf-sound:active{transform:scale(.92);}
.hf-sound:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.hf-sound svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.hf-sound .spk{fill:currentColor; stroke:none;}
.hf-sound .on, .hf-sound[aria-pressed="true"] .off{display:none;}
.hf-sound[aria-pressed="true"] .on{display:inline;}
/* Badges sitzen als Pillen auf dem Rahmen, ausserhalb des Videos: sie verdecken weder Bild noch Quellenangaben */
.float-badge{position:absolute; z-index:1; left:50%; top:-15px; translate:-50% 0; white-space:nowrap; box-shadow:0 0 0 3px var(--ground); display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-pill); color:#fff; font-size:.8125rem; font-weight:600;}
.float-badge.b1{background:#1D1D1F;}
/* „Ready to review“ löst am Ende jedes Durchlaufs „Rendered on the Pi“ oben auf dem Rahmen ab (unten lägen die Quellenangaben) */
.float-badge.b1{transition:opacity .3s ease;}
.hero-visual:has(.b2.show) .float-badge.b1{opacity:0;}
.float-badge.b2{background:var(--tint-fill); opacity:0; transform:translateY(8px) scale(.94); transition:opacity .3s ease, transform .45s var(--spring);}
.float-badge.b2.show{opacity:1; transform:none;}
.icon-dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.float-badge.b1 .icon-dot{background:var(--go-lamp);}
.hf-phases{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px;}
.hf-phases li{padding-top:8px; font-size:.75rem; font-weight:600; color:var(--ink-3); position:relative; transition:color .25s;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Handy: 5 Spalten in 240px, „Problem“ darf nicht in „Core“ hineinlaufen */
@media(max-width:900px){ .hf-phases li{font-size:.6875rem; letter-spacing:-.01em;} }
.hf-phases li::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:2px; background:var(--rule); transition:background-color .25s;}
.hf-phases li.lit{color:var(--ink);}
.hf-phases li{--lit:var(--tint-fill);}
.hf-phases li.lit::before{background:var(--tint-fill);}
.hf-ruler{position:relative; height:0; margin-top:-26px;}
.hf-head{position:absolute; top:-4px; width:4px; height:12px; margin-left:-2px; border-radius:2px; background:var(--stop-lamp); box-shadow:0 0 0 2px var(--ground); left:0;}
.hero-copy h1{font-size:4.5rem; font-weight:800; line-height:.98; letter-spacing:-.025em; max-width:11ch;}
.hero-copy .lead{margin-top:24px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.hero-note{margin-top:16px; font-size:.875rem; color:var(--ink-3);}
.stack-strip{display:flex; flex-wrap:wrap; gap:8px; margin:36px 0 0; padding:0; list-style:none;}
.stack-strip li{padding:4px 10px; border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow-sm); font-size:.8125rem; color:var(--ink-2);}
@media(max-width:900px){
  .hero{padding-top:32px; padding-bottom:56px;}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:48px;}
  .hero-visual{width:min(240px, 64vw); justify-self:center;}
  .hero-copy h1{font-size:3rem;}
}

.highlights{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.highlight{padding:24px; border-radius:var(--r-lg); background:var(--ground);}
.highlight h3{font-size:1.5rem; margin-bottom:10px;}
.highlight p{color:var(--ink-2); max-width:36ch;}
@media(max-width:820px){ .highlights{grid-template-columns:minmax(0,1fr);} }

.channel-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:56px; align-items:center;}
.channel-grid .section-head{margin-bottom:0;}
@media(max-width:900px){ .channel-grid{grid-template-columns:minmax(0,1fr); gap:28px;} }
.chart-card{background:var(--surface); border-radius:var(--r-xl); padding:22px; box-shadow:var(--shadow-lg); color:var(--tint-fill); transform:none !important; opacity:1 !important;}
.stat-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px; color:var(--ink);}
.stat-mini .lbl{font-size:.8125rem; color:var(--ink-2);}
.stat-mini .val{font-family:var(--font-display); font-size:2rem; font-weight:780; font-stretch:var(--narrow); line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.stat-mini .delta{font-size:.75rem; color:var(--go);}
.chart-svg-wrap svg{display:block; width:100%; height:150px; overflow:visible;}
.chart-x{display:flex; justify-content:space-between; margin-top:8px; font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums;}
@media(max-width:420px){ .stat-mini .val{font-size:1.5rem;} }

.cta-band{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px 40px;}
.cta-band h3{font-size:2rem;}
.cta-band p{margin-top:6px; color:var(--ink-2);}
.cta-band .actions{display:flex; gap:12px; flex-wrap:wrap;}

footer{padding:32px 0 40px; background:var(--ground);}
.footer-row{display:flex; align-items:center; flex-wrap:wrap; gap:12px 32px;}
.footer-brand{font-family:var(--font-display); font-size:1.125rem; font-weight:780; font-stretch:var(--narrow);}
.footer-links{display:flex; flex-wrap:wrap; gap:4px 20px;}
.footer-links a{color:var(--ink-2); text-decoration:none;}
.footer-links a:hover{color:var(--tint);}
.footer-copy{margin-left:auto; font-size:.8125rem; color:var(--ink-3);}
@media(max-width:640px){ .footer-copy{margin-left:0; flex-basis:100%;} }

/* <ol> ist hier inhaltlich richtig (echte Abfolge), aber die Schrittzahl steckt schon
   gestaltet in .num - ohne list-style:none zeigte der Browser zusätzlich "1." davor. */
.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0;}
.step{position:relative; padding:22px 20px 24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md);}
.step .num{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--surface-2); font-family:var(--font-display); font-size:1.25rem; font-weight:780; font-stretch:var(--narrow); color:var(--ink-2); font-variant-numeric:tabular-nums;}
.step h3{margin:14px 0 8px; font-size:1.375rem;}
.step p{font-size:.9375rem; color:var(--ink-2);}
.step.is-gate{box-shadow:0 0 0 2px var(--tint-fill), var(--shadow-md);}
.step.is-gate .num{background:var(--tint-fill); color:#fff;}
@media(max-width:960px){
  .steps{grid-template-columns:minmax(0,1fr);}
  .step{display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:12px;}
  .step .num{grid-row:1 / span 2;}
  .step h3{margin:4px 0 4px;}
}
.arch-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.arch-card{padding:24px; border-radius:var(--r-lg);}
.arch-card .tag{display:inline-block; margin-bottom:12px; padding:3px 10px; border-radius:var(--r-pill); background:var(--tint-soft); color:var(--tint); font-size:.8125rem; font-weight:600;}
.arch-card h3{margin-bottom:10px;}
.arch-card p{color:var(--ink-2);}
@media(max-width:860px){ .arch-grid{grid-template-columns:minmax(0,1fr);} }

.page-top{padding-top:64px;}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch;}
.plan{position:relative; display:flex; flex-direction:column; padding:28px 24px; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-md);}
.plan.featured{box-shadow:0 0 0 2px var(--tint-fill), var(--shadow-lg);}
.plan .tag{align-self:flex-start; margin-bottom:10px; padding:3px 10px; border-radius:var(--r-pill); background:var(--tint-fill); color:#fff; font-size:.8125rem; font-weight:600;}
.plan h3{font-size:1.5rem;}
.plan .price{margin:12px 0 20px; font-family:var(--font-display); font-size:3rem; font-weight:800; font-stretch:var(--narrow); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.plan .price span{font-family:var(--font-ui); font-size:1rem; font-weight:500; letter-spacing:0; color:var(--ink-2);}
.plan ul{list-style:none; margin:0 0 28px; padding:0; flex:1;}
.plan li{padding:9px 0; box-shadow:inset 0 1px var(--rule); color:var(--ink-2);}
@media(max-width:860px){ .plans{grid-template-columns:minmax(0,1fr); max-width:440px;} }
.faq{max-width:720px; padding:4px 22px; border-radius:var(--r-lg); background:var(--ground);}
.faq-item + .faq-item{box-shadow:inset 0 1px var(--rule);}
.faq-item summary{cursor:pointer; padding:18px 0; font-size:1.0625rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-weight:400; font-size:1.25rem; line-height:1; color:var(--tint); transition:transform .3s var(--spring);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 0 18px; color:var(--ink-2); max-width:62ch;}

.notfound{padding-top:96px; padding-bottom:120px;}
.notfound .code{font-family:var(--font-display); font-size:9rem; font-weight:800; font-stretch:62%; line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--rule-strong);}
.notfound h1{margin-top:12px;}
.notfound p{margin-top:12px; color:var(--ink-2); max-width:52ch;}
.notfound .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
@media(max-width:640px){ .notfound .code{font-size:6rem;} }

/* ---------- Fehlerdetails bei fehlgeschlagenen Jobs ---------- */
/* Vorher stand in der Liste nur "Failed" und man musste auf dem Pi ins Log schauen.
   Die echte Meldung steht in der Datenbank - hier wird sie aufklappbar sichtbar. */
.job-error-toggle{
  flex-shrink:0; margin-left:8px; padding:3px 10px; border-radius:999px;
  border:1px solid var(--stop); background:transparent; color:var(--stop);
  font-family:inherit; font-size:.75rem; font-weight:600; cursor:pointer;
  transition:background 120ms ease-out, transform 100ms ease-out;
}
.job-error-toggle:hover{background:var(--stop-soft);}
.job-error-toggle:active{transform:scale(.96);}

/* Pi-Archiv in der Jobs-Liste: Button für veröffentlichte Videos, Label für archivierte */
.job-archive-btn{
  display:inline-flex; align-items:center; height:22px; padding:0 9px; border:0; border-radius:var(--r-pill);
  font:inherit; font-size:.75rem; font-weight:600; white-space:nowrap; cursor:pointer;
  color:var(--tint); background:var(--tint-soft); transition:filter .15s, transform var(--press) ease-out;
}
.job-archive-btn:hover:not(:disabled){filter:brightness(.94);}
.job-archive-btn:active:not(:disabled){transform:scale(.96);}
.job-archive-btn:disabled{color:var(--ink-3); background:var(--surface-2); cursor:default;}
.job-archive-tag{font-size:.75rem; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums;}
a.job-archive-btn{text-decoration:none;}

/* Jobs-Seite: Filter "All jobs / Archived" neben der Suche */
.jobs-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.jobs-filter{width:auto; min-width:130px;}
@media(max-width:560px){
  .jobs-tools{width:100%;}
  .jobs-tools .searchbox{flex:1; min-width:0;}
}

/* Abspielfenster für vom Pi zurückgeholte Archiv-Videos */
.archive-player-card{max-width:420px;}
.archive-player-card video{
  display:block; width:100%; max-height:min(70vh, 640px); aspect-ratio:9 / 16; margin:4px 0 18px;
  border-radius:var(--r-md); background:var(--frame); object-fit:contain;
}
.confirm-actions a.btn-ghost{display:inline-flex; align-items:center; text-decoration:none;}
.job-error-detail{
  margin:-2px 0 10px; padding:14px 16px; border-radius:12px;
  background:var(--stop-soft); border:1px solid color-mix(in srgb, var(--stop) 30%, transparent);
}
.job-error-head{font-size:.8125rem; color:var(--stop); margin-bottom:8px;}
.job-error-log{
  margin:0 0 10px; padding:10px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--rule);
  font-family:var(--font-mono, ui-monospace, monospace); font-size:.75rem; line-height:1.5;
  color:var(--ink-2); white-space:pre-wrap; word-break:break-word;
  max-height:220px; overflow:auto;
}
.job-error-hint{font-size:.8125rem; color:var(--ink-2); line-height:1.5;}

/* ---------- Favoriten-Tags in Gruppen (Moment / Reaktion / Eigene) ---------- */
.fav-tag-group{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:5px;}
.fav-tag-group-label{
  font-size:.625rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); width:58px; flex-shrink:0;
}
.fav-tag-btn.custom{border-style:dashed;}
.fav-tag-add{
  width:22px; height:22px; border-radius:6px; border:1px dashed var(--rule-strong);
  background:transparent; color:var(--ink-3); cursor:pointer; font-size:.8125rem;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out;
}
.fav-tag-add:hover{border-color:var(--tint); color:var(--tint);}
.fav-tag-add:active{transform:scale(.92);}

/* ============ Freigaben (app-approvals.html) ============ */
.approvals-section{margin-bottom:36px;}
.approvals-h2{font-size:1.25rem; margin-bottom:14px;}
.approvals-list{display:grid; gap:16px;}
.approval-card{scroll-margin-top:110px; transition:box-shadow .35s ease;}
.approval-card--flash{box-shadow:0 0 0 3px var(--tint-ring), var(--shadow-md);}
.approval-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.approval-head h3{font-size:1.0625rem; line-height:1.35; margin:0;}
.approval-meta{margin-top:4px; font-size:.8125rem; color:var(--ink-3);}
.approval-pill{flex:none; padding:3px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:650; white-space:nowrap;}
.approval-pill--wait{background:var(--caution-fill); color:var(--on-caution, #fff);}
.approval-pill--ok{background:var(--go-soft); color:var(--go);}
.approval-pill--bad{background:var(--stop-soft); color:var(--stop);}
.approval-pill--muted{background:var(--surface-2); color:var(--ink-2);}
.approval-summary{margin-top:10px; color:var(--ink-2);}
.approval-effect, .approval-note{margin-top:10px; font-size:.9375rem;}
.approval-note{color:var(--ink-2);}
.approval-md{margin-top:10px; font-size:.9375rem; line-height:1.55; overflow-wrap:anywhere;}
.approval-md h3, .approval-md h4, .approval-md h5, .approval-md h6{margin:16px 0 6px; font-size:1rem;}
.approval-md p{margin:6px 0;}
.approval-md ul, .approval-md ol{margin:6px 0; padding-left:22px;}
.approval-md code{font-size:.85em; padding:1px 5px; border-radius:5px; background:var(--surface-2);}
.approval-md pre{margin:8px 0; padding:10px 12px; border-radius:var(--r-sm); background:var(--surface-2); overflow-x:auto;}
.approval-md pre code{padding:0; background:none;}
.approval-change{margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface-2);}
.approval-change-label{font-size:.75rem; font-weight:650; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin-bottom:6px;}
.approval-diff{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:3px 0; font-size:.875rem;}
.approval-diff code{font-size:.8125rem; overflow-wrap:anywhere;}
.approval-key{font-weight:600;}
.approval-link{display:inline-block; margin-top:8px; font-weight:600;}
.approval-details{margin-top:12px;}
.approval-details summary{cursor:pointer; font-weight:600; color:var(--tint);}
.approval-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}

/* ============ Landing-Intro: 3D-Kamerafahrt (intro.js) ============ */
/* Ohne JS/WebGL: ein Bildschirm hoher Titel vor einem Nachtverlauf. intro.js setzt .intro-live
   und macht daraus eine lange Scroll-Strecke, die die Kamera steuert. */
.intro{
  position:relative; height:100vh; height:100svh;
  margin-top:calc(-1 * var(--nav-h));
  background:linear-gradient(180deg,#02040b 0%,#070b1d 55%,#2a1830 86%,#05101c 100%);
  color:#fff;
}
.intro.intro-live{height:420vh; background:#060918;}
/* Die Seite überlappt die letzte Bildschirmhöhe der Fahrt: Am Ende steht der Hero direkt unter der Leiste, genau dort,
   wo ihn der Bildschirm des MacBooks bzw. iPhones zeigt. Wird das Intro losgelassen, scrollen beide gemeinsam weiter
   und intro.js blendet die Seite deckungsgleich über den Bildschirm ein (--page-in). */
.intro.intro-live + .hero{margin-top:calc(var(--nav-h) - 100vh); margin-top:calc(var(--nav-h) - 100svh);}
.intro.intro-live ~ *{position:relative; z-index:1; opacity:var(--page-in, 1);}
html.intro-page-hidden .intro.intro-live ~ *{visibility:hidden;}
html.intro-page-inert .intro.intro-live ~ *{pointer-events:none;}
/* Messung für den Bildschirm-Nachbau (intro.js): Endzustände ohne laufende Übergänge */
html.replica-measure *, html.replica-measure *::before{transition:none !important;}
.intro-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;}
/* Dunkler Verlauf hinter der hellen Leistenschrift: sonst ist sie vor den hellen Monitoren nicht lesbar.
   Nur solange die Schrift hell ist (body.on-intro); vor dem Bildschirm-Nachbau am Ende ist er weg. */
.intro-sticky::after{content:""; position:absolute; left:0; right:0; top:0; height:140px; pointer-events:none; background:linear-gradient(rgba(4,6,16,.62), rgba(4,6,16,.28) 55%, transparent); opacity:0; transition:opacity .35s ease;}
body.on-intro .intro-sticky::after{opacity:1;}
#intro-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.intro-title{
  z-index:1;                     /* über dem Verlauf hinter der Leiste */
  position:absolute; left:0; right:0; top:18%;
  text-align:center; pointer-events:none;
  font-family:"Archivo", var(--font-ui); font-weight:800; font-variation-settings:"wdth" 125;
  font-size:clamp(56px, 14vw, 220px); line-height:.9; letter-spacing:-.04em;
  color:#fff; text-shadow:0 0 18px rgba(255,200,140,.35), 0 0 60px rgba(120,150,255,.35), 0 4px 30px rgba(0,0,0,.5);
  opacity:var(--intro-title, 1);
  transform:translateY(calc((1 - var(--intro-title, 1)) * -60px)) scale(calc(1 + (1 - var(--intro-title, 1)) * .15));
}
.intro-hint{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%); margin:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75);
  opacity:var(--intro-title, 1);
}
.intro-hint span{width:22px; height:36px; border:2px solid rgba(255,255,255,.6); border-radius:12px; position:relative;}
.intro-hint span::after{
  content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px;
  border-radius:2px; background:#fff; animation:intro-wheel 1.6s ease-in-out infinite;
}
@keyframes intro-wheel{0%{transform:translateY(0); opacity:1;} 80%{transform:translateY(12px); opacity:0;} 100%{opacity:0;}}
.intro-fade{position:absolute; inset:0; background:var(--ground); opacity:var(--intro-fade, 0); pointer-events:none;}
/* Überspringen, zugleich Fortschrittsanzeige der Fahrt (Füllung = --intro-p von intro.js) */
.intro-skip{display:none;}
.intro-live .intro-skip{
  display:block; position:absolute; right:max(20px, env(safe-area-inset-right)); bottom:max(28px, env(safe-area-inset-bottom));
  z-index:1; overflow:hidden; padding:8px 16px; border:0; border-radius:var(--r-pill); cursor:pointer;
  font:600 .8125rem/1 var(--font-ui); letter-spacing:.01em; color:rgba(255,255,255,.88);
  background:rgba(12,14,28,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:opacity .3s ease, visibility .3s, background-color .2s, transform var(--press) ease-out;
}
.intro-live .intro-skip::before{
  content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.16);
  transform-origin:0 50%; transform:scaleX(var(--intro-p, 0));
}
.intro-live .intro-skip:hover{background:rgba(255,255,255,.18); color:#fff;}
.intro-live .intro-skip:active{transform:scale(.96);}
.intro-live .intro-skip:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.intro-live.intro-done .intro-skip{opacity:0; visibility:hidden;}
/* Sprungziel von „Skip intro“: Fokus nur für Screenreader/Tastatur, ohne Rahmen um die Überschrift */
.hero h1[tabindex="-1"]:focus{outline:none;}

/* Navigation über der Nachtszene: durchsichtig mit heller Schrift; der Hintergrund blendet erst beim Übergang
   zur Seite ein (--nav-solid 0 → 1, gesetzt von intro.js) */
body.intro-nav .island-wrap::before{opacity:var(--nav-solid, 0);}
/* Weichzeichner über der sich ständig ändernden 3D-Szene kostet jedes Bild eine Neuberechnung (auf iPhones spürbar):
   solange die Leiste durchsichtig ist, ohne */
body.on-intro .island-wrap::before{-webkit-backdrop-filter:none; backdrop-filter:none;}
body.intro-nav .island-wrap{box-shadow:none !important; animation:none; background:transparent !important;}
body.on-intro #landing-island .island-brand,
body.on-intro #landing-island .link{color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45);}
.island-wrap::before{transition:opacity .25s ease;}
#landing-island .island-brand, #landing-island .link{transition:color .35s ease, background-color .2s, transform var(--press) ease-out;}
@media (prefers-reduced-motion: reduce){
  .intro-hint span::after{animation:none;}
}

/* Ladeanzeige bis Turm und erstes Bild fertig sind (intro.js: .intro-loading, --load 0…1). Solange steht der Titel
   vor dem Nachtverlauf der Seite, danach blendet die Szene weich ein. */
.intro-loader{position:absolute; left:50%; bottom:40px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s; pointer-events:none;}
.intro-loading .intro-loader{opacity:1; visibility:visible;}
.intro-loader-bar{position:relative; width:180px; height:3px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.14);}
.intro-loader-bar span{position:absolute; inset:0; border-radius:inherit; transform-origin:0 50%; transform:scaleX(var(--load, 0)); background:linear-gradient(90deg, var(--stop-lamp), #fff); transition:transform .35s ease;}
.intro-loader-bar::after{content:""; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:loader-sheen 1.5s ease-in-out infinite;}
@keyframes loader-sheen{from{transform:translateX(-100%);} to{transform:translateX(260%);}}
.intro-loader-label{margin:0; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums;}
.intro-loading .intro-hint, .intro-loading .intro-skip{opacity:0 !important; visibility:hidden;}
.intro-loading .intro-sticky{background:linear-gradient(180deg,#02040b 0%,#070b1d 55%,#2a1830 86%,#05101c 100%);}
.intro-loading .intro-title{animation:title-breathe 2.4s ease-in-out infinite;}
@keyframes title-breathe{50%{text-shadow:0 0 26px rgba(255,200,140,.5), 0 0 80px rgba(120,150,255,.5), 0 4px 30px rgba(0,0,0,.5);}}
.intro-live #intro-canvas{transition:opacity .9s ease;}
.intro-loading #intro-canvas{opacity:0;}
@media (prefers-reduced-motion: reduce){ .intro-loader-bar::after, .intro-loading .intro-title{animation:none;} }
.footer-credits{margin-top:14px; font-size:.75rem; color:var(--ink-3);}
.footer-credits summary{cursor:pointer; width:max-content;}
.footer-credits p{margin:8px 0 0; line-height:1.6;}
.footer-credits a{color:var(--ink-2);}
/* Scrollleiste über der Nachtszene dunkel statt grellweiss */
html:has(#intro){scrollbar-color:rgba(128,134,150,.55) transparent;}