/* ============================================================
   Visueller Quiz-Editor — ruhige Autor:innenoberflaeche mit einer klaren
   Fragebuehne. Die Spielansicht bleibt in quiz-kahoot.css getrennt.
   ============================================================ */

.qz-editor{ display:block; max-width:none; }
body.qz-editor-open #app{ max-width:1480px; }

.qze{
  --qze-blue:#2356d8;
  --qze-purple:#5f35c9;
  --qze-ink:#16213d;
  --qze-muted:#58637b;
  --qze-ok:#126b50;
  --qze-warn:#744b00;
  --qze-border:color-mix(in srgb,var(--navy) 13%,transparent);
  max-width:1440px;
  margin:0 auto;
  color:var(--qze-ink);
}
.qze *{ box-sizing:border-box; }
.qze button,.qze input,.qze textarea,.qze select{ font:inherit; }
.qze button{ min-width:44px; min-height:44px; }
.qze input:not([type="checkbox"]):not([type="radio"]),.qze select{ min-height:44px; }
.qze summary{ min-height:44px; }
.qze input,.qze textarea,.qze select{
  width:100%; min-width:0; border:1.5px solid var(--qze-border); border-radius:12px;
  background:var(--panel); color:var(--ink); padding:.68rem .75rem; line-height:1.35;
}
.qze textarea{ resize:vertical; }
.qze input:focus-visible,.qze textarea:focus-visible,.qze select:focus-visible,
.qze button:focus-visible,.qze summary:focus-visible,.qze-media-preview:focus-visible{
  outline:3px solid color-mix(in srgb,var(--qze-blue) 72%,white); outline-offset:2px;
}
.qze button[disabled],.qze select[disabled]{ opacity:.5; cursor:not-allowed; }
.qze [aria-invalid="true"]{
  border-color:var(--bad); box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 20%,transparent);
}
.qze .is-validation-invalid.qze-answer-tile,
.qze .is-validation-invalid.qze-row,
.qze .is-validation-invalid.qze-pair{
  border-color:color-mix(in srgb,var(--bad) 68%,var(--qze-border));
}

.qze-commandbar{
  position:sticky; top:.35rem; z-index:30; display:flex; align-items:center; gap:1rem;
  justify-content:space-between; padding:.72rem .8rem; margin:.25rem 0 .7rem;
  border:1px solid var(--qze-border); border-radius:16px; background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 10px 34px rgba(21,31,57,.12); backdrop-filter:blur(14px);
}
.qze-commandbar__state{ display:flex; flex-direction:column; min-width:9rem; }
.qze-commandbar__state strong{ font-size:.95rem; color:var(--navy); }
.qze-save-state{ font-size:.75rem; color:var(--qze-muted); }
.qze-save-state.is-ok{ color:var(--qze-ok); }
.qze-save-state.is-error{ color:var(--bad); font-weight:700; }
.qze-save-state.is-pending::before{ content:"● "; animation:qze-pulse 1s ease-in-out infinite; }
.qze-commandbar__actions{ display:flex; align-items:center; justify-content:flex-end; gap:.45rem; flex-wrap:wrap; }
.qze-commandbar .btn{ min-height:44px; white-space:nowrap; }

.qze-validation{
  display:flex; align-items:flex-start; gap:.6rem; flex-wrap:wrap; padding:.62rem .85rem; margin-bottom:.75rem;
  border:1px solid var(--qze-border); border-radius:12px; font-size:.86rem; background:var(--panel);
}
.qze-validation.is-ok{ border-color:color-mix(in srgb,var(--ok) 45%,var(--qze-border)); background:color-mix(in srgb,var(--ok) 8%,var(--panel)); }
.qze-validation.is-ok strong{ color:var(--qze-ok); }
.qze-validation.is-warning{ border-color:color-mix(in srgb,var(--warn) 45%,var(--qze-border)); background:color-mix(in srgb,var(--warn) 8%,var(--panel)); }
.qze-validation.is-warning strong{ color:var(--qze-warn); }
.qze-validation.is-error{ border-color:color-mix(in srgb,var(--bad) 42%,var(--qze-border)); background:color-mix(in srgb,var(--bad) 7%,var(--panel)); }
.qze-validation.is-error strong{ color:var(--bad); }
.qze-validation ul{
  flex-basis:100%; max-height:min(40vh,22rem); overflow:auto; margin:.1rem 0 0;
  padding-left:1.25rem; color:var(--qze-muted);
}
.qze-error-link{
  width:100%; min-height:44px; padding:.42rem .2rem; border:0; border-radius:8px;
  background:transparent; color:var(--bad); text-align:left; text-decoration:underline;
  text-decoration-thickness:.08em; text-underline-offset:.15em; cursor:pointer;
}
.qze-error-link:hover{ background:color-mix(in srgb,var(--bad) 8%,transparent); }

