/* Design angelehnt an www.concept-berlin.de: Rot #e30613, Schwarz, helle Grautöne, Open Sans */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--bg:#f9f9fb;--card:#fff;--ink:#000;--mute:#5f6470;--line:#d5d7de;--soft:#f2f3f5;--pri:#e30613;--pri-dark:#b8040f;--pri-ink:#fff;--danger:#b8040f;--ok:#008e85;--info:#1381a0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Open Sans",Arial,Helvetica,sans-serif}
.topbar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;background:var(--pri);color:#fff;padding:.35rem 1.2rem;font-size:.82rem;font-weight:600}
.topbar a,.topbar button.link{color:#fff;text-decoration:none}
.topbar .user{display:flex;gap:.3rem 1rem;align-items:center;flex-wrap:wrap}
.topbar button.link:hover,.topbar a:hover{text-decoration:underline}
header{display:flex;gap:2rem;align-items:center;padding:.7rem 1.2rem;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.06);flex-wrap:wrap}
header .logo img{display:block;height:54px;width:auto}
header nav{display:flex;gap:1.8rem;flex:1;flex-wrap:wrap;justify-content:flex-end}
header nav a{color:var(--ink);text-decoration:none;text-transform:uppercase;font-weight:700;font-size:.85rem;letter-spacing:.03em;padding:.4rem 0;border-bottom:3px solid transparent}
header nav a:hover{color:var(--pri)}
header nav a.active{border-color:var(--pri)}
/* Untermenü „Administration“: öffnet bei Hover und Tastaturfokus */
.nav-group{position:relative;display:flex;align-items:center}
.nav-group[hidden],.nav-sub[hidden]{display:none}
.nav-parent::after{content:"▾";margin-left:.3rem;font-size:.7rem}
.nav-sub{display:none;position:absolute;top:100%;right:0;min-width:11rem;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.12);padding:.3rem;z-index:40}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{display:flex}
.nav-sub[hidden]{display:none!important}
header nav .nav-sub a{padding:.55rem .9rem;border-bottom:0;border-left:3px solid transparent;white-space:nowrap}
header nav .nav-sub a:hover{background:var(--soft)}
header nav .nav-sub a.active{border-left-color:var(--pri)}
main{max-width:1200px;margin:0 auto;padding:1.4rem 1.2rem}
h1{font-size:1.9rem;font-weight:600;margin:.2rem 0 1rem}h1 small{font-size:1rem;font-weight:400}
h2{font-size:1.15rem;font-weight:600;margin:1.4rem 0 .6rem}
a{color:var(--pri)}
.card{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1.1rem;margin-bottom:1rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.row.end{justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem 1rem}
.grid .wide{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--mute);font-weight:600}
input,select,textarea,button{font:inherit;color:var(--ink)}
input,select,textarea{background:#fff;border:1px solid var(--line);border-radius:5px;padding:.45rem .6rem;width:100%;font-weight:400}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:-1px;border-color:var(--pri)}
input:disabled,select:disabled,textarea:disabled{background:var(--soft)}
textarea{min-height:90px;resize:vertical}
textarea.code{font:13px/1.4 Consolas,monospace;min-height:340px}
button{border:1px solid var(--ink);background:#fff;border-radius:5px;padding:.45rem 1rem;cursor:pointer;font-weight:600}
button:hover{background:var(--soft)}
button.pri{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
button.pri:hover{background:var(--pri-dark);border-color:var(--pri-dark)}
button.danger{color:var(--danger);border-color:var(--danger)}
button.danger:hover{background:#fdecee}
button.link{border:0;background:none;color:var(--pri);padding:0;text-decoration:underline;font-weight:600}
button:disabled{opacity:.5;cursor:default}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden}
th,td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);background:var(--soft);font-weight:700}
tr.click{cursor:pointer}tr.click:hover{background:var(--soft)}
.table-wrap{overflow-x:auto}
.badge{display:inline-block;padding:.05rem .6rem;border-radius:99px;font-size:.78rem;font-weight:600;border:1px solid var(--line);background:#fff}
.badge.aktiv,.badge.unterschrieben{color:var(--ok);border-color:var(--ok)}
.badge.ausgeschieden,.badge.beendet{color:var(--mute)}
.badge.bewerber{color:var(--info);border-color:var(--info)}
.mute{color:var(--mute)}.err{color:var(--danger)}
#toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}
#toast.show{opacity:1}#toast.bad{background:var(--pri)}
dialog{border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink);padding:1.2rem;max-width:min(680px,94vw);width:100%}
dialog::backdrop{background:rgba(0,0,0,.45)}
canvas#sig{border:1px dashed var(--mute);border-radius:5px;background:#fff;width:100%;height:180px;touch-action:none;cursor:crosshair}
.login{max-width:380px;margin:9vh auto}
.login .logo-big{display:block;width:260px;max-width:80%;margin:0 auto 1.4rem}
.login h1{text-align:center;font-size:1.5rem}
.login .card{display:grid;gap:.8rem}
iframe.preview{width:100%;height:420px;border:1px solid var(--line);border-radius:5px;background:#fff}
/* WYSIWYG-Vorlageneditor */
.wy-modes{display:flex;gap:0;margin-bottom:.3rem}
.wy-modes button{border-radius:0;margin:0}.wy-modes button:first-child{border-radius:5px 0 0 5px}.wy-modes button:last-child{border-radius:0 5px 5px 0;margin-left:-1px}
.wy-modes button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.wy{border:1px solid var(--line);border-radius:5px;background:#fff;overflow:hidden}
.wy[hidden]{display:none}
.wy-bar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;padding:.35rem;background:var(--soft);border-bottom:1px solid var(--line)}
.wy-bar button,.wy-bar select{padding:.2rem .5rem;font-size:.85rem;width:auto;margin:0}
.wy-bar .sep{width:1px;align-self:stretch;background:var(--line);margin:0 .15rem}
iframe.wy-frame{width:100%;height:460px;border:0;display:block;background:#fff}
.chips{display:flex;gap:.3rem;flex-wrap:wrap}
.chips code{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:.05rem .35rem;font-size:.78rem;cursor:pointer}
.chips code:hover{border-color:var(--pri);color:var(--pri)}
.bar{display:flex;gap:.6rem;align-items:center}
.bar .fill{height:10px;background:var(--pri);border-radius:5px;min-width:2px}
.tabs{display:flex;gap:.3rem;margin-bottom:.8rem;border-bottom:1px solid var(--line)}
.tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;text-transform:uppercase;font-size:.82rem;letter-spacing:.03em}
.tabs button.on{border-color:var(--pri);color:var(--pri)}
[hidden]{display:none!important}

.dropzone{border:2px dashed var(--line);border-radius:5px;padding:1.1rem;text-align:center;cursor:pointer;background:var(--bg)}
.dropzone:hover,.dropzone:focus,.dropzone.over{border-color:var(--pri);outline:none;background:#fff5f5}
label.chk{flex-direction:row;align-items:center;gap:.5rem;font-weight:400;color:var(--ink);font-size:.9rem;padding:.1rem 0}label.chk input{width:auto}
details summary{cursor:pointer;color:var(--pri);font-weight:600;margin-bottom:.3rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-bottom:.6rem}
.tile{border:1px solid var(--line);border-radius:5px;padding:.5rem .7rem;background:var(--bg)}
.tile strong{font-size:1.15rem;display:block}
.tile.bad{border-color:var(--danger)}.tile.bad strong{color:var(--danger)}

/* ---- Responsive ---- */
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
.table-wrap{-webkit-overflow-scrolling:touch}
@media (max-width:900px){
  header{gap:1rem}
  header nav{gap:1.2rem}
}
@media (max-width:700px){
  main{padding:.8rem .7rem}
  .topbar{padding:.3rem .7rem;font-size:.78rem}
  .topbar .user{gap:.2rem .8rem}
  header{padding:.5rem .7rem;gap:.4rem;flex-direction:column;align-items:flex-start}
  header .logo img{height:40px}
  /* Menü als eine scrollbare Zeile statt mehrzeiligem Stapel */
  header nav{width:100%;flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:.85rem;overflow-x:auto;scrollbar-width:thin}
  header nav a{white-space:nowrap;font-size:.74rem;letter-spacing:0;padding:.35rem 0}
  .nav-group,.nav-sub{display:contents}
  .nav-group[hidden],.nav-sub[hidden]{display:none!important}
  .nav-parent::after{content:none}
  header nav .nav-sub a{padding:.35rem 0;border-left:0;border-bottom:3px solid transparent}
  header nav .nav-sub a:hover{background:none}
  header nav .nav-sub a.active{border-bottom-color:var(--pri)}
  h1{font-size:1.4rem}
  h2{font-size:1.05rem}
  .card{padding:.8rem}
  .grid{grid-template-columns:1fr}
  .row{gap:.5rem}
  /* größere Touch-Ziele; 16px verhindert Zoomen beim Fokussieren in iOS */
  button,input,select,textarea{min-height:42px}
  input,select,textarea{font-size:16px}
  input[type=checkbox],input[type=radio]{min-height:0}
  button.link{min-height:0}
  th,td{padding:.45rem .55rem}
  .hm{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .login{margin:5vh auto}
  dialog{width:calc(100vw - 1rem);max-width:none!important;padding:.9rem;max-height:94vh}
  #toast{width:calc(100vw - 1.4rem);text-align:center}
  /* Filterleisten und Formulare in der Breite des Bildschirms */
  .row > select,.row > input:not([type=checkbox]):not([type=file]){max-width:100%!important;flex:1 1 100%}
  .row > a,.row > a > button{max-width:100%}
  iframe.preview{height:320px}
}
@media (max-width:340px){
  .tiles{grid-template-columns:1fr}
  .tabs button{padding:.4rem .5rem}
}
.tenantbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.tenantbar select{width:auto;min-height:0;padding:.15rem .4rem;font-size:.8rem;background:#fff;color:#000;border-radius:4px}
header .logo{display:flex;align-items:center;text-decoration:none}
header .logo-text{font-weight:700;font-size:1.25rem;color:var(--ink)}
@media (max-width:700px){.tenantbar select{min-height:34px;font-size:.85rem}header .logo-text{font-size:1.05rem}}

/* Reporting: Auswahl, beschriftete Filter im Raster, Aktionsleiste */
.rpt{display:grid;gap:.9rem}
.rpt-pick{max-width:420px}
.rpt-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem 1rem;align-items:end}
.rpt-filters:empty{display:none}
.rpt-actions{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:.9rem}
.rpt-main,.rpt-exports{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
label.inl{flex-direction:row;align-items:center;gap:.5rem}label.inl select{width:auto}
@media (max-width:700px){.rpt-pick{max-width:none}.rpt-filters{grid-template-columns:1fr}.rpt-actions{flex-direction:column;align-items:stretch}.rpt-main,.rpt-exports{flex-direction:column;align-items:stretch}.rpt-exports a,.rpt-exports button,.rpt-main button{width:100%}}

/* Kundenansicht: Formular links, Journal als senkrechte Spalte rechts */
.cust-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}
.cust-layout.single{grid-template-columns:minmax(0,1fr)}
.cust-layout.single .cust-side{position:static}
.cust-main{min-width:0}
/* Buchhaltung: Hauptspalte links, Journal als vertikaler Block rechts (unter 1000 px darunter) */
.acc-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}
.acc-main{min-width:0}
.acc-journal{position:sticky;top:.8rem;max-height:calc(100vh - 6rem);overflow:auto;margin-bottom:0}
@media (max-width:1000px){.acc-layout{grid-template-columns:minmax(0,1fr)}.acc-journal{position:static;max-height:28rem}}
.cust-side{position:sticky;top:.8rem;align-self:start}
.cust-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.8rem}
.journal{max-height:calc(100vh - 6rem);overflow:auto;margin-bottom:0}
.jentry{border-top:1px solid var(--line);padding:.55rem 0}
.jhead{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center;font-size:.8rem;color:var(--mute);font-weight:600}
.jauthor{color:var(--ink)}
.jbody{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;margin-top:.15rem}
.jentry.aenderung .jbody,.jentry.system .jbody{color:#3d3d44}
/* Journal nur in der Desktop-Ansicht; auf Tablet und Smartphone ausgeblendet */
@media (max-width:1000px){.cust-layout{grid-template-columns:minmax(0,1fr)}.journal{display:none}.cust-side{position:static}.cust-actions{margin:.4rem 0 0}}

/* Einklappbare Blöcke in der Kundenansicht */
details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;user-select:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸";color:var(--mute);font-size:1rem;transition:transform .15s}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold[open]>summary{margin-bottom:.8rem}

/* Journal: klickbare Einträge und Hervorhebung des Ziels */
.jentry.link{cursor:pointer;border-radius:4px}
.jentry.link:hover,.jentry.link:focus-visible{background:var(--soft);outline:none}
.jentry.link .jbody{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
@keyframes flashbg{from{background:#fff3b0}to{background:transparent}}
.flash{animation:flashbg 2.4s ease-out}
/* Desktop-Ansicht: Inhalt nutzt 90 % der Bildschirmbreite */
@media (min-width:1001px){main{max-width:none;width:90%}}
/* zweite Speichern-Schaltfläche unter den Blöcken (nur Desktop; in kleinen Ansichten steht sie ohnehin unten) */
.cust-bottom{margin:.4rem 0 1rem}
@media (max-width:1000px){.cust-bottom{display:none}}

/* Start (Dashboard) */
/* höchstens 3 Blöcke je Zeile (je mindestens 300 px), alle Blöcke einer Zeile gleich hoch */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(300px,calc((100% - 2rem) / 3)),1fr));gap:1rem;margin-bottom:1rem;align-items:stretch}
/* Block über zwei Spalten, solange drei Spalten Platz haben */
@media (min-width:1040px){.dash .span2{grid-column:span 2}}
/* Listen ab 10 Einträgen scrollbar (Höhe setzt fitScroll in app.js); Tabellenkopf bleibt stehen */
.scroll10{overflow-y:auto}
/* Journal-Block: nie höher als der Kurs-Block daneben – die Liste füllt den Rest der Zeilenhöhe und scrollt (die Liste trägt nicht zur Zeilenhöhe bei) */
.jcard{display:flex;flex-direction:column}
@media (min-width:1040px){.jwrap{position:relative;flex:1;min-height:14rem}.jwrap>.jlist{position:absolute;inset:0}}
/* Dashboard-Tabellen kompakt: 10 Zeilen sollen nicht den halben Bildschirm füllen */
.dash .table-wrap th,.dash .table-wrap td{padding:.3rem .5rem;font-size:.85rem}
.dash .jentry{padding:.35rem .5rem}
.dash .card{margin-bottom:0}.dash h2{margin-top:0}
.kpis{display:flex;flex-wrap:wrap;gap:.45rem}
.kpi{flex:1 1 auto;min-width:5.5rem;display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--line);border-radius:5px;padding:.4rem .6rem;background:var(--bg);color:var(--ink);text-decoration:none}
a.kpi:hover{border-color:var(--pri)}
.kpi span{font-size:.72rem;font-weight:600;white-space:nowrap}.kpi strong{font-size:1.05rem;white-space:nowrap}.kpi small{font-weight:400;font-size:.74rem}
.kpi.bad{border-color:var(--danger)}.kpi.bad strong{color:var(--danger)}.kpi.good strong{color:#1b7a3a}
a.dj{display:block;color:inherit;text-decoration:none}
@media (max-width:700px){.dash,.dash.two{grid-template-columns:minmax(0,1fr)}}

/* Kursauslastung */
.util{min-width:150px}.util span{font-size:.85rem;white-space:nowrap}
.ubar{height:8px;margin-top:.25rem;background:var(--soft);border-radius:4px;overflow:hidden}
.ufill{height:100%;background:#1b7a3a;border-radius:4px;min-width:2px}
.util.high .ufill{background:#d98a00}.util.over .ufill{background:var(--danger)}.util.over span{color:var(--danger);font-weight:700}

.login .copyright{text-align:center;color:var(--mute);font-size:.8rem;margin:1.2rem 0 0}

/* Hilfe: FAQ, Handbuch, Copyright */
.help-card{margin-bottom:1.2rem}
.help-tools{display:flex;gap:1rem;margin:0 0 .5rem}
.faq-item{border:1px solid var(--line);border-radius:6px;margin-bottom:.4rem;background:var(--card)}
.faq-item summary{cursor:pointer;padding:.6rem .8rem;font-weight:600;display:flex;gap:.6rem;align-items:baseline}
.faq-item[open] summary{border-bottom:1px solid var(--line);background:var(--soft)}
.faq-n{color:var(--pri);font-weight:700;min-width:1.4rem}
.faq-a{padding:.7rem .8rem .8rem 2.4rem;line-height:1.5}
.help-search{display:flex;gap:1rem;align-items:center;margin-bottom:.8rem;flex-wrap:wrap}
.help-search input{max-width:340px}
.manual{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.2rem;align-items:start}
.toc{position:sticky;top:.8rem;display:flex;flex-direction:column;gap:.15rem;font-size:.9rem}
.toc a{text-decoration:none;color:var(--ink);padding:.25rem .5rem;border-left:3px solid transparent}
.toc a:hover{background:var(--soft);border-left-color:var(--pri)}
.toc a[hidden]{display:none}
.chapter{border:1px solid var(--line);border-radius:6px;margin-bottom:.5rem}
.chapter[hidden]{display:none}
.chapter summary{cursor:pointer;padding:.6rem .8rem;font-weight:700;display:flex;justify-content:space-between;gap:1rem}
.chapter[open] summary{border-bottom:1px solid var(--line);background:var(--soft)}
.chap-done{color:var(--ok);font-weight:600;font-size:.85rem}
.chap-done[hidden]{display:none}
.chap-intro{margin:.6rem .8rem 0}
.steps{margin:.5rem .8rem .8rem;padding-left:1.4rem;line-height:1.5}
.steps li{margin-bottom:.4rem}
.chap-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0 .8rem .8rem;flex-wrap:wrap}
@media (max-width:800px){.manual{grid-template-columns:minmax(0,1fr)}.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:.3rem .8rem}}

.help-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.help-custom{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:.05rem .5rem;vertical-align:middle}
.ed-list{max-height:62vh;overflow:auto;padding-right:.3rem}
.ed-item{border:1px solid var(--line);border-radius:6px;padding:.6rem .8rem;margin-bottom:.6rem;display:flex;flex-direction:column;gap:.4rem}
.ed-bar{display:flex;justify-content:space-between;align-items:center}
.ed-bar span{display:flex;gap:.3rem}
.ed-item label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}
.ed-item textarea{font:inherit;resize:vertical}

/* Versionsnummer im Hilfe-Menü */
.nav-ver{padding:.55rem .9rem;color:var(--mute);font-size:.8rem;font-weight:600;white-space:nowrap}
@media (max-width:700px){.nav-sub-help{display:none!important}}

.login .forgot{text-align:center;margin:.8rem 0 0;font-size:.9rem}
.ok-msg{color:var(--ok);font-weight:600}

/* Checkbox in einem Formularraster: gleiche Höhe wie die Eingabefelder, vertikal mittig */
.chk-field{display:flex;align-items:center;gap:.5rem;min-height:2.45rem;font-weight:400;color:var(--ink);font-size:.9rem}
.chk-field input{width:auto;margin:0}
/* Neuer Kunde: nur eine Speichern-Schaltfläche (die Aktionsleiste unter dem Formular), nicht zusätzlich die untere */
.cust-layout.single .cust-bottom{display:none}

/* Neuer Mandant: Eingabefelder unten bündig, auch wenn eine Beschriftung umbricht */
#nt>label{justify-content:flex-end}
#nt .chk-field{min-height:36px}
#nt>label:nth-child(5){grid-column:span 2}
/* Sicherung: Eingabefelder einer Zeile stehen auf einer Linie, auch wenn eine Beschriftung umbricht */
form.bk .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:end}
form.bk .grid>label,form.bk.row>label{justify-content:flex-end}
form.bk.row{align-items:flex-end;gap:.7rem 1rem}
form.bk .grid>label[hidden]{display:none}
form.bk select{text-overflow:ellipsis}
form.bk .row{margin-bottom:0}
form.bk .row,form.bk>.row{padding-top:.2rem}
form.bk label.chk{min-height:2.2rem}
form.bk>.mute{margin:.6rem 0}

form.bk input:not([type=checkbox]):not([type=file]),form.bk select{height:2.4rem;box-sizing:border-box}
form.bk input[type=file]{min-height:2.4rem;box-sizing:border-box;padding:.35rem .5rem}
form.bk button{height:2.4rem}

/* Sicherung: Tabellen – Aktionen untereinander, Dateinamen umbrechen, damit nichts seitlich scrollt */
table.bk-tbl{font-size:.88rem}
table.bk-tbl td code{font-size:.78rem;word-break:break-all}
table.bk-tbl td.bk-act{width:1%;white-space:nowrap}
table.bk-tbl td.bk-act>*{display:block;margin:0 0 .3rem}
table.bk-tbl td.bk-act>*:last-child{margin-bottom:0}
table.bk-tbl td.bk-act button{width:100%;padding:.35rem .7rem}
table.bk-tbl td.bk-act a{text-decoration:none}
/* Fehlzeiten: Dateien in der Übersicht */
.afiles{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}
.afile{display:inline-flex;align-items:baseline;gap:.4rem;max-width:100%}
.afile a{overflow-wrap:anywhere}
tr.afrow td{border-top:0;padding-top:0;padding-bottom:.7rem}
tr.afrow:empty{display:none}
.afile a{font-weight:600}
button.sm{padding:0 .4rem;min-height:0;line-height:1.3;font-size:.85rem}
label.afadd{display:inline;flex-direction:row;font-size:.82rem;font-weight:600;color:var(--pri);cursor:pointer;width:fit-content}
label.afadd:hover{text-decoration:underline}

#abs tr[data-row]:has(+ tr.afrow) td{border-bottom:0}
.aline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem}
.aline .afiles{flex:1 1 14rem}
.aact{display:flex;gap:.4rem}
.afile .mute{white-space:nowrap}

