/* ============================================================
   Ingenieurbüro Bromberger — Leistungsnachweisapp · Stile
   ============================================================

   Aufbau:
   1. Steffens Stile der lokalen App 1.4.0 (static/style.css), unverändert
      bis auf die Farbe: jede Petrol-Farbe ist auf den Farbwinkel von
      Bromberger-Blau (#235a81, OKLCH 0.450 0.086 243) gedreht, Helligkeit
      und Sättigung blieben. Steffens Akzent lag bei OKLCH 0.445 0.085 205 —
      gleiche Helligkeit, gleiche Sättigung, nur ein anderer Farbwinkel.
      Die Helligkeitstreppe und damit die Kontraste bleiben so, wie er sie
      angelegt hat. Geprüft von tools/leistungsnachweisapp-tests/oberflaeche.test.cjs.
   2. Ergänzungen der Web-Fassung (Anmeldung, App-Reiter, Admin-Tab)
   3. App-Wechsler — ab der Markerzeile bytegleich mit den anderen Apps.

   Die Tokens stehen in design-tokens.css, die Schriften in fonts.css.
   ============================================================ */

:root{--ink:#24333e;--muted:#74818b;--border:#e2e8ec;--paper:#fff;--canvas:#f5f7f8;--teal:#34678d;--teal-dark:#264e6c;--teal-light:#ebf3fa;--red:#a74237;--amber:#976822;--shadow:0 3px 18px #22384906}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--canvas);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px;line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}input,select,textarea{color:var(--ink);background:#fff;border:1px solid #ccd6dc;border-radius:5px;min-height:36px;padding:7px 10px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 2px #0e716d15}button:focus-visible,a:focus-visible{outline:3px solid #76a3c7;outline-offset:2px}input[type=checkbox]{min-height:auto;accent-color:var(--teal)}input[type=search]::-webkit-search-cancel-button{cursor:pointer}h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.3;letter-spacing:-.8px;font-weight:650}h2{font-size:16px;font-weight:650}h3{font-size:14px;font-weight:650}.muted{color:var(--muted)}.inline{display:flex;align-items:center;gap:8px}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-50px;left:20px;padding:10px;background:#fff;z-index:100}.skip-link:focus{top:10px}.app-header{height:78px;background:var(--paper);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:20px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{font-weight:750;font-size:24px;line-height:1;display:grid;place-content:center;background:var(--teal);color:#fff;width:41px;height:41px;border-radius:10px;position:relative;letter-spacing:-1px}.brand-mark span{position:absolute;font-size:31px;right:9px;bottom:6px;color:#98ccf7}.brand strong{font-size:16px;letter-spacing:-.25px;display:block}.brand-sub{font-size:12px;color:var(--muted);display:block;margin-top:1px}.local-badge{margin-left:13px;padding:4px 8px;color:#586e80;font-size:12px;letter-spacing:.2px;border:1px solid #e2eaf0;border-radius:20px;background:#f8fbfd;white-space:nowrap}.local-badge i{display:inline-block;width:5px;height:5px;background:#709fc4;border-radius:50%;margin-right:4px;vertical-align:middle}.header-actions{display:flex;align-items:center;gap:16px}.save-status{font-size:12px;color:#70808d;white-space:nowrap}.save-status:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#6b98bb;margin-right:6px}.save-status.pending{color:var(--amber)}.save-status.pending:before{background:#c99b50}.save-status.error{color:var(--red)}.save-status.error:before{background:var(--red)}.button{min-height:34px;display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:5px;padding:7px 12px;font-size:12px;font-weight:550;text-decoration:none;line-height:1.4;background:#fff;color:var(--ink);white-space:nowrap}.button.primary{background:var(--teal);color:white;border-color:var(--teal)}.button.primary:hover{background:var(--teal-dark)}.button.secondary{border-color:#d7dee5;background:#fff}.button.secondary:hover{background:#f7faf9;border-color:#b1c4d4}.button.subtle{background:transparent;color:#627480}.button.subtle:hover{background:#eef1f4;color:var(--ink)}.button.danger{color:var(--red);border-color:#e6cbc7;background:#fff8f7}.button.small{font-size:12px;min-height:29px;padding:4px 7px}.icon-button{background:#fff;border:1px solid #d7e0e5;border-radius:5px;color:#61747d;min-width:34px;height:35px;font-size:23px;line-height:1}.icon-button:hover{background:#eff5fa;border-color:#abc3d7}main{max-width:1920px;margin:auto;padding:30px 36px}.eyebrow{font-size:12px;letter-spacing:1.65px;color:#687e8f;font-weight:700;margin-bottom:8px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:27px}.page-heading p{font-size:12px;color:var(--muted);margin-top:6px}.person-controls label{font-size:12px;font-weight:600;display:block;color:#73828b;margin-bottom:4px}.person-controls select{width:218px;font-weight:550;font-size:12px}.week-controls{display:flex;justify-content:space-between;gap:16px;margin-bottom:19px}.week-controls input[type=week]{width:155px;font-weight:600;font-size:12px;border:none;background:transparent}.filter-input{width:245px;background:#fdfefe;font-size:12px}.day-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:23px;background:#eaeef1;padding:5px;border-radius:8px}.day-tab{display:flex;justify-content:space-between;align-items:center;border:none;border-radius:5px;padding:11px 13px;background:transparent;color:#657783;text-align:left;min-height:61px}.day-tab:hover{background:#f6f9f8}.day-tab.active{background:#fff;box-shadow:0 2px 7px #1b474611;color:var(--ink)}.day-tab .day-name{font-weight:600;font-size:12px;display:block}.day-tab .day-date{font-size:12px;display:block;margin-top:2px;color:#85929a}.day-tab .day-hours{font-variant-numeric:tabular-nums;font-weight:650;font-size:12px}.day-tab.active .day-hours{color:var(--teal)}.day-tab.today .day-name:after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--teal);margin-left:5px}.day-tab.has-errors .day-hours:after{content:" ·";color:var(--amber)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:23px;align-items:start}.entry-workspace{min-width:0}.sheet-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.sheet-toolbar>div:first-child{display:flex;gap:10px;align-items:baseline}.sheet-toolbar h2{font-size:15px}.sheet-toolbar .muted{font-size:12px}.sheet-toolbar .button{font-size:12px;padding:7px 9px}.table-scroll{overflow:auto;background:#fff;border:1px solid var(--border);border-bottom:none;border-radius:6px 6px 0 0;min-height:97px;scrollbar-width:thin;scrollbar-color:#c2ccd5 #f4f7f7}table{border-collapse:collapse;width:100%;min-width:1064px;table-layout:fixed;text-align:left}.col-index{width:31px}.col-company{width:142px}.col-project{width:126px}.col-description{width:226px}.col-service{width:87px}.col-location{width:105px}.col-time{width:66px}.col-duration{width:66px}.col-actions{width:91px}thead{background:#f8fafb}th{padding:11px 8px;font-size:12px;font-weight:600;color:#75828d;border-bottom:1px solid #dce4e8;white-space:nowrap}th:first-child{text-align:center;color:#9aa7ad}td{border-bottom:1px solid #e9edf0;padding:0;height:53px;vertical-align:top;background:#fff}tr.active-row td{background:#fdfeff}tr.active-row td:first-child{box-shadow:inset 3px 0 var(--teal)}td+td{border-left:1px solid #f0f3f4}td.row-number{color:#9aa6ad;font-size:12px;text-align:center;padding-top:15px;vertical-align:top}td input,td select,td textarea{width:100%;border:1px solid transparent;background:transparent;border-radius:0;min-height:52px;padding:10px 7px;font-size:12px;box-shadow:none!important}td input:focus,td select:focus,td textarea:focus{background:#fff;border:1px solid var(--teal);border-radius:2px}td input[readonly]{cursor:pointer;color:#516973}td input::placeholder,td textarea::placeholder{color:#a0acb3}td select{padding-left:3px;padding-right:1px;font-size:12px}td textarea{resize:vertical;line-height:1.55;display:block;height:53px;min-height:53px}td.time-cell input{text-align:center;font-variant-numeric:tabular-nums;padding-left:2px;padding-right:2px}td.duration-cell input{font-weight:650;color:#3b586f}td .project-code{font-size:12px;position:relative;display:block;padding:0 6px 5px;margin-top:-8px;color:#83929e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}td.project-cell input{padding-bottom:12px}td .row-tools{display:flex;gap:1px;align-items:center;justify-content:center;height:52px}td .row-action{border:0;background:transparent;font-size:15px;padding:3px;color:#8e99a2;border-radius:3px;min-width:24px;min-height:28px}td .row-action:hover{background:#eaf1f8;color:#416886}td .row-action.delete:hover{color:var(--red);background:#fff0eb}.row-errors td{height:auto;background:#fffaf2!important;color:var(--amber);font-size:12px;padding:5px 10px;border-top:none;line-height:1.5}.row-errors td span{margin-right:10px}.error-row td.row-number{color:#b57c31;font-weight:700}.absent-row td{background:#fbf9f5}.absent-row .description-input{color:#827555}.cell-disabled{display:block;color:#b4bbc0;padding:15px 7px;font-size:12px}.empty-state{background:#fff;border-left:1px solid var(--border);border-right:1px solid var(--border);padding:42px 20px;text-align:center}.empty-symbol{margin:0 auto 12px;width:40px;height:40px;display:grid;place-content:center;border-radius:10px;background:#f0f5f9;color:#85a0b7;font-size:27px}.empty-state h3{font-size:15px;margin-bottom:7px}.empty-state p{font-size:12px;color:#89969c;line-height:1.7;margin-bottom:17px}.add-row{display:flex;gap:12px;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px;font-size:12px;font-weight:550;color:var(--teal);background:#fff;border:1px solid var(--border);border-top:1px dashed #e1e7ec;border-radius:0}.add-row:hover{background:#f6fafe}.add-row span{font-size:12px;font-weight:400;color:#9ca7ac;border:1px solid #e4e8ec;border-radius:3px;padding:1px 4px}.sheet-footer{background:#f1f5f8;border:1px solid #e0e7ee;border-top:0;border-radius:0 0 6px 6px;display:flex;align-items:center;justify-content:space-between;padding:12px 15px;gap:12px}.footer-label{font-size:12px;letter-spacing:1px;color:#6f879b;font-weight:650}.sheet-footer strong{font-size:15px;font-variant-numeric:tabular-nums;color:#3d607b}.sheet-footer .muted{font-size:12px}.quarter-note{font-size:12px;color:#8c9ba7}.week-summary{display:flex;align-items:center;gap:27px;margin-top:20px;padding:16px 2px;border-bottom:1px solid var(--border)}.week-summary>div{display:flex;align-items:baseline;gap:7px}.summary-label{font-size:12px;color:#5a6f7b;font-weight:600;margin-right:5px}.week-summary strong{font-size:15px;font-variant-numeric:tabular-nums}.week-summary .muted{font-size:12px}.week-summary button{margin-left:auto;font-size:12px}.privacy-note{margin-top:15px;color:#98a4ab;font-size:12px;display:flex;gap:6px;align-items:center}.privacy-note span{font-size:12px;color:#91acc2}.suggestions-panel{background:#fff;border:1px solid var(--border);border-radius:7px;padding:19px;box-shadow:var(--shadow);position:sticky;top:19px;max-height:calc(100vh - 40px);overflow:auto;scrollbar-width:thin}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading .eyebrow{font-size:12px;letter-spacing:1.1px}.panel-dot{width:6px;height:6px;background:#9bb5ca;border-radius:50%;margin-bottom:8px}.suggestions-panel h2{font-size:16px;letter-spacing:-.25px}.panel-hint{color:#93a0a8;font-size:12px;margin-top:7px;line-height:1.6}.panel-search{width:100%;font-size:12px;margin:13px 0 5px;min-height:33px;background:#fafcfc}.suggestion-list{margin-top:12px;display:flex;flex-direction:column;gap:5px}.suggestion{display:flex;align-items:center;border:1px solid #eef0f3;border-radius:5px;background:#fff;position:relative}.suggestion:hover,.suggestion.selected{border-color:#c1d3e3;background:#f8fbfe}.suggestion-main{background:transparent;border:0;display:block;text-align:left;width:100%;padding:10px;color:var(--ink)}.suggestion strong{display:block;font-size:12px;font-weight:550;line-height:1.45}.suggestion small{display:block;font-size:12px;color:#949fa8;margin-top:4px}.suggestion-pin{border:0;background:transparent;color:#acb6be;font-size:14px;align-self:stretch;padding:6px 9px}.suggestion-pin.pinned{color:#c69a44}.suggestion-empty{font-size:12px;color:#8d9ba3;line-height:1.7;padding:10px 0}.panel-divider{height:1px;background:#eaeff3;margin:20px 0 16px}.templates-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.templates-heading h3{font-size:12px}.template-item{display:flex;align-items:center;gap:4px;padding:3px 0}.template-use{background:transparent;border:0;color:#697c8b;padding:7px 0;text-align:left;font-size:12px;flex:1;line-height:1.5}.template-use:hover{color:var(--teal)}.template-delete{border:0;background:transparent;color:#bbc2c7;font-size:16px;padding:4px}.template-delete:hover{color:var(--red)}.panel-footnote{font-size:12px;line-height:1.6;color:#a1abb3;margin-top:12px}.validation-banner{border:1px solid #edddbd;background:#fffaf0;border-radius:5px;color:#89672e;font-size:12px;padding:10px 12px;margin-bottom:10px;display:flex;gap:10px;align-items:center;justify-content:space-between}.validation-banner button{color:#89672e;font-size:12px}.connection-error{background:#fff0eb;border:1px solid #e8bdb5;color:#954d43;padding:12px 15px;border-radius:5px;margin-bottom:20px;line-height:1.65}.connection-error button{margin-left:10px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;max-width:calc(100% - 30px);padding:12px 19px;border-radius:7px;background:#293b4a;color:#fff;font-size:12px;box-shadow:0 5px 25px #102a3c22;line-height:1.6}.toast.error{background:#7e3934}dialog{border:1px solid #dce3e8;padding:0;border-radius:10px;width:min(700px,calc(100vw - 30px));max-height:calc(100vh - 50px);color:var(--ink);box-shadow:0 20px 80px #163a3440}dialog::backdrop{background:#253b425c;backdrop-filter:blur(2px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:19px 23px;position:sticky;top:0;background:#fff;z-index:1}.dialog-heading h2{font-size:18px}.dialog-heading .icon-button{border:0;background:#f4f7f6;width:30px;height:30px;min-width:30px}#dialog-body{padding:22px 24px}.dialog-intro{font-size:12px;line-height:1.7;color:#778991;margin-bottom:19px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}.form-field{display:flex;flex-direction:column;gap:5px}.form-field label{font-size:12px;font-weight:600;color:#667684}.form-field small{font-size:12px;color:#8e9ba2}.form-field textarea{min-height:77px;resize:vertical}.form-field input,.form-field select,.form-field textarea{font-size:12px;max-width:100%}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px;border-top:1px solid #eceff2;padding-top:16px}.section-title{font-size:12px;margin:22px 0 9px}.data-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.data-action{border:1px solid #e0e7ec;background:#fbfdfc;padding:16px;border-radius:6px;text-align:left}.data-action strong{font-size:12px;display:block}.data-action small{font-size:12px;color:#8e9aa3;line-height:1.55;display:block;margin-top:5px}.data-action:hover{border-color:#acc5d9;background:#f2f8fd}.help-list{margin:12px 0;padding-left:19px;color:#697987;font-size:12px;line-height:1.9}.help-list li{margin-bottom:7px}.master-tabs{display:flex;gap:5px;margin-bottom:18px}.master-tabs button{flex:1}.master-list{max-height:240px;overflow:auto;margin:12px 0;border:1px solid var(--border);border-radius:5px}.master-row{padding:10px 12px;border-bottom:1px solid #eef1f2;display:flex;align-items:center;gap:10px}.master-row:last-child{border-bottom:0}.master-row>div{flex:1}.master-row strong{font-size:12px;display:block}.master-row small{font-size:12px;color:#81919a;display:block}.preview-box{background:#f5f8f7;border:1px solid #dde5ec;border-radius:5px;padding:12px;font-size:12px;line-height:1.8;margin-top:15px;max-height:260px;overflow:auto;white-space:pre-wrap}.preview-box.error{color:#975343;background:#fff7f3;border-color:#edd2c7}.checklist{list-style:none;padding:0;font-size:12px;line-height:1.8}.checklist li{margin:5px 0}.info-box{border:1px solid #d7e3ee;border-radius:5px;padding:12px;margin-top:15px;background:#f5f9fd;color:#687d8e;font-size:12px;line-height:1.7}.week-error-item{padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}.week-error-item strong{display:block;color:#7b6950;margin-bottom:3px}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:12px}.disabled-note{font-size:12px;color:#9da9b2;font-style:italic}.mobile-hint{display:none}
@media(min-width:1700px){.col-description{width:300px}.col-company{width:170px}.col-project{width:145px}.col-location{width:125px}td input,td textarea{font-size:12px}td select{font-size:12px}th{font-size:12px}.workspace{grid-template-columns:minmax(0,1fr) 302px}.sheet-toolbar .button{font-size:12px}}
@media(max-width:1200px){main{padding:25px 22px}.app-header{padding:0 22px}.workspace{grid-template-columns:minmax(0,1fr) 247px;gap:16px}.suggestions-panel{padding:15px}.week-summary{gap:14px;flex-wrap:wrap}.week-summary>div{gap:4px}.sheet-toolbar>div:first-child{display:block}.sheet-toolbar .button{font-size:12px;padding:6px}.quarter-note{font-size:12px}.sheet-toolbar .inline{gap:4px}.local-badge{display:none}.day-tab{padding:10px}.day-tab .day-hours{font-size:12px}.filter-input{width:205px}}
@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1fr)}.suggestions-panel{position:static;max-height:none;display:block}.suggestion-list{display:grid;grid-template-columns:repeat(3,1fr)}.suggestions-panel #suggestion-search-wrap{max-width:360px}.panel-divider{margin:14px 0}.templates-heading{max-width:360px}#template-list{display:flex;gap:20px;flex-wrap:wrap}.template-item{min-width:170px;max-width:300px}.panel-footnote{margin-top:5px}.day-tab{padding:9px 8px}.day-tab .day-hours{font-size:12px}.header-actions{gap:8px}.brand-sub{display:none}.app-header{height:68px}.week-controls{gap:8px}.filter-input{width:170px}.week-controls .inline{gap:4px}.button{font-size:12px;padding:7px 9px}.save-status{font-size:12px}}
@media(max-width:680px){main{padding:22px 12px}.app-header{padding:0 13px;gap:8px}.brand-mark{width:32px;height:34px;font-size:20px;border-radius:7px}.brand-mark span{right:5px;bottom:4px;font-size:27px}.brand{gap:8px}.brand strong{font-size:12px}.header-actions .subtle{display:none}.header-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.header-actions .button{font-size:12px}.save-status{font-size:12px;width:100%;text-align:right}.page-heading{align-items:flex-start;gap:10px;margin-bottom:19px}h1{font-size:23px}.page-heading p{font-size:12px;max-width:210px}.person-controls select{width:142px;font-size:12px;padding:5px}.person-controls .icon-button{min-width:28px;width:28px}.person-controls .inline{gap:3px}.eyebrow{font-size:12px}.week-controls{flex-direction:column;gap:11px}.week-controls>.inline{justify-content:space-between}.week-controls input[type=week]{width:165px}.filter-input{width:auto;flex:1;min-width:100px}.day-tabs{gap:2px;padding:3px;margin-bottom:17px}.day-tab{display:block;text-align:center;min-height:69px;padding:7px 3px}.day-tab .day-name{font-size:12px}.day-tab .day-date{font-size:12px}.day-tab .day-hours{display:block;font-size:12px;margin-top:3px}.sheet-toolbar{flex-wrap:wrap;align-items:center}.sheet-toolbar>div:first-child{display:flex}.sheet-toolbar h2{font-size:14px}.sheet-toolbar .inline{margin-left:auto}.sheet-footer{padding:10px;flex-wrap:wrap}.quarter-note{display:none}.week-summary{gap:12px;margin-top:13px}.week-summary strong{font-size:13px}.summary-label{width:100%;display:block}.week-summary>div{flex-wrap:wrap;max-width:35%}.week-summary .button{margin-left:0}.privacy-note{font-size:12px}.suggestion-list{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.data-actions{grid-template-columns:1fr}#dialog-body{padding:18px}.dialog-heading{padding:15px 18px}.dialog-heading h2{font-size:16px}.dialog-actions{flex-wrap:wrap}.local-badge{display:none}.panel-heading .eyebrow{font-size:12px}}
@media print{.app-header,.week-controls,.day-tabs,.suggestions-panel,.sheet-toolbar .inline,.add-row,.privacy-note,.header-actions,.col-actions,td:last-child,th:last-child,.week-summary button{display:none!important}main{padding:0}body{background:#fff}.workspace{display:block}.table-scroll{overflow:visible}table{min-width:0;font-size:12px}input,select,textarea{border:0!important;padding:5px!important;font-size:12px!important}td{height:auto}.col-description{width:170px}.page-heading{margin:10px 0}h1{font-size:20px}}

.no-top-margin{margin-top:0}.nested-row{padding-left:27px}.padded-empty{padding:15px}

/* Erfassung 1.1: Auswahl direkt am Feld; Dienst als zwei Schaltflächen. */
.service-buttons{display:flex;flex-direction:column;gap:3px;padding:6px 4px}.service-button{display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:4px 5px;min-height:27px;width:100%;border:1px solid #dde2e7;background:#f0f2f3;color:#819097;border-radius:4px;font-size:12px}.service-button img{opacity:.45}.service-button.selected{background:var(--teal-light);color:var(--teal-dark);border-color:#94b4cf;font-weight:650}.service-button.selected img{opacity:.8}.service-button:hover{border-color:var(--teal)}td input:disabled{background:#f2f4f5;color:#8b999f;opacity:1;cursor:not-allowed}.place-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.place-actions h3{font-size:12px}.week-actions{display:flex;gap:8px;margin-left:auto}.week-actions button{margin-left:0}.row-advice td{height:auto;background:#f3f7fb;padding:3px 10px;color:#5a7286;font-size:12px}.row-advice:not(:has(button)){display:none}.activity-tags{border:1px solid var(--border);border-radius:5px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.activity-tags legend{padding:0 5px;font-weight:600}.activity-tags .checkbox-label{font-size:12px}.suggestions-panel.field-picker{position:fixed;z-index:30;width:390px;box-shadow:0 8px 32px #24333e30;border-color:#9db9d0;margin:0}.field-picker .panel-divider,.field-picker .place-actions,.field-picker>.panel-footnote{display:none}.project-cell input{font-weight:650}td .project-code{white-space:normal;font-size:12px;margin-top:-7px;line-height:1.4}.suggestions-panel:not(.field-picker){width:auto!important}
@media(max-width:1450px){main{padding:24px 20px}.workspace{grid-template-columns:minmax(0,1fr)}.suggestions-panel:not(.field-picker){position:static;max-height:none;margin-top:18px}.suggestions-panel:not(.field-picker) .suggestion-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.week-summary{gap:15px;flex-wrap:wrap}}
@media(max-width:700px){.activity-tags{grid-template-columns:1fr}.week-actions{width:100%;margin-left:0}.service-button{font-size:12px}}

.suggestion-slot{min-width:0}

.version-tag{font-size:12px;color:var(--teal);font-weight:600;vertical-align:middle}

/* Erfassung 1.2 — Bromberger: lesbare Eingaben, ruhige Arbeitsflächen. */
:root{--ink:var(--bp-text);--muted:var(--bp-text-muted);--border:var(--bp-line);--paper:var(--bp-surface);--canvas:var(--bp-canvas);--teal:var(--bp-accent);--teal-dark:var(--bp-accent-hover);--teal-light:var(--bp-accent-quiet);--red:var(--bp-danger-text);--amber:var(--bp-signal-text)}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.55}h1,h2,h3,.brand strong{font-family:Archivo,system-ui,sans-serif;font-weight:700;color:var(--bp-text-strong)}h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}.brand-sub,.local-badge,.save-status,.eyebrow{font-size:12px}.brand strong{font-size:18px}.brand-mark{border-radius:6px}.app-header{height:auto;min-height:76px;padding:16px 24px}.header-actions{gap:12px}
main{padding:24px;max-width:1920px}.page-heading{margin-bottom:20px}.page-heading p{font-size:14px;color:var(--muted)}.person-controls label{font-size:14px;color:var(--ink)}.person-controls select{font-size:16px;width:260px}.workspace{display:block}.suggestion-slot{position:absolute;width:0;height:0}.suggestions-panel{box-shadow:none}.suggestions-panel.field-picker{border:0;box-shadow:var(--bp-elevation-popover);padding:16px;background:var(--paper);width:390px}.field-picker h2{font-size:22px}.panel-hint,.suggestion-empty,.panel-footnote{font-size:14px;color:var(--muted)}.suggestion strong{font-size:16px}.suggestion small{font-size:12px;color:var(--muted)}.suggestion-main{padding:12px}.panel-search{font-size:16px;min-height:44px}.field-picker .place-actions{display:flex}.field-picker .panel-footnote{display:block}.field-picker .panel-divider{display:block}
input,select,textarea{font-size:16px;min-height:44px;border-radius:6px;border-color:var(--bp-line-strong);color:var(--ink)}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--bp-focus);outline-offset:2px;box-shadow:none}.button,.button.small,.sheet-toolbar .button,.week-summary button,.header-actions .button{font-size:14px;min-height:44px;padding:8px 12px;border-radius:6px;font-weight:600}.button.secondary{border-color:var(--bp-line-strong)}.button.primary{background:var(--teal);color:var(--bp-on-accent)}.button.primary:hover{background:var(--teal-dark)}.icon-button{min-width:44px;min-height:44px;height:44px}.button.subtle{color:var(--muted)}.day-tabs{margin-bottom:16px;background:var(--bp-surface-active);border-radius:10px;gap:6px}.day-tab{min-height:72px;padding:10px}.day-tab.active{box-shadow:none;border:1px solid var(--bp-accent-line);background:var(--paper)}.day-tab .day-name,.day-tab .day-hours{font-size:14px}.day-tab .day-date{font-size:12px;color:var(--muted)}.day-tab{color:var(--ink)}.week-controls{flex-wrap:wrap}.week-controls input[type=week],.filter-input{font-size:16px}.filter-input{width:260px}
.sheet-toolbar{flex-wrap:wrap;align-items:center;gap:12px}.sheet-toolbar>div:first-child,.day-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.sheet-toolbar h2{font-size:22px}.sheet-toolbar .muted{font-size:12px;color:var(--muted)}.absence-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.view-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.view-mode{display:flex;gap:0}.view-mode button{border-radius:0}.view-mode button:first-child{border-radius:6px 0 0 6px}.view-mode button:last-child{border-radius:0 6px 6px 0}.view-mode button[aria-pressed=true]{background:var(--teal-light);border-color:var(--bp-accent-line);color:var(--bp-accent-text)}#undo-button{margin-left:auto}
table{min-width:1200px}.table-scroll{border-radius:10px 10px 0 0}.col-index{width:32px}.col-company{width:150px}.col-project{width:125px}.col-description{width:250px}.col-service{width:92px}.col-location{width:105px}.col-time{width:84px}.col-duration{width:84px}.col-actions{width:96px}thead{background:var(--bp-surface-sunken)}th{font-size:12px;color:var(--ink);padding:12px 7px}th:first-child{color:var(--muted)}td{height:auto;min-height:108px}td input,td select,td textarea{font-size:16px;min-height:96px;padding:10px 8px;color:var(--ink)}td textarea{height:auto;line-height:1.55;resize:vertical}td select{font-size:16px;padding-left:5px}td .project-code{font-size:12px;color:var(--muted);margin-top:0;padding:4px 8px 10px;line-height:1.45}td.project-cell input{min-height:52px;padding-bottom:5px}td .row-tools{height:auto;min-height:108px;flex-wrap:wrap;gap:0;padding-top:8px;align-content:start}td .row-action{font-size:22px;min-width:30px;min-height:40px;color:var(--muted)}td.row-number{font-size:12px;color:var(--muted);padding-top:14px}.company-picker{overflow:hidden}.cell-disabled{font-size:14px;color:var(--muted)}.row-errors td,.row-advice td{font-size:14px;line-height:1.6;padding:8px 12px}.row-errors td{color:var(--bp-signal-text);background:var(--bp-signal-quiet)!important}.row-errors td span{display:inline-block}.row-advice td{color:var(--ink);background:var(--teal-light)}.service-buttons{gap:6px;padding:8px 4px}.service-button,.service-button:hover{min-height:44px;font-size:14px;padding:6px 4px;border-color:var(--bp-line-strong);color:var(--muted);background:var(--bp-surface-sunken)}.service-button.selected{color:var(--bp-accent-text);background:var(--teal-light);border-color:var(--bp-accent-line)}.service-button img{width:16px;height:16px;opacity:.7}td input:disabled{color:var(--muted);background:var(--bp-surface-sunken)}.absent-row .description-input{color:var(--ink)}.quarter-clock{display:flex;gap:0;align-items:flex-start;flex-wrap:wrap;padding:8px 1px;justify-content:center;font-variant-numeric:tabular-nums}.quarter-clock select{width:35px;min-height:44px;padding:6px 0;appearance:none;text-align:center;border:1px solid var(--bp-line-strong);border-radius:4px;font-size:16px;background:var(--paper)}.quarter-clock>span{padding:8px 1px}.clock-legacy{font-size:12px;color:var(--red);width:100%;text-align:center}.duration-cell select{font-weight:600;min-height:60px}.add-row{font-size:14px;min-height:48px}.add-row span,.quarter-note,.sheet-footer .muted,.footer-label,.privacy-note,.week-summary .muted{font-size:12px;color:var(--muted)}.sheet-footer strong,.week-summary strong{font-size:22px}.summary-label{font-size:14px}.sheet-footer{background:var(--teal-light)}.week-summary{gap:20px;flex-wrap:wrap}.week-actions{margin-left:auto}.privacy-note{color:var(--muted)}.validation-banner{font-size:14px;color:var(--bp-signal-text);background:var(--bp-signal-quiet);border-color:var(--bp-signal-line);padding:12px}.validation-banner button{font-size:14px;color:var(--bp-signal-text)}
dialog{width:min(980px,calc(100vw - 40px));border:0;border-radius:14px;box-shadow:var(--bp-elevation-dialog);background:var(--paper);max-height:calc(100vh - 40px)}dialog::backdrop{background:var(--bp-scrim);backdrop-filter:none}.dialog-heading h2{font-size:22px}.dialog-heading .icon-button{min-height:44px;min-width:44px;width:44px;height:44px}.dialog-intro,.info-box,.help-list,.master-row small,.checklist,.preview-box{font-size:14px;color:var(--muted)}.form-field label,fieldset legend{font-size:14px;font-weight:600;color:var(--ink)}.form-field small{font-size:12px;color:var(--muted)}.form-field input,.form-field select,.form-field textarea{font-size:16px}.form-field textarea{min-height:110px}.form-field .quarter-clock{justify-content:start;padding:0;gap:4px}.form-field .quarter-clock select{width:70px}.form-grid{gap:16px}.form-field{gap:8px}.form-field.full{grid-column:1/-1}.editor-services{display:flex;gap:8px}.editor-services label{position:relative;flex:1;cursor:pointer}.editor-services input{position:absolute;opacity:0;min-height:0}.editor-services span{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--bp-surface-sunken);border:1px solid var(--bp-line-strong);border-radius:6px}.editor-services input:checked+span{color:var(--bp-accent-text);background:var(--teal-light);border-color:var(--bp-accent-line)}.editor-services input:focus-visible+span{outline:2px solid var(--bp-focus);outline-offset:2px}fieldset{border:1px solid var(--border);border-radius:6px;padding:12px;min-width:0}.composer,.internal-fields{margin-top:20px;border:1px solid var(--border);border-radius:10px;padding:16px}.composer summary,.internal-fields summary{cursor:pointer;font-weight:600;min-height:36px}.composer .dialog-intro{margin:12px 0}.activity-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;padding:0;margin:12px 0 20px}.activity-item{border:1px solid var(--border);border-radius:6px;padding:12px;background:var(--bp-surface-sunken)}.checkbox-label{font-size:16px;min-height:36px;cursor:pointer;align-items:center}.checkbox-label input{width:20px;height:20px;margin:0;min-height:0;flex:none}.activity-extra{margin-top:10px}.activity-extra label{font-size:14px;display:block;margin-bottom:6px}.activity-extra input:not([type=checkbox]){width:100%}.equipment{margin-top:12px;background:var(--paper)}.equipment .checkbox-label{font-size:14px;display:flex}.composition-actions{display:flex;align-items:end;gap:12px;margin-top:12px}.composition-actions label{display:flex;flex-direction:column;gap:6px;font-size:14px}.internal-fields .form-field{margin-top:12px}.editor-errors{color:var(--red);font-size:14px}.check-cards{display:flex;flex-direction:column;gap:16px}.check-card{border:1px solid var(--bp-line-strong);border-radius:10px;background:var(--paper)}.check-card>summary{padding:16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600}.check-card>summary strong{font-size:14px;color:var(--bp-signal-text)}.check-card.complete>summary strong{color:var(--bp-ok-text)}.card-content{border-top:1px solid var(--border);padding:16px}.card-issues{font-size:14px;color:var(--bp-signal-text);margin-bottom:16px}.check-card.complete .card-issues{color:var(--bp-ok-text)}.week-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:20px}.week-day{padding:20px;background:var(--paper);border:1px solid var(--border);border-radius:10px}.week-day h3{margin-bottom:12px}.week-day h3 small{font:400 14px 'IBM Plex Sans',sans-serif;color:var(--muted)}.week-day strong{font-size:18px}.week-day p{font-size:14px;margin-top:8px;color:var(--muted)}.week-day button{margin-top:16px}.weekday-choice{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}.empty-state h3{font-size:22px}.empty-state p{font-size:16px;color:var(--muted)}.toast{font-size:16px}.preview-box.error{color:var(--bp-danger-text)}
@media(min-width:1700px){.col-description{width:460px}.col-company{width:200px}.col-project{width:160px}.col-location{width:140px}td input,td textarea,td select{font-size:16px}th{font-size:12px}.workspace{display:block}}
@media(max-width:1200px){main{padding:20px}.app-header{padding:16px 20px}.workspace{display:block}.sheet-toolbar>div:first-child{display:flex}.sheet-toolbar .button{font-size:14px}.day-tab .day-hours{font-size:14px}.week-summary{gap:16px}}
@media(max-width:680px){main{padding:16px}.page-heading{flex-wrap:wrap}.person-controls select{font-size:16px;width:240px}.page-heading p{font-size:14px;max-width:none}.sheet-toolbar h2{font-size:22px}.day-tabs{min-width:620px}.day-tab .day-name,.day-tab .day-hours{font-size:14px}.day-tab .day-date{font-size:12px}.activity-list{grid-template-columns:1fr}.composition-actions{flex-wrap:wrap}.week-summary .muted,.save-status{font-size:12px}.header-actions .button{font-size:14px}.absence-buttons{margin-left:0}}

