*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--awt-page);color:var(--awt-white);font:400 14px/1.55 var(--awt-font-body);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--awt-font-mono);font-weight:500}
em{font-style:normal;color:var(--awt-text-muted);font-size:12px}
button,input,select,textarea{font:inherit;color:inherit}

/* Kopfzeile */
.topbar{display:flex;align-items:center;gap:20px;padding:12px 20px;border-bottom:1px solid var(--awt-line);background:var(--awt-page);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.topbar__logo{width:150px;height:auto;display:block}
.topbar__app{font:600 20px/1 var(--awt-font-head);letter-spacing:.01em;color:var(--awt-text-soft);padding-left:16px;border-left:1px solid var(--awt-line-strong)}
.tabs{display:flex;gap:4px;margin-left:12px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;cursor:pointer;color:var(--awt-text-muted);font-weight:500}
.tab .mono{font-size:11px;margin-left:6px;color:inherit;opacity:.8}
.tab:hover{color:var(--awt-white)}
.tab.is-active{color:var(--awt-gold-400);border-bottom-color:var(--awt-gold-400)} /* Gold = aktive Navigation */
.topbar__actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Bedienelemente */
.btn{border-radius:6px;padding:8px 14px;cursor:pointer;font-weight:500;border:1px solid var(--awt-line-strong);background:var(--awt-card)}
.btn:hover{border-color:var(--awt-text-muted)}
.btn--primary{background:var(--awt-white);color:var(--awt-page);border-color:var(--awt-white)}
.btn--primary:hover{background:var(--awt-text-soft)}
.btn:disabled{opacity:.4;cursor:not-allowed}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{width:100%;background:var(--awt-page);border:1px solid var(--awt-line-strong);border-radius:6px;padding:7px 10px;outline:none}
textarea{resize:vertical;min-height:58px}
input:focus,select,textarea:focus{border-color:var(--awt-text-muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--awt-info);outline-offset:1px}
#preset{width:auto;min-width:180px}
input[type=time]{color-scheme:dark}input[type=date]{color-scheme:dark}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--awt-white)}

/* Aufteilung */
.layout{display:grid;grid-template-columns:420px 1fr;min-height:calc(100vh - 66px)}
.panel{border-right:1px solid var(--awt-line);padding:16px;overflow:auto;max-height:calc(100vh - 66px);position:sticky;top:66px}
.stage{display:flex;flex-direction:column;padding:16px 24px;min-width:0}
.stage__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.stage__canvas{flex:1;display:flex;align-items:flex-start;justify-content:center;min-height:0}
#canvas{max-width:100%;max-height:calc(100vh - 140px);height:auto;width:auto;background:var(--awt-card);box-shadow:0 0 0 1px var(--awt-line);cursor:grab;touch-action:none}
#canvas.is-dragging{cursor:grabbing}

