/* Mandantentools | gemeinsames Erscheinungsbild (Duprée Consulting) */
:root{
  --gruen:#599559; --gruen-dunkel:#3E6B3E; --gruen-3:#9ABE9A; --gruen-2:#C4DAC5; --gruen-1:#E5EFE6;
  --flaeche:#F2F6F2; --linie:#CBDACC;
  --text:#15201A; --text-2:#4C5B50; --text-3:#7E8D82;
  --feld:#F6F9F6; --weiss:#fff;
  --ok:#3E6B3E; --warn:#8A5A00; --stop:#9B2226; --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--flaeche);color:var(--text);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}

.kopfbereich{background:var(--gruen);color:#10200F;padding:14px 18px 10px}
.kopf-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.kopfbereich h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:#0E1C0D;line-height:1.15}
.kopfbereich .untertitel{margin:1px 0 0;font-size:13px;font-weight:400;color:#1B3319}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo .balken{display:flex;flex-direction:column;gap:2px}
.logo .balken i{display:block;width:26px;height:5px}
.zurueck{display:inline-flex;align-items:center;vertical-align:3px;margin-left:10px;
  background:#fff;border:1px solid #2F5730;border-radius:999px;padding:4px 13px;
  font-size:12px;font-weight:600;color:#2F5730;line-height:1.2;white-space:nowrap}
.logo:hover .zurueck{background:#2F5730;color:#fff}

.kopf-rechts{font-size:11px;color:#1B3319;text-align:right}
.kopf-rechts b{font-weight:600}

.huelle{max-width:1200px;margin:0 auto;padding:18px}
@media (max-width:700px){.huelle{padding:12px}}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);margin-bottom:14px}
.karte > h2{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gruen-dunkel);
  padding:10px 14px;border-bottom:1px solid var(--linie);background:var(--gruen-1);border-radius:var(--r) var(--r) 0 0;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.karte .inhalt{padding:14px}

label{display:block;font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:4px}
input,select,textarea{width:100%;max-width:100%;font:inherit;font-size:15px;color:var(--text);
  background:var(--feld);border:1px solid var(--linie);border-radius:var(--r);padding:9px 10px;min-height:42px}
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234C5B50' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
img,table,pre{max-width:100%}
.huelle,.karte,.inhalt{min-width:0}
textarea{min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gruen);outline-offset:-1px;background:#fff}
input:disabled,select:disabled,textarea:disabled{background:#ECEFEC;color:#6B776D;cursor:not-allowed}
.zeile{display:grid;gap:10px;margin-bottom:12px;min-width:0}
.zeile > div{min-width:0}
.z2{grid-template-columns:1fr 1fr}
.z3{grid-template-columns:1fr 1fr 1fr}
.z311{grid-template-columns:.7fr 1.6fr .7fr}
@media (max-width:640px){.z2,.z3,.z311{grid-template-columns:1fr}}
.hinweis{font-size:12px;color:var(--text-3);margin:-6px 0 12px}
.merk{font-size:13px;color:var(--text-2);margin:0 0 10px}

.knopf{appearance:none;font:inherit;font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--linie);
  background:#fff;color:var(--text);padding:10px 14px;border-radius:var(--r);min-height:44px}
.knopf:hover{border-color:var(--gruen-dunkel)}
.knopf.haupt{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);color:#fff}
.knopf.haupt:hover{background:#325732}
.knopf.warn{background:#8A5A00;border-color:#8A5A00;color:#fff}
.knopf.leise{background:transparent;color:var(--text-2)}
.knopf.klein{padding:5px 9px;font-size:12.5px;min-height:32px}
.knopf:disabled{opacity:.42;cursor:not-allowed}
.knopfzeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center;max-width:100%}
.knopf{max-width:100%}
@media (max-width:560px){ .knopfzeile > .knopf{flex:1 1 100%} }

.warnkasten{background:#FDF3E3;border:1px solid #E7D3A9;color:#7A5A18;padding:10px 12px;border-radius:var(--r);font-size:13px;margin-bottom:12px}
.stopkasten{background:#FBE9E9;border:1px solid #EBC4C4;color:#8C2226;padding:10px 12px;border-radius:var(--r);font-size:13px;margin-bottom:12px}
.gutkasten{background:var(--gruen-1);border:1px solid var(--gruen-2);color:var(--gruen-dunkel);padding:10px 12px;border-radius:var(--r);font-size:13px;margin-bottom:12px}
.leer{color:var(--text-3);font-size:13px;padding:16px 0;text-align:center}

table.liste{width:100%;border-collapse:collapse;font-size:13px}
table.liste th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);
  font-weight:700;border-bottom:1px solid var(--linie);padding:0 6px 6px}
table.liste td{padding:8px 6px;border-bottom:1px solid #EDF2ED;vertical-align:top}
table.liste td.r,table.liste th.r{text-align:right}
.tabellenrahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}

.schatten{position:fixed;inset:0;background:rgba(14,28,13,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:90}
.schatten[hidden]{display:none}
.dialog{background:#fff;border-radius:6px;max-width:600px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.dialog h3{margin:0;padding:14px 18px;font-size:15px;background:var(--gruen);color:#0E1C0D;border-radius:6px 6px 0 0}
.dialog .dtext{padding:16px 18px;font-size:14px;white-space:pre-line}
.dialog .dfelder{padding:0 18px 6px}
.dialog .dknoepfe{padding:12px 18px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.wahl{display:block;border:1px solid var(--linie);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;cursor:pointer;font-size:14px}
.wahl input{width:auto;min-height:0;margin-right:8px}

/* Kacheln der Shell */
/* Reiter in den Werkzeugen: auch unangeklickt sichtbar getrennt */
.reiter{display:flex;flex-wrap:wrap;gap:6px;padding:8px 8px 0;border-bottom:1px solid var(--linie);
  background:var(--gruen-1);border-radius:var(--r) var(--r) 0 0}
.reiter button{appearance:none;border:1px solid var(--linie);border-bottom:0;background:#fff;
  padding:10px 14px;cursor:pointer;font:inherit;font-size:13px;font-weight:500;color:var(--text-2);
  border-radius:var(--r) var(--r) 0 0;min-height:42px;margin-bottom:-1px}
.reiter button:hover{color:var(--gruen-dunkel)}
.reiter button[aria-selected="true"]{color:var(--gruen-dunkel);font-weight:700;
  border-color:var(--gruen);border-top:3px solid var(--gruen);background:#fff}
.reiter button:focus-visible{outline:2px solid var(--gruen-dunkel);outline-offset:-2px}

/* Aufklappbare Bereiche */
details.block{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);margin-bottom:14px}
details.block[hidden]{display:none}
details.block > summary{list-style:none;cursor:pointer;padding:12px 14px;background:var(--gruen-1);
  border-radius:var(--r);display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gruen-dunkel)}
details.block > summary::-webkit-details-marker{display:none}
details.block[open] > summary{border-bottom:1px solid var(--linie);border-radius:var(--r) var(--r) 0 0}
details.block > summary .pf{transition:transform .15s;font-size:13px;line-height:1}
details.block[open] > summary .pf{transform:rotate(90deg)}
details.block > summary .zusatz{margin-left:auto;font-size:11px;font-weight:500;text-transform:none;
  letter-spacing:0;color:var(--text-3)}
details.block > .inhalt{padding:14px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.kachel{display:block;background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:16px;
  text-decoration:none;color:inherit}
.kachel:hover{border-color:var(--gruen-dunkel);box-shadow:0 4px 14px rgba(20,40,20,.08)}
.kachel h3{margin:0 0 5px;font-size:15px;color:var(--gruen-dunkel)}
.kachel p{margin:0;font-size:13px;color:var(--text-2)}
.kachel.gesperrt{opacity:.55;pointer-events:none}
.etikett{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:2px;background:var(--gruen-1);color:var(--gruen-dunkel);border:1px solid var(--gruen-2);margin-left:6px}
.etikett.rot{background:#FBE9E9;color:#8C2226;border-color:#EBC4C4}

/* Profilfelder */
.feld{display:grid;grid-template-columns:230px 1fr auto;gap:10px;align-items:start;
  padding:9px 0;border-bottom:1px solid #EDF2ED}
@media (max-width:700px){.feld{grid-template-columns:1fr}}
.feld > .bez{font-size:13px;color:var(--text-2);padding-top:10px}
.feld > .bez small{display:block;font-size:11px;color:var(--text-3)}
.feld > .werkzeug{display:flex;gap:6px;align-items:center;padding-top:6px}
.uhr{appearance:none;border:1px solid var(--linie);background:#fff;border-radius:var(--r);
  width:30px;height:30px;cursor:pointer;font-size:13px;line-height:1;color:var(--text-2)}
.uhr:hover{border-color:var(--gruen-dunkel)}
.zeitraum{border:1px solid var(--linie);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;font-size:13px;background:var(--feld)}
.zeitraum b{color:var(--gruen-dunkel)}
.zeitraum.alt{opacity:.6}