/* Dropdown-Menü für Zeilenaktionen (ddMenu in app.js) */
.dd{display:inline-block}
.dd-toggle{white-space:nowrap}
.dd-menu{position:fixed;z-index:60;min-width:12rem;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.14);padding:.3rem;display:flex;flex-direction:column;text-align:left}
.dd-menu[hidden]{display:none}
.dd-item{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:4px;padding:.45rem .7rem;font:inherit;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.dd-item:hover,.dd-item:focus-visible{background:var(--soft)}
.dd-item.danger{color:var(--danger)}

/* Maßnahmen: einfacher Texteditor für die Details */
.rte-bar{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 .4rem}
.rte-bar button{padding:.25rem .6rem;font-weight:500}
.rte{min-height:12rem;max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:5px;padding:.7rem .9rem;background:#fff;font-weight:400}
.rte:focus{outline:2px solid var(--info);outline-offset:1px}
.rte h3,.rte-view h3{margin:.6rem 0 .3rem;font-size:1.05rem}
.rte p,.rte-view p{margin:.3rem 0}
.rte ul,.rte ol,.rte-view ul,.rte-view ol{margin:.3rem 0;padding-left:1.4rem}
.rte-view{border:1px solid var(--line);border-radius:5px;padding:.7rem .9rem;background:var(--card);margin-top:.6rem}

/* Agenturen: gewählte Zeile hervorheben */
tr.sel td{background:var(--soft)}
tr.click{cursor:pointer}

/* Sortierbare Tabellenköpfe (Maßnahmen) */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover,th.sortable:focus-visible{text-decoration:underline}
th.sortable .sort-ind{color:var(--pri)}

/* Fixierte Spaltenköpfe auf allen Listen: nur die Einträge scrollen, der Tabellenkopf bleibt stehen.
   Jede Tabelle ist ein eigener Scrollbereich (höchstens Bildschirmhöhe); die Höhe für „20 Einträge“ setzt zusätzlich fitScroll in app.js.
   Der Tabellenrahmen darf nicht abschneiden (overflow:hidden würde das Festhalten verhindern). */
.table-wrap{max-height:calc(100vh - 11rem);overflow:auto}
.table-wrap table{overflow:visible}
.table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--soft);box-shadow:0 1px 0 var(--line)}
dialog .table-wrap{max-height:50vh}

