/* J+G Personal: bewusst an das helle, anthrazitfarbene Design der Angebots-App angepasst. */
.personal-page{--p-ink:#111827;--p-muted:#6b7280;--p-line:#e5e7eb;--p-soft:#f9fafb;--p-primary:#111827;max-width:1120px;margin:0 auto;padding:0 0 32px;color:var(--p-ink)}
.personal-page *{box-sizing:border-box}
.personal-title{padding:2px 0 17px}
.personal-title h2{font-size:clamp(23px,3.4vw,28px);letter-spacing:-.03em;line-height:1.15;margin:3px 0 5px;color:var(--p-ink)}
.personal-title p{font-size:13px;color:var(--p-muted);margin:0;line-height:1.4}
.personal-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:850;text-transform:uppercase;color:#64748b}
.personal-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#f1f3f6;border:1px solid #e7e9ed;border-radius:14px;padding:4px;margin:0 0 18px}
.personal-tab{font:inherit;font-size:13px;font-weight:750;white-space:nowrap;min-width:0;padding:12px 7px;min-height:44px;border:0;background:transparent;color:#64748b;border-radius:10px;cursor:pointer}
.personal-tab.active{background:white;color:#111827;box-shadow:0 1px 5px rgba(17,24,39,.10)}
.personal-tab:hover:not(.active){color:#111827;background:#e8ebef}
.personal-view{min-width:0;animation:personal-in .15s ease-out}
@keyframes personal-in{from{opacity:.65}to{opacity:1}}
.personal-welcome,.personal-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 17px}
.personal-welcome h3,.personal-section-heading h3{margin:0 0 4px;font-size:19px;letter-spacing:-.025em;line-height:1.2}
.personal-welcome p,.personal-section-heading p{margin:0;font-size:13px;color:var(--p-muted);line-height:1.4}
.personal-page .btn.personal-primary{background:#111827;color:#fff;border:1px solid #111827;box-shadow:none;font-weight:800}
.personal-page .btn.personal-primary:hover{background:#273346;color:#fff}
.personal-page .btn.secondary{background:#fff;color:#111827;border:1px solid #dce1e8;box-shadow:none}
.personal-page .btn.ghost{background:#f3f4f6;color:#374151;border:1px solid transparent}
.personal-page .btn.small{font-size:12px;font-weight:750;padding:7px 11px;min-height:36px;border-radius:10px}
.personal-page .btn:disabled{opacity:.45;cursor:not-allowed}
.personal-page button:focus-visible,.personal-page input:focus-visible,.personal-page select:focus-visible{outline:3px solid #c5d5ef;outline-offset:2px}
.personal-panel{background:#fff;border:1px solid var(--p-line);border-radius:15px;padding:19px;margin:0 0 14px;min-width:0}
.personal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.personal-head h3{font-size:16px;font-weight:850;letter-spacing:-.015em;margin:0 0 3px;color:var(--p-ink)}
.personal-head p{margin:0;color:var(--p-muted);font-size:12px;line-height:1.4}
.personal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.personal-stat{border:1px solid var(--p-line);background:white;border-radius:14px;padding:15px 14px;min-width:0}
.personal-stat span{display:block;font-size:12px;font-weight:650;line-height:1.3;color:var(--p-muted)}
.personal-stat strong{display:block;margin-top:8px;font-size:clamp(21px,2.5vw,28px);font-weight:850;line-height:1.15;color:var(--p-ink);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.personal-quick{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f9fafb;border:1px solid var(--p-line);border-radius:14px;padding:17px;margin-top:14px}
.personal-quick>div{display:flex;flex-direction:column;gap:3px}
.personal-quick strong{font-size:14px}
.personal-quick span{font-size:12px;color:var(--p-muted)}
.personal-filters{display:grid;grid-template-columns:minmax(195px,1fr) minmax(170px,1.4fr);align-items:end;gap:12px;margin-bottom:14px}
.personal-filters label,.personal-field-grid label{display:block;margin:0 0 6px;font-size:12px;font-weight:750;color:#374151}
.personal-optional{font-weight:500;color:#9ca3af}
.personal-field-grid input,.personal-field-grid select,.personal-filters input,.personal-filters select{width:100%;max-width:100%;min-width:0;min-height:46px;border:1px solid #d6dce4;background:white;border-radius:11px;padding:9px 11px;color:#111827;font-size:16px;font-weight:500}
.personal-month-control{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:4px;align-items:center}
.personal-month-control input{padding:9px 6px;font-size:14px;min-width:0;text-align:center}
.personal-arrow{border:1px solid #d6dce4;background:white;border-radius:10px;height:46px;color:#111827;font-weight:800;font-size:24px;display:grid;place-items:center;cursor:pointer}
.personal-arrow:hover{background:#f9fafb}
.personal-inline-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 15px;border:1px solid var(--p-line);background:#f9fafb;border-radius:13px;margin:0 0 14px}
.personal-inline-summary strong{font-size:19px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.personal-inline-summary span{font-size:12px;color:var(--p-muted);flex:1}
.personal-employees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.personal-employee-card{background:white;border:1px solid var(--p-line);border-radius:14px;padding:15px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:9px;align-items:center;min-width:0}
.personal-employee-card.is-inactive{background:#fcfcfd}
.personal-person-icon{width:42px;height:42px;border-radius:12px;background:#f1f3f6;color:#374151;font-size:17px;font-weight:850;display:grid;place-items:center}
.personal-person-main{min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.personal-person-main strong{font-size:14px;line-height:1.3;color:#111827}
.personal-person-main span,.personal-person-main small{font-size:12px;color:var(--p-muted);line-height:1.3}
.personal-status{font-size:11px;font-weight:750;border-radius:999px;background:#f0f2f5;color:#374151;padding:5px 9px;white-space:nowrap}
.personal-status.personal-inactive{color:#8a8e97;background:#f5f5f5}
.personal-person-actions{grid-column:1/-1;display:flex;gap:7px;padding-top:11px;margin-top:2px;border-top:1px solid #f1f2f4}
.personal-person-actions .btn{flex:1;min-width:0}
.personal-time-list{display:flex;flex-direction:column;gap:0}
.personal-time-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(150px,1.2fr) auto;align-items:center;gap:14px;border-top:1px solid #eceff2;padding:14px 0;min-width:0}
.personal-time-row:first-child{border-top:0;padding-top:5px}
.personal-time-row:last-child{padding-bottom:2px}
.personal-time-date,.personal-time-detail{display:flex;flex-direction:column;gap:4px;min-width:0}
.personal-time-date strong{font-size:13px;font-weight:800}
.personal-time-date span,.personal-time-detail span,.personal-time-detail small{font-size:12px;color:var(--p-muted);line-height:1.35;overflow-wrap:anywhere}
.personal-time-detail strong{font-size:16px;font-weight:850;font-variant-numeric:tabular-nums}
.personal-time-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.personal-editor{border-color:#bac6d7;box-shadow:0 3px 12px rgba(17,24,39,.035);scroll-margin-top:16px}
.personal-form{display:flex;flex-direction:column;gap:16px}
.personal-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.personal-field-grid>div{min-width:0}
.personal-span-two{grid-column:1/-1}
.personal-form-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:3px}
.personal-form-actions .btn{min-height:46px}
.personal-time-result{display:flex;gap:5px 12px;flex-wrap:wrap;align-items:baseline;background:#f5f7fa;border:1px solid #e6eaf0;border-radius:12px;padding:13px 15px}
.personal-time-result>span{font-size:12px;color:#64748b}
.personal-time-result>strong{font-size:18px;color:#111827;font-variant-numeric:tabular-nums}
.personal-time-result>small{font-size:12px;color:#64748b}
.personal-time-result .personal-warning{flex-basis:100%;color:#9a6700;line-height:1.4}
.personal-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#6b7280;font-size:13px;line-height:1.5;padding:24px 15px;border:1px dashed #d5dbe4;border-radius:13px;background:#fbfcfd}
.personal-empty strong{font-size:14px;color:#111827}
.personal-empty .btn{margin-top:5px}
.personal-alert,.personal-success,.personal-loading{border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45;margin:0 0 14px}
.personal-alert{color:#8b2833;background:#fff4f5;border:1px solid #efd8dc}
.personal-success{background:#eff3f8;color:#243348;border:1px solid #d7e0ec}
.personal-loading{background:#f3f5f8;color:#40506a;border:1px solid #e0e6ee}
.personal-footnote{font-size:11px;color:#8b9099;line-height:1.55;margin:17px 2px 0}
@media(max-width:840px){
 .personal-employees{grid-template-columns:1fr}
 .personal-time-row{grid-template-columns:minmax(92px,.8fr) minmax(150px,1.2fr)}
 .personal-time-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:650px){
 .personal-title{padding:0 0 14px}
 .personal-tabs{margin-bottom:18px}
 .personal-welcome,.personal-section-heading{align-items:flex-start;gap:10px}
 .personal-welcome .btn,.personal-section-heading .btn{flex:0 0 auto;max-width:47%;font-size:12px;min-height:42px;padding:9px 11px;white-space:normal;text-align:center}
 .personal-welcome h3,.personal-section-heading h3{font-size:17px}
 .personal-welcome p,.personal-section-heading p{font-size:12px}
 .personal-filters{grid-template-columns:1fr;gap:11px}
 .personal-stats{gap:6px}
 .personal-stat{padding:12px 8px;border-radius:11px}
 .personal-stat strong{font-size:18px;margin-top:9px}
 .personal-stat span{font-size:10px;min-height:26px}
 .personal-panel{padding:15px 13px;border-radius:13px}
 .personal-head{gap:9px;align-items:flex-start}
 .personal-head .btn{font-size:11px}
 .personal-field-grid{grid-template-columns:1fr;gap:13px}
 .personal-span-two{grid-column:auto}
 .personal-form-actions{display:grid;grid-template-columns:1fr}
 .personal-form-actions .btn{width:100%}
 .personal-employee-card{padding:13px}
 .personal-time-row{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
 .personal-time-detail{text-align:right}
 .personal-time-actions{grid-column:1/-1;justify-content:stretch;padding-top:4px}
 .personal-time-actions .btn{flex:1}
 .personal-inline-summary{gap:6px 10px}
 .personal-inline-summary .btn{width:100%;margin-top:6px}
 .personal-quick{align-items:flex-start;flex-direction:column}
 .personal-quick .btn{width:100%}
}
@media(max-width:380px){
 .personal-tabs{padding:3px;gap:2px}
 .personal-tab{font-size:12px;padding:10px 3px}
 .personal-status{grid-column:2/4;justify-self:start}
 .personal-employee-card{grid-template-columns:38px minmax(0,1fr)}
 .personal-person-icon{width:38px;height:38px}
}