/* Generad · Oberfläche */
  :root{
    --radius: 15px; --pill: 999px;
    /* Farbwelt: Weiss + Hellgrau, Akzent aus der Generad-Palette (Hellblau/Grau) */
    --g0:#4A6780; --g1:#708898; --g2:#89A0AD; --g3:#A8BAC6; --g4:#D3DADF; --g5:#2F4759;
    --brand:#4A6780; --brand-ink:#ffffff; --brand-soft:#A8BAC6;
    --ink:#3b474f; --ink-2:#8a99a8;
    --surface:#ffffff; --sunken:#f2f2f4; --line:#e4e4e7; --line-2:#d3dae0;
    --start-bg:#ffffff; --logo-start:#3b474f;
    --home-bg:#f5f5f7; --bar:#8a99a8;
    --field:#f2f2f4; --field-ink:#8a99a8; --btn-small:#e4e4e7;
    --shadow-s:0 1px 2px rgba(59,71,79,.06), 0 0 0 1px rgba(59,71,79,.05);
    --shadow-m:0 4px 16px rgba(59,71,79,.09), 0 0 0 1px rgba(59,71,79,.05);
    --shadow-l:0 18px 50px rgba(59,71,79,.16), 0 0 0 1px rgba(59,71,79,.06);
    --pad:16px; --editor-w:340px;
    --font:'Aptos','Aptos Display','Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{ font-family:var(--font); background:var(--home-bg); color:var(--ink); -webkit-font-smoothing:antialiased; overflow:hidden; }

  /* ---- Generad-Logo ---- */
  .glogo{ display:inline-flex; align-items:center; gap:.42em; user-select:none; white-space:nowrap; line-height:0; }
  .gmark{ height:1em; width:1em; flex:0 0 auto; overflow:visible; transform-origin:50% 50%; }
  .gword{ height:.60em; width:auto; flex:0 0 auto; }
  /* Farben wandern im Uhrzeigersinn – gleiche Richtung wie die Drehung beim Arbeiten.
     Der Versatz je Segment hält dabei exakt die Farbfolge des Originallogos. */
  .gseg{ fill:var(--g0); animation:gcycle 3.2s linear infinite; animation-delay:calc((var(--i) - 6) * 0.5333s); }
  @keyframes gcycle{
    0%{ fill:var(--g0); } 16.667%{ fill:var(--g5); } 33.333%{ fill:var(--g4); }
    50%{ fill:var(--g3); } 66.667%{ fill:var(--g2); } 83.333%{ fill:var(--g1); } 100%{ fill:var(--g0); }
  }
  .ggene path{ fill:var(--g0); }
  .grad path{ fill:var(--g3); }
  @keyframes gspin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  /* Während die KI arbeitet: das Rad dreht sich und die Farben laufen schneller */
  .ai-busy .gmark{ animation:gspin 1.15s linear infinite; }
  .ai-busy .gseg{ animation-duration:1.15s; animation-delay:calc((var(--i) - 6) * 0.1917s); }

  #start{ position:fixed; inset:0; z-index:60; background:var(--start-bg); display:flex; align-items:center; justify-content:center; transition:opacity .7s ease, visibility .7s ease; }
  #start.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  #start .glogo{ font-size:64px; gap:.30em; }
  #start .gmark{ animation:gpop .72s cubic-bezier(.22,.61,.36,1) both; }
  #start .ggene path{ animation:gbuild .46s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(.34s + var(--i) * .085s); }
  #start .grad path{ animation:groll .46s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(.76s + var(--i) * .105s); }
  @keyframes gpop{ 0%{ opacity:0; transform:scale(.5) translateX(-26px); } 70%{ opacity:1; transform:scale(1.04) translateX(0); } 100%{ opacity:1; transform:scale(1) translateX(0); } }
  @keyframes gbuild{ 0%{ opacity:0; transform:translateY(9px); } 100%{ opacity:1; transform:translateY(0); } }
  @keyframes groll{ 0%{ opacity:0; transform:translateX(-16px); } 100%{ opacity:1; transform:translateX(0); } }
  #start .ggene path, #start .grad path{ transform-box:fill-box; transform-origin:50% 50%; }

  #app{ height:100dvh; min-height:100vh; padding:var(--pad); display:flex; flex-direction:column; gap:var(--pad); }
  /* Einheitliches Layout für alle Reiter: Leiste oben → Brotkrumen (Übersicht + Reiter) → Arbeitsfläche links, Panel rechts */
  .work{ flex:1; min-height:0; display:flex; gap:var(--pad); }
  .crumb{ display:none; align-items:center; gap:12px; flex:0 0 auto; margin:-4px 0 -6px; }
  #app.editing .crumb{ display:flex; }
  .crumb .canvas-back{ position:static; box-shadow:none; }
  .crumb-title{ font-size:13px; font-weight:600; color:var(--ink-2); }
  .main-col{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--pad); position:relative; }

  .bar{ background:var(--surface); border-radius:var(--pill); padding:8px 10px 8px 16px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-s); min-width:0; }
  .bar .glogo{ font-size:26px; flex-shrink:0; margin-right:2px; }
  .bar .search, .bar .user{ background:var(--sunken); }
  .bar .search svg{ color:var(--ink-2); }
  .bar .search input{ color:var(--ink); }
  .bar .search input::placeholder{ color:var(--ink-2); }
  .bar .user{ color:var(--ink); }
  .bar .user .avatar{ background:var(--ink); color:var(--surface); }
  .bar .tab{ background:transparent; color:var(--ink-2); }
  .bar .tab:hover{ background:var(--sunken); color:var(--ink); box-shadow:none; }
  .bar .tab.active{ background:var(--sunken); color:var(--ink); box-shadow:var(--shadow-s); }
  .search{ display:flex; align-items:center; gap:8px; background:var(--field); border-radius:var(--pill); padding:9px 15px; flex:1 1 auto; min-width:60px; max-width:520px; transition:box-shadow .18s ease; }
  .search svg{ width:16px; height:16px; color:var(--field-ink); flex-shrink:0; }
  .search input{ border:none; outline:none; background:transparent; font:inherit; font-size:14px; color:var(--ink); width:100%; min-width:0; }
  .search input::placeholder{ color:var(--field-ink); }
  .bar-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .user{ display:flex; align-items:center; gap:8px; background:var(--field); border-radius:var(--pill); padding:5px 13px 5px 5px; color:var(--ink); }
  .user .avatar{ width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--field); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .user .avatar svg{ width:16px; height:16px; }
  .user .name{ font-size:13.5px; font-weight:500; white-space:nowrap; }
  .tab{ border:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:500; color:var(--ink); background:var(--field); padding:9px 17px; border-radius:var(--pill); transition:background .18s, color .18s, box-shadow .18s; }
  .tab:hover{ box-shadow:0 2px 8px rgba(59,71,79,.14); }
  .tab.active{ background:var(--ink); color:var(--field); }

  .stage{ flex:1; min-height:0; display:flex; position:relative; }

  .home{ flex:1; display:flex; flex-direction:column; min-width:0; }
  #app.editing .home, #app.saved-view .home{ display:none; }
  .carousel-wrap{ flex:1; display:flex; align-items:center; justify-content:center; perspective:1400px; overflow:hidden; position:relative; }
  .track{ position:relative; width:212px; height:212px; transform-style:preserve-3d; }
  .card{ position:absolute; inset:0; margin:auto; width:212px; height:212px; background:var(--surface); border-radius:var(--radius);
    box-shadow:var(--shadow-m); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    cursor:pointer; overflow:hidden; transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease, box-shadow .3s ease; will-change:transform, opacity; }
  .card .thumb{ display:flex; align-items:center; justify-content:center; color:var(--ink-2); transition:color .25s ease; }
  .card .thumb svg{ width:52px; height:52px; }
  .card .body h2{ font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); transition:color .25s ease; }
  .card.is-active{ box-shadow:var(--shadow-l); }
  .card.is-active .thumb{ color:var(--g0); }
  .card.is-active .body h2{ color:var(--ink); }
  .nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
    background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s); display:flex; align-items:center; justify-content:center; z-index:40;
    transition:transform .2s ease, box-shadow .2s ease; }
  .nav:hover{ transform:translateY(-50%) scale(1.08); box-shadow:var(--shadow-m); }
  .nav svg{ width:15px; height:15px; }
  .nav.prev{ left:max(8px, calc(50% - 362px)); } .nav.next{ right:max(8px, calc(50% - 362px)); }
  .nav:disabled{ opacity:.25; cursor:default; }
  .dots{ display:flex; justify-content:center; gap:7px; padding:16px 0 4px; }
  .dot{ width:7px; height:7px; border-radius:50%; border:none; cursor:pointer; background:var(--line-2); transition:background .2s, transform .2s; padding:0; }
  .dot.active{ background:var(--g0); transform:scale(1.2); }
  @media (max-width:760px){ .nav.prev{ left:6px; } .nav.next{ right:6px; } .track,.card{ width:180px; height:180px; } }
  .home-footer{ display:flex; justify-content:flex-end; padding-top:6px; }
  .create-btn{ border:none; cursor:pointer; font:inherit; font-size:15px; font-weight:600; color:var(--field); background:var(--ink); padding:13px 30px; border-radius:var(--pill); display:flex; align-items:center; gap:9px; box-shadow:0 8px 22px rgba(59,71,79,.22); transition:transform .18s, box-shadow .18s; }
  .create-btn:hover{ transform:translateY(-1px); }
  .create-btn svg{ width:17px; height:17px; }

  .canvas-wrap{ flex:1; display:none; min-width:0; flex-direction:column; gap:12px; }
  #app.editing .canvas-wrap{ display:flex; }
  .canvas{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; }
  .canvas-back{ position:absolute; top:0; left:0; z-index:5; border:none; cursor:pointer; background:var(--field); color:var(--ink); padding:8px 14px; border-radius:var(--pill); font:inherit; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; box-shadow:0 2px 8px rgba(59,71,79,.12); }
  .canvas-back svg{ width:14px; height:14px; }

  /* ---- Drag & Drop: Kombinations-Zonen ---- */
  .dzwrap{ position:absolute; z-index:40; display:none; pointer-events:none; border-radius:10px; overflow:hidden; }
  .dzwrap::before{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.62); }
  body.dragging .dzwrap{ display:block; }
  .dz{ position:absolute; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:rgba(255,255,255,.94); box-shadow:inset 0 0 0 2px var(--line-2);
    color:var(--ink-2); font-size:12px; font-weight:600; text-align:center; padding:6px; line-height:1.15;
    transition:background .14s ease, box-shadow .14s ease, color .14s ease, transform .14s ease; }
  .dz svg{ width:32px; height:22px; opacity:.85; }
  .dz.hot{ background:rgba(74,103,128,.16); box-shadow:inset 0 0 0 2.5px var(--brand); color:var(--ink); transform:scale(1.015); }
  .dz.big{ z-index:1; } .dz.side{ z-index:2; }
  .dghost{ position:fixed; z-index:200; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:5px;
    background:var(--surface); border-radius:12px; padding:9px 11px; box-shadow:var(--shadow-l); font-size:11px; color:var(--ink);
    transform:translate(-50%,-50%); }
  .ptile{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px; border-radius:12px; background:var(--surface);
    box-shadow:inset 0 0 0 1px var(--line); cursor:grab; user-select:none; touch-action:none; width:calc(50% - 5px); box-sizing:border-box;
    transition:box-shadow .15s ease, transform .15s ease; }
  .ptile:hover{ box-shadow:var(--shadow-s); transform:translateY(-1px); }
  .ptile.armed{ box-shadow:inset 0 0 0 2px var(--brand); }
  .ptile span{ font-size:11px; color:var(--ink); text-align:center; line-height:1.1; }

  .slide{ position:relative; aspect-ratio:16/9; width:100%; max-height:100%; background:#fff; border-radius:10px; box-shadow:0 10px 34px rgba(59,71,79,.16); overflow:hidden; }
  /* generischer %-Renderer (Inhalt/Trenner/Kontakt) */
  .slide .el{ position:absolute; }
  .slide .el.text{ display:flex; flex-direction:column; overflow:hidden; }
  /* Titelfolie: 1920-Bühne */
  .stage1920{ position:absolute; top:0; left:0; width:1920px; height:1080px; transform-origin:top left; }
  .t-img{ position:absolute; inset:0; overflow:hidden; background:#d3dae0; }
  .t-img.interactive{ cursor:grab; }
  .t-img.interactive:active{ cursor:grabbing; }
  .t-photo{ position:absolute; top:0; left:0; user-select:none; -webkit-user-drag:none; }
  .t-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; color:#8a99a8; }
  .t-ph svg{ width:120px; height:120px; }
  .t-ph span{ font-size:30px; font-weight:600; }
  .t-ovl{ position:absolute; top:0; left:0; }
  .t-ovl text{ font-family:var(--font); }

  .gcanvas{ flex:1; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-m); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--field-ink); }
  .gcanvas h3{ font-size:16px; color:var(--ink); font-weight:600; } .gcanvas p{ font-size:13px; margin-top:4px; }
  #app.pres .gcanvas{ display:none; } #app:not(.pres) .canvas .slide{ display:none; } #app:not(.pres) .filmstrip{ display:none; }

  .filmstrip{ display:none; gap:10px; overflow-x:auto; padding:2px 2px 8px; align-items:center; flex:0 0 auto; }
  #app.pres.editing .filmstrip{ display:flex; }
  /* ---- KI: schwebender Button + Panel (nimmt keinen Layout-Platz) ---- */
  .aifab{ position:absolute; right:8px; bottom:8px; z-index:70; display:none; align-items:center; gap:9px;
    background:var(--surface); color:var(--ink); border:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600;
    padding:12px 20px 12px 16px; border-radius:var(--pill); box-shadow:var(--shadow-m);
    transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, opacity .18s ease; }
  #app.pres.editing .aifab{ display:flex; }
  .aifab:hover{ transform:translateY(-2px); box-shadow:var(--shadow-l); }
  .aifab:active{ transform:translateY(0); }
  #app.ai-open .aifab{ opacity:0; pointer-events:none; transform:scale(.9); }
  .aifab .glogo{ font-size:20px; }
  .aifab-label{ letter-spacing:.01em; }
  .canvas-ai .glogo{ font-size:17px; }

  .aibar{ position:absolute; right:8px; bottom:8px; z-index:71; width:min(440px, calc(100% - 16px));
    background:var(--surface); border-radius:20px; padding:14px; box-shadow:var(--shadow-l);
    display:none; flex-direction:column; gap:11px;
    transform:translateY(14px) scale(.97); opacity:0; transform-origin:100% 100%;
    transition:transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
  #app.pres.editing.ai-open .aibar{ display:flex; transform:none; opacity:1; }
  .aibar-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .aidemo{ display:inline-flex; align-items:center; margin-right:auto; font-size:10px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--g0); background:var(--sunken); padding:4px 9px; border-radius:var(--pill); }
  .aibar-spark{ font-size:21px; }
  .aibar-x{ border:none; background:transparent; color:var(--ink-2); width:26px; height:26px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
  .aibar-x:hover{ background:var(--sunken); color:var(--ink); } .aibar-x svg{ width:13px; height:13px; }
  .aimodes{ display:flex; gap:2px; background:var(--sunken); border-radius:11px; padding:3px; }
  .aimode{ flex:1 1 0; border:none; background:transparent; cursor:pointer; font:inherit; font-size:12px; font-weight:500;
    color:var(--ink-2); padding:7px 4px; border-radius:8px; white-space:nowrap;
    transition:background .16s ease, color .16s ease, box-shadow .16s ease; }
  .aimode:hover{ color:var(--ink); }
  .aimode.active{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-s); }
  .aitarget{ font-size:11.5px; color:var(--ink-2); line-height:1.35; margin:-3px 2px -2px; display:none; }
  .aitarget.on{ display:block; }
  .aitarget b{ color:var(--ink); font-weight:600; }
  /* auffälliger Einstieg direkt an der Folie */
  .canvas-ai{ position:absolute; top:0; right:0; z-index:5; border:none; cursor:pointer; background:var(--surface); color:var(--ink);
    padding:8px 15px 8px 12px; border-radius:var(--pill); font:inherit; font-size:13px; font-weight:600;
    display:none; align-items:center; gap:7px; box-shadow:var(--shadow-s); transition:transform .18s ease, box-shadow .18s ease; }
  #app.pres.editing .canvas-ai{ display:flex; }
  .canvas-ai:hover{ transform:translateY(-1px); box-shadow:var(--shadow-m); }
  .aibar-row{ display:flex; background:var(--sunken); border-radius:14px; padding:12px 14px; }
  .aibar-input{ resize:none; min-height:86px; line-height:1.45; font-family:inherit; }
  .aibar-input{ flex:1 1 auto; border:none; outline:none; font-size:14px; color:var(--ink); background:transparent; min-width:0; }
  .aibar-foot{ align-items:center; }
  .aibar-status{ text-align:left; }
  .aibar-input::placeholder{ color:var(--ink-2); }
  .aibar-send{ flex:0 0 auto; background:var(--ink); color:var(--surface); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:10px; cursor:pointer; border:none; transition:opacity .15s; }
  .aibar-send:hover{ opacity:.88; }
  .aibar-send:disabled{ opacity:.45; cursor:default; }
  .aibar-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .aibar-chip{ background:var(--sunken); color:var(--ink); font-size:12px; padding:6px 11px; border-radius:var(--pill); cursor:pointer; border:none; transition:background .15s; }
  .aibar-chip:hover{ background:var(--line); }
  .aibar-chip-ghost{ background:transparent; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); }
  .aibar-status{ font-size:11.5px; color:var(--ink-2); flex:1 1 auto; text-align:right; line-height:1.35; }
  .fthumb{ position:relative; flex:0 0 auto; width:134px; aspect-ratio:16/9; background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(59,71,79,.16); cursor:pointer; overflow:hidden; border:2px solid transparent; transition:border-color .18s, transform .18s; }
  .fthumb:hover{ transform:translateY(-2px); } .fthumb.active{ border-color:var(--ink); } .fthumb.drag-over{ border-color:#8a99a8; }
  .fthumb .fnum{ position:absolute; top:3px; left:6px; z-index:2; font-size:10px; font-weight:600; color:var(--field-ink); background:rgba(255,255,255,.7); border-radius:6px; padding:0 4px; }
  .fthumb .fdel{ position:absolute; top:2px; right:3px; z-index:2; width:17px; height:17px; border:none; border-radius:50%; background:rgba(255,255,255,.85); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
  .fthumb:hover .fdel{ opacity:1; } .fthumb .fdel svg{ width:10px; height:10px; }
  .fmini{ position:absolute; inset:0; overflow:hidden; }
  .add-slide{ flex:0 0 auto; width:56px; aspect-ratio:16/9; border-radius:8px; border:2px dashed #d3dae0; background:transparent; color:var(--field-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
  .add-slide:hover{ background:var(--field); color:var(--ink); } .add-slide svg{ width:22px; height:22px; }

  .editor{ flex:0 0 auto; width:0; overflow:hidden; transition:width .5s cubic-bezier(.22,.61,.36,1); }
  #app.editing .editor{ width:var(--editor-w); }
  .editor-inner{ width:var(--editor-w); height:100%; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-m); display:flex; flex-direction:column; padding:22px 20px; gap:18px; transform:translateX(28px); opacity:0; transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease; }
  #app.editing .editor-inner{ transform:none; opacity:1; }
  .editor-head{ display:flex; align-items:center; justify-content:space-between; }
  .editor-head h2{ font-size:16px; font-weight:700; color:var(--ink); }
  .editor-head .format-tag{ font-size:11px; color:var(--field-ink); }
  .editor-head .close{ border:none; cursor:pointer; background:var(--field); color:var(--ink); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .editor-head .close svg{ width:15px; height:15px; }
  .epanel{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:22px; padding-right:4px; margin-right:-4px; }
  #typeFields{ display:flex; flex-direction:column; gap:18px; }
  .typesel{ display:flex; flex-direction:column; gap:9px; }
  .typesel button{ border:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--ink); background:var(--field); padding:13px; border-radius:var(--pill); text-align:center; transition:background .18s, color .18s, box-shadow .18s; }
  .typesel button:hover{ box-shadow:0 2px 8px rgba(59,71,79,.12); }
  .typesel button.active{ background:var(--ink); color:var(--surface); }
  .tdiv{ height:1px; background:rgba(59,71,79,.1); margin:2px 0; }
  .fgroup{ display:flex; flex-direction:column; gap:9px; }
  .fgroup > label{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--field-ink); }
  .finput{ width:100%; border:none; background:var(--sunken); border-radius:11px; padding:12px 14px; font:inherit; font-size:13.5px; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(59,71,79,.06); outline:none; }
  .finput:focus{ box-shadow:inset 0 0 0 2px rgba(74,103,128,.55); }
  .brow{ display:flex; align-items:center; gap:8px; } .brow .finput{ flex:1; }
  .brow .brm{ border:none; background:var(--field); color:var(--ink); width:30px; height:30px; border-radius:9px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .brow .brm svg{ width:13px; height:13px; }
  .badd{ align-self:flex-start; border:none; background:var(--field); color:var(--ink); font:inherit; font-size:12.5px; font-weight:500; padding:8px 14px; border-radius:var(--pill); cursor:pointer; display:flex; align-items:center; gap:6px; } .badd svg{ width:13px; height:13px; }
  .bupload{ width:100%; border:none; background:var(--ink); color:var(--field); font:inherit; font-size:13.5px; font-weight:600; padding:11px; border-radius:var(--pill); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; } .bupload svg{ width:15px; height:15px; }
  .imgsearch{ display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:12px; padding:12px; box-shadow:inset 0 0 0 1px rgba(59,71,79,.06); }
  .imghint{ font-size:11px; color:var(--field-ink); line-height:1.4; }
  .imggrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-height:180px; overflow-y:auto; }
  .gimg{ position:relative; aspect-ratio:1; border-radius:8px; background-size:cover; background-position:center; cursor:pointer; border:2px solid transparent; }
  .gimg:hover{ border-color:var(--bar); } .gimg.sel{ border-color:var(--ink); }
  .gempty{ grid-column:1/-1; font-size:12px; color:var(--field-ink); text-align:center; padding:14px 6px; }
  .srow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
  .srow label{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--field-ink); }
  .srow span{ font-size:12px; font-weight:600; color:var(--ink); }
  .srow label{ flex:0 0 auto; }
  .bundo{ flex:0 0 auto; padding:5px 12px; border-radius:var(--pill); border:none; box-shadow:inset 0 0 0 1px var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12px; cursor:pointer; transition:background .15s; }
  .bundo:hover{ background:var(--sunken); }
  .fhint{ font-size:11.5px; color:var(--ink-2); line-height:1.35; margin:-4px 0 2px; }
  #fieldEditors{ display:flex; flex-direction:column; gap:18px; }
  input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--btn-small); outline:none; margin:4px 0 2px; cursor:pointer; }
  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ink); cursor:pointer; box-shadow:0 1px 4px rgba(59,71,79,.35); }
  input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:var(--ink); cursor:pointer; box-shadow:0 1px 4px rgba(59,71,79,.35); }

  .panel-generic .efield{ background:#fff; border-radius:12px; padding:11px 14px; font-size:13px; color:var(--field-ink); box-shadow:inset 0 0 0 1px rgba(59,71,79,.06); margin-bottom:12px; }
  .panel-generic .note{ font-size:12px; color:var(--field-ink); line-height:1.5; }
  #app.pres .panel-generic{ display:none; } #app:not(.pres) .panel-slides{ display:none; }

  .editor-foot{ display:flex; flex-direction:column; gap:10px; }
  .editor-foot .frow{ display:flex; gap:10px; }
  .editor-foot button{ border:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600; padding:12px; border-radius:var(--pill); transition:transform .15s, background .2s; }
  .editor-foot .frow button{ flex:1; }
  .editor-foot .back{ background:var(--field); color:var(--ink); }
  .editor-foot .save{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(59,71,79,.10); }
  .editor-foot .dl{ display:none; align-items:center; justify-content:center; gap:9px; background:var(--ink); color:var(--field); }
  #app.pres .editor-foot .dl{ display:flex; } .editor-foot .dl svg{ width:16px; height:16px; }
  .editor-foot button:active{ transform:translateY(1px); }

  .saved{ flex:1; display:none; align-items:center; justify-content:center; }
  #app.saved-view .saved{ display:flex; } #app.editing .saved{ display:none; }
  .saved-empty{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:360px; }
  .saved-empty .ring{ width:64px; height:64px; border-radius:50%; background:var(--field); display:flex; align-items:center; justify-content:center; } .saved-empty .ring svg{ width:28px; height:28px; color:var(--bar); }
  .saved-empty h2{ font-size:19px; font-weight:600; color:var(--ink); } .saved-empty p{ font-size:14px; line-height:1.5; color:var(--field-ink); }

  :focus-visible{ outline:3px solid rgba(59,71,79,.5); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
  @media (max-width: 1100px){ :root{ --editor-w:320px; --pad:14px; } }
  @media (max-width: 900px){ .user .name{ display:none; } .user{ padding:5px; } .tab{ padding:9px 14px; } }
  @media (max-width: 820px){ :root{ --editor-w:300px; } .editor-inner{ padding:18px 16px; gap:16px; } .epanel{ gap:18px; } }
  @media (max-width: 680px){ :root{ --pad:10px; --editor-w:270px; } .bar{ gap:8px; padding:7px 8px 7px 12px; } .bar .logo{ font-size:17px; } .search{ padding:8px 12px; } .typesel button{ padding:11px; font-size:13px; } .finput{ font-size:13px; } }
  /* ---- Schmal: Editor wandert unter die Folie, bleibt aber immer sichtbar ---- */
  @media (max-width: 860px){
    .work{ flex-direction:column; }
    .main-col{ flex:1 1 auto; min-height:0; }
    .editor{ width:100%; height:0; overflow:hidden; transition:height .42s cubic-bezier(.22,.61,.36,1); }
    #app.editing .editor{ width:100%; height:min(46vh, 430px); }
    .editor-inner{ width:100%; height:100%; transform:translateY(16px); }
    #app.editing .editor-inner{ transform:none; }
    .aifab{ right:8px; bottom:8px; }
    .aibar{ right:8px; left:8px; bottom:8px; width:auto; }
  }
  @media (max-width: 860px) and (orientation:landscape){
    #app.editing .editor{ height:min(54vh, 340px); }
  }
  @media (max-width: 560px){ #app.editing .editor{ height:min(52vh, 460px); } }
  /* Sehr flache Fenster: Editor darf nie ganz wegfallen */
  @media (max-height: 560px){
    #app.editing .editor{ min-height:200px; }
    .aifab{ padding:10px 16px 10px 13px; font-size:13px; }
  }

/* Versionsanzeige */
.gversion{ position:fixed; right:10px; bottom:6px; z-index:5; font-size:10.5px; color:var(--ink-2); opacity:.6; pointer-events:auto; user-select:all; font-variant-numeric:tabular-nums; }

/* Reiter Social Assets: Robify füllt die ganze Arbeitsfläche, Generad-Editor rechts entfällt */
#app.social .editor{ display:none !important; }
#app.social .canvas, #app.social .filmstrip, #app.social .aifab, #app.social .aibar{ display:none !important; }
.sstage{ display:none; flex:1; min-height:0; flex-direction:column; }
#app.social.editing .sstage.on{ display:flex; }
.sbar{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.sbar .sback-btn{ position:static; }
.sbar .stitle{ font-size:13px; font-weight:600; color:var(--ink-2); }
.sbody{ position:relative; flex:1; min-height:0; }
.sframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.sload{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; color:var(--ink-2); background:var(--surface); z-index:2; transition:opacity .35s, visibility .35s; }
.sload.done{ opacity:0; visibility:hidden; }

/* Panel-Fuß einheitlich: nur die Hauptaktion (Export/Download). „Übersicht“ steht oben in der Brotkrumen-Zeile,
   „Speichern“ kommt zurück, sobald es echtes Speichern gibt (keine toten Buttons). */
.editor-foot .frow{ display:none !important; }
.editor-foot:empty{ display:none; }