/* ---- Klassenbücher: modernes Layout im bestehenden Farbschema (Rot/Schwarz, Teal und Blau für Zustände) ---- */
:root{--cb-a:#008e85;--cb-v:#1381a0;--cb-e:#b7791f;--cb-u:#b8040f;--cb-k:#5b6475;--cb-b:#8a90a0;--cb-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06)}
.print-only{display:none}
.cb-back{display:inline-block;margin-bottom:.4rem;text-decoration:none;font-weight:600;font-size:.88rem}
.cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1rem}
.cb-card{display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;color:var(--ink);text-decoration:none;box-shadow:var(--cb-shadow);transition:transform .12s,box-shadow .12s,border-color .12s}
.cb-card:hover,.cb-card:focus-visible{transform:translateY(-2px);border-color:var(--pri);box-shadow:0 2px 4px rgba(0,0,0,.08),0 10px 24px rgba(0,0,0,.1);outline:none}
.cb-card h3{margin:0;font-size:1.02rem;line-height:1.3;font-weight:700}
.cb-card-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cb-num{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--mute);text-transform:uppercase}
.cb-sub{font-size:.82rem}
.cb-state{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .55rem;border-radius:99px;background:var(--soft);color:var(--mute)}
.cb-state.laufend{background:#e3f4f2;color:var(--cb-a)}.cb-state.geplant{background:#e4f1f6;color:var(--cb-v)}
.cb-prog{display:block;height:6px;background:var(--soft);border-radius:99px;overflow:hidden}
.cb-prog>span{display:block;height:100%;background:var(--pri);border-radius:99px;min-width:2px}.cb-prog>span.bad{background:var(--cb-u)}
.cb-stats,.cb-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.cb-stats>div,.cb-kpis>div{display:flex;flex-direction:column;font-size:.7rem;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cb-stats strong,.cb-kpis strong{font-size:1.15rem;color:var(--ink);text-transform:none;letter-spacing:0}
.cb-foot{font-size:.78rem;color:var(--mute);margin-top:auto;border-top:1px solid var(--line);padding-top:.5rem}
.cb-open{color:var(--pri);font-weight:700}
.cb-head{border-radius:12px;box-shadow:var(--cb-shadow);padding:1.2rem 1.3rem}
.cb-head-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}
.cb-head h1{margin:.1rem 0 .15rem;font-size:1.6rem}
.cb-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.cb-dl{display:inline-block;border:1px solid var(--ink);border-radius:5px;padding:.42rem .9rem;font-weight:600;text-decoration:none;color:var(--ink);font-size:.92rem}.cb-dl:hover{background:var(--soft)}
.cb-kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.cb-kpis .warn strong{color:var(--pri)}
.cb-entry{display:grid;grid-template-columns:78px 1fr auto;gap:1rem;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pri);border-radius:12px;padding:.9rem 1rem;margin-bottom:.8rem;box-shadow:var(--cb-shadow)}
.cb-entry.locked{border-left-color:var(--cb-a)}
.cb-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--soft);border-radius:10px;padding:.4rem .2rem;text-align:center}
.cb-date strong{font-size:1.25rem;line-height:1.1}.cb-date span{font-size:.78rem;font-weight:700;text-transform:uppercase;color:var(--pri)}.cb-date small{color:var(--mute);font-size:.72rem}
.cb-main h3{margin:.15rem 0 .4rem;font-size:1.05rem}
.cb-meta{display:flex;gap:.35rem .5rem;flex-wrap:wrap;font-size:.8rem;color:var(--mute);font-weight:600}
.cb-meta span+span::before{content:"·";margin-right:.5rem;color:var(--line)}
.cb-lock{color:var(--cb-a)}
.cb-block{margin:.35rem 0;font-size:.9rem;white-space:pre-wrap}.cb-block b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.cb-sum{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.cb-chip{font-size:.75rem;font-weight:600;padding:.12rem .6rem;border-radius:99px;background:var(--soft);border:1px solid var(--line)}
.cb-chip.st-anwesend{color:var(--cb-a);border-color:var(--cb-a)}.cb-chip.st-verspaetet{color:var(--cb-v);border-color:var(--cb-v)}.cb-chip.st-entschuldigt{color:var(--cb-e);border-color:var(--cb-e)}
.cb-chip.st-unentschuldigt{color:var(--cb-u);border-color:var(--cb-u)}.cb-chip.st-krank{color:var(--cb-k);border-color:var(--cb-k)}.cb-chip.st-beurlaubt{color:var(--cb-b);border-color:var(--cb-b)}
.cb-empty{text-align:center;padding:2rem 1rem;border-radius:12px}
.cb-pill{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:7px;font-size:.78rem;font-weight:700;color:#fff;background:var(--cb-b)}
.cb-pill.st-anwesend,.cb-seg label.st-anwesend input:checked+span{background:var(--cb-a)}.cb-pill.st-verspaetet,.cb-seg label.st-verspaetet input:checked+span{background:var(--cb-v)}
.cb-pill.st-entschuldigt,.cb-seg label.st-entschuldigt input:checked+span{background:var(--cb-e)}.cb-pill.st-unentschuldigt,.cb-seg label.st-unentschuldigt input:checked+span{background:var(--cb-u)}
.cb-pill.st-krank,.cb-seg label.st-krank input:checked+span{background:var(--cb-k)}.cb-pill.st-beurlaubt,.cb-seg label.st-beurlaubt input:checked+span{background:var(--cb-b)}
.cb-matrix{overflow:auto;max-height:calc(100vh - 17rem);border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cb-matrix table{border:0;border-radius:0;overflow:visible;width:auto;min-width:100%}
.cb-matrix th,.cb-matrix td{padding:.35rem .45rem;white-space:nowrap}
.cb-matrix thead th{position:sticky;top:0;z-index:3;background:var(--soft)}
.cb-matrix .cb-sticky{position:sticky;left:0;z-index:2;background:var(--card);box-shadow:1px 0 0 var(--line)}
.cb-matrix thead .cb-sticky{z-index:4;background:var(--soft)}
.cb-matrix .cb-col{text-align:center;font-size:.76rem}.cb-matrix .cb-cell{text-align:center}
.cb-legend{margin-top:.6rem;font-size:.82rem;color:var(--mute)}
.cb-quota{display:flex;align-items:center;gap:.5rem;min-width:9rem}.cb-quota .cb-prog{flex:1}
.cb-bad{color:var(--cb-u);font-weight:700}
.cb-form .cb-note{background:#e3f4f2;border:1px solid var(--cb-a);color:#00615b;border-radius:8px;padding:.5rem .7rem;font-size:.88rem}
.cb-att{display:grid;gap:.35rem;max-height:46vh;overflow:auto;padding:.1rem}
.cb-arow{display:grid;grid-template-columns:minmax(9rem,1.2fr) auto 4.5rem minmax(7rem,1fr);gap:.5rem;align-items:center;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.cb-arow input{padding:.3rem .5rem}.cb-arow .cb-late[hidden]{display:block!important;visibility:hidden}
.cb-aname{font-weight:600;font-size:.9rem}
.cb-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.cb-seg label{flex-direction:row;margin:0;cursor:pointer;gap:0}
.cb-seg input{position:absolute;opacity:0;width:0;min-height:0;pointer-events:none}
.cb-seg span{display:block;min-width:2.1rem;text-align:center;padding:.35rem .3rem;font-weight:700;font-size:.82rem;color:var(--mute)}
.cb-seg label+label span{border-left:1px solid var(--line)}
.cb-seg input:checked+span{color:#fff}.cb-seg input:focus-visible+span{outline:2px solid var(--pri);outline-offset:-2px}
.cb-seg input:disabled+span{cursor:default}
.cb-keys{font-size:.78rem;margin:.4rem 0}
@media (max-width:700px){
  .cb-entry{grid-template-columns:1fr}.cb-date{flex-direction:row;gap:.5rem;justify-content:flex-start;padding:.3rem .6rem}
  .cb-arow{grid-template-columns:1fr auto}.cb-aname{grid-column:1/-1}.cb-arow .cb-late,.cb-arow .cb-anote{grid-column:1/-1}
  .cb-stats{grid-template-columns:repeat(2,1fr)}
}
@media print{
  .topbar,header,.no-print,#toast,.tabs{display:none!important}
  body{background:#fff}main{max-width:none;padding:0}
  .cb-pane[hidden]{display:block!important}
  .print-only{display:block}
  .cb-card,.cb-entry,.cb-head{box-shadow:none}.cb-entry{break-inside:avoid}
  .cb-matrix{max-height:none;overflow:visible;border:0}.cb-matrix thead th,.cb-matrix .cb-sticky{position:static}
  .cb-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
dialog:has(.cb-form){max-width:min(860px,94vw)}
/* ---- Admin Tools: Zauberstab ---- */
.wand{border-radius:12px;box-shadow:var(--cb-shadow)}
.wand-head{display:flex;gap:.9rem;align-items:center}
.wand-icon{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--pri);color:#fff;font-size:1.3rem;flex:none}
.wand-box{border:1px solid var(--line);border-left:4px solid var(--cb-e);border-radius:8px;padding:.6rem .9rem;margin-top:.8rem;background:var(--bg);font-size:.9rem}
.wand-box ul{margin:.3rem 0 0;padding-left:1.2rem}.wand-box.bad{border-left-color:var(--cb-u);background:#fdecee}.wand-box.ok{border-left-color:var(--cb-a);background:#e3f4f2}
#wf{grid-template-columns:minmax(280px,2fr) minmax(220px,1fr);align-items:end}#wf .wide{grid-column:1/-1}
@media (max-width:700px){#wf{grid-template-columns:1fr}}

/* Dialoge mit Tabellen (Lastschrift, DATEV, Serien) breiter; Beträge nicht umbrechen */
dialog:has(.wd){max-width:min(900px,94vw)}
dialog td[style*="text-align:right"],dialog td.nw{white-space:nowrap}
dialog td:first-child{white-space:nowrap}

/* Öffentliche Seiten: Anmeldeformular und Portal */
main.pub{max-width:760px;margin:0 auto;padding:1.4rem 1.2rem}
main.pub .grid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.pubhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.ptabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 1rem}