:root{--green:#aed126;--green-dark:#7e9e12;--ink:#243038;--muted:#77827f;--line:#e3e8df;--panel:#fff;--soft:#f6f9f1;--soft2:#eef4e5;--danger:#b94a48;--shadow:0 10px 30px rgba(35,48,56,.08)}
*{box-sizing:border-box}body{margin:0;font:15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#fbfcf8 0,#f4f7ef 100%);color:var(--ink)}a{color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:248px 1fr}aside{background:#fff;border-right:1px solid var(--line);padding:20px 16px;position:sticky;top:0;height:100vh;box-shadow:4px 0 24px rgba(40,55,45,.04);z-index:2}.logo-wrap{display:block;background:#fff;border-radius:14px;padding:7px;margin-bottom:24px;text-decoration:none}.logo-wrap img{display:block;width:100%;height:auto;max-height:170px;object-fit:contain}.nav-separator{height:1px;background:var(--line);margin:12px 8px}nav a{display:flex;justify-content:space-between;align-items:center;padding:12px 13px;border-radius:10px;text-decoration:none;margin:4px 0;font-weight:600;color:#405047;transition:.16s ease}nav a:hover{background:var(--soft)}nav a.active{background:var(--soft2);color:#536b08;box-shadow:inset 3px 0 0 var(--green)}nav a span{opacity:.6;font-weight:700}.user{position:absolute;left:18px;right:18px;bottom:20px;display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}.user b{font-size:14px}.user a{color:#66756d;text-decoration:none}.user a:hover{color:var(--green-dark)}main{padding:34px;max-width:1020px;width:100%}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}header h2{font-size:28px;margin:0}header .subline{margin:5px 0 0;color:var(--muted)}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--green-dark);font-weight:800}.create{margin-left:auto}.create summary{cursor:pointer;font-weight:800;background:var(--green);color:#25300b;border-radius:10px;padding:10px 14px;list-style:none}.create summary::-webkit-details-marker{display:none}.create .new{margin-top:12px;display:grid;gap:8px;background:#fff;padding:14px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}input,textarea,select,button{font:inherit;border:1px solid #d9e0d5;border-radius:9px;padding:11px;background:#fff;color:var(--ink)}input:focus,textarea:focus,select:focus{outline:2px solid rgba(174,209,38,.25);border-color:var(--green)}textarea{resize:vertical;min-height:86px}button{background:var(--green);color:#25300b;border:0;cursor:pointer;font-weight:800;transition:.15s ease}button:hover{filter:brightness(.97)}button:disabled{opacity:.45;cursor:not-allowed}section{margin:24px 0}.eventlist{margin-top:18px}.event{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:9px 0;display:grid;grid-template-columns:96px 1fr auto;gap:12px;text-decoration:none;box-shadow:0 3px 12px rgba(35,48,56,.035);transition:.16s ease}.event:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(35,48,56,.08);border-color:#d8e4c8}.event>b{font-size:16px}.event span{font-weight:700;color:#617254}.event em{font-style:normal;color:#738176}.event small,.meta{color:#7d8782}.event small{grid-column:2/4}.empty{padding:34px;background:#fff;border:1px dashed #d7dfd1;border-radius:12px;color:#89938d;text-align:center}.detail{position:fixed;right:0;top:0;width:min(560px,96vw);height:100vh;background:#fff;box-shadow:-12px 0 38px rgba(31,44,36,.14);overflow:auto;padding:30px;z-index:4}.close{float:right;text-decoration:none;font-size:30px;color:#7e8983}.detail label,.stack label{display:block;font-weight:700;margin:13px 0}.detail label input,.detail textarea,.detail select,.stack label input,.stack label textarea,.stack label select{display:block;width:100%;margin-top:6px;font-weight:400}.cloud{display:block;padding:10px 12px;background:var(--soft2);border:1px solid #dfe9d0;border-radius:8px;margin:6px 0;overflow:hidden;color:#4c6507;text-decoration:none;font-weight:650}.twocol{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin:8px 0 18px}.history{font-size:13px;padding:8px 0;border-bottom:1px solid #edf0eb}.login{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at top,#f9fce9 0,#eff4e6 38%,#e9eee4 100%);padding:24px}.card{background:#fff;box-shadow:0 18px 50px rgba(42,57,46,.12);border:1px solid #e5eadf;border-radius:18px}.loginbox{width:min(430px,94vw);padding:26px 34px 32px;display:grid;gap:13px}.login-logo{width:100%;max-height:230px;object-fit:contain;margin:-4px auto 0}.login-hint{font-size:12px;line-height:1.45;color:#7d8881;text-align:center;margin:2px 0 0}.error,.notice{padding:11px 13px;border-radius:9px;margin:10px 0}.error{background:#f9eceb;color:#8b3735;border:1px solid #efd1cf}.notice{background:#f0f7df;color:#536813;border:1px solid #dcebb7}.topnotice{margin:0 0 18px}.stephead{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}.stephead>span{text-transform:uppercase;font-size:12px;letter-spacing:.09em;color:var(--green-dark);font-weight:800}.stephead h2{margin:4px 0;font-size:27px}.stephead p{margin:0;color:var(--muted)}.actions{display:flex;gap:10px;margin-top:18px}.actions button{flex:1}.secondary{background:#eef2ea!important;color:#415048!important}.danger{background:#fff0ef!important;color:#a53f3c!important;border:1px solid #efcfcd!important}.previous{background:var(--soft);border:1px solid #e4eadf;border-radius:10px;padding:13px;margin-bottom:18px}.previous span{display:block;margin-top:4px;color:#7d8782}.linkrow{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-bottom:8px}.hint{font-size:13px;color:#7d8782}.summary h3{border-bottom:1px solid var(--line);padding-bottom:7px;margin-top:25px}.summary h4{margin-bottom:4px}.summary p{line-height:1.55}.done{background:#eff7e5;padding:12px;border-radius:9px;border:1px solid #dcebbf}.meta{margin-top:20px}.settings-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 5px 18px rgba(35,48,56,.04)}.settings-card>h3{margin-top:0;font-size:18px}.settings-card>p{color:var(--muted);line-height:1.5}.stack{display:grid;gap:4px;max-width:560px}.admin-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr);gap:18px}.user-list{display:grid;gap:10px}.user-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:13px;background:#fafbf8;border:1px solid #e9ede5;border-radius:10px}.user-row>div:first-child{display:grid;gap:3px}.user-row span{font-size:13px;color:#6f7b74}.user-row small{font-size:11px;color:#8b958f}.user-actions{min-width:130px}.user-actions summary{cursor:pointer;font-weight:700;color:#5d6c62;text-align:right}.mini-form{display:grid;gap:7px;margin:10px 0}.mini-form input{min-width:220px}.user-actions form:last-child{margin-top:6px}.user-actions button{width:100%;font-size:12px}.settings-card hr{border:0;border-top:1px solid var(--line)}
@media(max-width:850px){.app{grid-template-columns:210px 1fr}.admin-grid{grid-template-columns:1fr}.logo-wrap img{max-height:145px}}
@media(max-width:700px){.app{grid-template-columns:1fr}aside{height:auto;position:relative;padding:12px 14px}.logo-wrap{width:180px;margin:0 0 8px}.logo-wrap img{max-height:120px}nav{display:flex;overflow:auto;gap:4px;padding-bottom:4px}nav a{white-space:nowrap}.nav-separator{display:none}.user{position:static;margin-top:8px;display:flex;flex-wrap:wrap;gap:10px;padding-top:9px}main{padding:18px 14px}header{align-items:flex-start}.event{grid-template-columns:82px 1fr}.event em{grid-column:2}.event small{grid-column:2}.detail{width:100%;padding:24px 18px}.linkrow{grid-template-columns:1fr}.actions{flex-direction:column}.admin-grid{grid-template-columns:1fr}.user-row{display:block}.user-actions{margin-top:10px}.user-actions summary{text-align:left}.mini-form input{min-width:0;width:100%}}

/* FlowWork v0.3.5 – Sichtbarkeit */
.visibility-box{border:1px solid #dfe7d8;border-radius:12px;padding:14px;margin:18px 0;background:#fbfcf8}.visibility-box legend{padding:0 7px;font-weight:800;color:#536b08}.visibility-option{display:flex!important;align-items:flex-start;gap:10px;margin:8px 0!important;padding:10px;border-radius:9px;background:#fff;border:1px solid #e5eadf}.visibility-option span{display:grid;gap:2px}.visibility-option small{font-weight:400;color:#7d8782;line-height:1.35}.visibility-users{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.visibility-users label{display:grid!important;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;margin:0!important;padding:9px 10px;border-radius:8px;background:#f5f8f0;border:1px solid #e5eadf;font-weight:700}.visibility-users label small{grid-column:2;font-weight:400;color:#7d8782;overflow-wrap:anywhere}.visibility-box input[type="radio"],.visibility-box input[type="checkbox"]{width:17px;height:17px;margin:2px 0 0;padding:0;border:0;accent-color:var(--green);box-shadow:none;outline:none}.visibility-badge{display:inline!important;font-weight:700!important;color:#62770f!important}.completed-visibility{margin-top:18px;padding-top:5px;border-top:1px solid var(--line)}
@media(max-width:700px){.visibility-users{grid-template-columns:1fr}}

/* FlowWork v0.3.8 – Freigabestatus Nachbearbeitung */
.approval-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.approval-check{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:13px 14px;border-radius:10px;border:1px solid #e6b8b5;background:#fff0ef;color:#963c38;font-weight:800;cursor:pointer;transition:.16s ease}.approval-check input[type="checkbox"]{width:19px!important;height:19px!important;margin:0!important;padding:0!important;accent-color:#6f9c16}.approval-check.is-done{background:#edf7e7;border-color:#cbe2b9;color:#42680d}.approval-readonly .approval-check{cursor:default}.approval-box{display:grid;place-items:center;width:21px;height:21px;border-radius:5px;background:rgba(255,255,255,.7);font-size:13px;font-weight:900;flex:0 0 auto}
@media(max-width:700px){.approval-grid{grid-template-columns:1fr}}


/* FlowWork v0.4.0 – Workflow-Board / MeisterTask-inspirierte Statusdarstellung */
:root{
  --phase-planning:#7aa7ff;
  --phase-planning-soft:#eef4ff;
  --phase-onsite:#f1ad4e;
  --phase-onsite-soft:#fff6e8;
  --phase-followup:#a879e8;
  --phase-followup-soft:#f6f0ff;
  --phase-completed:#71ad62;
  --phase-completed-soft:#eef8eb;
}
.workflow-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(145px,1fr));
  gap:12px;
  margin:18px 0 26px;
}
.workflow-column{
  position:relative;
  min-height:126px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:18px 16px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 5px 18px rgba(35,48,56,.045);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.workflow-column:before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;
  height:6px;
  background:#cfd6d1;
}
.workflow-column:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(35,48,56,.09);
}
.workflow-column.active{
  border-color:transparent;
  box-shadow:0 12px 30px rgba(35,48,56,.11);
}
.workflow-number{
  position:absolute;
  top:17px;
  left:16px;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:900;
  opacity:.5;
}
.workflow-count{
  position:absolute;
  top:14px;
  right:14px;
  min-width:31px;
  height:31px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  font-weight:900;
  font-size:13px;
}
.workflow-title{
  font-size:17px;
  font-weight:850;
  line-height:1.15;
}
.workflow-hint{
  margin-top:5px;
  font-size:12px;
  line-height:1.3;
  color:#738078;
}
.workflow-column.phase-planning:before{background:var(--phase-planning)}
.workflow-column.phase-onsite:before{background:var(--phase-onsite)}
.workflow-column.phase-followup:before{background:var(--phase-followup)}
.workflow-column.phase-completed:before{background:var(--phase-completed)}
.workflow-column.phase-planning.active{background:var(--phase-planning-soft)}
.workflow-column.phase-onsite.active{background:var(--phase-onsite-soft)}
.workflow-column.phase-followup.active{background:var(--phase-followup-soft)}
.workflow-column.phase-completed.active{background:var(--phase-completed-soft)}

.eventlist{
  position:relative;
  padding-top:5px;
}
.eventlist:before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  margin:0 0 14px;
  background:#d3dad5;
}
.eventlist.phase-planning:before{background:var(--phase-planning)}
.eventlist.phase-onsite:before{background:var(--phase-onsite)}
.eventlist.phase-followup:before{background:var(--phase-followup)}
.eventlist.phase-completed:before{background:var(--phase-completed)}