/* Karten */
.card{background:var(--awt-card);border-radius:10px;padding:14px 14px 16px;margin-bottom:12px}
.label{font:500 10px/1.2 var(--awt-font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--awt-text-muted);margin:0 0 12px}
.label--sub{margin-top:18px}
.field{display:block;margin-bottom:10px}
.field>span{display:block;font-size:12px;color:var(--awt-text-soft);margin-bottom:4px}
.field--inline{display:flex;align-items:center;gap:10px;margin:0}
.field--inline>span{margin:0;white-space:nowrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb{margin-bottom:8px}
.hint{font-size:12px;color:var(--awt-text-muted);margin:6px 0 10px}
.footnote{font-size:12px;color:var(--awt-text-muted);padding:0 4px 24px}
.timebox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.row2>*{min-width:0}

.seg{border:0;padding:0;margin:4px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.seg legend{font-size:12px;color:var(--awt-text-soft);margin-bottom:6px;padding:0}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;padding:6px 12px;border:1px solid var(--awt-line-strong);border-radius:6px;cursor:pointer;color:var(--awt-text-soft)}
.seg input:checked+span{background:var(--awt-white);color:var(--awt-page);border-color:var(--awt-white)}
.seg input:focus-visible+span{outline:2px solid var(--awt-info)}

.check{display:flex;gap:10px;align-items:flex-start;margin:8px 0;cursor:pointer;font-size:13px;color:var(--awt-text-soft)}
.check input{margin-top:3px;flex:none}
.check--small{margin:0;font-size:12px}

.drop{display:block;position:relative;border:1px dashed var(--awt-line-strong);border-radius:8px;padding:16px;text-align:center;color:var(--awt-text-soft);cursor:pointer;margin-bottom:12px;font-size:13px}
.drop:hover,.drop.is-over{border-color:var(--awt-text-muted)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop--small{padding:10px}

.sliders{display:grid;gap:4px}
.slider{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:8px;font-size:12px;color:var(--awt-text-soft)}

.kv{display:grid;grid-template-columns:130px 1fr;gap:6px}
.kv input:nth-child(odd){font-family:var(--awt-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}

/* Prüfung */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:13px;line-height:1.4}
.checks li::before{content:"";width:10px;height:10px;border-radius:50%;margin-top:5px}
.checks .ok{color:var(--awt-text-soft)}.checks .ok::before{background:var(--awt-success)}
.checks .warn::before{background:var(--awt-warning)}
.checks .err::before{background:var(--awt-error)}
.checks .info{color:var(--awt-text-soft)}.checks .info::before{background:var(--awt-info)}
.export{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:16px;flex-wrap:wrap}
.export select{width:auto}
.manual-ai{border-left:2px solid var(--awt-line-strong);padding-left:10px;margin-top:8px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--awt-white);color:var(--awt-page);padding:10px 16px;border-radius:8px;font-weight:500;opacity:0;pointer-events:none;transition:.2s}
.toast.is-on{opacity:1;transform:translateX(-50%)}

body.is-banner .post-only{display:none}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .panel{position:static;max-height:none;border-right:0;order:2}
  .stage{order:1;padding:12px 16px}
  #canvas{max-height:none}
  .topbar{padding:10px 16px}
  .tabs{margin-left:0}
}

/* ---- Bibliothek ------------------------------------------------------------------------- */
.btn--light{background:var(--awt-white);color:var(--awt-page);border-color:var(--awt-white)}
.btn--light:hover{background:var(--awt-text-soft);border-color:var(--awt-text-soft)}
.btn--text{background:none;border-color:transparent;color:var(--awt-text-soft);padding:6px 8px}
.btn--text:hover{color:var(--awt-white);border-color:transparent;text-decoration:underline}
.btn--danger:hover{color:var(--awt-error)}
.btn--icon{width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:16px}
.docstate{font-size:12px;color:var(--awt-text-muted);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docstate strong{color:var(--awt-text-soft);font-weight:500}
.docstate.is-dirty::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--awt-warning);margin-right:6px;vertical-align:1px}
body.has-modal{overflow:hidden}