.week-controls input[type=week]{width:205px}.person-controls select{width:280px}

/* Feldbezogene Bedienhilfe bleibt von den Auswahllisten getrennt. */
.field-help{margin:20px 0 0 auto;width:min(100%,360px);padding:20px;border:1px solid var(--border);border-radius:10px;background:var(--paper)}.field-help h2{font-size:20px;line-height:1.35;margin-bottom:12px}.field-help p{font-size:14px;line-height:1.65;margin-bottom:14px;color:var(--ink)}.field-help p:last-child{margin-bottom:0}.field-help .button{width:100%;margin-top:16px;white-space:normal}.field-help-example{padding:12px;background:var(--bp-surface-sunken);border-radius:6px;color:var(--muted)!important}.location-control.locked{cursor:help;background:var(--bp-surface-sunken)}.location-control.locked input{pointer-events:none}.location-control.locked:focus-visible{outline:2px solid var(--bp-focus);outline-offset:-2px}
@media(min-width:1600px){.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}.field-help{position:sticky;top:20px;width:auto;margin:0}.workspace .suggestion-slot{position:absolute}}
@media print{.field-help{display:none!important}.workspace{display:block}}

/* In schmalen Rechnerfenstern bleibt die Hilfe oberhalb der Zeilen sichtbar. */
@media(max-width:1599px){.workspace{display:flex;flex-direction:column}.entry-workspace{order:2;width:100%}.field-help{order:1;width:100%;margin:0 0 16px;display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:20px;padding:16px 20px}.field-help>.eyebrow{grid-column:1;grid-row:1;margin-bottom:4px}.field-help h2{grid-column:1;grid-row:2;margin:0;font-size:18px}#field-help-body{grid-column:2;grid-row:1/span 3}.field-help .button{grid-column:2;width:auto;justify-self:start;margin-top:12px}.field-help .field-help-example{margin-top:10px}}
@media(max-width:680px){.field-help{display:block}.field-help h2{margin-bottom:10px}}

.duration-cell input[readonly]{font-weight:600;min-height:60px;cursor:default;color:var(--ink)}

.check-context,.check-time-context{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:12px}.check-context{white-space:pre-wrap}

/* Wochenleiste und Abschlussaktionen im Bromberger-Raster. */
.day-tabs{border:var(--bp-line-width) solid var(--bp-line-strong);padding:var(--bp-space-6);border-radius:var(--bp-radius-md)}
.week-label{display:inline-flex;align-items:center;min-height:44px;min-width:132px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);padding:0 var(--bp-space-8);white-space:nowrap}
.week-controls{align-items:center;gap:var(--bp-space-16)}.week-controls>.inline{gap:var(--bp-space-12)}.filter-control{display:flex;flex-direction:column;gap:var(--bp-space-4)}.filter-control label{font-size:12px;font-weight:600;color:var(--muted)}.filter-control input{width:300px}
.week-summary>.week-actions{display:flex;align-items:center;gap:var(--bp-space-8);flex-wrap:wrap}.week-actions .button{margin-left:0}
@media(max-width:680px){.filter-control input{width:min(300px,calc(100vw - 32px))}.week-summary>.week-actions{margin-left:0;width:100%}}