.event{
  position:relative;
  overflow:hidden;
  padding-left:20px;
}
.event:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:#d3dad5;
}
.event.phase-planning:before{background:var(--phase-planning)}
.event.phase-onsite:before{background:var(--phase-onsite)}
.event.phase-followup:before{background:var(--phase-followup)}
.event.phase-completed:before{background:var(--phase-completed)}

nav a[href="?status=planning"].active{box-shadow:inset 3px 0 0 var(--phase-planning)}
nav a[href="?status=onsite"].active{box-shadow:inset 3px 0 0 var(--phase-onsite)}
nav a[href="?status=followup"].active{box-shadow:inset 3px 0 0 var(--phase-followup)}
nav a[href="?status=completed"].active{box-shadow:inset 3px 0 0 var(--phase-completed)}

@media(max-width:900px){
  .workflow-board{
    grid-template-columns:repeat(2,minmax(180px,1fr));
  }
}
@media(max-width:700px){
  .workflow-board{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding-bottom:5px;
    scroll-snap-type:x proximity;
  }
  .workflow-column{
    min-width:205px;
    min-height:112px;
    scroll-snap-align:start;
  }
}


/* FlowWork v0.4.4 – Mobile Übersicht optimiert */
@media(max-width: 820px){

  html, body{
    overflow-x:hidden;
  }

  .app{
    display:block;
    min-width:0;
  }

  aside{
    position:static;
    width:auto;
    min-width:0;
    height:auto;
    padding:14px 14px 10px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  aside .brand{
    margin-bottom:12px;
  }

  nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  nav a{
    margin:0;
    min-width:0;
    white-space:normal;
    text-align:center;
    padding:11px 8px;
    border-radius:10px;
  }

  main{
    width:100%;
    min-width:0;
    padding:16px 14px 28px;
    box-sizing:border-box;
  }

  main > header{
    display:flex;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  main > header h2{
    margin-top:2px;
    font-size:1.45rem;
  }

  .workflow-board{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
    gap:10px;
    padding-bottom:0;
    margin:14px 0 20px;
  }

  .workflow-column{
    min-width:0;
    min-height:112px;
    width:auto;
    scroll-snap-align:none;
    padding:16px 13px 13px;
  }

  .workflow-title{
    font-size:15px;
  }

  .workflow-hint{
    font-size:11px;
  }

  .eventlist{
    min-width:0;
  }

  .event{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    padding:14px 14px 14px 18px;
  }

  .event > *{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .event .meta,
  .event small{
    white-space:normal;
  }

  details.create{
    width:100%;
  }

  details.create > summary{
    width:fit-content;
  }

  form.new{
    grid-template-columns:1fr;
  }

  form.new input,
  form.new textarea,
  form.new select{
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .visibility-box{
    min-width:0;
  }
}

@media(max-width: 520px){

  aside{
    padding:12px 10px 9px;
  }

  nav{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  nav a{
    font-size:13px;
    padding:10px 6px;
  }

  main{
    padding:14px 10px 24px;
  }

  .workflow-board{
    grid-template-columns:1fr;
  }

  .workflow-column{
    min-height:96px;
  }

  .workflow-hint{
    display:none;
  }

  .workflow-count{
    top:12px;
    right:12px;
  }

  .event{
    border-radius:12px;
  }
}


/* FlowWork v0.4.5 – Fix mobile Eventkarten / Datum */
@media(max-width: 820px){
  .event{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    padding:14px 14px 14px 20px;
  }

  .event > *{
    width:auto;
    min-width:0;
    max-width:100%;
  }

  .event .date{
    display:block;
    width:100%;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .event strong{
    display:block;
    width:100%;
    overflow-wrap:break-word;
  }
}


/* FlowWork v0.4.6 – Mobile Kopfbereich vereinfachen */
@media(max-width: 820px){

  /* Die vier Workflow-Menüpunkte oben ausblenden.
     Die Navigation erfolgt mobil über die großen Workflow-Karten im Inhalt. */
  aside nav a[href="?status=planning"],
  aside nav a[href="?status=onsite"],
  aside nav a[href="?status=followup"],
  aside nav a[href="?status=completed"]{
    display:none !important;
  }

  /* Navigation nur noch als kompakte Benutzer-Zeile */
  aside nav{
    display:flex !important;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:6px;
  }

  /* Benutzer bleibt mobil sichtbar */
  aside nav a[href="?admin=users"]{
    display:inline-flex !important;
    width:auto;
    margin:0;
    padding:9px 12px;
    border-radius:10px;
    text-align:left;
  }

  /* Logo-/Kopfbereich enger */
  aside{
    padding:12px 14px 10px;
  }

  aside .brand{
    margin-bottom:6px;
  }

  /* Untere Account-Zeile kompakter darstellen */
  aside .account,
  aside .user,
  aside .account-links{
    gap:8px;
    flex-wrap:wrap;
  }
}

@media(max-width: 520px){
  aside{
    padding:10px 10px 8px;
  }

  aside nav{
    gap:6px;
  }

  aside nav a[href="?admin=users"]{
    padding:8px 10px;
    font-size:13px;
  }
}