.lib{position:fixed;inset:0;background:rgba(10,10,10,.72);z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px}
.lib[hidden]{display:none}
.lib__box{background:var(--awt-page);border:1px solid var(--awt-line-strong);border-radius:12px;width:min(1240px,100%);max-height:92vh;display:flex;flex-direction:column}
.lib__head{display:flex;gap:10px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--awt-line);flex-wrap:wrap}
.lib__title{font:600 28px/1 var(--awt-font-head);margin:0 8px 0 0}
#libSearch{flex:1 1 220px;width:auto}
#libSort{width:auto}
.seg--small{margin:0}.seg--small span{padding:5px 10px;font-size:13px}
.lib__body{padding:18px;overflow:auto;flex:1;min-height:240px}
.lib__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--awt-line);font-size:12px;color:var(--awt-text-muted);flex-wrap:wrap}
.lib__foot-actions{display:flex;gap:4px;flex-wrap:wrap}
.lib__msg{background:var(--awt-card);border-left:3px solid var(--awt-warning);padding:12px 14px;border-radius:6px;margin-bottom:16px}
.lib__msg p{margin:0 0 6px}
.lib__empty{color:var(--awt-text-soft);text-align:center;padding:48px 16px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.fcard{background:var(--awt-card);border:1px solid var(--awt-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.fcard.is-current{border-color:var(--awt-text-muted)}
.fcard__open{all:unset;cursor:pointer;display:block;flex:1}
.fcard__open:focus-visible{outline:2px solid var(--awt-info);outline-offset:-2px}
.fcard__thumb{background:var(--awt-page);aspect-ratio:4/3;display:grid;place-items:center;border-bottom:1px solid var(--awt-line)}
.fcard__thumb--banner{padding:0 6px}
.fcard__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.fcard__open:hover .fcard__thumb img{opacity:.9}
.fcard__body{padding:12px 14px 6px}
.fcard__title{font:600 20px/1.15 var(--awt-font-head);margin:0 0 2px}
.fcard__sub{font-size:12px;color:var(--awt-text-muted);margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard__meta{font-size:12px;color:var(--awt-text-muted);margin:8px 0 0}
.fcard__acts{display:flex;justify-content:flex-end;gap:2px;padding:0 6px 6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;line-height:1;padding:5px 7px;border-radius:4px;background:var(--awt-line);color:var(--awt-text-soft)}
.chip.mono{font-family:var(--awt-font-mono);font-weight:500}
.chip--past{color:var(--awt-text-muted)}
.chip--ok{background:rgba(63,185,132,.16);color:var(--awt-success)}
.chip--draft{background:transparent;box-shadow:inset 0 0 0 1px var(--awt-line-strong);color:var(--awt-text-muted)}
.chip--open{background:var(--awt-white);color:var(--awt-page)}

.login{max-width:380px;margin:24px auto;background:var(--awt-card);padding:20px;border-radius:10px}
.login[hidden]{display:none}
.login__title{font:600 22px/1.1 var(--awt-font-head);margin:0 0 6px}
.login__err{color:var(--awt-error);font-size:13px;min-height:1em;margin:0 0 10px}

.lib--small{align-items:center}
.lib--small .lib__box{width:min(520px,100%);padding:20px}
.lib--small p{color:var(--awt-text-soft)}
.dialog__actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}

@media (max-width:900px){
  .docstate{order:3;max-width:100%;flex-basis:100%}
  .lib{padding:0}
  .lib__box{max-height:100vh;height:100%;border-radius:0}
}

/* ---- Formate ------------------------------------------------------------------------------- */
[hidden]{display:none !important}
.formats{display:flex;gap:6px;flex-wrap:wrap}
.fchip{background:none;border:1px solid var(--awt-line-strong);border-radius:6px;padding:6px 10px;cursor:pointer;color:var(--awt-text-soft);font-size:13px;display:flex;gap:6px;align-items:baseline}
.fchip .mono{font-size:10px;color:var(--awt-text-muted)}
.fchip:hover{border-color:var(--awt-text-muted)}
.fchip.is-active{background:var(--awt-white);color:var(--awt-page);border-color:var(--awt-white)}
.fchip.is-active .mono{color:var(--awt-page)}
.stage__info{margin:0 0 10px}
.kv3{display:grid;grid-template-columns:52px minmax(0,1fr) 104px;gap:6px}
.kv3 input:nth-child(3n+1){font-family:var(--awt-font-mono);font-size:12px;text-transform:uppercase}
.obs-url{margin-top:10px;font-size:12px}
.label em{text-transform:none;letter-spacing:0;font-family:var(--awt-font-body)}
#canvas.is-transparent{background-color:#2B2B2B}

.topbar a.btn{color:var(--awt-white)}