/* Fröse Dach Stundenerfassung – Stylesheet (aus index.html ausgelagert, damit App-Updates
   nicht jedes Mal das komplette CSS neu laden) */
  :root{
    --ink:#1c2520;
    --paper:#f4f6f2;
    --card:#ffffff;
    --green:#1f7a3d;
    --green-dk:#155a2c;
    --green-soft:#e3efe6;
    --amber:#b96a00;
    --amber-soft:#fdf2e0;
    --red:#b3261e;
    --red-soft:#fbe9e7;
    --blue:#2b5e8c;
    --blue-soft:#e7eff6;
    --line:#d9ded6;
    --muted:#6b756d;
    --radius:16px;
    --shadow:0 1px 2px rgba(20,45,28,.05),0 4px 16px rgba(20,45,28,.05);
    --mono:"SF Mono",ui-monospace,Consolas,Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{font-size:15px;overflow-x:hidden}
  body{font-family:"Bahnschrift","Bahnschrift SemiBold","Bahnschrift SemiCondensed","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.45;letter-spacing:.01em}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.93em}

  header{background:#fff;border-bottom:1px solid var(--line);padding:0 22px}
  .head-inner{max-width:1700px;margin:0 auto;display:flex;align-items:center;gap:14px;height:72px;flex-wrap:nowrap}
  .brand{display:flex;align-items:center;gap:12px;flex:none}
  .brand img{height:52px;width:auto;display:block}
  .brand small{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;white-space:nowrap}
  .head-user{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
  .head-kw{font-family:var(--mono);font-size:.85rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:5px 10px;white-space:nowrap;flex:none}
  .rolle-pill{font-size:.8rem;background:var(--green);color:#fff;border-radius:99px;padding:4px 12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;min-width:0}
  .rolle-pill .pill-role{font-weight:400;opacity:.85}
  .btn-abmelden{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;padding:5px 12px;font:inherit;font-size:.82rem;cursor:pointer}
  .btn-abmelden:hover{background:var(--paper)}

  nav.topnav{background:#0f3a1e;border-bottom:3px solid var(--green);position:sticky;top:0;z-index:150} /* bleibt beim Scrollen oben stehen */
  .nav-inner{max-width:1700px;margin:0 auto;display:flex;gap:2px;padding:0 22px;flex-wrap:wrap}
  .topnav button{appearance:none;border:0;background:transparent;color:#aeb9b1;padding:10px 16px 12px;font-size:.95rem;cursor:pointer;border-radius:6px 6px 0 0}
  .topnav button:hover{color:#fff}
  .topnav button.active{background:var(--green);color:#fff;font-weight:600}
  .topnav button:focus-visible{outline:2px solid #7fce9b;outline-offset:-2px}
  /* Thematische Aufklapp-Menüs in der Desktop-Leiste */
  .navgroup{position:relative;display:inline-flex}
  .navgroup-trigger .navcaret{font-size:.75em;opacity:.7;margin-left:3px}
  .navmenu{display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--ink);border:1px solid #2e3a33;border-top:0;border-radius:0 0 8px 8px;box-shadow:0 10px 24px rgba(0,0,0,.35);padding:5px;z-index:60;flex-direction:column;gap:1px}
  .navgroup:hover .navmenu,.navgroup:focus-within .navmenu{display:flex}
  .navmenu button{text-align:left;width:100%;padding:9px 12px;border-radius:6px;white-space:nowrap}
  .navmenu button:hover{background:#223029;color:#fff}
  .navmenu button.active{background:var(--green);color:#fff;font-weight:600}
  /* 🧱 Kachel-Leiste: Symbol ueber der Beschriftung (schmal), eine Zeile, seitlich wischbar.
     Der Leistengrund ist dunkelgruen statt fast schwarz, die Gruppen trennt Abstand. */
  .nav-inner.kacheln{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px}
  .nav-inner.kacheln::-webkit-scrollbar{display:none}
  .topnav button.navtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 8px 8px;margin:5px 0;border:0;border-radius:11px;cursor:pointer;font-size:.72rem;width:92px;flex:none;justify-content:center;
    font-weight:600;line-height:1.15;color:#cfe0d2;transition:background .12s,color .12s}
  .topnav button.navtile:hover{background:rgba(255,255,255,.09);color:#fff}
  .topnav button.navtile.active{background:var(--green);color:#fff}
  .navtile .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navsep{width:1px;background:rgba(255,255,255,.16);margin:11px 22px;flex:none;border-radius:1px}
  /* iPad & schmale Desktops: enger schieben, damit alles in eine Zeile passt */
  @media(max-width:1500px){.navsep{margin:10px 14px}.topnav button.navtile{padding:8px 6px 7px;font-size:.7rem;width:82px}}
  @media(max-width:1250px){.navsep{margin:9px 8px}.topnav button.navtile{padding:7px 5px 6px;font-size:.66rem;width:70px}.navtile .lbl{max-width:70px}.nav-inner{padding:0 10px}}
  /* Projekt-Modus: „Zurück"-Knopf links in der Leiste */
  .topnav button.nav-back{background:#223029;color:#fff;font-weight:600;border-radius:8px;margin-right:10px}
  .topnav button.nav-back:hover{background:#2e3f35}

  /* Untere Tab-Leiste (mobil, Karten-App-Optik) */
  .botnav{display:none}
  .moresheet{display:none}
  @media(max-width:980px){
    nav.topnav{display:none}
    /* App als feste Hülle: Kopf oben + untere Leiste konstant, nur der Inhalt scrollt */
    html,body{height:100%}
    body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
    header{flex:none}
    main{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(74px + env(safe-area-inset-bottom))!important} /* 74px: untere Nav-Leiste nicht überdecken. !important: die Basis-Regel (padding:20px 22px 60px) steht später im Stylesheet und würde sonst gewinnen. */
    .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fff;border-top:1px solid var(--line);padding:4px 4px calc(env(safe-area-inset-bottom) * 0.35);box-shadow:0 -3px 14px rgba(20,45,28,.07)}
    .botnav button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font:inherit;font-size:.66rem;font-weight:600;letter-spacing:.01em;cursor:pointer;padding:3px 2px;position:relative;min-width:0}
    .botnav button span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .botnav button.active{color:var(--green)}
    .botnav svg{width:25px;height:25px;flex:none}
    .botnav .bn-badge{position:absolute;top:-1px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:.6rem;line-height:1;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
    .moresheet.open{display:block;position:fixed;inset:0;z-index:300;background:rgba(18,30,22,.45)}
    .moresheet-inner{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;padding:8px 10px calc(16px + env(safe-area-inset-bottom));max-height:78vh;overflow:auto;box-shadow:0 -6px 24px rgba(0,0,0,.2)}
    .ms-item{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:13px;cursor:pointer;color:var(--ink);font-size:1rem}
    .ms-item.active{background:var(--green-soft);color:var(--green-dk);font-weight:600}
    .ms-item svg{width:23px;height:23px;color:var(--green);flex:none}

    .ms-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;padding:12px 8px 3px}
  }

  main{max-width:1700px;margin:0 auto;padding:20px 22px 60px} /* breite Bildschirme nutzen; darunter volle Breite */
  /* iOS/Safari-Fix: Auf dem Handy ist <body> ein Flex-Container und <main> ein Flex-Kind.
     Mit margin:0 auto schrumpft Safari das Flex-Kind auf seine Inhaltsbreite (z. B. nur 265px
     statt 440px → Inhalt wirkt schmal mit Lücke rechts). width:100% + margin:0 erzwingt volle Breite. */
  @media(max-width:980px){main{width:100%;margin-left:0;margin-right:0}}
  .tab{display:none}
  .tab.active{display:block}
  /* „Meine", „Planung" und „Checklisten" nur auf breiten Bildschirmen (>1240px) auf volle
     Fensterbreite ausbrechen. Darunter ist die App ohnehin schon voll breit – dort würde der
     Ausbruch den Inhalt nach links verschieben (Handy-Bug). */
  @media(min-width:1241px){
    #tab-meine,#tab-planung,#tab-checklisten{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:22px;padding-right:22px}
  }
  /* Handy: In „Meine" & „Planung" steckt die Liste in einer zusätzlichen äußeren Karte, wodurch die
     Einträge eine Ebene eingerückt (schmaler) wirken als in anderen Tabs (z. B. Adressen, deren Karten
     direkt in der Sektion liegen). Auf dem Handy machen wir diese Hüll-Karte randlos → volle Breite. */
  @media(max-width:640px){
    #tab-meine .card.listflush,#tab-planung .card.listflush{border:0;background:none;box-shadow:none;padding:0}
  }

  h2{font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk);margin:6px 0 12px;display:flex;align-items:center;gap:8px}
  h2::after{content:"";flex:1;height:1px;background:var(--line)}

  .grid{display:grid;gap:18px}
  /* Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen, sonst sprengen breite Tabellen
     (z. B. Team-Tabelle min-width:560) die Karte über den Bildschirmrand. So scrollt die
     Tabelle stattdessen brav im .scrollx-Container. */
  .grid>*,.teamgrid>*{min-width:0}
  .grid.cols-2{grid-template-columns:minmax(380px,460px) 1fr}
  /* "Projekte verwalten": Formular oben in voller Breite, Felder aber auf angenehme Breite begrenzt. */
  #projFormSect>.sect-body{max-width:780px}
  @media(max-width:980px){.grid.cols-2{grid-template-columns:1fr}}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
  .card h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

  label{display:block;font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin:0 0 3px;text-transform:uppercase}
  input,select,textarea{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff;color:var(--ink)}
  input:disabled,select:disabled{background:#eef0ec;color:var(--muted)}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
  .row{display:grid;gap:10px;margin-bottom:12px}
  .row>div{min-width:0}
  .r2{grid-template-columns:1fr 1fr}.r3{grid-template-columns:1fr 1fr 1fr}
  .hint{font-size:.78rem;color:var(--muted);margin-top:-6px;margin-bottom:10px}
  .chk{display:flex;align-items:center;gap:8px;text-transform:none;font-size:.85rem;color:var(--ink)}
  /* Mitarbeiter-Auswahllisten als gleichmäßiges Raster: Spalten richten sich aneinander aus, nicht an der Namenslänge. */
  .chkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px}
  .chkgrid>.chk{min-width:0}
  /* Einteilungsliste (Name + evtl. lange Baustellen-Notiz): auf schmalen Handys einspaltig, damit nichts abgeschnitten wird. */
  @media(max-width:640px){#planMaList{grid-template-columns:1fr}}
  /* ⠿ Reihenfolge ziehen: langes Drücken darf am Handy weder die Lupe noch das Kontextmenü öffnen. */
  #planMaList label.chk,#planMatrix td.mxname{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  #planMatrix td.mxname{cursor:grab}
  #planMatrix tr.mxzieht{outline:2px solid var(--green-dk);outline-offset:-2px;opacity:.55}
  #planMatrix tr.mxzieht td.mxname{cursor:grabbing;background:var(--green-soft)}
  #planMaList label.chk.ziehend{opacity:.6;transform:scale(1.04);box-shadow:0 5px 16px rgba(0,0,0,.28);border-color:var(--green-dk);background:var(--green-soft);cursor:grabbing;position:relative;z-index:3}
  /* Formular „Manuelle / frühere Stunden": Desktop 4 Spalten, Handy gestapelt. */
  .pmform{display:grid;grid-template-columns:150px 110px 1fr auto;gap:10px;align-items:end}
  @media(max-width:640px){
    .pmform{grid-template-columns:1fr 1fr}
    .pmform-desc,.pmform-btn{grid-column:1/-1}
    .pmform-btn button{width:100%}
  }
  /* Nachtrag-Formular: Desktop 4 Spalten, Handy 2×2. */
  .ntform{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:8px}
  @media(max-width:640px){.ntform{grid-template-columns:1fr 1fr}}
  /* Wochenplanung-Matrix: Felder als kompakte Dropdowns (Text statt Symbol) */
  .mxsel{border:0;background:transparent;font:inherit;font-size:.72rem;width:100%;max-width:92px;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center;padding:6px 2px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mxsel:disabled{opacity:.45;cursor:default}
  #planMatrix td{vertical-align:middle}
  .chk input{width:auto}

  button.btn{appearance:none;border:1px solid var(--green);background:var(--green);color:#fff;font:inherit;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer}
  button.btn:hover{background:var(--green-dk)}
  button.btn.sec{background:#fff;color:var(--green-dk)}
  button.btn.sec:hover{background:var(--green-soft)}
  button.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink);font-weight:500}
  button.btn.small{padding:4px 10px;font-size:.8rem;font-weight:500}
  button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

  .pruef{border:1px solid var(--line);border-left:6px solid var(--green);border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
  .pruef.warnend{border-left-color:var(--amber)}
  .pruef.fehler{border-left-color:var(--red)}
  .pruef-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px dashed var(--line)}
  .lampe{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
  .pruef.warnend .lampe{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
  .pruef.fehler .lampe{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
  .pruef-head b{letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
  .pruef-head span{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
  .pruef-body{padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px;min-height:70px}
  .finding{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;padding:7px 10px;border-radius:7px;background:var(--green-soft)}
  .finding.w{background:var(--amber-soft)}
  .finding.e{background:var(--red-soft)}
  .finding.i{background:var(--blue-soft)}
  .finding .tag{flex:none;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:4px;margin-top:1px;color:#fff;background:var(--green)}
  .finding.w .tag{background:var(--amber)}
  .finding.e .tag{background:var(--red)}
  .finding.i .tag{background:var(--blue)}
  .finding .fix{margin-left:auto;flex:none}
  .summen{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px dashed var(--line)}
  .summen div{padding:10px 12px;border-right:1px dashed var(--line)}
  .summen div:last-child{border-right:0}
  .summen .k{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .summen .v{font-family:var(--mono);font-size:1.05rem;font-weight:600}
  .summen .v.zusatz{color:var(--amber)}

  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:2px solid var(--green-soft)}
  td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
  tr:hover td{background:#f7faf6}
  td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  tr.summe td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0;background:var(--green-soft)}
  .wk-head td{background:var(--green-soft);color:var(--green-dk);font-weight:700;cursor:pointer;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);user-select:none}
  .wk-head td::before{content:none!important}
  .wk-head td>span:first-child{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .wk-head .chev{display:inline-block;transition:transform .15s;font-size:.85em;flex:none}
  .wk-head.collapsed .chev{transform:rotate(-90deg)}
  .wk-sum{font-weight:600;color:var(--muted);font-size:.85em;white-space:nowrap;font-family:var(--mono)}
  tr.wkhidden{display:none!important}
  .modal{display:none;position:fixed;inset:0;z-index:400;background:rgba(18,30,22,.5);padding:16px;overflow:auto}
  .modal.open{display:flex;align-items:flex-start;justify-content:center}
  .modal-card{background:#fff;border-radius:18px;max-width:520px;width:100%;margin:auto;padding:20px;box-shadow:0 12px 44px rgba(0,0,0,.3)}
  .modal-card h3{font-size:1.05rem;color:var(--green-dk);margin-bottom:8px}
  .tglrow{display:flex;align-items:center;gap:10px;margin:14px 0 2px;cursor:pointer;user-select:none}
  .switch{position:relative;display:inline-block;width:44px;height:25px;flex:none}
  .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .switch .slider{position:absolute;inset:0;background:var(--line);border-radius:25px;transition:.2s;pointer-events:none}
  .switch .slider:before{content:"";position:absolute;height:19px;width:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
  .switch input:checked~.slider{background:var(--green)}
  .switch input:checked~.slider:before{transform:translateX(19px)}
  .tgllbl{font-weight:600;font-size:.95rem}
  .infobtn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--muted);width:19px;height:19px;border-radius:50%;font-size:.74rem;font-weight:700;font-style:italic;font-family:Georgia,"Times New Roman",serif;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0}
  .infobtn:hover{color:var(--green-dk);border-color:var(--green);background:var(--green-soft)}
  .badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:99px;border:1px solid}
  .badge.ok{color:var(--green-dk);border-color:var(--green);background:var(--green-soft)}
  .badge.warn{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
  .badge.err{color:var(--red);border-color:var(--red);background:var(--red-soft)}
  .badge.neutral{color:var(--muted);border-color:var(--line);background:#f3f4f1}

  .toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
  .toolbar > div{min-width:150px}
  .toolbar .spacer{flex:1}
  .empty{padding:26px;text-align:center;color:var(--muted);font-size:.9rem}
  .icon-btn{appearance:none;border:0;background:transparent;cursor:pointer;font-size:.95rem;padding:2px 6px;border-radius:5px;color:var(--muted)}
  .icon-btn:hover{background:var(--green-soft);color:var(--green-dk)}
  .icon-btn.del:hover{background:var(--red-soft);color:var(--red)}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
  .pl-dash{display:grid;gap:14px}
  .pl-dash>.pl-main,.pl-dash>.pl-side{min-width:0}
  @media(min-width:981px){.pl-dash{grid-template-columns:1.6fr 1fr;align-items:start}}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
  .kpis>.kpi{min-width:0} /* Karten dürfen schrumpfen – sonst schiebt langer Text das Raster aus dem Bild */
  .kpi .k{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .kpi .v{font-family:var(--mono);font-size:1.5rem;font-weight:700;margin-top:2px;color:var(--green-dk)}
  .kpi .v small{font-size:.8rem;color:var(--muted);font-weight:400}
  details.einst{margin-top:16px}
  details.einst summary{cursor:pointer;font-size:.85rem;color:var(--muted)}
  /* Aufklappbare Abschnitte (Akkordeon) */
  details.sect{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
  details.sect>summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:700;display:flex;align-items:center;gap:10px;user-select:none;background:var(--green-soft);color:var(--green-dk)}
  details.sect>summary::-webkit-details-marker{display:none}
  details.sect>summary::before{content:"▸";font-size:.9em;transition:transform .15s;flex:none}
  details.sect[open]>summary::before{transform:rotate(90deg)}
  details.sect>summary .sect-extra{margin-left:auto;font-weight:600;font-size:.82rem;color:var(--muted)}
  details.sect>.sect-body{padding:14px 16px}
  table.team-lean .lohncol{display:none}
  /* Mit eingeblendeten Lohn-Spalten braucht die Tabelle Platz – sonst quetschen sich die Eingabefelder unlesbar klein */
  #tblTeamTable{min-width:560px}
  #tblTeamTable:not(.team-lean){min-width:1150px}
  #tblTeamTable td input{font-size:1rem}
  .footer-note{margin-top:30px;font-size:.78rem;color:var(--muted);text-align:center}

  /* Anmeldung */
  #login{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
  .login-card{background:var(--card);border-radius:14px;padding:30px 32px;width:100%;max-width:400px}
  .login-sub{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:20px}
  .login-err{color:var(--red);font-size:.85rem;min-height:1.2em;margin-top:8px;text-align:center}
  /* ---------- Handy-Layout ---------- */
  .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
  @media(max-width:1100px){.teamgrid{grid-template-columns:1fr!important}}
  @media(max-width:640px){
    html{font-size:14px}
    main{padding:12px 10px calc(74px + env(safe-area-inset-bottom))}
    .icon-btn{padding:7px 9px;font-size:1.05rem} /* größere Tipp-Fläche für Baustellen-Finger */
    /* Logo neben den Namen statt darüber – spart eine Zeile und damit Platz für den Inhalt */
    .head-inner{height:auto;padding:6px 0;row-gap:4px;flex-wrap:nowrap;gap:8px}
    .head-user{flex:1 1 auto;min-width:0}
    .brand img{height:30px}
    .brand small{display:none}
    .head-kw{display:none}
    /* Alles in EINE Zeile: kein Umbruch, Name wird bei Bedarf gekuerzt, Zusatztexte weichen */
    .head-user{gap:4px;flex-wrap:nowrap;justify-content:flex-end;overflow:hidden}
    .rolle-pill{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px}
    #hdrAllesWrap span:not(.switch):not(.slider){display:none}
    #btnLogout{font-size:.72rem;padding:5px 8px;white-space:nowrap}
    #headLang{font-size:.72rem;padding:5px 6px}
    #syncTxt{display:none}
    #syncChip{padding:5px 8px}
    #headLang{width:auto;min-width:0;flex:none}
  }
  @keyframes blink{50%{opacity:.15}}
  /* Leistungsverzeichnis: ruhige, geordnete Tabelle */
  .lvtab th{font-size:.7rem;color:var(--muted);letter-spacing:.02em;padding:6px;border-bottom:2px solid var(--line)}
  .lvtab td{vertical-align:middle}
  .lvtab input[type=number]{border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 5px;text-align:right;font:inherit;color:inherit}
  .lvtab input[type=number]:hover{border-color:var(--line);background:#fff}
  .lvtab input[type=number]:focus{border-color:var(--green);background:#fff;outline:none}
  .lvtab tr.lvtitel td{background:#edf3ed;font-weight:700;font-size:.84em;border-top:6px solid #fff}
  .lvtab tr.lvtitel td:first-child{border-left:3px solid var(--green)}
  .lvtab tr.lvfertig td{background:#f2f9f3}
  .lvtab .icon-btn{opacity:.45}
  .lvtab .icon-btn:hover{opacity:1}
  .lvtab td.num,.lvtab input[type=number]{font-family:var(--mono);font-size:.82rem}
  .lvtab tbody tr:not(.lvtitel):hover td{background:#f7f8f5}
  /* Projektfortschritt: KPI-Karten und Staffel-Tabelle (Auftragsdaten) */
  #paFortschritt .kpi .k{text-transform:uppercase;font-size:.66rem;letter-spacing:.09em}
  #paFortschritt .kpi .v{font-family:var(--mono);letter-spacing:-.5px}
  .staffel{width:100%;border-collapse:collapse;font-size:.88rem}
  .staffel td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
  .staffel td.num{font-family:var(--mono);font-size:.82rem;text-align:right;white-space:nowrap}
  .staffel tr.ind td:first-child{padding-left:26px;color:var(--muted)}
  .staffel tr.sum td{border-top:1px solid var(--line);font-weight:700;background:rgba(31,122,61,.06)}
  .staffel tr:last-child td{border-bottom:none}
  .lvdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
  /* Reiter innerhalb der Projektanalyse (wie im Nachkalkulations-Prototyp) */
  .patabs{display:flex;flex-wrap:nowrap;gap:1px;border-bottom:1px solid var(--line);margin:4px 0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .patabs::-webkit-scrollbar{display:none}
  .patabs button{background:none;border:none;color:var(--muted);padding:9px 8px;font:inherit;font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
  /* EINE Zeile, kein Umbruch. Die Reiter stehen eng beieinander (padding 10 statt 14) und
     werden NICHT gedehnt – am PC passen dadurch alle nebeneinander. Reicht der Platz nicht
     (schmales Fenster/Handy), scrollt die Leiste seitlich, startet aber immer links, damit
     „Übersicht" sichtbar ist. Beschriftungen werden nie gekürzt. */
  .patabs button.on{color:var(--green-dk);border-bottom-color:var(--green);font-weight:700}
  .patabs button:hover{color:var(--ink)}
  @media(max-width:640px){
    /* Handy: Name immer sichtbar, Rolle weglassen; Name darf breiter werden */
    .rolle-pill{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:-1}
    .rolle-pill .pill-role{display:none}
    .head-user{gap:6px 8px}
    #hdrNurMeineTxt{font-size:.8rem}
    .nav-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .nav-inner::-webkit-scrollbar{display:none}
    /* Handy: noch etwas enger, sonst wie am PC (eine Zeile, seitlich scrollbar) */
    .patabs button{padding:8px 8px;font-size:.86rem}
    nav button{white-space:nowrap;padding:9px 12px 11px;flex:none}
    .grid.cols-2,.teamgrid{grid-template-columns:1fr!important}
    .row.r3{grid-template-columns:1fr 1fr 1fr;gap:6px}
    .row.r2{gap:6px}
    input,select,textarea{padding:10px 10px;font-size:16px} /* 16px verhindert iOS-Zoom - textarea gehoert unbedingt dazu, sonst zoomt Safari beim Tippen hinein und bleibt gezoomt */
    /* iOS gibt Datums-/Zeitfeldern eine feste Mindestbreite, die width:100% ignoriert
       und zum Rausragen/Überlappen führt. appearance:none schaltet das ab. */
    input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;padding-left:8px;padding-right:6px}
    button.btn{padding:11px 16px;width:100%;margin-bottom:6px}
    button.btn.small{width:auto;padding:5px 10px;margin:0}
    .toolbar{gap:8px}
    .toolbar > div{min-width:46%}
    .kpis{grid-template-columns:repeat(2,1fr);gap:8px}
    .kpis.kpis-1sp{grid-template-columns:1fr} /* textlastige Karten (Projektsteuerung/-kalender) einspaltig */
    .kpi .v{font-size:1.2rem}
    table{font-size:.82rem}
    th,td{padding:6px 5px}
    .summen{grid-template-columns:repeat(2,1fr)}
    .summen div:nth-child(2){border-right:0}
    .summen div{border-bottom:1px dashed var(--line)}
    .finding{font-size:.84rem}
    /* Eintragsliste als Karten statt breiter Tabelle */
    table.stack thead{display:none}
    table.stack,table.stack tbody{display:block}
    table.stack tr{display:block;border:1px solid var(--line);border-radius:9px;margin-bottom:10px;padding:6px 10px;background:#fff}
    table.stack tr:hover td{background:transparent}
    table.stack td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;padding:4px 0;text-align:right}
    table.stack td::before{content:attr(data-l);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:none}
    table.stack td[data-l=""]::before{content:none}
    table.stack td.leer{display:none}
    table.stack tr.wk-head{border:0;background:transparent;padding:0;margin-bottom:6px}
    table.stack .wk-head td{border-radius:10px;padding:11px 13px}
  }
  @media print{nav,header .head-user,.toolbar,button,#login{display:none!important}body{background:#fff}}
  /* 💬 Offener Chat: Kopf oben, Verlauf füllt den Platz, Schreibfeld klebt unten */
  #nachListe.chatvoll{display:flex;flex-direction:column}
  #nachListe.chatvoll>div:last-child{flex:none}
  /* Symbole der oberen Kachel-Leiste + Büro-Menü (alle Bildschirmgrößen) */
  #navInner button svg{width:20px;height:20px;flex:none;display:block}
  #navInner button.navtile svg{width:25px;height:25px}
  @media(max-width:1250px){#navInner button.navtile svg{width:22px;height:22px}}
  #navBueroMenu button svg{width:18px;height:18px;color:var(--green)}
  #moreSheetInner .ms-item svg{width:23px;height:23px;color:var(--green);flex:none}
  #moreSheetInner summary svg{width:15px;height:15px;vertical-align:-3px}

/* ✏️ Verbesserungs-Modus für Übersetzungen: alles Antippbare sichtbar markieren */
body.i18nedit main, body.i18nedit .topnav{cursor:help}
body.i18nedit main *{outline:1px dotted rgba(224,169,79,.55);outline-offset:1px}

/* =========================================================================
   💬 Baustellen-Chat im gewohnten Messenger-Look
   Bewusst nah an dem, was alle vom Handy kennen: getönter Verlauf mit feiner
   Textur, grüne Blase rechts für eigene Nachrichten, weiße links, Uhrzeit
   klein in der Blase. Greift NUR im Nachrichten-Verlauf (#nachThread) und in
   der Schreibzeile – der Rest der App bleibt unberührt.
   ========================================================================= */
#nachThread{background-color:#efeae2;padding:10px 8px}
#nachThread .wa{display:flex;margin:2px 0}
#nachThread .wa+.wa{margin-top:3px}
#nachThread .wa.mine{justify-content:flex-end}
#nachThread .wab{max-width:82%;min-width:0;background:#fff;border-radius:8px;padding:6px 9px 5px;
  box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere;word-break:break-word;position:relative}
#nachThread .wa.mine .wab{background:#d9fdd3;border-top-right-radius:2px}
#nachThread .wa:not(.mine) .wab{border-top-left-radius:2px}
#nachThread .wab .watxt{line-height:1.35;font-size:.95rem;color:#111b21}
#nachThread .wab .wavon{font-size:.78rem;font-weight:700;margin-bottom:1px;color:#1f7aec}
#nachThread .wab .wazeit{font-size:.68rem;color:#667781;display:flex;gap:5px;justify-content:flex-end;align-items:center;margin-top:1px}
#nachThread .wab img{border-radius:6px;display:block;max-width:100%}
#nachThread .wab audio{max-width:100%}
/* Ereignis der Baustelle: mittige Pille wie ein Systemhinweis im Messenger */
#nachThread .waev{display:flex;justify-content:center;margin:7px 0}
#nachThread .waev>span{max-width:92%;font-size:.74rem;color:#54656f;background:#ffffffcc;border-radius:8px;
  padding:4px 11px;text-align:center;box-shadow:0 1px .5px rgba(11,20,26,.13)}
#nachThread .waev>span[data-evgo]{cursor:pointer}
/* Schreibzeile: rundes Eingabefeld, Werkzeuge daneben */
.chatbar{display:flex;gap:7px;align-items:flex-end;margin-top:8px}
.chatbar textarea{flex:1 1 auto;border-radius:20px;padding:10px 14px;border:1px solid var(--line);background:#fff;resize:none;height:42px;min-height:42px;max-height:120px;font-size:16px;line-height:1.3;overflow-y:auto}
.chatbar .chatico{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;padding:0}
.chatbar .chatsend{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;cursor:pointer;padding:0}
.chatbar .chatsend:active{filter:brightness(.92)}
/* Im offenen Chat bleibt der Bildschirm dem Chat vorbehalten – Fußzeile und Hinweistexte weg */
body.chatoffen .footer-note{display:none}
/* Im offenen Chat klebt die Schreibzeile direkt über der unteren Leiste – der Platzhalter für die
   Navigation wird auf deren tatsächliche Höhe gekürzt, damit kein leeres Feld dazwischen steht. */
@media(max-width:640px){
  body.chatoffen main{padding-bottom:calc(52px + env(safe-area-inset-bottom) * 0.35)!important;padding-top:6px}
  body.chatoffen #nachListe.chatvoll{min-height:calc(100dvh - 130px)}
  body.chatoffen .chatbar{margin-bottom:2px}
}
/* Bei geöffneter Tastatur weicht die untere Leiste – sonst klebt sie zwischen Schreibfeld
   und Tastatur und nimmt dem Chat die letzten Zeilen. */
@media(max-width:640px){
  body.tastatur .botnav{display:none}
  body.tastatur.chatoffen main{padding-bottom:8px!important}
}