/* ─── 2. Ergänzungen der Web-Fassung ───────────────────────── */

/* Markenfarbe wie in den anderen Apps. --bp-accent zeigt exakt darauf, die
   übrigen Akzentstufen leitet design-tokens.css aus demselben Farbwinkel ab. */
:root{--primary:#235a81;--primary-dark:#17405d;--primary-light:#e2eff8;--bp-accent:var(--primary);--gray-200:var(--bp-neutral-200);--gray-600:var(--bp-neutral-600)}

.brand-mark{background:var(--primary)}
.brand-mark span{color:#9cc3e3}

/* Reiter "Meine Erfassung" / "Admin" im Kopf */
.app-nav{display:flex;gap:var(--bp-space-4);flex-wrap:wrap}
.app-nav button{min-height:44px;padding:8px 14px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:14px;font-weight:600}
.app-nav button[aria-pressed=true]{background:var(--teal-light);border-color:var(--bp-accent-line);color:var(--bp-accent-text)}
.app-nav button:hover{color:var(--ink)}
.user-chip{font-size:14px;color:var(--muted);white-space:nowrap}

/* Konflikt- und Fehlermeldungen je Zeile */
.row-sync td{height:auto;font-size:14px;line-height:1.6;padding:8px 12px;color:var(--bp-danger-text);background:var(--bp-danger-quiet)!important}

/* ─── Anmeldung (index.html, reset-passwort.html) ─── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%)}
.auth-card{background:var(--paper);border-radius:var(--bp-radius-lg);box-shadow:var(--bp-elevation-dialog);padding:2rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:1.25rem}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.auth-logo h1{font-size:22px}
.auth-logo .sub{font-size:14px;color:var(--muted)}
.auth-tabs{display:flex;border:1px solid var(--bp-line-strong);border-radius:6px;overflow:hidden}
.auth-tab{flex:1;min-height:44px;padding:.5rem;font-size:14px;font-weight:600;background:none;border:none;color:var(--muted)}
.auth-tab.active{background:var(--primary);color:var(--bp-on-accent)}
.auth-alert{padding:12px 14px;border-radius:6px;font-size:14px;display:none;line-height:1.55}
.auth-alert.error{display:block;background:var(--bp-danger-quiet);color:var(--bp-danger-text);border:1px solid var(--bp-danger-line)}
.auth-alert.success{display:block;background:var(--bp-ok-quiet);color:var(--bp-ok-text);border:1px solid var(--bp-ok-line)}
.auth-alert.info{display:block;background:var(--bp-signal-quiet);color:var(--bp-signal-text);border:1px solid var(--bp-signal-line)}
.stack{display:flex;flex-direction:column;gap:.75rem}
.auth-card .form-grid{grid-template-columns:1fr 1fr;gap:.75rem}
.auth-card .form-field input{width:100%}
.auth-card .button{width:100%}
.auth-link{display:block;font-size:14px;color:var(--bp-accent-text);text-align:right;text-decoration:none}
.auth-hint{font-size:12px;color:var(--muted);text-align:center}
@media(max-width:560px){.auth-card .form-grid{grid-template-columns:1fr}}

/* ─── Admin-Tab ─── */
.admin-section{background:var(--paper);border:1px solid var(--border);border-radius:var(--bp-radius-md);padding:var(--bp-space-20);margin-bottom:var(--bp-space-24)}
.admin-section>h2{margin-bottom:var(--bp-space-12)}
.admin-section>p{font-size:14px;color:var(--muted);margin-bottom:var(--bp-space-16)}
.admin-table{width:100%;min-width:0;border-collapse:collapse;table-layout:auto}
.admin-table th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--bp-line-strong)}
.admin-table td{height:auto;padding:10px 8px;font-size:14px;vertical-align:middle;border-bottom:1px solid var(--border);border-left:0}
.admin-table td .button{min-height:36px;padding:4px 10px}
.status-pill{display:inline-block;padding:2px 10px;border-radius:var(--bp-radius-pill);font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--muted)}
.status-pill.frei{color:var(--bp-ok-text);background:var(--bp-ok-quiet);border-color:var(--bp-ok-line)}
.status-pill.angefragt{color:var(--bp-signal-text);background:var(--bp-signal-quiet);border-color:var(--bp-signal-line)}
.admin-scroll{overflow:auto}
.firmen-auswahl{max-height:360px;overflow:auto;border:1px solid var(--border);border-radius:6px;padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.projekt-block{border-top:1px solid var(--border);padding:12px 0}
.projekt-block:first-child{border-top:0}
.projekt-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.projekt-zeile strong{font-variant-numeric:tabular-nums}
.projekt-zeile .muted{font-size:14px}
.unterprojekt-liste{margin:6px 0 0 24px;display:flex;flex-direction:column;gap:4px}
.inaktiv{opacity:.55}
.alle-kopf{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.alle-kopf .form-field{min-width:260px}
.nur-lesen td{padding:10px 8px;font-size:14px;height:auto;vertical-align:top}
@media(max-width:680px){.firmen-auswahl{grid-template-columns:1fr}}
@media print{.app-nav,.user-chip{display:none!important}}

/* ─── App-Wechsler (Verlinkung zwischen den Bromberger-Apps) ─── */

/* Das Markup baut app-links.js, hier steht nur das Aussehen.
   Standard: blaues Symbol auf weisser Kachel. Beide Anmeldebildschirme
   liegen auf dem dunkelblauen Verlauf, die weisse Kachel setzt sich
   davon klar ab. Fuer helle Flaechen (z. B. spaeter im App-Header)
   gibt es .app-links--hell.

   --app-link-label ist bewusst getrennt von --app-link-fg: das Symbol
   sitzt IN der Kachel, die Beschriftung darunter aber auf dem
   Seitenhintergrund. Beide dieselbe Farbe zu geben macht die
   Beschriftung auf dunklem Grund unlesbar. */

.app-links {
  --app-link-fg:       var(--primary);
  --app-link-bg:       #fff;
  --app-link-border:   transparent;
  --app-link-bg-hover: var(--primary-light);
  --app-link-label:    #fff;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
/* display:flex oben wuerde das hidden-Attribut sonst uebersteuern */
.app-links[hidden] { display: none; }

.app-links--hell {
  --app-link-fg:       var(--primary);
  --app-link-bg:       var(--primary-light);
  --app-link-border:   var(--gray-200);
  --app-link-bg-hover: #cfe6f5;
  --app-link-label:    var(--gray-600);
}

.app-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 5.25rem;
  text-decoration: none;
  color: var(--app-link-label);
}
.app-link-icon {
  color: var(--app-link-fg);
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-link-bg);
  border: 1px solid var(--app-link-border);
  transition: background .15s ease, transform .15s ease;
}
.app-link-icon svg { width: 30px; height: 30px; }
.app-link-label {
  font-size: .72rem;
  line-height: 1.25;
  text-align: center;
  opacity: .9;
}
.app-link:hover .app-link-icon { background: var(--app-link-bg-hover); transform: translateY(-2px); }
.app-link:hover .app-link-label { opacity: 1; }
.app-link:focus-visible { outline: none; }
.app-link:focus-visible .app-link-icon {
  outline: 2px solid var(--app-link-fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .app-link-icon { transition: none; }
  .app-link:hover .app-link-icon { transform: none; }
}