/* Ergänzungen aus App/css/app.css: echte Büro-Karten und Formulare, gekapselt. */
.app-ui.office-demo .haupt-nav{overflow-x:auto;scrollbar-width:thin}
.app-ui.office-demo .haupt-nav button{cursor:pointer}
.app-ui.office-demo .office-demo-body{min-height:320px;max-height:620px;overflow:auto;overscroll-behavior:contain}
.app-ui.office-demo .office-tools{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}
.app-ui.office-demo .office-tools label{max-width:230px}
.app-ui.office-demo .office-search{flex:1;min-width:220px}
.app-ui.office-demo :is(.office-form,.office-dialog){display:flex;flex-direction:column;gap:.8rem}
.app-ui.office-demo .office-dialog{margin-top:1rem}
.app-ui.office-demo .office-form{max-width:560px;margin:0 auto;width:100%}
.app-ui.office-demo .form-reihe{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end}
.app-ui.office-demo .form-reihe label{flex:1;min-width:160px}
.app-ui.office-demo .seg-schalter button{border:0;background:transparent;min-height:44px;padding:.45rem .8rem;font-weight:600;border-radius:var(--radius-klein);cursor:pointer}
.app-ui.office-demo .seg-schalter button.aktiv{background:var(--tinte);color:var(--karte)}
.app-ui.office-demo .office-more{display:flex;gap:.7rem;flex-wrap:wrap}
.app-ui.office-demo .office-more button{justify-content:flex-start;min-width:220px}
.app-ui.office-demo .office-clock{max-width:560px;margin:0 auto}
.app-ui.office-demo .office-clock label{display:block;text-align:left;margin-top:.8rem}
.app-ui.office-demo .office-feedback{margin-top:1rem;padding:.7rem;border:1px solid var(--linie);border-radius:var(--radius)}
.app-ui.office-demo .office-error{color:var(--gefahr-text)}
.app-ui.office-demo .office-calendar{overflow:auto;margin:1rem 0;border:1px solid var(--linie);border-radius:var(--radius)}
.app-ui.office-demo .office-calendar-row{display:grid;grid-template-columns:130px repeat(var(--office-days,31),minmax(19px,1fr));min-width:780px;border-bottom:1px solid var(--linie)}
.app-ui.office-demo .office-calendar-row>*{font-size:var(--schrift-xs);text-align:center;min-height:34px;padding:.5rem .1rem;border-right:1px solid var(--linie)}
.app-ui.office-demo .office-calendar-row strong{text-align:left;padding-left:.5rem}
.app-ui.office-demo .office-calendar-compact .office-calendar-row>*{min-height:24px;padding-block:.25rem}
.app-ui.office-demo .office-absence{background:var(--akzent);color:var(--weiss)}
.app-ui.office-demo .office-example-photo{display:block;width:100%;max-width:400px;border:1px solid var(--linie);border-radius:var(--radius)}
.app-ui.office-demo details.karte{margin-top:1rem}
.app-ui.office-demo summary{cursor:pointer;min-height:44px;padding:.3rem}
.app-ui.office-demo .ueb-tabelle td>.klein-knopf{border:0;background:transparent;box-shadow:none;padding:.3rem .5rem}
@media print{.app-ui.office-demo .office-demo-body{display:none!important}.app-ui.office-demo .office-legacy{display:block!important}}