.qz-draft-manager{
  max-width:1440px; min-width:0; margin:0 auto .75rem; padding:.85rem 1rem;
  border:1px solid color-mix(in srgb,var(--navy) 13%,transparent); border-radius:14px;
  background:var(--panel); box-shadow:0 6px 22px rgba(21,31,57,.06);
}
.qz-draft-manager__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}
.qz-draft-manager__head>*{ min-width:0; }
.qz-draft-manager__head h2{ margin:0; font-size:1rem; color:var(--navy); }
.qz-draft-manager__status{ color:var(--qze-muted,#58637b); font-size:.82rem; line-height:1.4; overflow-wrap:anywhere; }
.qz-draft-manager__status.is-ok{ color:var(--qze-ok,#126b50); }
.qz-draft-manager__status.is-pending{ color:var(--qze-blue,#2356d8); font-weight:700; }
.qz-draft-manager__status.is-error{ color:var(--bad); font-weight:700; }
.qz-draft-manager__actions{ display:flex; align-items:center; justify-content:flex-end; gap:.45rem; flex-wrap:wrap; }
.qz-draft-manager__actions .btn,.qz-draft-manager__actions button{ min-height:44px; min-width:44px; }
.qz-draft-manager__list{
  display:grid; gap:.5rem; min-width:0; margin:.7rem 0 0; padding:0; list-style:none;
}
.qz-draft-manager__item{
  display:flex; align-items:center; justify-content:space-between; gap:.65rem; flex-wrap:wrap;
  min-width:0; padding:.65rem .72rem; border:1px solid color-mix(in srgb,var(--navy) 10%,transparent);
  border-radius:11px; background:color-mix(in srgb,var(--soft) 55%,var(--panel));
}
.qz-draft-manager__item>*{ min-width:0; }
.qz-draft-manager__item>div:first-child{ display:flex; flex-direction:column; gap:.12rem; }
.qz-draft-manager__item .btn,.qz-draft-manager__item button{ min-height:44px; min-width:44px; }
.qz-draft-manager__meta{ color:var(--qze-muted,#58637b); font-size:.76rem; line-height:1.4; overflow-wrap:anywhere; }
.qz-draft-manager__archive>summary{ display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--navy); font-weight:800; }
.qz-draft-manager__conflict{
  display:grid; gap:.35rem; min-width:0; margin-top:.7rem; padding:.7rem;
  border:1px solid color-mix(in srgb,var(--warn) 42%,var(--line)); border-radius:11px;
  background:color-mix(in srgb,var(--warn) 8%,var(--panel));
}
.qz-draft-manager__conflict span{ color:var(--qze-muted,#58637b); font-size:.82rem; overflow-wrap:anywhere; }
.qz-editor-recovery{
  max-width:1440px; margin:0 auto .75rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line)); border-radius:14px;
  background:color-mix(in srgb,var(--warn) 9%,var(--panel));
}
.qz-editor-recovery>div{ display:flex; flex-direction:column; gap:.12rem; }
.qz-editor-recovery>.qz-editor-recovery__actions{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
.qz-editor-recovery strong{ color:var(--navy); }
.qz-editor-recovery span{ color:var(--qze-muted,#58637b); font-size:.84rem; }
.qz-editor-recovery .btn,.qz-editor-recovery button{ min-width:44px; min-height:44px; }

.qze-layout{ display:grid; grid-template-columns:minmax(210px,250px) minmax(0,1fr); gap:1rem; align-items:start; }
.qze-sidebar{
  position:sticky; top:5.25rem; min-width:0; max-height:calc(100vh - 6rem); overflow:auto;
  border:1px solid var(--qze-border); border-radius:16px; background:var(--panel); box-shadow:0 8px 28px rgba(21,31,57,.08);
}
.qze-sidebar__head{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem .55rem; }
.qze-sidebar__head h2{ margin:0; font-size:1rem; color:var(--navy); }
.qze-count{ display:grid; place-items:center; min-width:27px; height:27px; padding:0 .35rem; border-radius:999px; background:var(--soft); font-size:.78rem; font-weight:800; }
.qze-question-list{ list-style:none; margin:0; padding:.25rem .55rem .55rem; display:flex; flex-direction:column; gap:.45rem; }
.qze-question-item{ min-width:0; border:1px solid transparent; border-radius:13px; background:color-mix(in srgb,var(--soft) 60%,transparent); overflow:hidden; }
.qze-question-item.is-selected{ border-color:color-mix(in srgb,var(--qze-blue) 46%,var(--qze-border)); background:color-mix(in srgb,var(--qze-blue) 7%,var(--panel)); box-shadow:inset 3px 0 var(--qze-blue); }
.qze-question-card{ display:flex; align-items:flex-start; gap:.62rem; width:100%; min-width:0; border:0; background:transparent; color:inherit; text-align:left; padding:.65rem; cursor:pointer; }
.qze-question-card__number{ display:grid; place-items:center; flex:0 0 27px; width:27px; height:27px; border-radius:8px; background:var(--panel); border:1px solid var(--qze-border); font-size:.74rem; font-weight:900; }
.qze-question-card__body{ display:flex; flex-direction:column; min-width:0; gap:.12rem; }
.qze-question-card__body strong{ font-size:.79rem; color:var(--navy); }
.qze-question-card__body small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--qze-muted); font-size:.73rem; }
.qze-question-tools{ display:grid; grid-template-columns:repeat(4,1fr); gap:.22rem; padding:0 .45rem .45rem; }
.qze-question-tools .btn{ min-height:44px; padding:.15rem; border-radius:8px; }
.qze-add{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem; padding:.6rem; border-top:1px solid var(--qze-border); }
.qze-add select,.qze-add .btn{ min-height:44px; font-size:.82rem; }
.qze-add .btn{ padding:.45rem .65rem; }

.qze-workspace{ min-width:0; display:flex; flex-direction:column; gap:.8rem; }
.qze-quiz-settings,.qze-question{
  border:1px solid var(--qze-border); border-radius:18px; background:var(--panel); box-shadow:0 10px 34px rgba(21,31,57,.08);
}
.qze-quiz-settings{ overflow:hidden; }
.qze-quiz-settings>summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; padding:.85rem 1rem;
  font-weight:800; color:var(--navy); list-style-position:inside;
}
.qze-quiz-settings>summary small{ margin-left:auto; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--qze-muted); font-weight:600; }
.qze-settings-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; padding:.2rem 1rem 1rem; border-top:1px solid var(--qze-border); }
.qze-settings-grid>.is-wide{ grid-column:span 2; }

.qze-question{ padding:clamp(.9rem,2vw,1.35rem); overflow:hidden; }
.qze-question__heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.qze-question__heading h2{ margin:.08rem 0 0; color:var(--navy); font-size:clamp(1.15rem,2vw,1.5rem); }
.qze-eyebrow{ color:var(--qze-blue); font-size:.73rem; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.qze-type-hint{ display:inline-flex; align-items:center; min-height:30px; padding:.25rem .62rem; border-radius:999px; background:var(--soft); color:var(--qze-muted); font-size:.76rem; font-weight:700; }
.qze-question-toolbar{ display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(2,minmax(145px,1fr)); gap:.65rem; padding:.72rem; margin:0 0 .9rem; border-radius:14px; background:var(--soft); }
.qze-field{ display:flex; flex-direction:column; gap:.28rem; min-width:0; color:var(--ink); }
.qze-field__label{ font-size:.78rem; font-weight:800; color:var(--navy); }
.qze-field small{ color:var(--qze-muted); font-size:.72rem; line-height:1.35; }
.qze-prompt-field{ margin-bottom:.85rem; }
.qze-prompt{ min-height:90px; padding:1rem; font-size:clamp(1.12rem,2.2vw,1.45rem); font-weight:750; text-align:center; border-width:2px; }
.qze-prompt::placeholder{ color:color-mix(in srgb,var(--qze-muted) 70%,transparent); }

.qze-media,.qze-answers{ margin:.85rem 0; padding:.85rem; border:1px solid var(--qze-border); border-radius:15px; background:color-mix(in srgb,var(--soft) 45%,var(--panel)); }
.qze-section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.72rem; }
.qze-section-head h3{ margin:0; color:var(--navy); font-size:.98rem; }
.qze-section-head p{ margin:.1rem 0 0; color:var(--qze-muted); font-size:.77rem; }
.qze-required{ display:inline-flex; padding:.2rem .52rem; border-radius:999px; background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--qze-warn); font-size:.7rem; font-weight:900; text-transform:uppercase; }

.qze-media__body{ display:grid; grid-template-columns:minmax(240px,1.15fr) minmax(230px,.85fr); gap:.8rem; }
.qze-media-preview{
  position:relative; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  border:2px dashed color-mix(in srgb,var(--qze-blue) 35%,var(--qze-border)); border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--qze-blue) 7%,var(--panel)),color-mix(in srgb,var(--qze-purple) 8%,var(--panel)));
  color:var(--qze-muted); text-align:center; padding:1rem;
}
.qze-media-preview.is-dragging{ border-color:var(--qze-blue); background:color-mix(in srgb,var(--qze-blue) 14%,var(--panel)); }
.qze-media-preview[aria-disabled="true"]{ opacity:.72; cursor:progress; }
.qze-media-preview.has-image{ border-style:solid; padding:0; background:#101526; }
.qze-media-preview img{ display:block; width:100%; height:100%; min-height:190px; max-height:320px; object-fit:contain; }
.qze-media-preview__icon{ font-size:2.4rem; color:var(--qze-blue); }
.qze-media-preview small{ max-width:34ch; }
.qze-media-remove{ position:absolute; right:.55rem; bottom:.55rem; background:rgba(255,255,255,.94)!important; color:#17213b!important; }
.qze-media-controls{ display:flex; flex-direction:column; gap:.65rem; min-width:0; }
.qze-media-controls>.btn{ align-self:flex-start; }
.qze-upload-status{ min-height:1.1rem; color:var(--qze-muted); font-size:.75rem; }
.qze-upload-status.is-pending{ color:var(--qze-blue); font-weight:700; }
.qze-upload-status.is-ok{ color:var(--qze-ok); font-weight:700; }
.qze-upload-status.is-error{ color:var(--bad); font-weight:700; }

.qze-answer-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.qze-answer-tile{
  --tile:#c93648; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"sym input" "correct tools";
  align-items:center; gap:.45rem .65rem; min-width:0; min-height:104px; padding:.68rem; border-radius:14px;
  border:2px solid color-mix(in srgb,var(--tile) 80%,#000); border-left-width:7px; background:color-mix(in srgb,var(--tile) 10%,var(--panel));
}
.qze-answer-tile.t0{ --tile:#c93648; }.qze-answer-tile.t1{ --tile:#2765c5; }
.qze-answer-tile.t2{ --tile:#b68300; }.qze-answer-tile.t3{ --tile:#238548; }
.qze-answer-tile.t4{ --tile:#7246b8; }.qze-answer-tile.t5{ --tile:#078477; }
.qze-answer-tile.t6{ --tile:#9b6414; }.qze-answer-tile.t7{ --tile:#554c40; }
.qze-answer-symbol{ grid-area:sym; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--tile); color:white; font-weight:900; }
.qze-answer-tile textarea{ grid-area:input; min-height:62px; background:color-mix(in srgb,var(--panel) 92%,transparent); }
.qze-answer-tile>.btn{ grid-area:tools; justify-self:end; min-width:44px; min-height:44px; padding:.2rem; }
.qze-correct{ grid-area:correct; display:inline-flex; align-items:center; gap:.4rem; width:max-content; min-height:44px; padding:.2rem .6rem; border-radius:999px; background:var(--panel); color:var(--qze-muted); font-size:.75rem; font-weight:800; cursor:pointer; }
.qze-correct input{ width:1.15rem; height:1.15rem; padding:0; accent-color:var(--ok); }
.qze-correct:has(input:checked){ color:var(--qze-ok); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--qze-ok) 65%,transparent); }
.qze-answer-grid--binary .qze-binary{ grid-template-columns:auto 1fr auto; grid-template-areas:"sym input correct"; cursor:pointer; min-height:82px; }
.qze-binary strong{ grid-area:input; font-size:1.05rem; }
.qze-binary input{ grid-area:correct; width:1.3rem; height:1.3rem; accent-color:var(--ok); }
.qze-correct__text{ grid-column:2/-1; font-size:.72rem; color:var(--qze-muted); }

.qze-empty-answer{ display:grid; place-items:center; min-height:104px; padding:1rem; border:1.5px dashed var(--qze-border); border-radius:12px; color:var(--qze-muted); text-align:center; }
.qze-row-list,.qze-pair-list{ display:flex; flex-direction:column; gap:.48rem; margin-bottom:.6rem; }
.qze-row{ display:grid; grid-template-columns:auto minmax(0,1fr) 44px; gap:.4rem; align-items:center; }
.qze-row--order{ grid-template-columns:auto minmax(0,1fr) repeat(3,44px); }
.qze-row__number{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--soft); color:var(--qze-muted); font-size:.75rem; font-weight:900; }
.qze-row>.btn,.qze-pair>.btn{ min-width:44px; min-height:44px; padding:.2rem; }
.qze-pair{ display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) 44px; gap:.45rem; align-items:center; }
.qze-pair__arrow{ color:var(--qze-purple); font-weight:900; }
.qze-number-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.qze-explain-field{ margin-top:1rem; }
.qze-advanced{ margin-top:.8rem; border-top:1px solid var(--qze-border); padding-top:.65rem; }
.qze-advanced>summary{ width:max-content; max-width:100%; cursor:pointer; color:var(--qze-blue); font-size:.82rem; font-weight:800; }
.qze-advanced__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; padding-top:.7rem; }

@media (max-width:1080px){
  .qze-settings-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qze-media__body{ grid-template-columns:1fr; }
  .qze-number-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:820px){
  .qze-commandbar{ top:max(.25rem,env(safe-area-inset-top)); align-items:flex-start; }
  .qze-commandbar__actions{ flex:1; }
  .qze-layout{ grid-template-columns:minmax(0,1fr); }
  .qze-sidebar{ position:relative; top:auto; max-height:none; overflow:hidden; }
  .qze-question-list{
    flex-direction:row; overflow-x:auto; overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity; scroll-behavior:auto; padding-bottom:.75rem;
  }
  .qze-question-item{ flex:0 0 min(230px,75vw); scroll-snap-align:start; }
  .qze-add{ grid-template-columns:minmax(180px,1fr) auto; }
}

@media (max-width:620px){
  .qz-editor-recovery{ flex-direction:column; align-items:stretch; }
  .qz-draft-manager{ padding:.72rem; }
  .qz-draft-manager__head,.qz-draft-manager__item{ flex-direction:column; align-items:stretch; }
  .qz-draft-manager__actions{ width:100%; justify-content:flex-start; }
  .qz-draft-manager__actions .btn,.qz-draft-manager__actions button{ flex:1 1 9rem; }
  .qze-commandbar{ flex-direction:column; gap:.42rem; padding:.25rem .6rem; }
  .qze-commandbar__state{ width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:.7rem; }
  .qze-commandbar__actions{
    display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:.38rem; width:100%; max-width:100%;
    overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding:.1rem 0 .2rem;
  }
  .qze-commandbar__actions .btn{ flex:0 0 auto; width:auto; scroll-snap-align:start; }
  .qze-validation{ flex-direction:column; gap:.2rem; }
  .qze-settings-grid,.qze-settings-grid>.is-wide{ grid-template-columns:1fr; grid-column:auto; }
  .qze-question__heading{ flex-direction:column; gap:.35rem; }
  .qze-question-toolbar{ grid-template-columns:1fr 1fr; }
  .qze-question-toolbar>.qze-field:first-child{ grid-column:span 2; }
  .qze-answer-grid{ grid-template-columns:1fr; }
  .qze-row{ grid-template-columns:30px minmax(0,1fr) 44px; }
  .qze-row--order{ grid-template-columns:30px repeat(3,minmax(44px,1fr)); }
  .qze-row--order .qze-row__number{ grid-column:1; grid-row:1; }
  .qze-row--order input{ grid-column:2/5; grid-row:1; }
  .qze-row--order [data-qze-order="up"]{ grid-column:2; grid-row:2; }
  .qze-row--order [data-qze-order="down"]{ grid-column:3; grid-row:2; }
  .qze-row--order>.btn:last-child{ grid-column:4; grid-row:2; }
  .qze-pair{ grid-template-columns:30px minmax(0,1fr) 44px; }
  .qze-pair input:first-of-type{ grid-column:2; }
  .qze-pair__arrow{ grid-column:1; grid-row:2; text-align:center; transform:rotate(90deg); }
  .qze-pair input:last-of-type{ grid-column:2; grid-row:2; }
  .qze-pair>.btn{ grid-column:3; grid-row:1/3; }
  .qze-number-grid,.qze-advanced__grid{ grid-template-columns:1fr; }
}

@media (max-width:380px){
  .qze-question-toolbar{ grid-template-columns:1fr; }
  .qze-question-toolbar>.qze-field:first-child{ grid-column:auto; }
  .qze-question{ padding:.72rem; }
  .qze-media,.qze-answers{ padding:.68rem; }
}

@media (prefers-reduced-motion:reduce){
  .qze-save-state.is-pending::before{ animation:none; }
}

@keyframes qze-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }