/* Maßwerk KI Cloud-Software: Mac-Desktop-Look (Maßwerk-Design, Stand 2026-11-03).
   Basis aus style-referenz.css + desktop.css des Skills masswerk-design. Immer dunkel. Keine externen Schriften, keine CDNs. UTF-8. */
:root {
  color-scheme: dark;
  --bg: #0B0B10;
  --karte: #1B1B24;
  --karte2: #22222C;
  --text: #F2F2F6;
  --text-leise: #B9B9C6;
  --rand: #2F2F3A;
  --koralle: #FF4B2B;
  --koralle-text: #FF8266;
  --koralle-hell: #2A1713;
  --gut: #6FD79B;
  --gut-bg: #12301F;
  --warn-bg: #3A2A08;
  --warn-text: #FFE3B0;
  --fehler-bg: #3F1612;
  --fehler-text: #FFB4AA;
  --fokus: #8DBBFF;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-fenster: 12px;
  --r: 10px;
  --r-klein: 8px;
  --menue-h: 28px;
  --dock-platz: 98px;
  --glas: rgba(24, 24, 31, .80);
  --glas-leiste: rgba(20, 20, 26, .62);
  --glas-rand: rgba(255, 255, 255, .13);
  --schatten: 0 30px 80px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html { font-size: 16px; font-family: var(--schrift); }
body {
  margin: 0; color: var(--text); font-family: var(--schrift); line-height: 1.5;
  height: 100vh; height: 100dvh; overflow: hidden;
  background-color: #14141c;
  background-image:
    radial-gradient(1100px 700px at 12% 8%, rgba(255, 75, 43, .42), transparent 62%),
    radial-gradient(900px 700px at 92% 18%, rgba(88, 86, 214, .50), transparent 60%),
    radial-gradient(1000px 800px at 60% 105%, rgba(10, 132, 255, .38), transparent 62%),
    linear-gradient(160deg, #1d1b2e, #0f1019 70%);
  background-attachment: fixed;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-top: 1.2rem; }
p { margin: 0 0 .6rem; }
a { color: var(--koralle-text); font-weight: 600; }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: .5rem 1rem; z-index: 90; }
.sprunglink:focus { left: 0; }
.leer, .hinweis-klein { color: var(--text-leise); }
.hinweis-klein { font-size: .9rem; }

/* Knöpfe, Felder */
.knopf {
  font: inherit; font-size: 1rem; font-weight: 600; min-height: 48px; padding: .5rem 1.1rem;
  border-radius: var(--r-klein); border: 1px solid var(--glas-rand); background: var(--karte2); color: var(--text); cursor: pointer;
}
.knopf:hover { border-color: var(--text-leise); }
.knopf.haupt { background: var(--koralle); border-color: var(--koralle); color: #0B0B10; font-weight: 700; }
.knopf.haupt:hover { filter: brightness(1.06); }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 600; margin: .9rem 0 .25rem; }
input[type="email"], input[type="password"], input[type="text"] {
  font: inherit; font-size: 1rem; width: 100%; min-height: 48px; padding: .5rem .7rem;
  border: 1px solid var(--text-leise); border-radius: var(--r-klein); background: var(--karte); color: var(--text);
}
.fehlerleiste { background: var(--fehler-bg); color: var(--fehler-text); padding: .6rem .9rem; font-weight: 600; border-radius: var(--r-klein); margin: .8rem 0 0; }
.fenster-inhalt > .fehlerleiste { margin: 0; border-radius: 0; flex: none; }
.dlg-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* Menüleiste */
.menueleiste {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menue-h); z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .9rem;
  background: var(--glas-leiste); color: var(--text); font-size: .82rem; line-height: 1;
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border-bottom: 1px solid var(--glas-rand);
}
.ml-links, .ml-rechts { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ml-logo { display: block; width: 18px; height: 18px; flex: none; }
.ml-marke { font-weight: 700; white-space: nowrap; }
.ml-bereich, .ml-betrieb { color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-uhr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ml-knopf { font: inherit; color: var(--text); background: transparent; border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.ml-knopf:hover { background: rgba(255, 255, 255, .12); }

/* Fenster */
.fenster {
  position: fixed; z-index: 20; top: calc(var(--menue-h) + 10px); bottom: var(--dock-platz);
  left: 0; right: 0; margin: 0 auto; width: min(1100px, 96vw);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--glas); color: var(--text);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--glas-rand); border-radius: var(--r-fenster); box-shadow: var(--schatten);
  overflow: hidden; transform-origin: 50% 100%;
}
.fenster.klein { bottom: auto; top: calc(var(--menue-h) + 8vh); width: min(26rem, 94vw); max-height: calc(100dvh - var(--menue-h) - 16px); }
.fenster.gross { width: 100vw; top: var(--menue-h); border-radius: 0; border-left: 0; border-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fenster { transition: transform .32s cubic-bezier(.3, .8, .3, 1), opacity .24s ease, width .24s ease, top .24s ease, visibility 0s linear 0s; }
  .fenster.ist-zu, .fenster.ist-min { transition: transform .32s cubic-bezier(.5, 0, .75, 0), opacity .26s ease, visibility 0s linear .32s; }
}
.fenster.ist-zu { opacity: 0; visibility: hidden; transform: scale(.94) translateY(24px); pointer-events: none; }
.fenster.ist-min { opacity: 0; visibility: hidden; transform: translateY(46vh) scale(.12); pointer-events: none; }
.titelleiste { flex: none; display: flex; align-items: center; gap: .8rem; height: 38px; padding: 0 .8rem; border-bottom: 1px solid var(--glas-rand); position: relative; }
.ampel { display: flex; gap: 2px; z-index: 1; }
.ampel button {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(0, 0, 0, .62);
}
.ampel button::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .28); }
.ampel button span { position: absolute; font-size: 10px; font-weight: 800; line-height: 1; opacity: 0; }
.ampel:hover button span, .ampel button:focus-visible span { opacity: 1; }
.ampel .rot { --farbe: #FF5F57; }
.ampel .gelb { --farbe: #FEBC2E; }
.ampel .gruen { --farbe: #28C840; }
.titel-text { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; font-size: .86rem; color: var(--text-leise); pointer-events: none; padding: 0 7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster-inhalt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
main { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }
main:focus { outline: none; }
.fuss { flex: none; text-align: center; color: var(--text-leise); font-size: .75rem; padding: .3rem .6rem; border-top: 1px solid var(--rand); }
.fuss p { margin: 0; }
.desktop-hinweis {
  position: fixed; z-index: 10; left: 0; right: 0; top: 38%; margin: 0 auto; width: max-content; max-width: 90vw; text-align: center;
  padding: .7rem 1.2rem; border-radius: var(--r); background: var(--glas); border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}

/* Anmeldung */
.login-inhalt { padding: 1.4rem 1.4rem 1.6rem; }
.login-logo { display: block; width: 154px; height: auto; margin: 0 0 1rem; border-radius: 6px; }

/* Inhalte */
.ablage { background: color-mix(in srgb, var(--karte) 88%, transparent); border: 1px solid var(--rand); border-radius: var(--r); padding: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.start-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.start-zahl { display: flex; background: var(--karte2); border: 1px solid var(--rand); border-radius: var(--r); overflow: hidden; }
.start-zahl-knopf {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 72px; padding: .6rem .9rem;
  font: inherit; color: var(--text); background: transparent; border: 0; cursor: pointer; text-align: left;
}
.start-zahl-knopf:hover { background: rgba(255, 255, 255, .06); }
.start-zahl-wert { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.start-zahl-name { color: var(--text-leise); font-size: .9rem; }
.paket-liste { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { display: inline-block; font-size: .85rem; font-weight: 600; padding: .15rem .7rem; border-radius: 999px; background: var(--gut-bg); color: var(--gut); border: 1px solid var(--gut); }
.tag.neutral { background: transparent; color: var(--text-leise); border-color: var(--rand); }
.kartenliste { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.kartenliste li { background: var(--karte2); border: 1px solid var(--rand); border-radius: var(--r-klein); padding: .7rem .9rem; min-width: 0; overflow-wrap: anywhere; }
.k-name { display: block; font-weight: 700; }
.k-zeile { display: block; color: var(--text-leise); font-size: .9rem; }
/* Mitarbeiter (nur Chef): Stand, Knopf, Rückfrage vor dem Sperren */
.tag.sperre { background: var(--fehler-bg); color: var(--fehler-text); border-color: var(--fehler-text); margin-top: .3rem; }
.kartenliste li > .tag { margin-top: .3rem; }
.kartenliste li > .knopf { display: block; margin-top: .6rem; width: 100%; }
.rueckfrage { background: var(--karte2); border: 2px solid var(--koralle-text); border-radius: var(--r); padding: 1rem; margin: .8rem 0; }
.rueckfrage h3 { margin-top: 0; }
.tabellenrahmen { overflow-x: auto; margin-top: .6rem; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--rand); vertical-align: top; overflow-wrap: anywhere; }
th { font-size: .8rem; color: var(--text-leise); font-weight: 600; }

/* Dock */
.dock {
  position: fixed; z-index: 60; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 14px; padding: 8px 14px;
  background: var(--glas-leiste); border: 1px solid var(--glas-rand); border-radius: 22px; box-shadow: var(--schatten);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
}
.dock-knopf { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0 8px; margin: 0; background: transparent; border: 0; color: var(--text); cursor: pointer; border-radius: var(--r); }
.dock-icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; color: #fff;
  background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: scale(var(--s, 1)); transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .dock-icon { transition: transform .14s ease-out; }
  .dock-knopf:active .dock-icon { transform: scale(calc(var(--s, 1) * .92)); }
}
.dock-icon svg { width: 28px; height: 28px; }
.dock-knopf::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--text); opacity: 0; }
.dock-knopf[aria-current="page"]::after { opacity: .85; }
.dock-name {
  position: absolute; bottom: calc(100% + 34px); left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 4px 10px; border-radius: 7px; font-size: .82rem; font-weight: 600; line-height: 1.3;
  background: var(--glas); color: var(--text); border: 1px solid var(--glas-rand); box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden;
}
.dock-knopf:hover .dock-name, .dock-knopf:focus-visible .dock-name { opacity: 1; visibility: visible; }
.dock-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.dock-knopf:focus-visible .dock-icon { transform: scale(1.18); }
.dock-start    { --c1: #FF6A4D; --c2: #E5381A; }
.dock-kunden   { --c1: #3D9BFF; --c2: #0A63D6; }
.dock-vorgaenge { --c1: #3DBE74; --c2: #12803F; }
.dock-angebot  { --c1: #E7A21E; --c2: #A86400; }
.dock-rechnung { --c1: #9B6BFF; --c2: #6030D0; }
.dock-mail     { --c1: #2FB8C9; --c2: #107A89; }
.dock-ki       { --c1: #E15BB5; --c2: #A3257E; }
.dock-export   { --c1: #7C8396; --c2: #4B5163; }
.dock-mitarbeiter { --c1: #E0733C; --c2: #A8400E; }

/* Handy: Tab-Leiste unten, Fenster füllt den Bildschirm */
@media (max-width: 799px) {
  :root { --menue-h: 30px; --dock-platz: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .menueleiste { padding: 0 .6rem; gap: .5rem; }
  .ml-bereich, .ml-datum, #ml-abmelden { display: none; }
  .fenster, .fenster.gross { top: var(--menue-h); bottom: var(--dock-platz); width: 100%; border-radius: 0; border: 0; box-shadow: none; margin: 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
  .fenster.klein { top: var(--menue-h); bottom: 0; max-height: none; }
  .fenster.ist-zu, .fenster.ist-min { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .titelleiste { display: none; }
  .desktop-hinweis { display: none; }
  main { padding: .5rem; }
  .dock {
    left: 0; right: 0; bottom: 0; transform: none; width: 100%; gap: 0; justify-content: space-around; align-items: stretch;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 0; border-top: 1px solid var(--glas-rand);
    background: var(--glas); box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
  }
  .dock-knopf { flex: 1 1 0; min-width: 44px; min-height: 52px; padding: 2px 0 0; justify-content: center; gap: 3px; border-radius: var(--r-klein); }
  .dock-knopf::after { display: none; }
  .dock-icon { width: 30px; height: 30px; border-radius: 8px; transform: none !important; }
  .dock-icon svg { width: 19px; height: 19px; }
  .dock-name { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; border: 0; box-shadow: none; padding: 0; font-size: .7rem; font-weight: 600; color: var(--text-leise); pointer-events: none; }
  .dock-knopf[aria-current="page"] .dock-name { color: var(--koralle-text); }
  .dock-knopf[aria-current="page"] { background: var(--koralle-hell); }
  .dock-knopf:focus-visible .dock-icon { transform: none; }
  /* Vorgänge als Karten statt Tabelle */
  #vorgaenge-tabelle, #vorgaenge-tabelle tbody, #vorgaenge-tabelle tr, #vorgaenge-tabelle td { display: block; width: 100%; }
  #vorgaenge-tabelle thead { position: absolute; left: -9999px; }
  #vorgaenge-tabelle tr { border: 1px solid var(--rand); border-radius: var(--r-klein); margin-bottom: .6rem; padding: .4rem .6rem; background: var(--karte2); }
  #vorgaenge-tabelle td { border: 0; padding: .1rem 0; }
  #vorgaenge-tabelle td[data-label]::before { content: attr(data-label) ": "; color: var(--text-leise); font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .dock-icon, .fenster { transition: none !important; } }