/* Quelle: Stunden-App/App/css/app.css und App-Markup, Stand v0.525.
   Bei App-Umgestaltungen nachziehen. Alle Regeln sind unter .app-ui gekapselt.
   Geräte zeigen verkürzte Ausschnitte; Abstände nur in .app-kompakt angepasst. */
.app-ui {
  --akzent:#1f6f54; --akzent-dunkel:#164f3c; --akzent-text:#fff; --akzent-lesbar:var(--akzent); --akzent-hell:rgba(31,111,84,.09);
  --weiss:#fff; --tinte:#16191a; --dezent:#5f6566; --flaeche:#f6f6f4; --glas:#fff;
  --karte:rgba(255,255,255,.86); --linie:rgba(20,24,28,.09); --eingabe:rgba(20,24,28,.045); --wb-gruppe:#fafaf9;
  --wb-grund:linear-gradient(180deg,#f2f4f6 0%,#eceff2 100%); --wb-glas:rgba(255,255,255,.72); --wb-feld:#fff;
  --wb-knopf-bg:rgba(255,255,255,.9); --wb-knopf-linie:rgba(20,24,28,.12);
  --wb-schatten:0 1px 2px rgba(20,24,28,.04),0 8px 24px -8px rgba(20,24,28,.16);
  --glas-fuell-1:rgba(255,255,255,.78); --glas-fuell-2:rgba(255,255,255,.38); --glas-rand:rgba(23,32,28,.14); --glas-kante:rgba(255,255,255,.9);
  --ruhe-ring:rgba(23,32,28,.38); --ruhe-schein:rgba(23,32,28,.28); --leucht-alpha-an:70%;
  --uhr-grund-a:color-mix(in srgb,var(--karte) 94%,var(--tinte)); --uhr-grund-b:var(--karte);
  --ok:#16a34a; --ok-text:#14742f; --warn:#c88a1e; --warn-text:#92400e; --warn-flaeche:rgba(245,158,11,.14); --pause:#f59e0b; --gefahr:#d5423b; --gefahr-text:#b3261e;
  --sek-zeiten:#1b9095; --sek-termine:#7a4fd6; --sek-auftraege:#2f6db5; --sek-uebersicht:#b04a6a; --sek-team:#d25f27; --sek-export:#5b6b7a;
  --sek:var(--akzent); --sek-text:var(--akzent-lesbar);
  --schrift-xs:.75rem; --schrift-sm:.875rem; --schrift-md:1rem; --schrift-lg:1.125rem; --schrift-xl:1.375rem;
  --radius-gross:14px; --radius:10px; --radius-klein:6px; --radius-rund:999px; --knopf-md:44px;
  --abstand-1:.25rem; --abstand-2:.5rem; --abstand-3:.75rem; --abstand-4:1rem;
  background:var(--wb-grund); color:var(--tinte); font-family:Plex,sans-serif; font-size:16px; line-height:1.5; letter-spacing:normal; color-scheme:light;
}
[data-theme="dark"] .app-ui {
  --flaeche:#131516; --tinte:#e7eaec; --dezent:#929ba1; --glas:#1b1e20; --wb-gruppe:#1f2325;
  --akzent-lesbar:color-mix(in srgb,var(--akzent) 45%,var(--tinte)); --linie:rgba(255,255,255,.09);
  --karte:rgba(28,32,36,.88); --eingabe:rgba(255,255,255,.045); --wb-grund:linear-gradient(180deg,#15181b 0%,#0f1214 100%);
  --wb-glas:rgba(21,24,27,.78); --wb-feld:rgba(255,255,255,.06); --wb-knopf-bg:rgba(255,255,255,.06); --wb-knopf-linie:rgba(255,255,255,.14);
  --wb-schatten:0 1px 2px rgba(0,0,0,.3),0 12px 30px -10px rgba(0,0,0,.6);
  --glas-fuell-1:rgba(255,255,255,.13); --glas-fuell-2:rgba(255,255,255,.03); --glas-rand:rgba(255,255,255,.14); --glas-kante:rgba(255,255,255,.25);
  --ruhe-ring:rgba(255,255,255,.65); --ruhe-schein:rgba(255,255,255,.5); --leucht-alpha-an:90%;
  --uhr-grund-a:color-mix(in srgb,var(--karte) 88%,#fff); --uhr-grund-b:color-mix(in srgb,var(--karte) 70%,#000);
  --ok:#4ade80; --ok-text:#4ade80; --warn:#e5b04a; --warn-text:#e5b04a; --warn-flaeche:rgba(245,158,11,.2); --gefahr-text:#f87171; color-scheme:dark;
}
.app-ui [hidden] {display:none!important}
.app-ui *, .app-ui *::before, .app-ui *::after {box-sizing:border-box}
.app-ui :is(h2,h3,h4,p,ul,fieldset) {margin:0;letter-spacing:normal;text-wrap:initial}
.app-ui :is(h2,h3,h4) {font-weight:700;line-height:1.3}
.app-ui h2 {font-size:var(--schrift-xl)}
.app-ui h3 {font-size:var(--schrift-lg)}
.app-ui h4 {font-size:var(--schrift-md)}
.app-ui p {color:var(--tinte)}
.app-ui :is(button,input,select) {font:inherit;color:var(--tinte);letter-spacing:normal}
.app-ui :is(button,select,input):focus-visible {outline:2px solid var(--akzent-lesbar);outline-offset:2px}
.app-ui .sym {width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.15em}
.app-ui .klein {font-size:var(--schrift-sm)}
.app-ui .dezent {color:var(--dezent)}
.app-ui .app-kopf {position:relative;display:flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;background:var(--glas);border-bottom:1px solid var(--linie);box-shadow:var(--wb-schatten)}
.app-ui .kopf-logo {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--radius-klein);background:var(--akzent);color:var(--weiss);font-weight:800}
.app-ui .betrieb-name {font-weight:800;letter-spacing:-.01em}
.app-ui .kopf-rechts {margin-left:auto;color:var(--dezent);font-size:var(--schrift-sm)}
.app-ui .haupt-nav {position:relative;display:flex;gap:.1rem;padding:0 .6rem;background:var(--wb-glas);border-bottom:1px solid var(--linie);overflow-x:auto}
.app-ui .haupt-nav .nav-item {position:relative;display:flex;align-items:center;justify-content:center;gap:.18rem;padding:.7rem .8rem .55rem;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dezent);white-space:nowrap;font-size:var(--schrift-sm);font-weight:600}
.app-ui .haupt-nav .nav-item:last-child {margin-left:auto}
.app-ui .haupt-nav .aktiv {color:var(--sek-text);background:color-mix(in srgb,var(--sek) 17%,transparent)}
.app-ui .haupt-nav .aktiv::after {content:'';position:absolute;left:.5rem;right:.5rem;bottom:-1px;height:3px;border-radius:var(--radius-klein) var(--radius-klein) 0 0;background:var(--sek)}
.app-ui [data-bereich="termine"] {--sek:var(--sek-termine);--sek-text:color-mix(in srgb,var(--sek) 65%,var(--tinte))}
.app-ui [data-bereich="zeiten"] {--sek:var(--sek-zeiten);--sek-text:color-mix(in srgb,var(--sek) 65%,var(--tinte))}
.app-ui [data-bereich="auftraege"] {--sek:var(--sek-auftraege);--sek-text:color-mix(in srgb,var(--sek) 65%,var(--tinte))}
.app-ui [data-bereich="uebersicht"] {--sek:var(--sek-uebersicht);--sek-text:color-mix(in srgb,var(--sek) 65%,var(--tinte))}
.app-ui .app-inhalt {padding:1.4rem 1rem;min-width:0}
.app-ui .dash-kopf {margin-bottom:1rem}
.app-ui .dash-gruss {font-size:var(--schrift-lg);font-weight:400;letter-spacing:-.02em}
.app-ui .dash-gruss strong {font-weight:800}
.app-ui .karte,.app-ui .tabellen-rahmen {border:1px solid var(--linie);border-radius:var(--radius-gross);background:var(--karte);box-shadow:var(--wb-schatten);padding:1.2rem}
.app-ui .uhr-karte {padding:1.6rem 1.2rem 1.4rem;text-align:center;border:1px solid var(--linie);border-radius:var(--radius-gross);background:radial-gradient(120% 90% at 50% 0%,var(--uhr-grund-a) 0%,var(--uhr-grund-b) 70%);overflow:hidden}
.app-ui .uhr-status {display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.4rem;margin-bottom:1.2rem}
.app-ui .status-punkt {width:10px;height:10px;border-radius:50%;background:var(--dezent);flex:none}
.app-ui .status-punkt.laeuft {background:var(--ok)}
.app-ui .status-punkt.pausiert {background:var(--pause)}
.app-ui .uhr-stand {color:var(--dezent);font-variant-numeric:tabular-nums}
.app-ui .uhr-auftrag {margin:0 0 1rem;font-weight:700;font-size:var(--schrift-md);overflow-wrap:anywhere}
.app-ui .uhr-karte .stempel-knopf {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:176px;height:176px;margin:0 auto 1rem;border-radius:50%;border:1px solid var(--glas-rand);background:linear-gradient(160deg,var(--glas-fuell-1),var(--glas-fuell-2));color:var(--tinte);box-shadow:inset 0 1px 0 var(--glas-kante),0 0 0 4px var(--ruhe-ring),0 0 40px -4px var(--ruhe-schein);backdrop-filter:blur(10px);font-weight:700;transform:none}
.app-ui .uhr-karte .stempel-knopf:active {transform:scale(.95)}
.app-ui .stempel-icon {width:1.9rem;height:1.9rem}
.app-ui .stempel-text {font-size:var(--schrift-md);font-weight:600}
.app-ui .stempel-zeit {font-family:inherit;font-size:1.7rem;font-weight:500;letter-spacing:-.02em;line-height:1;color:inherit}
.app-ui .stempel-knopf.laeuft {box-shadow:inset 0 1px 0 var(--glas-kante),0 0 0 3px color-mix(in srgb,var(--gefahr) var(--leucht-alpha-an),transparent),0 0 46px -6px color-mix(in srgb,var(--gefahr) 85%,transparent)}
.app-ui .stempel-knopf.laeuft .stempel-text {font-size:var(--schrift-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gefahr-text)}
.app-ui .stempel-knopf.laeuft.pausiert {box-shadow:inset 0 1px 0 var(--glas-kante),0 0 0 3px var(--warn),0 0 46px -6px var(--warn)}
.app-ui .stempel-knopf.pausiert :is(.stempel-text,.stempel-zeit,.stempel-icon) {color:var(--warn-text)}
.app-ui .pause-knopf {display:inline-flex;justify-content:center;align-items:center;gap:.4rem;margin:0 auto 1rem;min-height:44px;padding:.6rem 1.4rem;border:1px solid var(--glas-rand);border-radius:var(--radius-rund);background:var(--glas-fuell-2);color:var(--tinte);font-size:var(--schrift-sm);font-weight:600}
.app-ui .feld-label {font-size:var(--schrift-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dezent);margin-bottom:.5rem}
.app-ui .auftrag-wahl {margin:.4rem auto 0;max-width:440px}
.app-ui .ks-wahl {background:var(--flaeche);border-radius:var(--radius);padding:.75rem .7rem .85rem;margin-bottom:.9rem}
.app-ui .chips {display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.app-ui .chip {display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:44px;padding:.5rem 1rem;border:1px solid var(--glas-rand);border-radius:var(--radius-rund);background:linear-gradient(160deg,var(--glas-fuell-1),var(--glas-fuell-2));font-size:var(--schrift-sm);font-weight:600;color:var(--tinte)}
.app-ui .chip.gewaehlt {color:var(--akzent-lesbar);border-color:color-mix(in srgb,var(--akzent) 60%,transparent)}
.app-ui .chip-mehr {border-style:dashed;color:var(--dezent)}
.app-ui :is(input:not([type="checkbox"]),select,.app-feld) {display:block;width:100%;min-width:0;min-height:44px;padding:.65rem .8rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--wb-feld);color:var(--tinte);font-size:var(--schrift-md);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.app-ui .statistik-reihe {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.app-ui .stat-kachel {min-width:0;display:flex;align-items:baseline;gap:.6rem;padding:.75rem .9rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-gross);box-shadow:var(--wb-schatten)}
.app-ui .stat-wert {font-size:var(--schrift-xl);font-weight:600;color:var(--sek-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.app-ui .stat-titel {color:var(--dezent);font-size:var(--schrift-xs);font-weight:700}
.app-ui .app-mobile-nav {display:flex;justify-content:space-around;padding:.3rem .15rem;background:var(--wb-glas);border-top:1px solid var(--linie)}
.app-ui .app-mobile-nav .nav-item {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;min-height:50px;padding:.3rem .1rem;border-top:2px solid transparent;color:var(--dezent);font-size:var(--schrift-xs);font-weight:700}
.app-ui .app-mobile-nav .sym {width:1.25rem;height:1.25rem}
.app-ui .app-mobile-nav .aktiv {color:var(--akzent-lesbar);background:color-mix(in srgb,var(--akzent) 17%,transparent);border-top-color:var(--akzent);border-radius:0 0 var(--radius-klein) var(--radius-klein)}
.app-ui .app-mobile-nav .nav-item:last-child {outline:2px solid var(--akzent);outline-offset:-2px;border-radius:0 0 var(--radius-klein) var(--radius-klein)}
.app-ui .tab-sektion h2 {display:inline-block;color:var(--sek-text);border-bottom:2px solid var(--sek);padding-bottom:.4rem;margin-bottom:1rem}
.app-ui .tabellen-rahmen {padding:.5rem;overflow-x:auto}
.app-ui .ueb-tabelle {width:100%;border-collapse:collapse;background:var(--karte)}
.app-ui .ueb-tabelle :is(th,td) {text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--linie);font-size:var(--schrift-sm)}
.app-ui .ueb-tabelle th {font-size:var(--schrift-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--dezent)}
.app-ui .ueb-tabelle tbody tr:nth-child(even) {background:var(--eingabe)}
.app-ui .ueb-tabelle tbody tr:last-child td {border:0}
.app-ui .avatar {display:inline-grid;place-items:center;vertical-align:middle;width:34px;height:34px;margin-right:.6rem;background:var(--akzent-hell);color:var(--akzent-lesbar);border-radius:var(--radius-klein);font-size:var(--schrift-xs);font-weight:700;font-style:normal}
.app-ui .negativ {color:var(--gefahr-text);font-weight:700}
.app-ui .team-liste,.app-ui .auftrag-liste {padding:0;list-style:none;display:flex;flex-direction:column;gap:.7rem}
.app-ui .team-liste li,.app-ui .auftrag-liste li {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.8rem 1rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--wb-schatten)}
.app-ui .auftrag-info {flex:1;min-width:0}
.app-ui .auftrag-titel {display:inline-flex;align-items:center;gap:.3rem}
.app-ui .auftrag-nummer,.app-ui .auftrag-sparte {display:inline-block;font-size:var(--schrift-xs);font-weight:700;color:var(--dezent);padding:.05rem .4rem;border-radius:var(--radius-klein)}
.app-ui .auftrag-nummer {background:var(--eingabe)}
.app-ui .auftrag-sparte {border:1px solid var(--linie)}
.app-ui .zl-summe {color:var(--akzent-lesbar);font-weight:700;white-space:nowrap}
.app-ui .auftrag-aktionen {flex:1 1 100%;display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding-top:.5rem;border-top:1px solid var(--linie)}
.app-ui .auftrag-unterlagen,.app-ui .auftrag-status-aktionen {display:flex;flex-wrap:wrap;gap:.5rem}
.app-ui .auftrag-status-aktionen {margin-left:auto}
.app-ui .auftrag-chip {display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:44px;padding:.25rem .75rem;border:1px solid var(--wb-knopf-linie);border-radius:var(--radius-rund);background:var(--karte);font-size:var(--schrift-xs);font-weight:600}
.app-ui .auftrag-bearbeiten {display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--wb-knopf-linie);border-radius:var(--radius-klein);background:var(--karte)}
.app-ui .klein-knopf,.app-ui .knopf-primaer {display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.6rem 1rem;border:1px solid var(--wb-knopf-linie);border-radius:var(--radius);background:var(--karte);font-size:var(--schrift-sm);font-weight:600;text-decoration:none}
.app-ui .knopf-primaer {background:var(--akzent);color:var(--weiss);border-color:var(--akzent)}
.app-ui .seg-schalter {display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;margin-bottom:1rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--eingabe)}
.app-ui .seg-schalter span {padding:.45rem .6rem;font-size:var(--schrift-sm);font-weight:600;border-radius:var(--radius-klein)}
.app-ui .seg-schalter .aktiv {background:var(--tinte);color:var(--karte)}
.app-ui .app-zeile {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.app-ui .offline-banner {font-size:var(--schrift-xs);padding:.5rem .7rem;background:var(--warn-flaeche);color:var(--warn-text);border-bottom:1px solid var(--linie)}
.app-ui .offline-hinweis {color:var(--dezent);font-size:var(--schrift-xs);margin:.4rem 0}
/* Einbettung: proportionale Komponenten, keine Website-Typografie im Geräteinneren. */
.app-ui.app-kompakt {font-size:14px;--schrift-xs:12px;--schrift-sm:13px;--schrift-md:14px;--schrift-lg:16px;--schrift-xl:20px}
.app-ui.app-kompakt .app-kopf {padding:.55rem .8rem}
.app-ui.app-kompakt .haupt-nav .nav-item {font-size:12px;padding:.5rem .35rem}
.app-ui.app-kompakt .app-inhalt {padding:.8rem}
.app-ui.app-kompakt .ueb-tabelle :is(th,td) {font-size:12px;padding:.6rem .4rem;white-space:nowrap}
.app-ui.app-kompakt .ueb-tabelle .avatar {width:26px;height:28px;margin-right:.3rem}
.app-ui.app-kompakt .stat-kachel {flex-direction:column;gap:0;padding:.4rem .6rem}
.app-ui.app-kompakt .uhr-karte {padding:1rem .7rem}
.app-ui.app-kompakt .uhr-status {margin-bottom:.8rem;min-height:26px;gap:.4rem}
.app-ui.app-kompakt .dash-kopf {margin-bottom:.7rem}
.app-ui.app-kompakt .chip {padding:.35rem .65rem}
.app-ui.app-kompakt .statistik-reihe {gap:.4rem;margin-top:.6rem}
.app-ui .app-offline-queue {list-style:none;padding:0;font-size:var(--schrift-xs)}
.app-ui .app-offline-queue li {display:flex;justify-content:space-between;gap:.4rem;padding:.25rem 0;border-top:1px solid var(--linie)}
.app-ui .app-offline-queue small {font-size:inherit;color:var(--dezent)}
.app-ui .inhaber-raster {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.app-ui .inhaber-raster .karte {padding:1rem;min-width:0}
.app-ui .inhaber-raster h3 {padding-bottom:.5rem;border-bottom:1px solid var(--linie);margin-bottom:.8rem}
.app-ui .inhaber-raster .stat-wert {display:block;margin:.5rem 0}
.app-ui .ih-auslastung-balken {height:10px;background:var(--eingabe);border-radius:var(--radius-rund);margin:.4rem 0 1rem}
.app-ui .ih-auslastung-balken i {display:block;height:100%;width:60%;background:var(--akzent);border-radius:inherit}
.app-ui .import-zuordnung {display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:center;margin:1rem 0}
.app-ui .import-zuordnung .app-feld {font-size:13px}
.app-ui .import-tabelle {width:100%;border-collapse:collapse;font-size:13px}
.app-ui .import-tabelle :is(th,td) {padding:.6rem .4rem;border-bottom:1px solid var(--linie);text-align:left;overflow-wrap:anywhere}
.app-ui .import-neu {color:var(--ok-text)}
.app-ui .kolonne-auswahl {display:grid;gap:.5rem;margin:1rem 0;border:0;padding:0}
.app-ui .kolonne-auswahl label {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;border:1px solid var(--glas-rand);border-radius:var(--radius);padding:.6rem .7rem;background:var(--glas-fuell-2);cursor:pointer}
.app-ui .kolonne-auswahl label:has(input:checked) {border-color:var(--akzent);background:var(--akzent-hell)}
.app-ui .kolonne-auswahl input {accent-color:var(--akzent);width:18px;height:18px;flex:none}
.app-ui .kolonne-auswahl [data-member-state] {margin-left:auto;color:var(--dezent);font-size:12px}
.app-ui .kolonne-auswahl small {display:block;font-size:12px;color:var(--dezent)}
.app-ui .terminal-kopf {display:flex;align-items:center;justify-content:space-between;padding-bottom:.6rem;border-bottom:1px solid var(--linie)}
.app-ui .terminal-suche {margin:1rem 0}
.app-ui .terminal-personen {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.app-ui .terminal-person {display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;min-height:72px;padding:1rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte);font-weight:700}
.app-ui .terminal-pin {max-width:260px;margin:1.2rem auto 0;text-align:center}
.app-ui .terminal-ziffern {display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.8rem}
.app-ui .terminal-ziffern span {display:grid;place-items:center;min-height:44px;border:1px solid var(--linie);background:var(--karte);border-radius:var(--radius);font-weight:700}
@media(max-width:600px) {.app-ui .inhaber-raster{grid-template-columns:1fr}.app-ui .auftrag-status-aktionen{margin-left:0}.app-ui .ueb-tabelle :is(th,td){padding:.5rem .35rem}}
/* Dashboard v0.488: echte Kennzahl-/Klappkarten und Stundenbalken. */
.app-ui .dash-kennzahl {display:flex;flex-direction:column;gap:.5rem;min-width:0}
.app-ui .dash-kennzahl strong {font-size:var(--schrift-xl);font-weight:700}
.app-ui .dash-raster {display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;align-items:start;margin-top:.75rem}
.app-ui .dash-raster>.dash-karte {margin:0;padding:0;min-width:0;overflow:hidden}
.app-ui .einst-klapp-kopf {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 1rem;align-items:center;min-height:4.4rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--linie)}
.app-ui .einst-klapp-titel {font-size:var(--schrift-md);font-weight:600;grid-column:1}
.app-ui .einst-klapp-unter {font-size:var(--schrift-sm);color:var(--dezent);grid-column:1}
.app-ui .einst-klapp-pfeil {grid-column:2;grid-row:1/span 2;color:var(--dezent);width:1.1rem;height:1.1rem;transform:rotate(180deg)}
.app-ui .einst-klapp-inhalt {padding:.2rem 1.1rem .9rem}
.app-ui .dash-liste,.app-ui .dash-balken {list-style:none;padding:0;margin:0}
.app-ui .dash-liste>li {padding:.5rem 0;border-bottom:1px solid var(--linie)}
.app-ui .dash-person {display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.app-ui .dash-balken>li {display:grid;grid-template-columns:3.7rem minmax(0,1fr) auto;gap:.5rem;align-items:center;font-size:var(--schrift-sm);margin:.5rem 0}
.app-ui .dash-balken small {grid-column:1/-1;color:var(--dezent)}
.app-ui .dash-balken-spur {display:flex;height:12px;background:var(--flaeche);border-radius:var(--radius-klein);overflow:hidden}
.app-ui .dash-segment {height:100%;background:var(--akzent)}
.app-ui .dash-segment-1 {background:var(--akzent-lesbar)}
.app-ui .dash-segment-2 {background:var(--dezent)}
.app-ui .nav-mehr-icon {font-size:20px;line-height:1}
.app-ui .terminal-ziffern span:nth-child(10),.app-ui .terminal-ziffern span:nth-child(12) {font-size:12px}
.app-ui .kolonne-auswahl label {position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:.75rem;gap:.25rem}
.app-ui .kolonne-auswahl label:focus-within {outline:2px solid var(--akzent-lesbar);outline-offset:2px}
.app-ui .kolonne-auswahl input {position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.app-ui .kolonne-auswahl [data-member-state] {margin:0}
.app-ui .kolonne-auswahl .avatar {display:none}
.app-ui .kolonne-auswahl label>span:nth-of-type(2)>small {display:none}
.app-ui .kolonne-auswahl legend {font-weight:600;font-size:var(--schrift-md);margin-bottom:.5rem}
@media(min-width:900px){.app-ui .dash-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.app-ui .offline-streifen {display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;background:var(--warn-flaeche);color:var(--warn-text);padding:.5rem 1rem;font-size:var(--schrift-sm);font-weight:600;text-align:center}
.app-ui .kopf-logo {background:linear-gradient(135deg,var(--akzent),var(--akzent-dunkel))}

/* Runde 4: Geräte rendern native App-Maße, unabhängig vom Website-Breakpoint. */
.app-ui{--akzent-hell:var(--eingabe);--glas-rand:rgba(20,24,28,.18);--dezent:#484d4f}
[data-theme=dark] .app-ui{--dezent:#b7bfc4;--akzent-lesbar:#93d5b6;--glas-rand:rgba(255,255,255,.18)}
.app-device{font-size:16px;--schrift-xs:.75rem;--schrift-sm:.875rem;--schrift-md:1rem;--schrift-lg:1.125rem;--schrift-xl:1.375rem}
.app-device .app-kopf{padding:.75rem 1.1rem}
.app-device .haupt-nav{display:flex;gap:.1rem;overflow:hidden;flex-wrap:nowrap;padding:0 .6rem}
.app-device .haupt-nav .nav-item{white-space:nowrap;word-break:normal;overflow-wrap:normal;hyphens:none;font-size:var(--schrift-sm);padding:.7rem .8rem .55rem;flex:none;min-width:auto;line-height:1.5}
.app-device .haupt-nav .nav-item:last-child{margin-left:auto}
.app-device .app-inhalt{padding:1.4rem 1rem}
.app-device .ueb-tabelle :is(th,td){padding:.75rem 1rem;white-space:nowrap}
.app-device .stat-kachel{flex-direction:column;gap:0;padding:.75rem .5rem}
.app-device .stat-wert{font-size:var(--schrift-xl)}
.app-device .stat-titel{font-size:var(--schrift-xs);line-height:1.5}
.app-device .uhr-karte .stempel-knopf{width:176px;height:176px}
.app-device .app-mobile-nav{flex-wrap:nowrap}
.app-device .app-mobile-nav .nav-item{min-width:0;white-space:nowrap;font-size:var(--schrift-xs);min-height:50px}
.app-device .app-mobile-nav .sym{width:1.25rem;height:1.25rem}
.app-ui .haupt-nav .aktiv,.app-ui .app-mobile-nav .aktiv{background:var(--eingabe)}

/* Bedienbare Mitarbeiter-Einbettung: App css/app.css, Zeiten-/Eintrag-/Profil-Klassen. */
.app-ui .app-mobile-nav button.nav-item{border:0;border-top:2px solid transparent;background:transparent;cursor:pointer}
.app-ui .app-mobile-nav button.nav-item.aktiv{border-top-color:var(--sek);background:var(--eingabe)}
.app-ui .phone-panel{overflow-y:auto;min-height:0;flex:1}
.app-ui .phone-panel h3{margin:1rem 0 .6rem}
.app-ui .phone-panel :is(input[type=search],.team-liste,.auftrag-liste){margin-bottom:1rem}
.app-ui .phone-panel .app-zeile>select{width:auto;max-width:100%}
.app-ui :is(.eintrag-form,.einst-klapp-inhalt){display:grid;gap:1rem}
.app-ui .eintrag-form .form-reihe{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end}
.app-ui .eintrag-form .form-reihe>label{flex:1;min-width:110px}
.app-ui .eintrag-form label{display:grid;gap:.3rem;font-size:var(--schrift-sm);font-weight:600}
.app-ui textarea{width:100%;min-height:80px;padding:.65rem .8rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--wb-feld);color:var(--tinte);font:inherit;resize:vertical}
.app-ui :is(textarea,summary,canvas):focus-visible{outline:2px solid var(--akzent-lesbar);outline-offset:2px}
.app-ui .zeit-liste{list-style:none;padding:0;display:grid;gap:.6rem}
.app-ui .zeit-zeile{display:grid;gap:.3rem;width:100%;min-height:44px;text-align:left;padding:1rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte)}
.app-ui .leerzustand{display:grid;justify-items:center;gap:1rem;text-align:center;color:var(--dezent)}
.app-ui .leerzustand>.sym{width:28px;height:28px}
.app-ui .mehr-menue{display:grid;gap:.5rem}
.app-ui .mehr-menue>button{justify-content:start}
.app-ui .einst-karte{padding:0;margin-bottom:1rem}
.app-ui summary.einst-klapp-kopf{display:grid;grid-template-columns:1fr;padding:1rem;min-height:72px;cursor:pointer}
.app-ui .einst-klapp-inhalt{padding:1rem;border-top:1px solid var(--linie)}
.app-ui .phone-panel .support-karte{display:grid;gap:.6rem}
.app-ui .demo-photo{width:100%;height:auto;border-radius:var(--radius)}
.app-ui .demo-signature{display:block;width:100%;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte);touch-action:none}
.app-ui .phone-feedback{margin:0;padding:.45rem 1rem;flex:none;font-size:var(--schrift-xs)}
.app-ui .phone-feedback:empty{display:none}
.app-ui .seg-schalter button{border:0;padding:.45rem .6rem;min-height:44px;border-radius:var(--radius-klein);font-size:var(--schrift-sm);font-weight:600;background:transparent}
.app-ui .seg-schalter button.aktiv{background:var(--tinte);color:var(--karte)}
.day-phone[hidden],.day-resume[hidden]{display:none}
.day-phone:focus-visible{outline:3px solid var(--akzent-text);outline-offset:4px}
.day-phone>.day-screen[hidden]{display:none!important}
.day-live-screen .ks-wahl{display:block}
.day-resume{margin-top:1rem;min-height:44px;padding:.6rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:600}
@media print{.day-resume{display:none!important}}
/* Beide Bürofenster behalten die vollständige Rechnerleiste, auch im Arbeitstag. */
.day-office>.app-device.office-demo{width:860px}
.day-office .app-ui.office-demo :is(.app-kopf,.haupt-nav){display:flex}
.day-office .app-ui.office-demo .office-demo-body{height:400px;min-height:0;max-height:400px}
.day-office .app-ui.office-demo .office-demo-body::before{content:none}

.app-ui .auftrag-wahl>input[type="search"]{margin-bottom:.6rem}

/* Büro-Startseite (v0.585, Kacheln mittig seit v0.594): App/css/app.css .heute-blick/.schnell-aktionen; .knopf-text nach app.css:4089/4134. Mobilregeln entfallen, das Büro rendert mit 1100 CSS-px. */
.app-ui .knopf-text{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--knopf-md);padding:.5rem .75rem;border:1px solid transparent;border-radius:var(--radius-klein);background:none;color:var(--akzent-lesbar);font:inherit;font-weight:600;cursor:pointer}
.app-ui .heute-blick{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .9rem;padding:.7rem 1rem}
.app-ui .heute-blick strong{font-size:var(--schrift-sm)}
.app-ui .heute-blick strong::after{content:":"}
.app-ui .heute-blick-zahlen{display:flex;align-items:center;flex-wrap:wrap;gap:0 .6rem}
.app-ui .heute-blick .knopf-text{font-size:var(--schrift-sm);padding:0}
.app-ui .heute-blick-zahlen button+button::before{content:"·";color:var(--dezent);margin-right:.6rem}
.app-ui .heute-blick-uebersicht{margin-left:auto}
.app-ui .heute-blick-uebersicht::after{content:"";display:inline-block;width:.4rem;height:.4rem;margin-left:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.app-ui .schnell-aktionen{display:flex;justify-content:center;gap:.7rem;margin:.8rem 0 1rem}
.app-ui .schnell-aktionen>.knopf-neutral{flex:1 1 0;min-width:0;max-width:15rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:var(--knopf-md);padding:.8rem;background:var(--karte);color:var(--tinte);border:1px solid var(--linie);border-radius:var(--radius-gross);box-shadow:var(--wb-schatten);font:inherit;text-align:center;cursor:pointer}
.app-ui .schnell-aktionen>.knopf-neutral:hover{background:var(--eingabe)}
.app-ui .schnell-aktionen b{font-size:var(--schrift-sm)}
.app-ui .schnell-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);background:var(--akzent-hell);color:var(--akzent-lesbar)}
/* Die Alltag-Ansicht (.app-kompakt) wird nicht skaliert, sondern ist am Handy wirklich schmal: dort die Handy-Regeln aus app.css:4542–4550. */
@media(max-width:600px){.app-ui.app-kompakt .heute-blick{gap:.25rem .6rem}.app-ui.app-kompakt .heute-blick strong{flex-basis:100%}.app-ui.app-kompakt .heute-blick strong::after{content:none}.app-ui.app-kompakt .heute-blick .heute-blick-uebersicht{display:none}.app-ui.app-kompakt .heute-blick-zahlen{gap:0 1rem}.app-ui.app-kompakt .heute-blick-zahlen button+button::before{content:none}.app-ui.app-kompakt .schnell-aktionen{display:flex;justify-content:flex-start;overflow-x:auto;gap:.5rem;padding:2px 2px .5rem}.app-ui.app-kompakt .schnell-aktionen>.knopf-neutral{flex:0 0 112px;padding:.6rem}}
/* Profil-Schalter für den Startseiten-Blick (App v0.594, Karte „Konto“). */
.app-ui .office-check{display:flex;align-items:center;gap:.6rem;min-height:var(--knopf-md);margin:.4rem 0;font-size:var(--schrift-sm)}
.app-ui .office-check input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--akzent)}