/* Bär Metallbau – Corporate Design (CD-Manual Neckarmedia, 2022)
   Blau  var(--blau) (Pantone 654 C) · Grau var(--bg) · Schwarz · Weiß · Hausschrift Archivo */
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("/cd/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("/cd/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("/cd/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("/cd/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("/cd/archivo-800.woff2") format("woff2"); }
:root {
  --blau: #004070;
  --blau-dunkel: #002e52;
  --blau-hell: #e3ecf4;
  --grau: #ededed;
  --bg: var(--grau);
  --card: #ffffff;
  --ink: #111417;
  --ink2: #34393f;
  --muted: #5f656c;
  --line: #d6d8da;
  --chip: #eceef0;
  --accent: var(--blau);
  --accent-ink: #ffffff;
  --accent-soft: var(--blau-hell);
  --steel: var(--blau);
  --on-steel: #ffffff;
  --stage: #e6e8ea;
  --ok: #2f7d4f;
  --danger: #b3261e;
  --radius: 8px;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--font-ui);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-size: 16px; line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; font-weight: 800; color: var(--blau); letter-spacing: -.005em; line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; font-weight: 700; color: var(--blau); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--blau); color: #fff; padding: .55rem 1rem; position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; flex: none; }
.logo { height: 46px; width: auto; display: block; }
.logo-baer { display: none; height: 30px; width: auto; }
.brand-sub { font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .9; border-left: 1px solid rgba(255,255,255,.35); padding-left: .8rem; }
#nav { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
#nav a, #nav button { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-s); font-weight: 500; padding: .3rem .7rem; text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer; }
#nav a.active { background: #fff; color: var(--blau); border-color: #fff; font-weight: 600; }
#nav a.active .navbadge { color: #fff; }
#nav .who { opacity: .8; font-size: .85rem; }

main { --seite: 1rem; max-width: 1100px; margin: 0 auto; padding: 1.25rem var(--seite) 4rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.project-card { display: block; text-decoration: none; color: inherit; border-left: 5px solid var(--accent); }
.project-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.project-card .nr { font-size: .85rem; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.project-card .name { font-size: 1.05rem; font-weight: 700; color: var(--blau); margin: .15rem 0 .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .75rem; background: var(--chip); border-radius: 999px; padding: .1rem .55rem; color: var(--ink2); }

.btn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .95rem; padding: .5rem .9rem; border-radius: var(--r-s);
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--blau-dunkel); }
.btn:hover { border-color: #b9bec3; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau); outline-offset: -1px; border-color: var(--blau); }
.btn.danger { color: var(--danger); border-color: #e5b9b5; }
.btn.small { padding: .25rem .55rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }

form.stack { display: grid; gap: .7rem; }
label { display: grid; gap: .25rem; font-size: .85rem; color: var(--ink2); font-weight: 500; }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
.error { color: var(--danger); font-size: .95rem; min-height: 1.2em; }

.login { max-width: 380px; margin: 0 auto; border-top: 4px solid var(--blau); }
.loginlogo { display: block; width: 150px; height: auto; margin: 6vh auto 1.6rem; }

/* Projekt: Reiter */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); margin: 1rem 0; overflow-x: auto; }
.tabs a { padding: .55rem .9rem; text-decoration: none; color: var(--ink); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a.active { border-color: var(--accent); font-weight: 650; }
.tabs .count { font-size: .75rem; color: var(--muted); margin-left: .2rem; }

.files { display: grid; gap: .4rem; }
.file { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
.file .icon { width: 2.2rem; height: 2.2rem; border-radius: var(--r-s); display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--chip); color: var(--ink2); flex: none; }
.file .icon.pdf { background: var(--orange-h); color: #a23c12; }
.file .icon.d3 { background: var(--blau-hell); color: var(--blau); }
.file .meta { flex: 1; min-width: 0; }
.file .meta .fn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gallery figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; background: var(--line); }
.gallery figcaption { font-size: .75rem; padding: .3rem .45rem; color: var(--muted); display: flex; justify-content: space-between; gap: .3rem; }

.dropzone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 1rem; text-align: center; color: var(--muted); margin-bottom: 1rem; background: var(--bg); }
.dropzone.over { border-color: var(--blau); background: var(--blau-hell); }

/* Tagebuch */
.log { display: grid; gap: .7rem; }
.entry { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem .9rem; }
.entry .head { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.entry .head b { color: var(--ink); }
.entry .text { white-space: pre-wrap; }
.entry .att { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.entry .att img { height: 90px; border-radius: var(--r-s); cursor: zoom-in; }
.composer { position: sticky; bottom: 0; background: var(--bg); padding-top: .75rem; margin-top: 1rem; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.badge { font-size: .75rem; padding: .05rem .45rem; border-radius: 999px; background: var(--chip); }
.badge.admin { background: var(--accent); color: #fff; }

[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; background: rgba(0,24,44,.6); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal .box { background: #fff; border-radius: var(--radius); padding: 1.1rem; width: min(520px, 100%); max-height: 90vh; overflow: auto; }
.modal .box.wide { width: min(1000px, 100%); }
.modal img.big { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; }
.modal pre { white-space: pre-wrap; font-size: .85rem; background: var(--bg); padding: .75rem; border-radius: var(--r-s); }
.checks { display: grid; gap: .3rem; max-height: 300px; overflow: auto; }
.checks label { display: flex; gap: .5rem; align-items: center; font-size: .95rem; }
.checks input { width: auto; }

.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--blau-dunkel); color: #fff; padding: .6rem 1rem; border-radius: var(--r-s); z-index: 60; }
.empty { padding: 1.5rem; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }

@media (max-width: 600px) {
  .brand-sub { display: none; }
  #nav .who { display: none; }
  main { --seite: .75rem; padding: 1rem var(--seite) 4rem; }
}

/* ---------- Hinweise, Versionen */
.chip.alarm, b.alarm { background: var(--rot-h); color: var(--danger); font-weight: 700; }
b.alarm { padding: 0 .35rem; border-radius: 999px; }
.chip.new { background: var(--gruen-h); color: var(--ok); font-weight: 650; }
.badge.newv { background: var(--ok); color: #fff; font-weight: 700; }
.badge.oldv { background: var(--rot-h); color: var(--danger); font-weight: 600; }
.file.old { background: var(--bg); }
.file.old .fn { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.file .meta .fn { white-space: normal; }
details.oldversions { margin-top: 1rem; }
details.oldversions summary { cursor: pointer; color: var(--muted); font-size: .95rem; padding: .4rem 0; }
.notice { background: var(--orange-h); border: 1px solid #f0c98a; border-radius: var(--r-s); padding: .55rem .75rem; margin: .5rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ---------- Zuschnitt */
.cuttop { margin-bottom: .4rem; }
.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; position: relative; width: min(320px, 70vw); margin-top: .3rem; }
.progress i { position: absolute; inset: 0 auto 0 0; background: #6d9fd0; }
.progress i.f { background: var(--ok); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: #fff; }
.seg button { font: inherit; font-size: .85rem; padding: .35rem .65rem; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--steel); color: #fff; }
h2.src { font-size: .95rem; color: var(--muted); margin: 1.2rem 0 .4rem; }
.cutgroup { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; }
.ghead { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; padding: .5rem .75rem; background: var(--blau-hell); border-bottom: 1px solid var(--line); }
.ghead b { font-size: 1rem; color: var(--blau); }
.ghead span { font-size: .85rem; color: var(--muted); }
.cuthead, .cut { display: grid; grid-template-columns: 7.5rem 4.5rem 6.5rem 1fr auto; gap: .2rem .6rem; align-items: center; padding: .45rem .75rem; }
.cuthead { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-block: .3rem; border-bottom: 1px solid var(--line); }
.cut { border-bottom: 1px solid var(--bg); }
.cut:last-child { border-bottom: 0; }
.c-pos { font-weight: 700; }
.c-len { font: 700 1.05rem ui-monospace, Consolas, monospace; }
.c-cut { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.c-act { display: flex; gap: .35rem; justify-content: flex-end; }
.c-sub { grid-column: 1 / -1; font-size: .75rem; }
.c-sub:empty { display: none; }
.chg { grid-column: 1 / -1; font-size: .85rem; color: var(--gelb); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cut.changed { background: var(--orange-h); }
.cut.gone { background: var(--rot-h); }
.cut.gone .chg { color: var(--danger); }
.gonebox { border-color: #e5b9b5; }
.st { font: inherit; font-size: .85rem; font-weight: 650; min-width: 5.2rem; padding: .4rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.st-gesaegt { background: var(--blau-hell); border-color: #6d9fd0; color: var(--blau); }
.st-fertig { background: var(--ok); border-color: var(--ok); color: #fff; }
.printonly { display: none; }

/* ---------- Packliste */
.pack { display: grid; gap: .35rem; margin: .6rem 0; }
.pk { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); padding: .6rem .75rem; cursor: pointer; font-size: 1rem; color: var(--ink); }
.pk input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--ok); }
.pk.on { background: var(--gruen-h); }
.pk.on .pk-t b { text-decoration: line-through; color: var(--muted); }
.pk-t { flex: 1; display: grid; gap: .1rem; }
.pk-m { font-weight: 700; font-family: ui-monospace, Consolas, monospace; }
.pk-x { border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: .3rem; }
.addline input { flex: 1; min-width: 10rem; width: auto; }

/* ---------- Fragen im Tagebuch */
.entry.q.open { border-left: 5px solid var(--danger); }
.entry.q.done { border-left: 5px solid var(--ok); }
.qbadge { font-weight: 700; color: var(--danger); margin-right: .3rem; }
.entry.q.done .qbadge { color: var(--ok); }
.reply { margin: .6rem 0 0 .6rem; padding: .5rem .7rem; background: var(--bg); border-radius: var(--r-s); }
.reply .head { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.reply .head b { color: var(--ink); }
.reply .text { white-space: pre-wrap; }
.qact { margin-top: .6rem; }
.btn.ok { color: var(--ok); border-color: #a9d3b7; font-weight: 650; }
form.answer { margin-top: .5rem; display: grid; gap: .4rem; }
form.answer textarea { min-height: 60px; }
.entry .att img { max-width: 100%; height: 120px; object-fit: cover; }

@media (max-width: 600px) {
  .cuthead { display: none; }
  .cut { grid-template-columns: 1fr auto auto; grid-template-areas: "pos stk act" "len cut cut"; padding: .55rem .65rem; }
  .c-pos { grid-area: pos; } .c-stk { grid-area: stk; } .c-act { grid-area: act; }
  .c-len { grid-area: len; } .c-cut { grid-area: cut; text-align: right; }
  .c-sub, .chg { grid-column: 1 / -1; }
  .tabs a { padding: .55rem .7rem; }
  .file { flex-wrap: wrap; }
  .file .row { width: 100%; justify-content: flex-end; }
  .addline input[name="menge"] { width: 5rem !important; }
}

@media print {
  .top, .tabs, .noprint, .dropzone, .composer, .btn, .c-act a, p.small > a { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .printonly { display: block; }
  .cutgroup, .cut { break-inside: avoid; }
  .st { border: 1px solid #000; background: #fff !important; color: #000 !important; min-width: 0; }
  .pk { border: 1px solid var(--muted-hell); }
}
.checks label span { flex: 1; }
@media (max-width: 600px) {
  .top { padding: .45rem .6rem; gap: .5rem; }
  .logo { display: none; }
  .logo-baer { display: block; }
  .brand-sub { display: none; }
  #nav { gap: .3rem; justify-content: flex-end; }
  #nav a, #nav button { padding: .25rem .5rem; font-size: .85rem; }
  .tabs { flex-wrap: wrap; overflow: visible; gap: .15rem; border-bottom: 0; }
  .tabs a { border: 1px solid var(--line); border-radius: 999px; margin: 0; padding: .3rem .65rem; font-size: .85rem; background: #fff; }
  .tabs a.active { background: var(--steel); color: #fff; border-color: var(--steel); }
  .tabs a.active .count { color: var(--line); }
  .dropzone .small { display: none; }
  .dropzone { padding: .8rem; }
  h1 { font-size: 1.45rem; }
}

/* ---------- Betrieb */
.navbadge { background: var(--danger); color: #fff; border-radius: 999px; padding: 0 .4rem; font-size: .75rem; margin-left: .2rem; }
.infobanner { display: block; background: var(--rot-h); border: 1px solid #e5b9b5; color: var(--danger); border-radius: var(--r-s); padding: .6rem .8rem; margin-bottom: 1rem; text-decoration: none; }
.katseg { flex-wrap: wrap; margin: .6rem 0 1rem; }
.infolist { display: grid; gap: .5rem; }
.infocard { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; border-left: 5px solid var(--line); padding: .7rem .9rem; }
.infocard .ic { font-size: 1.75rem; width: 2.2rem; text-align: center; flex: none; }
.infocard .name { font-weight: 700; font-size: 1.05rem; color: var(--blau); }
.infocard .meta { min-width: 0; }
.infocard.kat-sicherheit { border-left-color: #e09a2c; }
.infocard.kat-notfall { border-left-color: var(--danger); }
.infocard.kat-anweisung { border-left-color: var(--blau); }
.infocard.kat-formular { border-left-color: var(--muted); }
.infocard.offen { background: var(--orange-h); }
.badge.alarmb { background: var(--danger); color: #fff; font-weight: 650; }
.badge.okb { background: var(--gruen-h); color: var(--ok); font-weight: 600; }
.infotext { white-space: pre-wrap; line-height: 1.55; margin-top: 1rem; font-size: 1rem; }
.infofiles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; align-items: flex-start; }
.infoimg { max-height: 220px; max-width: 100%; border-radius: var(--r-s); border: 1px solid var(--line); cursor: zoom-in; }
.confirm { margin-top: 1rem; background: #fff; border: 2px solid var(--blau); border-radius: var(--radius); padding: 1rem; text-align: center; }
.confirm p { margin: 0 0 .7rem; }
.confirm.done { border-color: var(--ok); color: var(--ok); font-weight: 650; }
.btn.big { font-size: 1.05rem; padding: .8rem 1.4rem; }
label.inline { display: flex; gap: .5rem; align-items: center; font-size: .95rem; }
label.inline input { width: auto; }
.seg button { white-space: nowrap; }
@media (max-width: 600px) { .katseg { display: flex; } .katseg button { flex: 1 1 auto; } }

/* ---------- CD: Druck mit Logo */
.printlogo { display: none; }
@media print { .printlogo { display: block; height: 13mm; width: auto; margin: 0 0 5mm; } }
.badge.zg { background: var(--blau-hell); color: var(--blau); font-weight: 600; }

/* ---------- Navigation: Desktop oben, Handy als App-Leiste unten */
#nav .ni { display: none; width: 22px; height: 22px; fill: currentColor; }
#nav .nl-konto { display: none; }
#nav a { display: inline-flex; align-items: center; gap: .3rem; position: relative; }
.rtable td.rt-main { font-weight: 600; }
.file .meta .fn { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .top { padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); min-height: 50px; }
  .logo-baer { height: 30px; }
  .brand-sub { display: inline; font-size: .75rem; padding-left: .65rem; }
  .brand { gap: .65rem; }
  main { --seite: .8rem; padding: .9rem var(--seite) 1.5rem; }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .composer { bottom: env(safe-area-inset-bottom, 0px); }

  h1 { font-size: 1.45rem; }
  .spread > .btn.primary, .spread > div > .btn.primary { width: 100%; justify-content: center; }
  .spread > .btn.primary { order: 3; }

  /* Dateien: Name oben, Knöpfe darunter */
  .file { flex-wrap: wrap; gap: .5rem .65rem; padding: .6rem .7rem; }
  .file .meta { flex: 1 1 calc(100% - 3rem); }
  .file .row { width: 100%; justify-content: flex-end; gap: .35rem; }
  .file .row .btn.primary { margin-right: auto; }

  /* Filter-Leiste wischbar statt Raster */
  .katseg { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border: 0; background: transparent; gap: .35rem; margin: .5rem -.8rem .9rem; padding: 0 .8rem; border-radius: 0; }
  .katseg::-webkit-scrollbar { display: none; }
  .katseg button { flex: none !important; border: 1px solid var(--line) !important; border-radius: 999px; background: #fff; padding: .4rem .8rem; }
  .katseg button.on { background: var(--blau); color: #fff; border-color: var(--blau) !important; }
  .notice { font-size: .95rem; }

  /* Tabellen als Karten */
  table.rtable, table.rtable tbody { display: block; background: transparent; }
  table.rtable thead { display: none; }
  table.rtable tr { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .75rem; margin-bottom: .45rem; }
  table.rtable td { border: 0; padding: 0; font-size: .95rem; }
  table.rtable td.rt-main { grid-column: 1 / -1; font-size: 1rem; }
  table.rtable td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85rem; }
  table.rtable td.rt-act { grid-column: 1 / -1; display: flex; gap: .35rem; justify-content: flex-end; margin-top: .3rem; }

  /* Fenster als Blatt von unten */
  .modal { padding: 0; align-items: end; }
  .modal .box, .modal .box.wide { width: 100%; max-height: 92vh; border-radius: var(--r-l) var(--r-l) 0 0; padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .infofiles .row { flex-wrap: wrap; }
  .infofiles .btn { white-space: normal; text-align: left; }
  .confirm .btn.big { width: 100%; justify-content: center; }
  .loginlogo { width: 120px; margin: 4vh auto 1.2rem; }
  .tabs a { font-size: .85rem; }
}

/* ---------- Unterschrift bei „Gelesen und verstanden“ */
.sigpad { display: block; width: 100%; height: 200px; border: 2px solid var(--line); border-radius: var(--r); background: #fff; touch-action: none; }
.sigimg { max-height: 70px; max-width: 220px; margin-top: .4rem; background: #fff; border-radius: var(--r-s); }
.sigimg.small { max-height: 42px; max-width: 150px; margin-top: .2rem; }
@media print {
  body.pm main, body.pm .top, body.pm #nav { display: none !important; }
  body.pm .modal { position: static; background: none; padding: 0; display: block; }
  body.pm .modal .box { width: 100% !important; max-height: none; box-shadow: none; padding: 0; border-radius: 0; }
  body.pm .modal .btn { display: none !important; }
}
.implog { padding-left: 1.2rem; max-height: 50vh; overflow: auto; } .implog li { margin: .2rem 0; } .implog li.warn { color: var(--gelb); }
@media (max-width: 600px) { .headbtns { width: 100%; flex-wrap: nowrap; } .headbtns .btn { flex: 1; justify-content: center; width: auto !important; } }


/* ---------- Wochenplan */
body:has(.ptable) main { max-width: none; }
.pnav { gap: .35rem; }
.pnav .btn { padding: .4rem .7rem; }
.pwrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pbuero { margin-top: 1.25rem; }
.ptable { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; table-layout: fixed; background: #fff; }
.ptable th { background: var(--blau); color: #fff; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; padding: .5rem .6rem; border: 0; position: sticky; top: 0; }
.ptable th small { display: block; font-weight: 500; opacity: .8; font-size: .75rem; }
.ptable th.today { background: var(--blau-dunkel); box-shadow: inset 0 -4px 0 #f5cd47; }
.ptable th.pn, .ptable td.pn { width: 150px; }
.ptable td { border-bottom: 1px solid var(--line); border-left: 1px solid var(--bg); padding: .3rem; vertical-align: top; height: 3.4rem; }
.ptable td.pn { font-weight: 700; color: var(--blau); background: var(--bg); border-left: 0; vertical-align: middle; padding-left: .7rem; }
.ptable td.today { background: var(--gelb-h); }
.ptable td.over { background: var(--blau-hell); outline: 2px dashed var(--blau); outline-offset: -3px; }
.pgrow td { background: var(--grau); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); height: auto; padding: .3rem .7rem; }
.pchip { border-radius: var(--r-s); padding: .25rem .4rem; margin-bottom: .25rem; cursor: pointer; font-size: .85rem; line-height: 1.25; border: 1px solid rgba(0,0,0,.06); }
.pchip:hover { border-color: var(--blau); }
.pchip.drag { opacity: .4; }
.pc-t { display: block; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-n, .pc-z { display: block; font-size: .75rem; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.padd { border: 1px dashed var(--line-stark); background: none; color: var(--muted); border-radius: var(--r-s); width: 100%; padding: .1rem; cursor: pointer; font-size: .95rem; opacity: 0; }
.ptable td:hover .padd, .padd:focus { opacity: 1; }
.partseg { display: flex; flex-wrap: wrap; gap: .3rem; }
.partseg button { font: inherit; font-size: .85rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .3rem .7rem; cursor: pointer; }
.partseg button.on { background: var(--blau); border-color: var(--blau); color: #fff; }
.pfs { border: 1px solid var(--line); border-radius: var(--r); padding: .4rem .7rem .6rem; margin: 0; }
.pfs legend { font-size: .85rem; color: var(--muted); padding: 0 .3rem; }
.pboxes { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.pboxes label { font-size: .95rem; }
/* Handy: Tagesansicht */
.ptabs { display: flex; gap: .3rem; margin: .4rem 0 .8rem; }
.ptabs button { flex: 1; font: inherit; font-weight: 700; border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: .35rem 0; cursor: pointer; }
.ptabs button small { display: block; font-weight: 500; font-size: .75rem; color: var(--muted); }
.ptabs button.today { border-color: #f5cd47; }
.ptabs button.on { background: var(--blau); color: #fff; border-color: var(--blau); }
.ptabs button.on small { color: var(--blau-hell); }
.pday { display: grid; gap: .4rem; }
.prow { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .6rem; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; align-items: start; }
.prow .pname { font-weight: 700; color: var(--blau); font-size: .95rem; padding-top: .2rem; }
.prow .padd { opacity: 1; padding: .25rem; }
.pgr { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1rem 0 .4rem; }
/* Heute (Startseite) */
.card.heute { border-top: 4px solid var(--blau); margin-bottom: 1rem; }
.hent { border-left: 5px solid var(--line); padding: .35rem .6rem; margin-top: .5rem; background: var(--bg); border-radius: 0 var(--r-s) var(--r-s) 0; }
.hent.gross .he-t { font-size: 1.05rem; }
.he-t { font-weight: 700; line-height: 1.35; }
.he-t .badge { margin-left: .3rem; vertical-align: 1px; }
.he-t a { color: var(--blau); }
.he-x { font-size: .95rem; color: var(--ink2); margin-top: .1rem; }
.hweek summary { cursor: pointer; color: var(--blau); font-weight: 600; margin-top: .7rem; font-size: .95rem; }
.hday { margin-top: .6rem; }
.hday > b { font-size: .85rem; color: var(--muted); }
@media print {
  body:has(.ptable) .noprint, body:has(.ptable) .pnav, body:has(.ptable) .padd { display: none !important; }
  body:has(.ptable) { font-size: 9pt; }
  .ptable { min-width: 0; } .pwrap { border: 0; overflow: visible; }
  .ptable th { position: static; background: #fff !important; color: #000; border-bottom: 2px solid #000; }
  .pchip { break-inside: avoid; border: 1px solid var(--muted-hell); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 767px) { .pnav { width: 100%; } .pnav #pprint, .pnav label { display: none; } .pnav #pnew { margin-left: auto; } }

/* Trello-Karten im Wochenplan */
.ptliste { max-height: 16rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: .3rem; display: flex; flex-direction: column; gap: .25rem; }
.ptk { flex-shrink: 0; text-align: left; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--line-stark); border-radius: var(--r-s); padding: .45rem .6rem; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: .1rem; min-height: 44px; }
.ptk small { color: var(--muted, var(--muted)); }
.ptk.on { outline: 2px solid var(--blau); background: var(--bg); }
.tinfo { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .7rem; margin: .45rem 0 0; font-size: .95rem; }
.tinfo dt { font-weight: 600; color: var(--blau); }
.tinfo dd { margin: 0; overflow-wrap: anywhere; }
.tinfo a.navi { white-space: nowrap; margin-left: .3rem; font-weight: 600; }
.tmehr { margin-top: .25rem; }
@media (max-width: 600px) { .tinfo { grid-template-columns: 1fr; gap: 0; } .tinfo dd { margin-bottom: .35rem; } }

/* Zahlen-Dashboard (nur Inhaber) */
.zhin { background: var(--gelb-h); border: 1px solid #f0d49a; border-radius: var(--r); padding: .7rem 1rem; margin: .8rem 0; }
.zhin ul { margin: .3rem 0 .3rem 1.1rem; padding: 0; }
.zks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin: 1rem 0; }
.zk { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .75rem .9rem; min-width: 0; }
.zk-t { font-size: .85rem; color: var(--muted); }
.zk-v { font-size: 1.75rem; font-weight: 700; color: var(--blau); line-height: 1.25; font-variant-numeric: tabular-nums; }
.zk-s { font-size: .85rem; color: var(--muted); }
.zgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.zgrid .card, .zgrid + .card, .zgrid ~ .card { min-width: 0; }
.zchart { width: 100%; overflow: hidden; }
.zchart svg { display: block; }
.zg { stroke: var(--line); stroke-width: 1; }
.zg.null { stroke: var(--muted-hell); }
.zt { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.zt.uv { font-style: italic; }
.zhit { fill: transparent; cursor: pointer; }
.zhit.an { fill: rgba(0, 64, 112, .06); }
.zleg { display: flex; gap: 1rem; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.zleg i { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-s); margin-right: .35rem; vertical-align: -1px; }
.ztip { position: absolute; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .45rem .65rem; font-size: .85rem; pointer-events: none; font-variant-numeric: tabular-nums; }
.zkost { display: flex; flex-direction: column; gap: .35rem; }
.zkr { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 9.5rem; gap: .6rem; align-items: center; font-size: .95rem; }
.zkn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zkb { background: var(--bg); border-radius: var(--r-s); height: 12px; overflow: hidden; }
.zkb i { display: block; height: 100%; background: #2a78d6; border-radius: 0 var(--r-s) var(--r-s) 0; }
.zkw { text-align: right; font-variant-numeric: tabular-nums; }
.zkw small { display: block; color: var(--muted); font-size: .75rem; }
.ztab { overflow-x: auto; margin-top: .5rem; -webkit-overflow-scrolling: touch; }
.ztab table { border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ztab th, .ztab td { padding: .3rem .55rem; text-align: right; border-bottom: 1px solid var(--bg); }
.ztab tbody th { text-align: left; position: sticky; left: 0; background: #fff; font-weight: 500; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.ztab thead th { color: var(--muted); font-weight: 600; }
.ztab thead th.uv { font-style: italic; }
.ztab tr.z0 th, .ztab tr.z0 td { font-weight: 700; background: var(--bg); }
.ztab tr.z0 th { background: var(--bg); }
.ztab tr.gr { cursor: pointer; }
.ztab tr.gr:hover th, .ztab tr.gr:hover td { background: var(--bg); }
.ztab tr.z2 th { padding-left: 1.6rem; font-weight: 400; color: #444; }
.ztab tr.z2 td { color: #444; }
.ztab td.neg { color: var(--danger); }
.zpf { display: inline-block; width: 1rem; color: var(--muted); }
@media (max-width: 600px) {
  .zks { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .zk-v { font-size: 1.2rem; }
  .zgrid { grid-template-columns: 1fr; }
  .zkr { grid-template-columns: minmax(0, 1fr) 8.5rem; }
  .zkr .zkb { grid-column: 1 / -1; grid-row: 2; }
}
.ztab th, .ztab td { text-transform: none; letter-spacing: normal; }
@media (max-width: 600px) { .ztab tbody th { max-width: 9.5rem; } .ztab tr.z2 th { padding-left: 1rem; } }
.zh { margin: 1.4rem 0 0; }
.zrot { color: var(--danger) !important; }

/* Begrüßungs-Show beim ersten Anmelden */
body.wk-offen { overflow: hidden; }
.wk { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; color: #fff; overflow: hidden; transition: opacity .45s; }
.wk.wk-weg { opacity: 0; }
.wk-c { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.wk-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 5; min-height: 44px; background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .9rem; cursor: pointer; }
.wk-in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding: 1rem; max-width: 100%; }
.wk-wrap { position: relative; width: min(46vmin, 230px); }
.wk-baer { display: block; width: 100%; height: auto; overflow: visible; }
.wk-spur { fill: none; stroke: #ffe2b0; stroke-width: .9; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(255,170,60,.9)); }
.wk-fill { fill: #fff; opacity: 0; transition: opacity .45s; }
.wk-marke, .wk-h, .wk-sub { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.wk-marke { font-weight: 800; letter-spacing: .3em; font-size: clamp(.8rem, 3.5vmin, 1.15rem); margin-top: min(4.5vmin, 1.4rem); white-space: nowrap; }
.wk-marke span { font-weight: 500; opacity: .85; }
.wk-h { font-size: clamp(1.7rem, 9.5vmin, 3.1rem); font-weight: 800; line-height: 1.1; margin-top: min(3.5vmin, 1.2rem); overflow-wrap: anywhere; }
.wk-sub { font-size: clamp(1rem, 4.4vmin, 1.25rem); margin-top: .4rem; }
.wk-voll .wk-fill { opacity: 1; }
.wk-voll .wk-spur { opacity: 0; transition: opacity .5s; }
.wk-voll .wk-marke, .wk-voll .wk-h, .wk-voll .wk-sub { opacity: 1; transform: none; }
.wk-voll .wk-h { transition-delay: .15s; }
.wk-voll .wk-sub { transition-delay: .35s; }
.wk-ruhig * { transition: none !important; }
/* 1 Schweißnaht */
.wk-funken { background: radial-gradient(ellipse at 50% 35%, var(--blau-mittel) 0%, var(--blau) 45%, #001f38 100%); }
/* 2 Hallentor */
.wk-tor { background: linear-gradient(180deg, #fff 0%, #eef3f7 60%, #d5dee6 100%); color: var(--blau); }
.wk-tor .wk-fill { fill: var(--blau); opacity: 1; transition: none; }
.wk-tor .wk-skip { background: rgba(255,255,255,.2); }
.wk-tor.wk-voll .wk-skip { background: rgba(0,64,112,.08); color: var(--blau); border-color: rgba(0,64,112,.35); }
.wk-rolltor { position: absolute; inset: 0 0 -2vmin; z-index: 2; box-shadow: 0 1.5vmin 4vmin rgba(10,30,50,.45); will-change: transform;
  background: repeating-linear-gradient(180deg, #7b8791 0, #93a0aa 2.2vmin, #6a757f 5.6vmin, #39434b 5.6vmin, #39434b 6vmin); }
.wk-rolltor::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4vmin; background: var(--blau); border-top: .5vmin solid #22292f; }
/* 3 Presse */
.wk-presse { background-color: #2a3238; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(160deg, #47525b, #1d2429 85%); }
.wk-presse .wk-fill { fill: url(#wk-gl); transition: none; }
.wk-presse.wk-da .wk-fill { opacity: 1; filter: drop-shadow(-.5px -.5px 0 rgba(0,0,0,.7)) drop-shadow(.5px .5px 0 rgba(255,255,255,.35)); }
.wk-block { position: absolute; inset: -14%; border-radius: 3px; z-index: 2; background: linear-gradient(180deg, #55606a, #2f383f 70%, #15191d); box-shadow: 0 3px 0 #0b0e10, 0 0 0 1px rgba(0,0,0,.5); }
.wk-block::before { content: ''; position: absolute; left: 34%; right: 34%; bottom: 100%; height: 300vh; background: linear-gradient(90deg, #4a545d, #79848e 45%, #3a434a); }
.wk-block::after { content: ''; position: absolute; left: 0; right: 0; top: 14%; height: 7%; background: var(--blau-mittel); }
.wk-schlag .wk-in { animation: wkwackeln .28s linear; }
@keyframes wkwackeln { 0% { transform: translateY(1.8vmin); } 25% { transform: translate(-.7vmin, -1vmin); } 50% { transform: translate(.6vmin, .6vmin); } 75% { transform: translate(-.3vmin, -.3vmin); } 100% { transform: none; } }

/* Besondere Tage (Gadgets) */
.gfx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1200; }
.gk { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1rem; background: rgba(0, 31, 56, .55); opacity: 0; transition: opacity .3s; }
.gk.an { opacity: 1; }
.gk-box { position: relative; background: #fff; border-radius: var(--r-l); padding: 1.6rem 1.4rem 1.3rem; max-width: 24rem; width: 100%; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); transform: scale(.85) translateY(10px); transition: transform .45s cubic-bezier(.2,1.4,.4,1); overflow: hidden; }
.gk.an .gk-box { transform: none; }
.gk-box h2 { margin: .4rem 0 .4rem; font-size: 1.45rem; }
.gk-box p { margin: 0 0 1.1rem; color: #333; line-height: 1.45; }
.gk-box .btn { min-width: 9rem; }
.gk-sym { font-size: 3.2rem; line-height: 1; }
.gk-zahl { font-size: 3.4rem; font-weight: 800; color: var(--blau); line-height: 1; font-variant-numeric: tabular-nums; }
.gk-st { position: absolute; top: 1rem; right: -.4rem; transform: rotate(14deg) scale(2.4); opacity: 0; border: 3px solid var(--ok); color: var(--ok); font-weight: 800;
  letter-spacing: .12em; padding: .15rem .55rem; border-radius: var(--r-s); font-size: .95rem; transition: transform .35s .45s cubic-bezier(.3,1.6,.5,1), opacity .2s .45s; }
.gk.an .gk-st { transform: rotate(14deg) scale(1); opacity: .9; }
.g-unfall { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--ok); border-radius: var(--r); padding: .6rem 1rem; margin-bottom: .8rem; }
.g-uz { font-size: 2rem; font-weight: 800; color: var(--ok); font-variant-numeric: tabular-nums; line-height: 1; }
.g-unfall span:last-child { font-weight: 600; }
.g-unfall small { display: block; font-weight: 400; color: var(--muted); }
.g-hin { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
.g-hin > div { background: var(--gelb-h); border: 1px solid #f0dca8; border-radius: var(--r); padding: .55rem .85rem; display: flex; gap: .6rem; align-items: flex-start; }
.g-hin .gi { font-size: 1.2rem; line-height: 1.3; }
.g-hin small { display: block; color: var(--muted); margin-top: .15rem; }
.g-ei { position: absolute; z-index: 5; background: none; border: 0; font-size: 1.75rem; cursor: pointer; padding: .2rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); animation: geiw 2.4s ease-in-out infinite; }
.g-ei1 { left: .6rem; bottom: 5rem; } .g-ei2 { left: 45%; bottom: 1.5rem; } .g-ei3 { right: 2rem; bottom: 2.5rem; }
@keyframes geiw { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
#app { position: relative; }
.unfall { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .9rem; margin: .8rem 0 1rem; }
.unfall input { width: auto; }
.unfall .small { flex-basis: 100%; }
.ugrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 600px) { .ugrid { grid-template-columns: 1fr 1fr; } .ugrid label:first-child { grid-column: 1 / -1; } }

/* Startseite „Mein Tag“ und Cockpit */
.skopf { margin: .2rem 0 .9rem; }
.sgruss { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; color: var(--blau); line-height: 1.15; }
.sdatum { color: var(--muted); margin-top: .15rem; }
.sks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.sk { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .85rem; color: inherit; text-decoration: none; }
.sk b { font-size: 1.75rem; color: var(--blau); font-variant-numeric: tabular-nums; }
.sk.warn { border-color: #f3b4ae; background: var(--rot-h); }
.sk.warn b { color: var(--danger); }
.sk span { font-size: .95rem; line-height: 1.3; }
.navi-gross { display: block; text-align: center; margin-top: .7rem; font-size: 1.05rem; padding: .75rem 1rem; }
.ckgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: .8rem; margin-bottom: 1rem; }
.ck { margin: 0; min-width: 0; }
.ck-k { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ck h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.ck-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .95rem; }
.ck-l li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .6rem; }
.ck-l li > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-tb li { grid-template-columns: 1fr; gap: .05rem; }
.ck-tb li > span { color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ck-zahlen { margin-bottom: .8rem; border-left: 5px solid var(--blau); }
.ckzs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.ckz span { display: block; font-size: .85rem; color: var(--muted); }
.ckz b { font-size: 1.45rem; color: var(--blau); font-variant-numeric: tabular-nums; }
.ckz small { display: block; color: var(--muted); font-size: .75rem; }


/* Team im Messenger-Stil */
body.team-seite main { max-width: 1320px; padding-bottom: 1rem; }
.tapp { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 64px - 2.4rem); min-height: 480px; background: #fff;
  border-radius: var(--r-l); overflow: hidden; box-shadow: 0 6px 24px rgba(0, 40, 80, .12); border: 1px solid var(--line); }
.tside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #fff; position: relative; }
.tside-k { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; background: linear-gradient(135deg, var(--blau), var(--blau-mittel)); color: #fff; }
.tside-k h1 { color: #fff; margin: 0; font-size: 1.45rem; letter-spacing: .02em; }
.tglocke { position: relative; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.05rem; cursor: pointer; }
.tglocke b { position: absolute; top: -2px; right: -2px; background: var(--orange); color: #fff; font-size: .75rem; min-width: 1.15rem; line-height: 1.15rem; border-radius: 999px; padding: 0 .25rem; }
.tmeldpop { position: absolute; z-index: 20; top: 3.6rem; left: .6rem; right: .6rem; background: #fff; border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .8rem; max-height: 60vh; overflow: auto; }
.tmeldpop ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.tmeldpop li { display: flex; gap: .5rem; justify-content: space-between; padding: .5rem .4rem; border-radius: var(--r); font-size: .95rem; }
.tmeldpop li.neu { background: var(--bg); font-weight: 600; }
.tmeldpop li a { color: inherit; text-decoration: none; }
.tmeldpop li span { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.tliste { flex: 1; overflow-y: auto; padding-bottom: 1rem; }
.tsek { padding: .9rem 1rem .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tsek-k { display: flex; justify-content: space-between; align-items: center; }
.tneu { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--blau); color: #fff; display: grid; place-items: center; text-decoration: none; font-size: 1rem; }
.tli { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.tli:hover { background: var(--bg); }
.tli.an { background: var(--blau-hell); border-left-color: var(--blau); }
.tli-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tli-z { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; }
.tli-z b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tli-v { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tli-t { color: var(--muted-hell); font-size: .75rem; white-space: nowrap; }
.tli.neu .tli-t { color: var(--blau); font-weight: 700; }
.tli.neu .tli-v { color: var(--ink); font-weight: 600; }
.tbad { flex: none; background: var(--blau); color: #fff; font-size: .75rem; font-weight: 700; min-width: 1.3rem; line-height: 1.3rem; border-radius: 999px; text-align: center; padding: 0 .3rem; }
.tav { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.tav.kanal { font-size: 1.2rem; }
.tav.gross { width: 2.5rem; height: 2.5rem; }
.tpane { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background-color: var(--line); background-image: repeating-linear-gradient(100deg, rgba(0,64,112,.035) 0 1px, transparent 1px 9px); }
.tpk { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; background: #fff; border-bottom: 1px solid var(--line); min-height: 3.9rem; }
.tpk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tpk-t b { font-size: 1.05rem; }
.tpk-t span { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpk-b { background: var(--blau); color: #fff; border: 0; border-radius: 999px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tzur { display: none; font-size: 2rem; line-height: 1; color: var(--blau); text-decoration: none; padding: 0 .3rem 0 0; }
.tverlauf { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.tscroll { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.ttag { align-self: center; font-size: .75rem; font-weight: 600; color: var(--ink2); background: rgba(255,255,255,.85); border-radius: 999px; padding: .2rem .8rem; margin: .5rem 0 .2rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tleer { text-align: center; color: var(--muted); margin: 2rem auto; }
.tleer.klein { margin: .6rem 0; text-align: left; }
.tmsg { display: flex; gap: .55rem; align-items: flex-end; max-width: 78%; }
.tmsg .tav { width: 2.1rem; height: 2.1rem; font-size: .75rem; }
.tmsg-in { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tmsg.ich { align-self: flex-end; }
.tmsg.ich .tmsg-in { align-items: flex-end; }
.tbub { position: relative; background: #fff; border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); padding: .5rem .8rem .35rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); max-width: 100%; }
.tmsg.ich .tbub { background: var(--blau); color: #fff; border-radius: var(--r-l) var(--r-s) var(--r-l) var(--r-l); }
.tmsg.ich .tbub a { color: #cfe4ff; }
.tname { display: block; font-size: .85rem; margin-bottom: .1rem; }
.ttext { line-height: 1.45; overflow-wrap: anywhere; }
.tzeit { display: block; text-align: right; font-size: .75rem; opacity: .6; margin-top: .15rem; }
.tzeit i { font-style: normal; } .tzeit i.gel { color: #7fd1ff; opacity: 1; }
.tmsg.wichtig { max-width: 92%; }
.tmsg.wichtig .tbub { border-top: 4px solid var(--orange); border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); padding-top: .55rem; }
.tpin { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--orange-d); background: var(--orange-h); border-radius: 999px; padding: .05rem .55rem; margin-bottom: .3rem; }
.tmsg.wichtig .ttext { font-size: 1rem; }
.treak { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: -.35rem; padding: 0 .4rem; position: relative; }
.treak button { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem; font: inherit; font-size: .85rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.treak button span { font-size: .75rem; margin-left: .2rem; color: var(--ink2); }
.treak button.ich { background: var(--blau-hell); border-color: #8db6dc; }
.takt { display: flex; gap: .2rem; margin-top: .15rem; opacity: .0; transition: opacity .15s; }
.tmsg:hover .takt, .tmsg:focus-within .takt { opacity: 1; }
@media (hover: none) { .takt { opacity: .85; } }
.takt button, .twahl button { background: none; border: 0; font: inherit; font-size: .75rem; color: var(--ink2); cursor: pointer; padding: .2rem .4rem; border-radius: var(--r-s); }
.takt button:hover { background: rgba(0,64,112,.08); }
.takt .tdel { color: var(--danger); }
.twahl { display: flex; gap: .1rem; background: #fff; border-radius: 999px; padding: .15rem .3rem; box-shadow: 0 4px 14px rgba(0,0,0,.15); margin-top: .2rem; }
.twahl button { font-size: 1.2rem; padding: .15rem .3rem; }
.tthread { margin-top: .35rem; padding: .4rem .6rem; background: rgba(255,255,255,.7); border-left: 3px solid #9cc0e0; border-radius: 0 var(--r) var(--r) 0; display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; max-width: 100%; }
.tant-z { display: flex; gap: .45rem; align-items: flex-start; }
.tant-z .tav { width: 1.6rem; height: 1.6rem; font-size: .75rem; }
.tant-z .tzeit { display: inline; margin-left: .3rem; }
.tdel.klein { background: none; border: 0; color: var(--muted-hell); cursor: pointer; font-size: .75rem; }
.tant { display: flex; gap: .4rem; margin-top: .35rem; width: 100%; min-width: 16rem; }
.tant input { flex: 1; min-width: 0; border-radius: 999px; padding: .45rem .9rem; }
.tsend { display: flex; gap: .55rem; align-items: flex-end; padding: .65rem .9rem; background: var(--bg); border-top: 1px solid var(--line); }
.tsend textarea { flex: 1; resize: none; border-radius: var(--r-l); padding: .65rem 1rem; min-height: 2.7rem; max-height: 150px; border: 1px solid var(--line-stark); background: #fff; line-height: 1.35; }
.tsendk { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--blau); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,64,112,.3); }
.tsendk:hover { background: var(--blau-mittel); }
.tsendk.klein { width: 2.2rem; height: 2.2rem; }
.tsendk.klein svg { width: 17px; height: 17px; }
.tnur { padding: .8rem 1rem; text-align: center; font-size: .85rem; color: #6b4a00; background: var(--gelb-h); border-top: 1px solid #f0dca8; }
.tmsg.dm { max-width: 75%; }
.tsuche { margin-bottom: .3rem; border-radius: 999px; padding: .6rem 1rem; }
.tscroll .tli { background: #fff; border-radius: var(--r); border-left: 0; margin-bottom: .35rem; }
.tbox { background: #fff; border-radius: var(--r-l); padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.tbox h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--blau); display: flex; align-items: center; gap: .5rem; }
.tbox h3 span { background: var(--blau-hell); color: var(--blau); border-radius: 999px; font-size: .75rem; padding: .05rem .55rem; }
.tinfo { font-size: .85rem; color: var(--muted); margin: .6rem 0 0; }
.tauf { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--bg); }
.tauf:last-child { border-bottom: 0; }
.tauf .tav { width: 2.1rem; height: 2.1rem; font-size: .75rem; }
.tauf-t { flex: 1; min-width: 0; }
.tauf-t > b { margin-right: .45rem; }
.tauf-b { font-size: .95rem; margin-top: .2rem; color: #333; }
.tauf-m { font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.tauf.fertig .tauf-t > b { text-decoration: line-through; color: var(--muted-hell); }
.tchk { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--muted-hell); background: #fff; cursor: pointer; font-weight: 800; color: #fff; transition: all .15s; }
.tchk:hover { border-color: var(--ok); background: var(--gruen-h); }
.tauf.fertig .tchk { background: var(--ok); border-color: var(--ok); }
.tfb { display: inline-block; white-space: nowrap; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; background: var(--bg); color: var(--ink2); vertical-align: 1px; }
.tfb.rot { background: var(--rot-h); color: var(--danger); } .tfb.gelb { background: var(--gelb-h); color: var(--gelb); } .tfb.ok { background: var(--gruen-h); color: var(--ok); } .tfb.blau { background: var(--blau-hell); color: var(--blau); }
.tfertig { margin-top: .5rem; } .tfertig summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.tidee textarea { width: 100%; margin: .4rem 0 .6rem; border-radius: var(--r); }
.tvor-k { display: flex; align-items: center; gap: .6rem; }
.tvor-k > div { flex: 1; display: flex; flex-direction: column; }
.tvor-k > div span { font-size: .75rem; color: var(--muted); }
.tvor .ttext { margin: .6rem 0 .2rem; }
.tstatus { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tstatus label { cursor: pointer; }
.tstatus input { position: absolute; opacity: 0; pointer-events: none; }
.tstatus span { display: inline-block; border: 1px solid var(--line-stark); border-radius: 999px; padding: .3rem .75rem; font-size: .85rem; }
.tstatus input:checked + span { background: var(--blau); color: #fff; border-color: var(--blau); }
.tvantw { margin-top: .6rem; background: var(--bg); border-radius: var(--r); padding: .55rem .8rem; font-size: .95rem; }
.tstart { margin-bottom: .9rem; }
@media (max-width: 767px) {
  body.team-seite main { padding: 0; }
  .tapp { display: block; height: calc(100dvh - 50px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 0; box-shadow: none; min-height: 0; }
  .tapp .tside, .tapp .tpane { height: 100%; }
  .tapp.zeigt-pane .tside { display: none; }
  .tapp:not(.zeigt-pane) .tpane { display: none; }
  .tzur { display: block; }
  .tmsg { max-width: 88%; }
  .tmsg.wichtig { max-width: 100%; }
  .tverlauf, .tscroll { padding: .8rem .7rem; }
  .tant { min-width: 0; }
  .tpk-b { padding: .5rem .8rem; font-size: .85rem; }
}
.tauf .tdel, .tbox .tdel { background: none; border: 0; color: var(--muted-hell); cursor: pointer; font-size: .95rem; padding: .3rem .45rem; border-radius: var(--r-s); }
.tauf .tdel:hover { background: var(--rot-h); color: var(--danger); }

/* ---------------------------------------------------------------- Zeiterfassung */
.zt { margin-bottom: 1rem; border-top: 4px solid var(--ok); }
.zt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.zt-kopf h2 { margin: 0; font-size: 1.05rem; }
.zt-sum { font-size: .85rem; color: var(--muted); } .zt-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.zt-info { margin: .6rem 0 .4rem; color: var(--ink2); }
.zt-arten { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: .5rem 0; }
.zt-arten label { cursor: pointer; position: relative; min-width: 0; }
.zt-arten input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zt-arten span { display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 2px solid var(--line); border-radius: var(--r); padding: .55rem .2rem; font-size: .85rem; font-weight: 600; background: #fff; }
.zt-arten span i { font-style: normal; font-size: 1.45rem; }
.zt-arten input:checked + span { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.zt-arten input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.zt-proj { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); margin: .3rem 0 .7rem; }
.zt-proj select { font-size: 1rem; padding: .5rem; }
.btn.zt-gross { font-size: 1.05rem; font-weight: 700; padding: .85rem 1rem; justify-content: center; border-radius: var(--r); flex: 1; }
.zt > .btn.zt-gross { width: 100%; }
.btn.zt-gross.gruen { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.zt-gross.orange { background: #c76a00; border-color: #c76a00; color: #fff; }
.btn.zt-gross.rot, .btn.rotbg { background: var(--danger); border-color: var(--danger); color: #fff; }
.zt-knoepfe { display: flex; gap: .45rem; margin-top: .7rem; flex-wrap: wrap; }
.zt-lauf { display: flex; align-items: center; gap: .8rem; background: var(--gruen-h); border-radius: var(--r); padding: .7rem .9rem; margin-top: .6rem; }
.zt-lauf.pause { background: var(--gelb-h); }
.zt-lauf i { font-style: normal; font-size: 1.75rem; }
.zt-lauf div { display: flex; flex-direction: column; }
.zt-lauf span { color: var(--ink2); font-size: .95rem; } .zt-lauf span b { font-variant-numeric: tabular-nums; }
.zt-wechsel { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.zt-fehlt { background: var(--rot-h); color: var(--danger); border-radius: var(--r); padding: .55rem .75rem; margin: .6rem 0; font-size: .95rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.zt-heute { margin-top: .7rem; } .zt-heute summary, .zt-log summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.zt-seg { display: grid; grid-template-columns: 6.6rem 1fr auto auto; gap: .5rem; align-items: center; font-size: .85rem; padding: .3rem 0; border-top: 1px solid var(--bg); }
.zt-seg > span:first-child, .zt-seg > b { font-variant-numeric: tabular-nums; }
.zt-seg.pause { color: var(--gelb); } .zt-seg.fehlt { color: var(--danger); }
.zt-seg i { color: var(--muted); }
.zt-tabs { margin: .3rem 0 1rem; overflow-x: auto; max-width: 100%; }
.zt-mkopf { align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 .5rem; } .zt-mkopf h2 { margin: 0; }
.zt-mkopf select { font-size: .95rem; padding: .35rem .5rem; }
.zt-mw { display: inline-flex; align-items: center; gap: .5rem; } .zt-mw b { min-width: 8.5rem; text-align: center; }
.zt-msum { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .8rem; }
.zt-msum > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .45rem .7rem; display: flex; flex-direction: column; min-width: 5.5rem; }
.zt-msum b { font-size: 1.2rem; font-variant-numeric: tabular-nums; } .zt-msum span { font-size: .75rem; color: var(--muted); }
.zt-tag { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .75rem; margin-bottom: .45rem; }
.zt-tag.we { background: var(--bg); } .zt-tag.warn { border-color: #f0b8b2; }
.zt-tk { display: flex; align-items: center; gap: .6rem; } .zt-tk > span { flex: 1; color: var(--ink2); font-size: .95rem; }
.zt-ta { font-variant-numeric: tabular-nums; }
.zt-hinweis { color: var(--danger); font-size: .85rem; margin-top: .25rem; }
.zt-leute { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem; }
.zt-person { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.zt-person > div { flex: 1; display: flex; flex-direction: column; gap: .15rem; } .zt-person > div > span:not(.tfb) { font-size: .85rem; color: var(--ink2); }
.zt-person .tfb { align-self: flex-start; }
.zt-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-stark); flex: none; }
.zt-dot.da { background: var(--ok); box-shadow: 0 0 0 4px var(--gruen-h); } .zt-dot.pause { background: #e09100; box-shadow: 0 0 0 4px var(--gelb-h); } .zt-dot.weg { background: var(--blau); }
.zt-lohn { max-width: 640px; } .zt-lohn h2 { margin-top: 0; }
.zt-pk { margin-bottom: .5rem; }
.zt-log { margin-top: 1rem; } .zt-log .small { padding: .25rem 0; border-top: 1px solid var(--bg); }
@media (max-width: 600px) {
  .zt-arten { grid-template-columns: repeat(2, 1fr); }
  .zt-seg { grid-template-columns: 5.6rem 1fr auto auto; font-size: .85rem; }
  .zt-knoepfe .btn.zt-gross { flex: 1 1 40%; }
}

/* Menüknopf (nur Handy) */
.menuknopf { display: none; position: relative; align-items: center; justify-content: center; width: 44px; height: 40px; margin-left: auto;
  background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r); color: #fff; cursor: pointer; }
.menuknopf svg { width: 24px; height: 24px; fill: currentColor; }
.menuknopf .navbadge { position: absolute; top: -6px; right: -6px; margin: 0; font-size: .75rem; padding: 0 .35rem; line-height: 1.4; border: 2px solid var(--blau); }
body.menu-offen .menuknopf { background: #fff; color: var(--blau); }

/* Handy, Tablet und kleine Laptops: Menü oben rechts (☰) statt Knopfreihe – ab 1200 px Breite passt die Reihe */
@media (max-width: 1199px) {
  .menuknopf { display: inline-flex; }
  #nav { display: none; position: absolute; z-index: 60; top: calc(100% + .35rem); right: .5rem; left: auto;
    width: min(300px, calc(100vw - 1rem)); max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px)); overflow-y: auto;
    background: #fff; border-radius: var(--r-l); box-shadow: 0 12px 40px rgba(0,30,60,.28); padding: .4rem; flex-direction: column; align-items: stretch; gap: .1rem; }
  body.menu-offen #nav { display: flex; }
  body.menu-offen .top { z-index: 70; }
  body.menu-offen::after { content: ''; position: fixed; inset: 0; z-index: 50; background: rgba(0,20,40,.35); }
  #nav a, #nav button { display: flex; flex-direction: row; align-items: center; gap: .8rem; border: 0; border-radius: var(--r); padding: .75rem .8rem;
    color: var(--ink); font-size: 1rem; font-weight: 600; background: transparent; width: 100%; text-align: left; }
  #nav a.active { background: var(--blau-hell); color: var(--blau); }
  #nav .ni { display: block; color: var(--blau); flex: none; }
  #nav .nl { flex: 1; }
  #nav .nl-name { display: none; } #nav .nl-konto { display: inline; }
  #nav .navbadge { position: static; font-size: .75rem; padding: .05rem .5rem; }
  #nav #logout { color: var(--danger); border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); margin-top: .2rem; font-weight: 600; }
}
@media (max-width: 600px) {
  .zt-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border: 0; background: none; overflow: visible; }
  .zt-tabs button, .zt-tabs button:first-child { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .35rem .75rem; }
  .zt-tabs button.on { background: var(--steel); border-color: var(--steel); }
}
/* Wochenplan auf dem Tablet ohne seitliches Scrollen */
@media (min-width: 601px) and (max-width: 1023px) {
  .ptable { min-width: 680px; }
  .ptable th.pn, .ptable td.pn { width: 110px; }
}
/* iPhone/iPad zoomen automatisch hinein, wenn ein Eingabefeld kleiner als 16 px ist – und bleiben dann vergrößert.
   Darum auf Touch-Geräten alle Eingabefelder mindestens 16 px groß. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---------------------------------------------------------------- Einsatz-Akte und Bestellungen */
.ak-zeile { margin-top: .5rem; }
.btn.ak-knopf { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: .2rem .6rem; text-align: left; font-weight: 600; border-style: dashed; }
.btn.ak-knopf.hat { border-style: solid; border-color: var(--blau); color: var(--blau); background: var(--blau-hell); }
.btn.ak-knopf small { font-weight: 500; color: var(--ink2); font-size: .85rem; }
.ak-form { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem; }
.ak-foto { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ak-h { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.ak-e { border-top: 1px solid var(--line); padding: .6rem 0; }
.ak-ek { display: flex; align-items: baseline; gap: .5rem; } .ak-ek span { flex: 1; }
.ak-t { margin-top: .25rem; overflow-wrap: anywhere; }
.ak-del { background: none; border: 0; color: var(--muted-hell); cursor: pointer; font-size: .95rem; padding: .2rem .4rem; border-radius: var(--r-s); }
.ak-del:hover { background: var(--rot-h); color: var(--danger); }
.ak-bilder { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.ak-bild { padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; cursor: zoom-in; width: 92px; height: 92px; }
.ak-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-best { border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .7rem; margin-bottom: .4rem; background: #fff; }
.ak-bk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ak-bknopf { margin-top: .45rem; gap: .35rem; flex-wrap: wrap; }
.ak-gh { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.ak-bc { margin-bottom: .5rem; } .ak-bc .ak-best { border: 0; padding: .3rem 0 0; margin: 0; }
.pc-akte { font-size: .75rem; } .pc-akte:empty { display: none; }
.ak-geliefert { margin: .8rem 0; } .ak-geliefert summary { cursor: pointer; font-weight: 600; color: var(--blau); margin-bottom: .5rem; }
.ak-neu { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .6rem; }
.ak-nk { display: flex; gap: .75rem; align-items: flex-start; text-decoration: none; color: inherit; }
.ak-nk img, .ak-nkleer { width: 72px; height: 72px; border-radius: var(--r); object-fit: cover; flex: none; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.ak-nk > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .ak-neu { grid-template-columns: minmax(0, 1fr); } }
/* Startseite auf dem Handy: Hinweise als kompakte Zeile statt großer Kacheln */
@media (max-width: 767px) {
  .skopf { margin-bottom: .6rem; }
  .sks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
  .sk { padding: .35rem .7rem; gap: .45rem; border-radius: 999px; }
  .sk b { font-size: 1.05rem; }
  .sk span { font-size: .85rem; }
}

/* =====================================================================================
   Design 2026 – hochwertiger Auftritt: weiche Karten, einheitliche Symbole, blauer Kopf
   ===================================================================================== */
:root { --bg: #f3f5f8; --line: #e3e8ee; --radius: 16px; --orange: #eb6834; --orange-d: #c4501f; --orange-h: #fdeee6;
  --gruen-h: #e3f4ea; --gelb: #b7791f; --gelb-h: #fff4dc; --rot-h: #fdecea; --ink2: #44525f; --muted: #6f7c88;
  --schatten: 0 1px 2px rgba(10,30,50,.06), 0 8px 24px rgba(10,30,50,.07); --schatten-h: 0 2px 4px rgba(10,30,50,.08), 0 14px 32px rgba(10,30,50,.12); }
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.num, .zt-sum b, .zt-ta { font-variant-numeric: tabular-nums; }
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); }
.btn { border-radius: var(--r); }
.btn.primary { box-shadow: 0 2px 6px rgba(0,64,112,.25); }
input, select, textarea { border-radius: var(--r); border-color: var(--line); }
.modal .box { border-radius: var(--r-l); }
.empty { border-radius: var(--radius); }
.project-card { border-left: 0; position: relative; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.project-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--blau), var(--blau-mittel)); }
.project-card:hover { box-shadow: var(--schatten-h); transform: translateY(-1px); }
.chip { border-radius: var(--r); }

/* Startseite: blauer Kopfbereich mit Begrüßung */
.shero { position: relative; overflow: hidden; color: #fff; margin: -1.25rem calc(-1 * var(--seite, 1rem)) 0; padding: 1.6rem 1.4rem 4.2rem;
  background: radial-gradient(120% 160% at 100% 0%, var(--blau-mittel) 0%, var(--blau) 45%, var(--blau-dunkel) 100%); }
.shero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px); pointer-events: none; }
.sh-datum { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; font-weight: 600; position: relative; }
.sh-gruss { font-size: clamp(1.7rem, 6vw, 2.2rem); font-weight: 800; margin-top: .2rem; letter-spacing: -.01em; position: relative; line-height: 1.15; }
#startkopf + #zeitstart { margin-top: -3.2rem; position: relative; z-index: 2; }
@media (min-width: 768px) { .shero { margin: 0 0 0; border-radius: var(--r-l); } }

/* Hinweise als Chips mit Symbol */
.sks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.sk { display: inline-flex; align-items: center; gap: .55rem; background: #fff; border: 0; border-radius: var(--r-l); padding: .45rem .8rem .45rem .45rem; box-shadow: var(--schatten); color: inherit; text-decoration: none; }
.sk .sk-i { width: 32px; height: 32px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; background: var(--blau-hell); color: var(--blau); }
.sk .sk-i svg.ic { width: 17px; height: 17px; }
.sk b { font-size: 1.05rem; color: var(--blau); }
.sk span:last-child { font-size: .85rem; font-weight: 600; color: var(--ink); }
.sk.warn { background: #fff; border: 0; } .sk.warn b { color: var(--danger); } .sk.warn .sk-i { background: var(--rot-h); color: var(--danger); }
@media (max-width: 767px) { .sk { padding: .35rem .7rem .35rem .35rem; border-radius: var(--r); } .sk .sk-i { width: 28px; height: 28px; } }

/* Stempelkarte neu */
.zt { border-top: 0; padding: 1rem; }
.zt2 { display: flex; align-items: center; gap: 1rem; }
.zring { width: 96px; height: 96px; position: relative; flex: none; }
.zring svg { width: 96px; height: 96px; display: block; }
.zring .zr-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zring .zr-t b { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.zring .zr-t span { font-size: .75rem; color: var(--muted); font-weight: 600; }
.zst { flex: 1; min-width: 0; }
.zpill { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; background: var(--gruen-h); color: var(--ok); }
.zpill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
.zpill.pause { background: var(--gelb-h); color: var(--gelb); }
.zpill.aus { background: var(--bg); color: var(--muted); } .zpill.aus i { box-shadow: none; }
.zst h3 { font-size: 1.05rem; font-weight: 700; margin: .45rem 0 0; line-height: 1.25; overflow-wrap: anywhere; }
.zst p { font-size: .85rem; color: var(--ink2); margin: .2rem 0 0; }
.zknoepfe { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .5rem; margin-top: .9rem; }
.zknoepfe.zwei { grid-template-columns: 1.4fr 1fr; }
button.zk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .7rem .4rem; border-radius: var(--r-l); font: inherit; font-size: .85rem; font-weight: 700;
  background: var(--bg); color: var(--ink); border: 0; cursor: pointer; }
button.zk:active { transform: scale(.98); }
button.zk.pause { background: var(--gelb-h); color: var(--gelb); }
button.zk.gehen { background: #12202e; color: #fff; }
button.zk.los { background: var(--ok); color: #fff; flex-direction: row; gap: .5rem; font-size: 1.05rem; padding: .9rem; }
button.zk.wei { background: var(--ok); color: #fff; }
.zt .zt-arten span { border-radius: var(--r-l); border: 2px solid transparent; background: var(--bg); gap: .3rem; padding: .7rem .2rem; }
.zt .zt-arten span svg.ic { width: 24px; height: 24px; color: var(--blau); }
.zt .zt-arten input:checked + span { border-color: var(--blau); background: var(--blau-hell); }
.zt-kopf2 { display: flex; justify-content: space-between; align-items: baseline; }
.zt-kopf2 h2 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.zt .zt-proj select { border-radius: var(--r); }
.zt-heute { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .6rem; }
.zt-wechsel { border-top: 1px solid var(--line); }
.zt-seg > span:nth-child(2) { display: flex; align-items: center; gap: .35rem; }
.zt-seg svg.ic { width: 16px; height: 16px; color: var(--muted); }

/* Heute als Zeitstrahl */
.card.heute { border-top: 0; }
.heute .h2k { display: flex; justify-content: space-between; align-items: baseline; }
.heute .h2k h2 { margin: 0; font-size: 1.2rem; color: var(--ink); }
.tl { display: flex; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.tl:first-of-type { border-top: 0; }
.tl-z { width: 50px; flex: none; text-align: right; }
.tl-z b { font-size: .95rem; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.tl-z span { font-size: .75rem; color: var(--muted); display: block; line-height: 1.2; margin-top: .1rem; overflow-wrap: anywhere; }
.tl-r { width: 3px; border-radius: var(--r-s); flex: none; background: var(--blau); }
.tl-i { flex: 1; min-width: 0; }
.tl-tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: var(--r-s); background: var(--blau-hell); color: var(--blau); }
.tl-tag.rep { background: var(--orange-h); color: var(--orange-d); }
.tl-tag.grau { background: var(--bg); color: var(--ink2); }
.tl-i h4 { font-size: 1rem; font-weight: 700; margin: .35rem 0 0; line-height: 1.3; overflow-wrap: anywhere; }
.tl-i h4 a { color: inherit; text-decoration: none; }
.tl-o { display: flex; gap: .4rem; align-items: flex-start; font-size: .85rem; color: var(--ink2); margin-top: .3rem; }
.tl-o svg.ic { width: 15px; height: 15px; margin-top: .15rem; color: var(--muted); }
.tl-o a { color: inherit; }
.tl-a { display: flex; gap: .45rem; margin-top: .7rem; flex-wrap: wrap; }
.tl-a .ta { flex: 1 1 0; min-width: 84px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .85rem; font-weight: 700; padding: .6rem .5rem;
  border-radius: var(--r); background: var(--bg); color: var(--ink); text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.tl-a .ta svg.ic { width: 17px; height: 17px; }
.tl-a .ta.prim { background: var(--blau); color: #fff; }
.tl-mehr { margin-top: .5rem; } .tl-mehr summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.tl-n { font-size: .85rem; color: var(--ink2); margin-top: .35rem; }
.ak-vor { margin-top: .6rem; display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--r); background: var(--bg); border: 1px dashed var(--line-stark); cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; }
.ak-vor .th { display: flex; flex: none; }
.ak-vor .th img, .ak-vor .th i { width: 32px; height: 32px; border-radius: var(--r); border: 2px solid #fff; margin-left: -9px; object-fit: cover; display: block; background: var(--blau-hell); }
.ak-vor .th img:first-child, .ak-vor .th i:first-child { margin-left: 0; }
.ak-vor .th i { display: flex; align-items: center; justify-content: center; color: var(--blau); }
.ak-vor .th i svg.ic { width: 17px; height: 17px; }
.ak-vor span.t { flex: 1; min-width: 0; font-size: .85rem; color: var(--ink2); line-height: 1.35; }
.ak-vor span.t b { color: var(--ink); font-size: .85rem; }

/* Menü: Kacheln (Handy als Blatt von unten, Tablet als Klappfenster), PC als Seitenleiste */
#nav .nsub, #nav .nav-av { display: none; }
@media (max-width: 1199px) {
  #nav { display: none; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .7rem; border-radius: var(--r-l); width: min(400px, calc(100vw - 1rem)); }
  body.menu-offen #nav { display: grid; }
  #nav a { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem; border-radius: var(--r-l); background: var(--bg); position: relative; min-height: 104px; }
  #nav a .ni { width: 40px; height: 40px; padding: 9px; border-radius: var(--r); background: #fff; color: var(--blau); box-shadow: 0 1px 2px rgba(10,30,50,.08); }
  #nav a.active { background: var(--blau-hell); }
  #nav a .nl { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
  #nav .nsub { display: block; font-size: .75rem; color: var(--muted); font-weight: 500; margin-top: -.35rem; line-height: 1.25; }
  #nav .navbadge { position: absolute; top: .7rem; right: .7rem; font-size: .75rem; padding: .05rem .5rem; }
  #nav a.nkonto { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; background: #fff; border: 1px solid var(--line); flex-wrap: wrap; gap: .1rem .75rem; }
  #nav a.nkonto .ni { display: none; }
  #nav a.nkonto .nav-av { display: flex; width: 42px; height: 42px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 800; font-size: .95rem; align-items: center; justify-content: center; flex: none; grid-row: span 2; }
  #nav a.nkonto .nl-name { display: inline; } #nav a.nkonto .nl-konto { display: none; }
  #nav a.nkonto .nl { flex: 1; } #nav a.nkonto .nsub { margin: 0; flex-basis: 100%; padding-left: calc(42px + .75rem); margin-top: -1.2rem; }
  #nav #logout { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: .4rem; border-top: 0; border-radius: var(--r); padding: .6rem; background: transparent; color: var(--danger); font-weight: 700; margin: 0; }
  #nav #logout .ni { width: 18px; height: 18px; display: block; color: var(--danger); background: none; box-shadow: none; padding: 0; }
}
@media (max-width: 767px) {
  #nav { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 86vh; border-radius: var(--r-l) var(--r-l) 0 0; padding: 1.4rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,20,40,.3); }
  #nav::before { content: ''; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: var(--r-s); background: var(--line-stark); }
}
@media (min-width: 1200px) {
  body { padding-left: 252px; }
  .top { position: fixed; left: 0; top: 0; bottom: 0; width: 252px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.2rem; padding: 1.4rem .9rem 1rem;
    background: linear-gradient(180deg, var(--blau), #002640); z-index: 30; overflow-y: auto; }
  .top .brand { padding: 0 .5rem; flex-direction: column; align-items: flex-start; gap: .5rem; }
  .top .brand-sub { border-left: 0; padding-left: 0; font-size: .75rem; opacity: .6; }
  .top .logo { height: 44px; }
  #nav { flex-direction: column; align-items: stretch; gap: .2rem; flex: 1; flex-wrap: nowrap; }
  #nav a, #nav button { display: flex; align-items: center; gap: .75rem; border: 0; border-radius: var(--r); padding: .62rem .75rem; color: var(--line-stark); font-size: .95rem; font-weight: 600; background: transparent; }
  #nav a:hover, #nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
  #nav a.active { background: rgba(255,255,255,.14); color: #fff; }
  #nav .ni { display: block; width: 20px; height: 20px; }
  #nav .navbadge { margin-left: auto; background: var(--orange); color: #fff; }
  #nav a.active .navbadge { color: #fff; }
  #nav a.nkonto { margin-top: auto; background: rgba(255,255,255,.06); padding: .7rem; }
  #nav a.nkonto .ni { display: none; }
  #nav a.nkonto .nav-av { display: flex; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: .85rem; align-items: center; justify-content: center; flex: none; }
  #nav a.nkonto .nl { display: flex; flex-direction: column; line-height: 1.2; } #nav a.nkonto .nl-name { color: #fff; } #nav a.nkonto .nl-konto { display: inline; font-size: .75rem; opacity: .7; font-weight: 500; }
  #nav #logout { font-size: .85rem; opacity: .75; padding: .45rem .75rem; }
  #nav #logout .ni { width: 18px; height: 18px; }
  main { max-width: 1200px; padding: 1.6rem 2rem 4rem; }
  .menuknopf { display: none !important; }
}
#nav svg.ic.ni { fill: none; }

/* Projektseite: Kopf mit Fortschritt, Bereiche als Kacheln */
.phero { position: relative; overflow: hidden; color: #fff; margin: -1.25rem calc(-1 * var(--seite, 1rem)) 0; padding: 1.1rem 1.3rem 1.3rem; background: linear-gradient(160deg, var(--blau), var(--blau-dunkel)); }
.phero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px); pointer-events: none; }
.phero > * { position: relative; z-index: 1; }
.ph-zur { display: inline-flex; align-items: center; gap: .3rem; color: #fff; opacity: .8; font-size: .85rem; font-weight: 600; text-decoration: none; }
.ph-zur svg.ic { width: 18px; height: 18px; }
.ph-k { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.ph-nr { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; background: rgba(255,255,255,.14); padding: .15rem .55rem; border-radius: var(--r-s); }
.phero h1 { color: #fff; font-size: clamp(1.45rem, 5vw, 1.9rem); margin: .45rem 0 0; }
.phero p { opacity: .8; font-size: .85rem; margin: .35rem 0 0; max-width: 60ch; }
.ph-btn { display: flex; gap: .5rem; flex-wrap: wrap; }
.ph-btn .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.ph-fort { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.ph-fo { flex: 1 1 0; min-width: 96px; background: rgba(255,255,255,.1); border-radius: var(--r-l); padding: .6rem .75rem; }
.ph-fo span { font-size: .75rem; opacity: .78; font-weight: 600; display: block; }
.ph-fo b { font-size: 1.2rem; font-weight: 800; display: block; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.ph-bar { height: 5px; border-radius: var(--r-s); background: rgba(255,255,255,.18); margin-top: .4rem; overflow: hidden; }
.ph-bar i { display: block; height: 100%; border-radius: var(--r-s); background: #6fd39b; }
.ph-bar i.o { background: #ffb38a; } .ph-bar i.r { background: #ff8f7a; }
.tabs.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; border: 0; margin: 1rem 0 1.1rem; overflow: visible; }
.tabs.ptiles a { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; background: #fff; border-radius: var(--r-l); padding: .8rem .75rem .7rem; border: 0; margin: 0;
  box-shadow: var(--schatten); color: var(--ink); white-space: normal; position: relative; }
.tabs.ptiles a .pt-i { width: 36px; height: 36px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; background: var(--blau-hell); color: var(--blau); }
.tabs.ptiles a .pt-i.or { background: var(--orange-h); color: var(--orange-d); } .tabs.ptiles a .pt-i.gr { background: var(--gruen-h); color: var(--ok); }
.tabs.ptiles a .pt-i svg.ic { width: 19px; height: 19px; }
.tabs.ptiles a b { font-size: .85rem; font-weight: 700; line-height: 1.2; }
.tabs.ptiles a .count { font-size: .75rem; color: var(--muted); margin: -.25rem 0 0; }
.tabs.ptiles a.active { background: var(--blau); color: #fff; box-shadow: 0 6px 18px rgba(0,64,112,.3); }
.tabs.ptiles a.active .pt-i { background: rgba(255,255,255,.16); color: #fff; }
.tabs.ptiles a.active .count { color: rgba(255,255,255,.8); }
.tabs.ptiles a .count .alarm { background: var(--danger); color: #fff; border-radius: 999px; padding: 0 .4rem; font-size: .75rem; }
@media (min-width: 768px) { .phero { margin: 0; border-radius: var(--r-l); padding: 1.3rem 1.6rem 1.5rem; } .tabs.ptiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
@media (max-width: 600px) { .tabs.ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tabs.ptiles a { padding: .7rem .6rem .6rem; } }

/* Einsatz-Akte als Verlauf */
.modal .box.akte-box { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(88vh, 860px); width: min(640px, 100%); }
.ak-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.1rem .7rem; border-bottom: 1px solid var(--line); }
.ak-lbl { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ak-kopf h2 { margin: .15rem 0 0; font-size: 1.2rem; color: var(--ink); line-height: 1.25; }
.ak-bl { padding: .7rem 1.1rem 0; display: grid; gap: .5rem; }
.ak-best { border: 1px solid var(--line); border-radius: var(--r-l); padding: .7rem .8rem; background: #fff; margin: 0; }
.ak-step { display: flex; align-items: flex-start; margin-top: .55rem; }
.aks { display: flex; flex-direction: column; align-items: center; text-align: center; width: 76px; flex: none; color: var(--muted); }
.aks i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-stark); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; }
.aks i svg.ic { width: 13px; height: 13px; stroke-width: 3; }
.aks b { font-size: .75rem; margin-top: .25rem; } .aks small { font-size: .75rem; line-height: 1.2; overflow-wrap: anywhere; }
.aks.f { color: var(--ok); } .aks.f i { background: var(--ok); border-color: var(--ok); }
.aks.a { color: var(--gelb); } .aks.a i { border-color: var(--gelb); box-shadow: 0 0 0 4px var(--gelb-h); }
.akl { flex: 1; height: 2px; background: var(--line-stark); margin-top: 11px; } .akl.f { background: var(--ok); }
.ak-bknopf .btn svg.ic { width: 15px; height: 15px; }
.ak-verlauf { flex: 1; overflow-y: auto; padding: .8rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.ak-e2 { display: flex; gap: .6rem; align-items: flex-start; }
.ak-av { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.ak-bub { flex: 1; min-width: 0; background: var(--bg); border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); padding: .55rem .75rem .65rem; }
.ak-meta { display: flex; justify-content: space-between; gap: .4rem; font-size: .75rem; color: var(--muted); }
.ak-bub .ak-t { font-size: .95rem; line-height: 1.4; margin-top: .2rem; }
.ak-bilder { margin-top: .5rem; }
.ak-bild { width: 76px; height: 76px; border-radius: var(--r); border: 0; }
.ak-leer { text-align: center; color: var(--muted); padding: 1.5rem 1rem; } .ak-leer svg.ic { width: 36px; height: 36px; margin: 0 auto .5rem; opacity: .6; } .ak-leer p { font-size: .85rem; margin: 0; }
.ak-comp { border-top: 1px solid var(--line); padding: .6rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: #fff; display: grid; gap: .45rem; }
.ak-zeile2 { display: flex; gap: .45rem; align-items: flex-end; }
.ak-zeile2 textarea { flex: 1; min-height: 42px; max-height: 140px; resize: none; border-radius: var(--r-l); padding: .6rem .8rem; }
.ak-rund { width: 42px; height: 42px; border-radius: var(--r-l); display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink2); flex: none; cursor: pointer; border: 0; padding: 0; }
.ak-rund.an { background: var(--orange-h); color: var(--orange-d); }
.ak-rund.ak-send { background: var(--blau); color: #fff; }
.ak-rund.ak-send:disabled { opacity: .5; }
.ak-bfeld { display: flex; gap: .45rem; } .ak-bfeld[hidden] { display: none !important; }
.ak-bfeld input { flex: 1; } .ak-bfeld .ak-menge { flex: 0 0 5.5rem; }
.ak-dat { color: var(--orange-d); font-weight: 600; }
@media (max-width: 600px) { .modal .box.akte-box { height: 92vh; border-radius: var(--r-l) var(--r-l) 0 0; } }

/* Übersicht für Admins */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: .4rem 0 .9rem; }
.kpi { display: flex; align-items: center; gap: .8rem; background: #fff; border-radius: var(--r-l); padding: .9rem 1rem; box-shadow: var(--schatten); text-decoration: none; color: inherit; min-width: 0; }
.kpi-i { width: 44px; height: 44px; border-radius: var(--r-l); display: flex; align-items: center; justify-content: center; background: var(--blau-hell); color: var(--blau); flex: none; }
.kpi-i.gr { background: var(--gruen-h); color: var(--ok); } .kpi-i.or { background: var(--orange-h); color: var(--orange-d); } .kpi-i.rt { background: var(--rot-h); color: var(--danger); }
.kpi b { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { font-size: .85rem; color: var(--ink2); }
.ue-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: .9rem; align-items: start; }
.ue-sp { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.ue-sp .card.ck { margin: 0; }
.ue-leute { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.ue-le { display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-radius: var(--r); background: var(--bg); text-decoration: none; color: inherit; min-width: 0; }
.ue-av { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.ue-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); background: var(--line-stark); }
.ue-av.da::after { background: var(--ok); } .ue-av.pause::after { background: #e09100; } .ue-av.weg::after { background: var(--blau); }
.ue-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ue-t b { font-size: .95rem; } .ue-t small { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-le em { font-style: normal; font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ue-woche { display: grid; gap: .3rem; font-size: .75rem; }
.ue-woche .h { font-weight: 700; color: var(--muted); padding: 0 .2rem; }
.ue-woche .n { font-weight: 700; font-size: .85rem; padding: .35rem .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-woche .c { border-radius: var(--r); padding: .35rem .45rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-woche .c.a { background: var(--blau-hell); color: var(--blau); } .ue-woche .c.r { background: var(--orange-h); color: #7a3410; } .ue-woche .c.u { background: var(--gruen-h); color: #1d5e35; }
.ue-woche .c.k { background: var(--rot-h); color: var(--danger); } .ue-woche .c.s { background: var(--bg); color: var(--ink2); } .ue-woche .c.l { border: 1px dashed var(--line-stark); }
.ue-b { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.ue-b:first-of-type { border-top: 0; padding-top: .1rem; }
.ue-b > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ue-b b { font-size: .95rem; } .ue-b small { font-size: .75rem; color: var(--muted); }
.ue-f { display: flex; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.ue-f:first-of-type { border-top: 0; padding-top: .1rem; }
.ue-f img, .ue-f i { width: 50px; height: 50px; border-radius: var(--r); object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; background: var(--blau-hell); color: var(--blau); }
.ue-f > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .ue-f b { font-size: .85rem; } .ue-f small { font-size: .75rem; color: var(--muted); }
.ue-f small.ue-ft { color: var(--ink2); font-size: .85rem; }
.ck .ck-k h2 { color: var(--ink); }
@media (max-width: 1023px) { .ue-grid { grid-template-columns: minmax(0, 1fr); } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpi { padding: .7rem .75rem; gap: .6rem; } .kpi-i { width: 38px; height: 38px; } .kpi b { font-size: 1.2rem; } .ue-woche { font-size: .75rem; } }
.ak-bl { max-height: 42%; overflow-y: auto; flex: none; }
.ak-gh { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.ak-gh svg.ic { width: 20px; height: 20px; color: var(--blau); }
.ak-nkleer svg.ic { width: 26px; height: 26px; color: var(--blau); }
/* Menü-Kacheln: bei ungerader Anzahl die letzte Kachel breit, damit keine Lücke bleibt */
@media (max-width: 1199px) {
  #nav a:not(.nkonto):nth-of-type(odd):has(+ a.nkonto) { grid-column: 1 / -1; }
}
/* Seite „Aufgaben“ */
.auf-kopf { max-width: 860px; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.auf-kopf h1 { margin: 0 0 .2rem; }
.auf-kopf p { margin: 0; }
.auf-kopf .btn { display: inline-flex; align-items: center; gap: .4rem; }
.auf-kopf .btn svg.ic { width: 18px; height: 18px; }
.auf-liste { display: flex; flex-direction: column; gap: .9rem; max-width: 860px; }

/* ---------------------------------------------------------------- Team 2026 */
.tapp { border: 0; border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 12px 32px rgba(0,30,60,.10); }
@media (min-width: 1200px) { .tapp { height: calc(100vh - 2.6rem); } }
.tside { background: var(--bg); border-right: 1px solid var(--line); }
.tside-k { padding: 1.15rem 1.1rem 1.05rem; background: linear-gradient(140deg, var(--blau) 0%, var(--blau-mittel) 100%); position: relative; overflow: hidden; }
.tside-k::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); pointer-events: none; }
.tside-k > * { position: relative; z-index: 1; }
.tside-k h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: 0; }
.tside-k small { display: block; color: rgba(255,255,255,.7); font-size: .85rem; margin-top: .1rem; }
.tglocke { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.tglocke:hover { background: rgba(255,255,255,.2); }
.tglocke svg.ic { width: 20px; height: 20px; }
.tsek { padding: 1.1rem 1.1rem .4rem; font-size: .75rem; color: var(--muted); }
.tneu { width: 1.9rem; height: 1.9rem; background: var(--blau); box-shadow: 0 2px 6px rgba(0,64,112,.25); }
.tneu svg.ic { width: 16px; height: 16px; stroke-width: 2.4; }
.tli { margin: 0 .55rem 2px; padding: .6rem .6rem; border-radius: var(--r-l); border-left: 0; transition: background .12s; }
.tli:hover { background: #fff; }
.tli.an { background: #fff; box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 4px 12px rgba(0,30,60,.07); }
.tli.an b { color: var(--blau); }
.tbad { background: var(--orange); }
/* Symbol-Kacheln */
.tav.kanal { border-radius: var(--r-l); }
.tav.kanal svg.ic { width: 22px; height: 22px; }
.tav.kanal img { width: 70%; height: auto; }
.tav.kanal.or { background: linear-gradient(140deg, #f28a55, var(--orange)); }
.tav.kanal.bl { background: linear-gradient(140deg, var(--blau-mittel), var(--blau)); }
.tav.kanal.ge { background: linear-gradient(140deg, #f2b84b, #d6921a); }
.tav.kanal.gr { background: var(--muted-hell); }
.tav.kanal.gross { width: 2.6rem; height: 2.6rem; }
/* Verlauf */
.tpane { background: var(--bg); background-image: radial-gradient(circle at 1px 1px, rgba(0,64,112,.06) 1px, transparent 0); background-size: 18px 18px; }
.tpk { background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); padding: .75rem 1.1rem; }
.tpk-t b { font-weight: 800; color: var(--ink); }
.tzur svg.ic { width: 24px; height: 24px; color: var(--blau); stroke-width: 2.4; }
.tverlauf { gap: .8rem; padding: 1.2rem 1.4rem; }
.ttag { background: #fff; color: var(--muted); font-size: .75rem; letter-spacing: .02em; padding: .25rem .9rem; box-shadow: 0 1px 3px rgba(0,30,60,.08); }
.tmsg { align-items: flex-start; }
.tmsg .tav { margin-top: .1rem; }
.tbub { border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); padding: .6rem .9rem .4rem; box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 3px 10px rgba(0,30,60,.06); }
.tmsg.ich .tbub { background: linear-gradient(140deg, var(--blau-mittel), var(--blau)); border-radius: var(--r-l) var(--r-s) var(--r-l) var(--r-l); box-shadow: 0 3px 10px rgba(0,64,112,.25); }
.tname { font-weight: 700; font-size: .85rem; }
.ttext { font-size: .95rem; }
.tzeit { font-size: .75rem; }
.treak { margin-top: -.45rem; }
.treak button { border-color: var(--line); padding: .1rem .5rem; }
.takt { gap: .15rem; margin-top: .25rem; }
.takt button { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-weight: 600; font-size: .75rem; padding: .25rem .5rem; border-radius: 999px; }
.takt button svg.ic { width: 15px; height: 15px; }
.takt button:hover { background: #fff; color: var(--blau); }
.takt .tdel { color: var(--danger); }
.twahl { padding: .2rem .4rem; border: 1px solid var(--line); }
.tthread { background: #fff; border-left: 0; border-radius: var(--r-l); padding: .55rem .75rem; box-shadow: 0 1px 2px rgba(0,30,60,.05); position: relative; margin-left: .2rem; }
.tthread::before { content: ""; position: absolute; left: -.55rem; top: .2rem; bottom: .6rem; width: 2px; border-radius: var(--r-s); background: var(--line-stark); }
.tant input { background: #fff; border: 1px solid var(--line); }
/* Wichtig: Aushänge statt Sprechblasen */
.tmsg.wichtig { max-width: 720px; width: 100%; }
.tmsg.wichtig .tmsg-in { width: 100%; }
.tmsg.wichtig .tbub { width: 100%; border-top: 0; border-radius: var(--r-l); padding: .9rem 1.1rem 1rem; box-shadow: inset 4px 0 0 var(--orange), 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.07); }
.twk { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.twk .tav { width: 2.3rem; height: 2.3rem; font-size: .85rem; }
.twk .tav.kanal svg.ic { width: 19px; height: 19px; }
.twk div { display: flex; flex-direction: column; }
.twk b { font-size: .95rem; }
.twk div span { font-size: .75rem; color: var(--muted); }
.tmsg.wichtig .ttext { font-size: 1.05rem; line-height: 1.5; }
/* Eingabe */
.tsend { background: #fff; border-top: 1px solid var(--line); padding: .7rem 1rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
.tsend textarea { background: var(--bg); border: 1px solid transparent; }
.tsend textarea:focus { background: #fff; border-color: #9cc0e0; outline: none; box-shadow: 0 0 0 3px rgba(10,90,150,.12); }
.tsendk { background: linear-gradient(140deg, var(--blau-mittel), var(--blau)); }
.tnur { display: flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; color: var(--muted); border-top: 1px solid var(--line); font-size: .85rem; }
.tnur svg.ic { width: 17px; height: 17px; color: var(--blau); }
.tscroll .tli { margin: 0 0 .4rem; background: #fff; box-shadow: 0 1px 2px rgba(0,30,60,.05); }
.tsuche { background: #fff; }
.tmeldpop { top: 4.4rem; border-radius: var(--r-l); }
@media (max-width: 767px) {
  .tapp { border-radius: 0; box-shadow: none; }
  .tside { background: var(--bg, var(--bg)); }
  .tside-k { padding: 1.2rem 1rem 1.3rem; }
  .tli { margin: 0 .5rem 4px; background: #fff; box-shadow: 0 1px 2px rgba(0,30,60,.05); padding: .7rem .7rem; }
  .tpk { padding: .6rem .7rem; }
  .tverlauf { padding: 1rem .75rem; }
  .tmsg.wichtig { max-width: 100%; }
  .takt button span { display: none; }
  .takt button { padding: .3rem .45rem; }
  .takt button[data-antw] span { display: inline; }
}
.takt button { white-space: nowrap; }
.tauf-k { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.tauf-k h3 { margin: 0; }
.tauf-f { display: inline-flex; background: var(--bg); border-radius: 999px; padding: 3px; }
.tauf-f button { border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); padding: .3rem .8rem; border-radius: 999px; cursor: pointer; }
.tauf-f button.an { background: #fff; color: var(--blau); box-shadow: 0 1px 3px rgba(0,30,60,.12); }
.tprivat { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .75rem; font-weight: 700; color: #6b4a00; background: var(--gelb-h); border-radius: 999px; padding: .1rem .55rem; }
.tprivat svg.ic { width: 13px; height: 13px; }
.tpriv { align-items: flex-start; gap: .5rem; }

/* ---------------------------------------------------------------- Zahlen 2026 */
.zks { gap: .8rem; }
div.zk { border: 0; border-radius: var(--r-l); padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); text-align: left; display: flex; flex-direction: column; gap: .15rem; }
div.zk .zk-t { font-size: .75rem; font-weight: 600; color: var(--muted); }
div.zk .zk-v { font-size: 1.75rem; font-weight: 800; color: var(--blau); letter-spacing: -.01em; }
div.zk .zk-s { font-size: .75rem; }
.zhin { background: var(--orange-h); border: 0; border-radius: var(--r-l); padding: 1rem 1.2rem; box-shadow: inset 4px 0 0 #d6a23d, 0 1px 2px rgba(0,30,60,.05); }
.zhin b:first-child { color: #6b4a00; }
.zh { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 1.8rem 0 0; font-size: 1.2rem; }
.zh .muted { font-weight: 500; }
label.btn.primary { display: inline-flex; align-items: center; gap: .4rem; }
label.btn svg.ic { width: 18px; height: 18px; }
@media (max-width: 600px) { div.zk { padding: .8rem .85rem; border-radius: var(--r-l); } div.zk .zk-v { font-size: 1.45rem; } }
.tbox p.tinfo { display: block; }
.tpriv { display: flex; align-items: flex-start; gap: .6rem; background: var(--orange-h); border-radius: var(--r); padding: .65rem .8rem; cursor: pointer; font-weight: 400; }
.tpriv input { width: 20px; height: 20px; margin: .1rem 0 0; flex: none; }
.tpriv span { display: flex; flex-direction: column; }
.tpriv small { color: var(--muted); font-size: .85rem; }
.zgrid { gap: 1rem; margin: 1rem 0; }
.zgrid .card { margin: 0; }

/* ---------------------------------------------------------------- Betrieb 2026 */
.bseite { max-width: 1100px; }
.bhero { position: relative; overflow: hidden; border-radius: var(--r-l); padding: 1.3rem 1.3rem 1.2rem; color: #fff; margin-bottom: 1rem;
  background: linear-gradient(140deg, var(--blau) 0%, var(--blau-mittel) 100%); box-shadow: 0 10px 30px rgba(0,40,80,.18); }
.bhero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); pointer-events: none; }
.bhero > * { position: relative; z-index: 1; }
.bh-ue { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.bhero h1 { color: #fff; margin: .2rem 0 .9rem; font-size: 1.75rem; }
.bh-z { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-l); padding: .85rem 1rem; }
.bring { width: 64px; height: 64px; flex: none; }
.bh-t { min-width: 0; } .bh-t b { font-size: 1.05rem; display: block; } .bh-t small { opacity: .82; font-size: .85rem; }
.bh-go { margin-left: auto; background: #fff; color: var(--blau); border: 0; border-radius: 999px; padding: .6rem 1.1rem; font: inherit; font-weight: 800; font-size: .85rem; white-space: nowrap; display: inline-flex; gap: .35rem; align-items: center; text-decoration: none; cursor: pointer; }
.bh-go svg.ic { width: 16px; height: 16px; stroke-width: 2.6; }
.bh-k { display: flex; gap: .45rem; margin-top: .8rem; flex-wrap: wrap; }
.bh-k a, .bh-k button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: .38rem .8rem; font: inherit; font-size: .85rem; font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; text-decoration: none; cursor: pointer; }
.bh-k a:hover, .bh-k button:hover { background: rgba(255,255,255,.22); }
.bh-k svg.ic { width: 15px; height: 15px; }
@media (max-width: 600px) { .bhero h1 { font-size: 1.45rem; } .bh-z { flex-wrap: wrap; } .bh-go { margin-left: 0; width: 100%; justify-content: center; } }

.bnot { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: var(--r-l); padding: .75rem .9rem; margin-bottom: 1rem;
  box-shadow: inset 4px 0 0 var(--danger), 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); }
.bnot-l { display: flex; align-items: center; gap: .85rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.bnot-k { width: 46px; height: 46px; border-radius: var(--r-l); background: linear-gradient(140deg,#ef4b3f,var(--danger)); color: #fff; display: grid; place-items: center; flex: none; }
.bnot-k svg.ic { width: 24px; height: 24px; }
.bnot-l b { display: block; } .bnot-l small { color: var(--muted); font-size: .85rem; }
.bnot-tel { flex: none; background: var(--danger); color: #fff; font-weight: 800; border-radius: 999px; padding: .55rem .95rem; display: inline-flex; gap: .4rem; align-items: center; font-size: .95rem; text-decoration: none; }
.bnot-tel svg.ic { width: 16px; height: 16px; }

.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin-bottom: 1.2rem; }
@media (min-width: 1024px) { .bk-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.bk-t { position: relative; background: #fff; border-radius: var(--r-l); padding: .95rem 1rem; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .15rem; min-height: 120px;
  box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); transition: transform .12s, box-shadow .12s; }
.bk-t:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,30,60,.06), 0 12px 26px rgba(0,30,60,.10); }
.bk-t b { font-size: 1rem; margin-top: .45rem; } .bk-t small { color: var(--muted); font-size: .85rem; }
.bk-rz { position: absolute; top: .8rem; right: .8rem; background: var(--orange); color: #fff; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .1rem .5rem; }
.bk-bar { height: 5px; border-radius: var(--r-s); background: var(--bg); margin-top: .55rem; overflow: hidden; }
.bk-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--ok),#3fb15f); border-radius: var(--r-s); }
.bk-k { width: 42px; height: 42px; border-radius: var(--r-l); display: grid; place-items: center; color: #fff; flex: none; }
.bk-k svg.ic { width: 21px; height: 21px; }
.bk-k.si { background: linear-gradient(140deg,#f28a55,var(--orange)); } .bk-k.ma { background: linear-gradient(140deg,var(--blau-mittel),var(--blau)); }
.bk-k.an { background: linear-gradient(140deg,#4aa3df,#1f76b5); } .bk-k.fo { background: linear-gradient(140deg,#8b7ad8,#5d49c0); }
.bk-k.in { background: linear-gradient(140deg,#3fb15f,var(--ok)); } .bk-k.no { background: linear-gradient(140deg,#ef4b3f,var(--danger)); }
.infocard .ic .bk-k { width: 40px; height: 40px; }

.bsek { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: .4rem 0 .6rem; }
.bsek h2 { margin: 0; font-size: 1.05rem; } .bsek a { font-size: .85rem; }
.bliste { background: #fff; border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); overflow: hidden; margin-bottom: 1.2rem; }
.bz { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border-bottom: 1px solid var(--bg); color: inherit; text-decoration: none; }
.bz:last-child { border-bottom: 0; } .bz:hover { background: var(--bg); }
.bz .bk-k { width: 40px; height: 40px; border-radius: var(--r); } .bz .bk-k svg.ic { width: 20px; height: 20px; }
.bz div { flex: 1; min-width: 0; } .bz b { display: block; font-size: .95rem; } .bz small { color: var(--muted); font-size: .75rem; }
.bpill { display: inline-block; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; vertical-align: 1px; }
.bpill.rot { background: var(--rot-h); color: var(--danger); } .bpill.ok { background: var(--gruen-h); color: var(--ok); } .bpill.ge { background: var(--gelb-h); color: var(--gelb); } .bpill.bl { background: var(--blau-hell); color: var(--blau); }

.bmx { background: #fff; border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.bmx-w { overflow-x: auto; }
.bmx table { border-collapse: separate; border-spacing: 4px; font-size: .85rem; min-width: 100%; }
.bmx th { font-weight: 600; color: var(--muted); text-align: left; padding: 0 .3rem; text-transform: none; letter-spacing: 0; background: none; border: 0; }
.bmx thead th { font-size: .75rem; text-align: center; vertical-align: bottom; min-width: 64px; max-width: 120px; }
.bmx thead th span { display: inline-flex; gap: .2rem; align-items: center; }
.bmx thead th svg.ic { width: 13px; height: 13px; }
.bmx tbody th { white-space: nowrap; color: var(--ink); font-size: .85rem; }
.bmx tbody th em { font-style: normal; margin-left: .35rem; background: var(--rot-h); color: var(--danger); font-size: .75rem; font-weight: 800; border-radius: 999px; padding: 0 .4rem; }
.bmx td { height: 30px; border-radius: var(--r); text-align: center; font-weight: 800; font-size: .75rem; cursor: pointer; border: 0; padding: 0 .3rem; }
.bmx td.g { background: var(--gruen-h); color: var(--ok); } .bmx td.r { background: var(--rot-h); color: var(--danger); } .bmx td.y { background: var(--gelb-h); color: var(--gelb); } .bmx td.na { background: var(--bg); cursor: default; }
.bmx-le { display: flex; gap: 1rem; font-size: .75rem; color: var(--muted); margin-top: .5rem; flex-wrap: wrap; }
.bmx-le i { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-s); vertical-align: -2px; margin-right: .3rem; }
.bmx-le i.g { background: var(--gruen-h); } .bmx-le i.y { background: var(--gelb-h); } .bmx-le i.r { background: var(--rot-h); }
@media print { body.bdruck .top, body.bdruck #nav, body.bdruck .bhero, body.bdruck .bnot, body.bdruck .bk-grid, body.bdruck #menuknopf, body.bdruck .bmx .btn { display: none !important; } body.bdruck { padding: 0 !important; } body.bdruck .bmx { box-shadow: none; } }

/* Maschinen */
.mupbar { height: 10px; border-radius: var(--r); background: var(--bg); overflow: hidden; } .mupbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,var(--blau-mittel),var(--blau)); transition: width .2s; }
.mkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.mkopf h1 { margin: 0 0 .2rem; } .mkopf p { margin: 0; } .mkopf .btn, .mbox-k .btn { display: inline-flex; align-items: center; gap: .35rem; } .mkopf .btn svg.ic, .mbox-k .btn svg.ic { width: 16px; height: 16px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.mkarte { background: #fff; border-radius: var(--r-l); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); transition: transform .12s; }
.mkarte:hover { transform: translateY(-2px); }
.mk-bild { position: relative; }
.mfoto { height: 130px; background: linear-gradient(140deg,#5b7489,#2c4153); display: grid; place-items: center; overflow: hidden; }
.mfoto img { width: 100%; height: 100%; object-fit: cover; }
.mfoto-leer svg.ic { width: 46px; height: 46px; color: rgba(255,255,255,.75); stroke-width: 1.6; }
.mfoto.gross { height: 220px; }
.mk-st { position: absolute; top: .55rem; right: .55rem; }
.mk-i { padding: .75rem .9rem .85rem; } .mk-i b { display: block; font-size: 1rem; } .mk-i small { color: var(--muted); font-size: .75rem; }
.mk-z { display: flex; gap: .4rem .7rem; margin-top: .5rem; color: var(--muted); font-size: .75rem; font-weight: 600; flex-wrap: wrap; }
.mk-z span { display: inline-flex; gap: .25rem; align-items: center; } .mk-z svg.ic { width: 14px; height: 14px; }
.mleer { background: #fff; border-radius: var(--r-l); padding: 2rem 1.2rem; text-align: center; color: var(--muted); box-shadow: 0 1px 2px rgba(0,30,60,.06); }
.mleer svg.ic { width: 40px; height: 40px; color: #9cb3c7; }
.mf2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } @media (max-width: 600px) { .mf2 { grid-template-columns: 1fr; } }

.mseite { max-width: 1150px; }
.mhero { position: relative; border-radius: var(--r-l); overflow: hidden; margin-bottom: .9rem; box-shadow: 0 10px 30px rgba(0,40,80,.18); }
.mhero .mfoto-leer svg.ic { width: 70px; height: 70px; margin-bottom: 3rem; }
.mh-t { position: absolute; inset: auto 0 0 0; padding: 2.4rem 1.1rem 1rem; color: #fff; background: linear-gradient(0deg, rgba(0,20,40,.88), rgba(0,20,40,0)); }
.mh-t h1 { color: #fff; margin: 0; font-size: 1.45rem; } .mh-t small { opacity: .88; }
.mh-zur, .mh-r button { background: rgba(255,255,255,.94); color: var(--blau); border: 0; border-radius: 999px; padding: .35rem .75rem .35rem .5rem; font: inherit; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; cursor: pointer; }
.mh-zur { position: absolute; top: .7rem; left: .7rem; } .mh-r { position: absolute; top: .7rem; right: .7rem; display: flex; gap: .4rem; }
.mh-zur svg.ic, .mh-r svg.ic { width: 16px; height: 16px; }
.mtabs { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: .9rem; scrollbar-width: none; padding-bottom: 2px; }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs a { flex: none; display: inline-flex; gap: .35rem; align-items: center; background: #fff; border-radius: 999px; padding: .5rem .85rem; font-weight: 700; font-size: .85rem; color: var(--muted); text-decoration: none; box-shadow: 0 1px 2px rgba(0,30,60,.06); }
.mtabs a.an { background: var(--blau); color: #fff; } .mtabs svg.ic { width: 16px; height: 16px; }
.mcols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .9rem; align-items: start; }
@media (max-width: 1023px) { .mcols { grid-template-columns: 1fr; } }
.mbox { background: #fff; border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); padding: 1rem 1.1rem; margin-bottom: .9rem; }
.mbox-k { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.mbox-k h3 { margin: 0; font-size: 1rem; color: var(--blau); display: flex; align-items: center; gap: .5rem; }
.mhin { display: flex; gap: .6rem; align-items: flex-start; background: var(--orange-h); border-radius: var(--r-l); padding: .75rem .9rem; font-size: .95rem; box-shadow: inset 4px 0 0 #d6a23d; margin-bottom: .9rem; }
.mhin svg.ic { width: 20px; height: 20px; color: #b7791f; flex: none; }
.msch { list-style: none; margin: 0; padding: 0; }
.msch li { display: flex; gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--bg); align-items: flex-start; }
.msch li:first-child { border-top: 0; padding-top: 0; }
.msch-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; font-size: .85rem; }
.msch-b { width: 110px; height: 82px; object-fit: cover; border-radius: var(--r); flex: none; cursor: zoom-in; }
.msch-t { flex: 1; min-width: 0; } .msch-t b { font-size: .95rem; } .msch-t p { margin: .15rem 0 0; font-size: .95rem; }
.msch-a { display: flex; flex-direction: column; gap: .2rem; } .msch-a button { border: 0; background: var(--bg); border-radius: var(--r); width: 30px; height: 26px; cursor: pointer; color: var(--muted); display: grid; place-items: center; font-size: .75rem; }
.msch-a button:disabled { opacity: .35; cursor: default; } .msch-a svg.ic { width: 14px; height: 14px; }
@media (max-width: 600px) { .msch-b { width: 84px; height: 64px; } }
.mew-w { overflow-x: auto; }
.mew { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mew th { text-align: left; font-size: .75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .45rem; background: none; border: 0; }
.mew td { padding: .55rem .45rem; border-top: 1px solid var(--bg); font-variant-numeric: tabular-nums; } .mew td b { color: var(--blau); }
.mew tr:nth-child(even) td { background: var(--bg); }
.mnotiz { font-size: .85rem; color: var(--muted); margin: .6rem 0 0; }
.mbilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; margin-top: .7rem; }
.mbilder figure { margin: 0; } .mbilder img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--r); cursor: zoom-in; }
.mbilder figcaption { font-size: .75rem; color: var(--muted); display: flex; justify-content: space-between; gap: .3rem; }
.mdx { border: 0; background: none; color: var(--muted-hell); cursor: pointer; font-size: .85rem; padding: .1rem .3rem; border-radius: var(--r-s); } .mdx:hover { background: var(--rot-h); color: var(--danger); }
.mvids { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.mvid { border-radius: var(--r-l); overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,30,60,.08); cursor: pointer; }
.mvid-t { position: relative; height: 100px; background: #0f1c28; display: grid; place-items: center; }
.mvid-t video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; pointer-events: none; }
.mvid-pl { position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: var(--blau); }
.mvid-pl svg.ic { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; }
.mvid-n { padding: .45rem .6rem .55rem; font-size: .85rem; position: relative; } .mvid-n b { display: block; padding-right: 1.2rem; } .mvid-n small { color: var(--muted); font-size: .75rem; }
.mvid-n .mdx { position: absolute; top: .35rem; right: .3rem; }
.mpdf { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-top: 1px solid var(--bg); } .mpdf:first-child { border-top: 0; }
.mpdf-k { width: 40px; height: 40px; border-radius: var(--r); background: var(--blau-hell); color: var(--blau); display: grid; place-items: center; flex: none; } .mpdf-k svg.ic { width: 20px; height: 20px; }
.mpdf a { flex: 1; min-width: 0; text-decoration: none; color: inherit; } .mpdf b { display: block; font-size: .95rem; } .mpdf small { color: var(--muted); font-size: .75rem; }
.mwart { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.mwart div { background: var(--bg); border-radius: var(--r); padding: .6rem .7rem; } .mwart small { display: block; color: var(--muted); font-size: .75rem; } .mwart b { font-size: .95rem; }
.mwart div.ueberfaellig { background: var(--rot-h); color: var(--danger); } .mwart div.bald { background: var(--gelb-h); color: var(--gelb); }
.mwlog { list-style: none; margin: .7rem 0 0; padding: 0; font-size: .85rem; } .mwlog li { padding: .35rem 0; border-top: 1px solid var(--bg); } .mwlog small { color: var(--muted); margin-left: .3rem; }
.mok { display: flex; gap: .5rem; align-items: center; background: var(--gruen-h); color: var(--ok); border-radius: var(--r); padding: .6rem .8rem; font-weight: 700; font-size: .95rem; margin-bottom: .6rem; } .mok svg.ic { width: 18px; height: 18px; }
.mfrage { background: var(--bg); border-radius: var(--r); padding: .8rem .9rem; margin-bottom: .6rem; } .mfrage p { margin: 0 0 .6rem; font-size: .95rem; }
.mfrage .btn { display: inline-flex; gap: .4rem; align-items: center; } .mfrage .btn svg.ic { width: 16px; height: 16px; }
.mleute { display: flex; flex-wrap: wrap; gap: .4rem; }
.mleute span { position: relative; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--r); padding: .4rem .7rem; font-size: .85rem; min-width: 110px; }
.mleute span.ja { background: var(--gruen-h); } .mleute span.nein { background: var(--rot-h); } .mleute small { color: var(--muted); font-size: .75rem; }
.mleute img { height: 26px; max-width: 110px; object-fit: contain; margin-top: .2rem; } .mleute .mdx { position: absolute; top: .15rem; right: .15rem; }
.mc-l { display: flex; flex-direction: column; gap: .45rem; max-height: 60vh; overflow-y: auto; margin-bottom: .6rem; }
.mc { display: flex; } .mc.ich { justify-content: flex-end; }
.mc-b { background: var(--bg); border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); padding: .5rem .75rem; max-width: 85%; font-size: .95rem; }
.mc.ich .mc-b { background: var(--blau-hell); border-radius: var(--r-l) var(--r-s) var(--r-l) var(--r-l); }
.mc-b b { font-size: .75rem; color: var(--blau); } .mc-b p { margin: .1rem 0 0; } .mc-b img { display: block; max-width: 220px; max-height: 180px; border-radius: var(--r); margin-top: .35rem; cursor: zoom-in; }
.mc-b small { display: block; color: var(--muted); font-size: .75rem; margin-top: .2rem; }
.mc-x { border: 0; background: none; color: var(--danger); font: inherit; font-size: .75rem; cursor: pointer; padding: 0; }
.mc-f { display: flex; gap: .45rem; align-items: center; }
.mc-f input[name=text] { flex: 1; min-width: 0; border-radius: 999px; padding: .55rem .9rem; background: var(--bg); border: 1px solid transparent; }
.mc-kam, .mc-s { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; }
.mc-kam { background: var(--bg); color: var(--blau); } .mc-s { background: linear-gradient(140deg,var(--blau-mittel),var(--blau)); color: #fff; }
.mc-kam svg.ic, .mc-s svg.ic { width: 18px; height: 18px; }
.mwe-w { overflow-x: auto; }
.mwe { border-collapse: collapse; width: 100%; } .mwe th, .mwe td { padding: .2rem; background: none; border: 0; } .mwe th { position: relative; }
.mwe input { width: 100%; min-width: 90px; padding: .4rem .5rem; } .mwe th input { font-weight: 700; background: var(--bg); }
.mwe th button, .mwe td button { border: 0; background: none; color: var(--muted-hell); cursor: pointer; } .mwe th button { position: absolute; top: -.2rem; right: -.1rem; font-size: .75rem; }
.qrauf { text-align: center; padding: 1rem .5rem; } .qr-logo { height: 40px; } .qrauf h2 { margin: .8rem 0 .2rem; font-size: 1.75rem; }
.qr-sub { margin: 0 0 1rem; color: var(--muted); } .qr-code { width: 230px; margin: 0 auto; } .qr-code svg { width: 100%; height: auto; display: block; }
.qr-hin { margin: .9rem 0 0; font-weight: 800; } .qr-url { margin: .2rem 0 0; font-size: .75rem; color: var(--muted); word-break: break-all; }
@media (max-width: 600px) { .mfoto.gross { height: 190px; } .mh-t h1 { font-size: 1.45rem; } .mbox { padding: .9rem; } .mvids { gap: .5rem; } }
.mdok-h { margin: .8rem 0 .35rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mdok-h:first-of-type { margin-top: 0; } .mdok-h .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.mpdf-k.ba { background: var(--gruen-h); color: var(--ok); } .mpdf-k.sdb { background: var(--gelb-h); color: #b7791f; }
.mbox-k .row { gap: .4rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Reparaturen und Projekte 2026 */
.rseite { max-width: 1400px; }
.rkopf h1, .pkopf h1 { margin: 0 0 .15rem; } .rkopf p, .pkopf p { margin: 0 0 .8rem; color: var(--muted); font-size: .85rem; }
.pkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.pkopf .btn { display: inline-flex; gap: .35rem; align-items: center; } .pkopf .btn svg.ic { width: 16px; height: 16px; }
.rtabs { display: flex; background: var(--line); border-radius: var(--r-l); padding: 4px; margin-bottom: .9rem; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs::after { content: ''; flex: 0 0 1px; } /* rechter Rand bleibt beim Wischen sichtbar */
.rtabs a { flex: 1 0 auto; white-space: nowrap; text-align: center; padding: .5rem; border-radius: var(--r); font-weight: 700; font-size: .85rem; color: var(--muted); text-decoration: none; }
.rtabs a.an { background: #fff; color: var(--blau); box-shadow: 0 1px 3px rgba(0,30,60,.12); }
.rtabs b { background: var(--orange); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .4rem; margin-left: .3rem; }
.such { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: var(--r-l); padding: .15rem .9rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); margin-bottom: .7rem; color: var(--muted); }
.such svg.ic { width: 18px; height: 18px; flex: none; }
.such input { flex: 1; min-width: 0; border: 0; background: none; padding: .6rem 0; outline: none; box-shadow: none; }
.chips2 { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: .9rem; scrollbar-width: none; padding-bottom: 2px; }
.chips2::-webkit-scrollbar { display: none; }
.chips2 button { flex: none; background: #fff; border: 0; border-radius: 999px; padding: .45rem .85rem; font: inherit; font-weight: 700; font-size: .85rem; color: var(--muted); box-shadow: 0 1px 2px rgba(0,30,60,.06); cursor: pointer; }
.chips2 button.an { background: var(--blau); color: #fff; } .chips2 button b { margin-left: .3rem; opacity: .7; }
.kp { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .7rem; margin-bottom: .9rem; }
.kp div { background: #fff; border-radius: var(--r-l); padding: .8rem .9rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); }
.kp b { display: block; font-size: 1.45rem; color: var(--blau); } .kp small { color: var(--muted); font-size: .75rem; } .kp div.w b { color: var(--danger); }
@media (max-width: 767px) { .kp { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; align-items: start; }
@media (max-width: 767px) { .rcols { grid-template-columns: 1fr; } }
.rcol { background: var(--line); border-radius: var(--r-l); padding: .7rem; min-width: 0; }
.rcol h4 { margin: .1rem .3rem .6rem; font-size: .85rem; display: flex; justify-content: space-between; gap: .5rem; color: var(--ink2); }
.rcol h4 b { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; flex: none; }
.rk { background: #fff; border-radius: var(--r-l); padding: .85rem .95rem; box-shadow: inset 4px 0 0 var(--rf, var(--orange)), 0 1px 2px rgba(0,30,60,.06), 0 4px 14px rgba(0,30,60,.06); margin-bottom: .55rem; }
.rk:last-child { margin-bottom: 0; }
.rnr { font-size: .75rem; font-weight: 800; color: var(--orange-d); } .rk h3 { margin: .1rem 0 .1rem; font-size: 1rem; overflow-wrap: anywhere; }
.rrest { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.rz { display: flex; gap: .45rem; align-items: flex-start; font-size: .85rem; color: var(--ink2); margin-top: .3rem; overflow-wrap: anywhere; }
.rz svg.ic { width: 15px; height: 15px; color: var(--muted); flex: none; margin-top: .15rem; }
.rpl { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.rpl span { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; display: inline-flex; gap: .3rem; align-items: center; }
.rpl svg.ic { width: 12px; height: 12px; }
.ok2 { background: var(--gruen-h); color: var(--ok); } .rot2 { background: var(--rot-h); color: var(--danger); } .ge2 { background: var(--gelb-h); color: var(--gelb); } .bl2 { background: var(--blau-hell); color: var(--blau); } .gr2 { background: var(--bg); color: var(--muted); }
.ra { display: flex; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; }
.ra a, .ra button { display: inline-flex; gap: .3rem; align-items: center; background: var(--bg); color: var(--blau); border: 0; border-radius: 999px; padding: .42rem .8rem; font: inherit; font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer; }
.ra .p { background: var(--blau); color: #fff; } .ra svg.ic { width: 15px; height: 15px; }
.pg { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 420px) { .pg { grid-template-columns: 1fr; } }
.pc { display: block; background: #fff; border-radius: var(--r-l); padding: 1rem 1.05rem; box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); position: relative; text-decoration: none; color: inherit; transition: transform .12s; min-width: 0; }
.pc:hover { transform: translateY(-2px); }
.pc .nr { font-size: .75rem; font-weight: 800; color: var(--blau); background: var(--blau-hell); border-radius: 999px; padding: .1rem .55rem; display: inline-block; }
.pc h3 { margin: .45rem 0 .15rem; font-size: 1.05rem; color: var(--ink); padding-right: 3.5rem; overflow-wrap: anywhere; }
.pc .sub { color: var(--muted); font-size: .85rem; }
.pc .fo { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.pc .fo small { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); font-weight: 600; }
.pc .fo .bar { height: 6px; border-radius: var(--r-s); background: var(--bg); margin-top: .25rem; overflow: hidden; }
.pc .fo .bar i { display: block; height: 100%; border-radius: var(--r-s); background: linear-gradient(90deg,var(--blau-mittel),#3f8fd2); }
.pc .fo .bar i.or { background: linear-gradient(90deg,var(--orange),#f28a55); }
.pc .tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .7rem; }
.pc .tags span { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; background: var(--bg); color: var(--muted); display: inline-flex; gap: .25rem; align-items: center; }
.pc .tags span.rot { background: var(--rot-h); color: var(--danger); } .pc .tags span.neu { background: var(--blau-hell); color: var(--blau); } .pc .tags svg.ic { width: 12px; height: 12px; }
.pc .tags span.abh { background: #fac775; color: #412402; }
.pc .leute { position: absolute; top: .9rem; right: .9rem; display: flex; }
.pc .leute i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; color: #fff; font-style: normal; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.trneu { background: #fff; border-radius: var(--r-l); padding: 1rem 1.1rem; margin-bottom: .9rem; box-shadow: inset 4px 0 0 var(--blau-mittel), 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); }
.trneu-k h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; } .trneu-k h2 svg.ic { width: 20px; height: 20px; color: var(--blau-mittel); }
.trneu-k h2 b { background: var(--orange); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .5rem; } .trneu-k p { margin: .2rem 0 .5rem; }
.trz { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--bg); flex-wrap: wrap; }
.trz b { display: block; font-size: .95rem; overflow-wrap: anywhere; } .trz small { color: var(--muted); font-size: .75rem; }
.trz-a { display: flex; gap: .35rem; flex: none; } .trz-a .btn { display: inline-flex; gap: .3rem; align-items: center; } .trz-a svg.ic { width: 14px; height: 14px; }
/* Reparaturen nach Einsatzort */
.rorte { columns: 380px; column-gap: .8rem; } /* Spalten statt Raster: Kästen rücken lückenlos nach */
.rorte > .rort { break-inside: avoid; margin-bottom: .8rem; }
@media (max-width: 767px) { .rorte { columns: 1; } .rorte > .rort { margin-bottom: .6rem; } }
.rort { background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: inset 4px 0 0 var(--rf), 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); min-width: 0; }
.rort-k { display: flex; align-items: center; }
.rort-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .8rem .6rem .8rem 1rem; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rort-i { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; flex: none; background: var(--bg); background: color-mix(in srgb, var(--rf) 15%, #fff); color: var(--rf); }
.rort-i svg.ic { width: 20px; height: 20px; }
.rort-n { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rort-n b { font-size: 1rem; overflow-wrap: anywhere; } .rort-n small { color: var(--muted); font-size: .75rem; }
.rort-z { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.rort-z i, .ro-s i { font-style: normal; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; display: inline-flex; gap: .2rem; align-items: center; }
.rort-z svg.ic, .ro-s svg.ic { width: 11px; height: 11px; }
.rort-p, .ro-p { color: var(--muted-hell); flex: none; transition: transform .15s; } .rort-p svg.ic, .ro-p svg.ic { width: 18px; height: 18px; }
.rort.auf .rort-p { transform: rotate(90deg); }
.rort-nav { flex: none; width: 38px; height: 38px; margin-right: .7rem; border-radius: 50%; background: var(--bg); color: var(--blau); display: grid; place-items: center; }
.rort-nav svg.ic { width: 17px; height: 17px; }
.rort-l { display: none; border-top: 1px solid var(--bg); } .rort.auf .rort-l { display: block; }
.ro { border-bottom: 1px solid var(--bg); } .ro:last-child { border-bottom: 0; }
.ro-k { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem .65rem 1rem; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ro-k:hover { background: var(--bg); }
.ro-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ro-t em { font-style: normal; font-size: .75rem; font-weight: 800; color: var(--orange-d); }
.ro-t b { font-size: .95rem; overflow-wrap: anywhere; } .ro-t small { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.ro-s { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; max-width: 48%; }
.ro.auf .ro-p { transform: rotate(90deg); }
.ro-d { padding: 0 1rem .85rem 1rem; } .ro-d .rz:first-child { margin-top: 0; }
@media (max-width: 600px) { .ro-k { flex-wrap: wrap; } .ro-s { max-width: none; justify-content: flex-start; order: 3; width: 100%; }
  .rort-t { flex-wrap: wrap; row-gap: .35rem; } .rort-z { order: 3; width: 100%; justify-content: flex-start; padding-left: calc(40px + .7rem); } }

/* ---------------------------------------------------------------- Projektstand */
.stl { margin-top: 1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-l); padding: .9rem 1rem; color: #fff; }
.stl-k { display: flex; flex-direction: column; } .stl-l { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.stl-k b { font-size: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .stl-k small { opacity: .78; font-size: .75rem; }
.stl-s { display: flex; margin: .8rem 0 .7rem; }
.stl-p { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; position: relative; min-width: 0; }
.stl-p::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: rgba(255,255,255,.2); }
.stl-p:first-child::before { display: none; } .stl-p.f::before, .stl-p.a::before { background: #5fd17f; }
.stl-p i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem; font-weight: 800; background: #1d4f7a; color: rgba(255,255,255,.8); border: 2px solid rgba(255,255,255,.3); }
.stl-p.f i { background: #5fd17f; border-color: #5fd17f; color: #0b3b1c; } .stl-p.f i svg.ic { width: 14px; height: 14px; stroke-width: 3; }
.stl-p.a i { background: #fff; color: var(--blau); border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.stl-p em { font-style: normal; font-size: .75rem; text-align: center; opacity: .8; line-height: 1.15; overflow-wrap: anywhere; } .stl-p.a em { opacity: 1; font-weight: 800; }
.stl-a { display: flex; gap: .45rem; flex-wrap: wrap; }
.stl-b { background: #fff; color: var(--blau); border: 0; border-radius: 999px; padding: .55rem 1rem; font: inherit; font-weight: 800; font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; text-decoration: none; }
.stl-b svg.ic { width: 16px; height: 16px; stroke-width: 2.4; }
.stl-b.hell { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
@media (max-width: 600px) { .stl-p em { display: none; } .stl-p.a em { display: block; position: absolute; top: 34px; white-space: nowrap; } .stl-s { margin-bottom: 1.6rem; } .stl-b { flex: 1 1 100%; justify-content: center; } }
.ep { display: inline-flex; gap: .25rem; align-items: center; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .12rem .55rem; white-space: nowrap; letter-spacing: 0; }
.ep.ja { background: var(--gruen-h); color: var(--ok); } .ep.nein { background: var(--gelb-h); color: var(--gelb); } .ep svg.ic { width: 11px; height: 11px; stroke-width: 3; }
.stb-z { width: 100%; display: flex; gap: .75rem; align-items: flex-start; padding: .55rem .4rem; border-radius: var(--r); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.stb-z:hover { background: var(--bg); } .stb-z.a { background: var(--blau-hell); }
.stb-t { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; } .stb-t b { font-size: .95rem; } .stb-t small { color: var(--muted); font-size: .75rem; }
.stb-r { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-stark); flex: none; display: grid; place-items: center; margin-top: .1rem; }
.stb-z.f .stb-r { background: var(--ok); border-color: var(--ok); color: #fff; } .stb-z.f .stb-r svg.ic { width: 13px; height: 13px; stroke-width: 3; }
.stb-z.a .stb-r { border-color: var(--blau); background: var(--blau); box-shadow: inset 0 0 0 4px #fff; } .stb-z.f b { color: var(--muted); }
.stb-n { display: block; margin-top: .6rem; font-size: .85rem; font-weight: 600; } .stb-n input { width: 100%; margin-top: .25rem; }
.ansicht { display: inline-flex; background: var(--line); border-radius: var(--r); padding: 3px; margin-bottom: .7rem; }
.ansicht button { display: inline-flex; gap: .3rem; align-items: center; padding: .4rem .8rem; border-radius: var(--r); border: 0; background: none; font: inherit; font-weight: 700; font-size: .85rem; color: var(--muted); cursor: pointer; }
.ansicht button.an { background: #fff; color: var(--blau); box-shadow: 0 1px 3px rgba(0,30,60,.12); } .ansicht svg.ic { width: 15px; height: 15px; }
.stz { float: right; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; margin-left: .5rem; }
.pc .stz + h3 { padding-right: 0; }
.stp { font-size: .75rem; font-weight: 800; color: #fff; background: var(--sf); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.stmini { display: flex; gap: 3px; margin-top: .6rem; clear: both; } .stmini i { flex: 1; height: 6px; border-radius: var(--r-s); background: var(--bg); }
.stmini i.f { background: var(--line-stark); background: color-mix(in srgb, var(--sf) 45%, #fff); } .stmini i.a { background: var(--sf); }
.stsp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
@media (max-width: 767px) { .stsp { grid-auto-columns: 78%; scroll-snap-type: x mandatory; } .stsp-c { scroll-snap-align: start; } }
.stsp-c { background: var(--line); border-radius: var(--r-l); padding: .6rem; box-shadow: inset 0 4px 0 var(--sf); min-height: 260px; min-width: 0; }
.stsp-c h4 { margin: .3rem .2rem .55rem; font-size: .85rem; display: flex; justify-content: space-between; color: var(--ink2); } .stsp-c h4 b { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
.stsp-k { display: block; background: #fff; border-radius: var(--r); padding: .6rem .7rem; margin-bottom: .45rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); text-decoration: none; color: inherit; }
.stsp-k .nr { font-size: .75rem; font-weight: 800; color: var(--blau); } .stsp-k b { display: block; font-size: .85rem; overflow-wrap: anywhere; } .stsp-k .ep { margin-top: .3rem; white-space: normal; }
.stsp-leer { color: var(--muted-hell); text-align: center; }
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc .leute { top: auto; bottom: .85rem; right: .9rem; }
.pc .tags { padding-right: 4.5rem; min-height: 1.4rem; }
/* Wochenplan: Anfertigung oder Montage */
.peins > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.peins-s { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.peins-s button { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .6rem .8rem; border-radius: var(--r); border: 2px solid var(--line); background: #fff; font: inherit; cursor: pointer; text-align: left; }
.peins-s button b { font-size: .95rem; } .peins-s button small { color: var(--muted); font-size: .75rem; }
.peins-s button.on[data-eins="anfertigung"] { border-color: var(--blau-mittel); background: var(--blau-hell); }
.peins-s button.on[data-eins="montage"] { border-color: var(--orange); background: var(--orange-h); }
.pc-e { font-size: .75rem; font-weight: 800; border-radius: var(--r-s); padding: 0 .3rem; color: #fff; background: var(--blau-mittel); }
.pc-e.montage { background: var(--orange); }

/* ===== Reparaturen: eigene Einsatzorte und Aufträge ===== */
.rkopf2 { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem .8rem; flex-wrap: wrap; }
.rkopf2 > div:first-child { min-width: 0; flex: 1 1 18rem; }
.rneu { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rneu .btn { display: inline-flex; gap: .35rem; align-items: center; } .rneu .btn svg.ic { width: 16px; height: 16px; }
.rpo { display: inline-block; vertical-align: 1px; font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: var(--blau-hell); color: var(--blau); border-radius: var(--r-s); padding: .05rem .4rem; margin-left: .25rem; }
.rort-leer { margin: .7rem 1rem .2rem; }
.rort-f { display: flex; gap: .4rem; flex-wrap: wrap; padding: .55rem .8rem .7rem; border-top: 1px dashed var(--line); }
.rort-f button { display: inline-flex; gap: .3rem; align-items: center; background: none; border: 1px dashed var(--line-stark); color: var(--blau); border-radius: 999px; padding: .38rem .8rem; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; min-height: 34px; }
.rort-f button svg.ic { width: 14px; height: 14px; }
@media (max-width: 600px) { .rneu { width: 100%; } .rneu .btn { flex: 1; justify-content: center; } }

/* ===== Löschen doppelt bestätigen ===== */
.lf-hg { position: fixed; inset: 0; z-index: 9000; background: rgba(10,25,40,.55); display: grid; place-items: center; padding: 16px; }
.lf { background: #fff; border-radius: var(--r-l); padding: 1.3rem 1.2rem 1.1rem; width: min(420px, 100%); box-shadow: 0 20px 60px rgba(0,20,40,.35); text-align: center; }
.lf-i { width: 52px; height: 52px; border-radius: 50%; background: var(--rot-h); color: var(--danger); display: grid; place-items: center; margin: 0 auto .5rem; }
.lf-i svg.ic { width: 26px; height: 26px; }
.lf h2 { margin: 0 0 .3rem; font-size: 1.2rem; } .lf-was { font-weight: 700; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.lf-ok { display: flex; gap: .6rem; align-items: center; justify-content: center; text-align: left; margin: .9rem 0 1rem; padding: .7rem .8rem; border: 2px solid #f1c4bf; border-radius: var(--r); background: var(--bg); font-weight: 700; cursor: pointer; }
.lf-ok input { width: 22px; height: 22px; flex: none; accent-color: var(--danger); }
.lf-k { display: flex; gap: .6rem; } .lf-k .btn { flex: 1; justify-content: center; min-height: 44px; }
.lf-k .btn.danger:disabled { opacity: .45; cursor: not-allowed; }
.lf-k .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ===== Akte/Bestellungen: Bearbeiten, Händler, Sammelauswahl ===== */
.ak-bx { margin-left: auto; display: inline-flex; gap: .2rem; flex: none; }
.ak-ib { width: 32px; height: 32px; border-radius: var(--r); border: 0; background: var(--bg); color: var(--blau); display: inline-grid; place-items: center; cursor: pointer; }
.ak-ib svg.ic { width: 15px; height: 15px; } .ak-ib.rot { color: var(--danger); background: var(--rot-h); }
.ak-meta .ak-bx { margin-left: .4rem; } .ak-meta .ak-ib { width: 28px; height: 28px; }
.ak-sel { width: 22px; height: 22px; flex: none; accent-color: var(--blau); margin: 0 .2rem 0 0; }
.ak-hd { font-size: .85rem; color: var(--ink2); margin: .25rem 0 .1rem; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; } .ak-hd svg.ic { width: 13px; height: 13px; }
.ak-bart { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.ak-bart label { flex: 1 1 10rem; display: flex; } .ak-bart input { position: absolute; opacity: 0; pointer-events: none; }
.ak-bart span { flex: 1; text-align: center; padding: .5rem .6rem; border-radius: var(--r); border: 1.5px solid var(--line); font-weight: 700; font-size: .85rem; color: var(--ink2); cursor: pointer; background: #fff; }
.ak-bart input:checked + span { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.ak-bfeld > input[name=haendler] { width: 100%; margin-bottom: .45rem; }
.ak-bw2 { display: flex; gap: .4rem; } .ak-bw2 input[name=was] { flex: 1; min-width: 0; }
.ak-bw { position: relative; display: inline-block; }
.ak-fdel { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(195,39,27,.92); color: #fff; font-weight: 800; cursor: pointer; }
.ak-ed textarea { width: 100%; margin: .3rem 0; }
.ak-nb { display: flex; width: 100%; gap: .4rem; align-items: center; justify-content: center; margin: .2rem 0 .6rem; background: none; border: 1.5px dashed var(--line-stark); color: var(--blau); border-radius: var(--r); padding: .5rem; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.ak-nb svg.ic { width: 15px; height: 15px; }
.ak-kopf2 { display: flex; gap: .4rem .8rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .ak-kopf2 p { flex: 1 1 18rem; margin-top: 0; }
.ak-kopf2 .btn { display: inline-flex; gap: .35rem; align-items: center; } .ak-kopf2 .btn svg.ic { width: 16px; height: 16px; }
.ak-sammel { position: sticky; top: 8px; z-index: 5; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; background: var(--blau); color: #fff; border-radius: var(--r-l); padding: .55rem .7rem; margin: .5rem 0; box-shadow: 0 6px 20px rgba(0,30,60,.25); }
.ak-sammel b { margin-right: auto; }
.ak-bb { text-align: left; } .ak-bb h2 { text-align: center; } .ak-bb .stack { gap: .6rem; }
.ak-bfeld { flex-direction: column; align-items: stretch; }
.ra button.rot { color: var(--danger); background: var(--rot-h); }
.rarch { margin-top: 1rem; background: #fff; border-radius: var(--r-l); padding: .7rem .9rem; } .rarch summary { font-weight: 700; cursor: pointer; color: var(--ink2); }
.rarch-z { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .55rem 0; border-top: 1px solid var(--bg); } .rarch-z:first-of-type { margin-top: .5rem; }
.rarch-z span { min-width: 0; display: flex; flex-direction: column; } .rarch-z b { font-size: .95rem; overflow-wrap: anywhere; } .rarch-z small { color: var(--muted); font-size: .75rem; }
.rarch-z .btn { flex: none; }
.pl-g { margin: .6rem 0; } .pl-c { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0; }
.pl-x { display: inline-flex; } .pl-x input { position: absolute; opacity: 0; pointer-events: none; }
.pl-x span { padding: .45rem .7rem; border-radius: var(--r); border: 1.5px solid var(--line); font-weight: 700; font-size: .85rem; cursor: pointer; background: #fff; color: var(--ink2); }
.pl-x input:checked + span { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.toben { position: sticky; top: 0; z-index: 3; display: grid; gap: .35rem; margin-bottom: .6rem; }
.toben-z { display: flex; gap: .55rem; align-items: flex-start; background: var(--gelb-h); border: 1px solid #f3d9a8; border-radius: var(--r); padding: .5rem .65rem; box-shadow: 0 2px 8px rgba(0,30,60,.08); }
.toben-z > svg.ic { width: 18px; height: 18px; color: var(--orange-d); flex: none; margin-top: .1rem; }
.toben-z div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; } .toben-z b { font-size: .75rem; color: var(--gelb); text-transform: uppercase; letter-spacing: .04em; }
.tedit textarea { width: 100%; min-width: 220px; margin: .2rem 0 .4rem; }
.tauf-x { display: flex; gap: .2rem; flex: none; } .tauf-x .tdel svg.ic { width: 15px; height: 15px; }
.pg.pwahl .pc { cursor: pointer; position: relative; padding-left: 2.6rem; }
.pg.pwahl .pc::before { content: ""; position: absolute; left: .8rem; top: 1rem; width: 22px; height: 22px; border-radius: var(--r-s); border: 2px solid var(--line-stark); background: #fff; }
.pg.pwahl .pc.gew { outline: 3px solid var(--blau); outline-offset: -3px; }
.pg.pwahl .pc.gew::before { background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--blau); }

/* ===== Papierkorb & Protokoll ===== */
.pk-l { background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 1px 3px rgba(0,30,60,.06); }
.pk-z { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--bg); } .pk-z:last-child { border-bottom: 0; }
.pk-z.zur { opacity: .55; }
.pk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pk-t b { font-size: .95rem; overflow-wrap: anywhere; } .pk-t small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.pk-d { font-style: italic; }
.pk-k { display: flex; gap: .3rem; flex: none; } .pk-k .btn { display: inline-flex; gap: .3rem; align-items: center; } .pk-k svg.ic { width: 15px; height: 15px; }
.pk-a { flex: none; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .15rem .55rem; background: var(--bg); color: var(--ink2); white-space: nowrap; }
.pk-a.rot { background: var(--rot-h); color: var(--danger); } .pk-a.gr { background: var(--gruen-h); color: var(--ok); }
@media (max-width: 600px) { .pk-z { flex-wrap: wrap; } .pk-k { width: 100%; } .pk-k .btn.primary { flex: 1; justify-content: center; } }

/* ===== Monteurbericht ===== */
.tag { display: inline-block; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.tag.g { background: var(--gruen-h); color: var(--ok); } .tag.o { background: var(--gelb-h); color: var(--gelb); } .tag.b { background: var(--blau-hell); color: var(--blau); }
.mb-box { background: var(--bg); border-radius: var(--r-l); padding: .65rem .75rem; margin: 0 0 .7rem; }
.mb-k { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; } .mb-k b { display: inline-flex; gap: .35rem; align-items: center; } .mb-k svg.ic { width: 16px; height: 16px; }
.mb-k .btn { display: inline-flex; gap: .3rem; align-items: center; }
.mb-z { display: flex; gap: .6rem; align-items: center; padding: .55rem .2rem; border-top: 1px solid var(--line); margin-top: .45rem; color: inherit; text-decoration: none; }
.mb-n { width: 30px; height: 30px; border-radius: var(--r); background: var(--blau); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.mb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mb-t b { font-size: .85rem; } .mb-t small { color: var(--muted); font-size: .75rem; }
.mb { margin: -1rem calc(-1 * var(--seite, 1rem)) 0; max-width: 760px; } @media (min-width: 1024px) { .mb { margin: 0 auto; } }
.mb-top { background: var(--blau); color: #fff; padding: 1rem 1rem .4rem; position: relative; } @media (min-width: 1024px) { .mb-top { border-radius: var(--r-l) var(--r-l) 0 0; } }
.mb-zur { color: var(--line-stark); text-decoration: none; font-size: .85rem; display: inline-flex; gap: .3rem; align-items: center; } .mb-zur svg.ic { width: 15px; height: 15px; }
.mb-top h1 { margin: .4rem 0 .1rem; font-size: 1.45rem; color: #fff; } .mb-top p { margin: 0 0 .7rem; font-size: .85rem; opacity: .85; overflow-wrap: anywhere; }
.mb-steps { display: flex; gap: .3rem; } .mb-steps button { flex: 1; background: none; border: 0; color: #fff; font: inherit; padding: 0 0 .5rem; cursor: pointer; text-align: left; min-width: 0; }
.mb-steps i { display: block; height: 5px; border-radius: var(--r-s); background: rgba(255,255,255,.25); margin-bottom: .35rem; } .mb-steps .f i { background: #5fd17f; } .mb-steps .a i { background: #fff; }
.mb-steps span { font-size: .75rem; font-weight: 700; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .mb-steps .a span { opacity: 1; }
.mb-ok { background: rgba(95,209,127,.2); border-radius: var(--r); padding: .45rem .7rem; font-weight: 700; font-size: .85rem; margin-bottom: .6rem; }
.mb-w { padding: .8rem .8rem .4rem; }
.mb-c { background: #fff; border-radius: var(--r-l); padding: .9rem; margin-bottom: .7rem; box-shadow: 0 1px 3px rgba(0,30,60,.07); }
.mb-c h2 { margin: 0 0 .6rem; font-size: 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .mb-c h2 small { font-weight: 600; color: var(--muted); font-size: .75rem; }
.mb-h { font-size: .85rem; color: var(--muted); margin: .4rem .1rem 0; }
.mb-g { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .6rem; } .mb-f.ganz { grid-column: 1 / -1; }
.mb-f { display: block; } .mb-f > span { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; margin-bottom: .2rem; } .mb-f em { font-style: normal; font-weight: 400; }
.mb-f input, .mb-f textarea, .mb-c > textarea { width: 100%; min-width: 0; }
.mb-f input.auto { background: var(--bg); border-color: var(--blau-hell); }
.mb-c > textarea { min-height: 110px; }
.mb-chk { display: flex; gap: .6rem; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); padding: .6rem .75rem; font-weight: 700; cursor: pointer; }
.mb-chk input { position: absolute; opacity: 0; pointer-events: none; }
.mb-chk b { width: 22px; height: 22px; border-radius: var(--r-s); border: 2px solid var(--line-stark); flex: none; display: grid; place-items: center; }
.mb-chk.an { border-color: var(--blau); background: var(--blau-hell); } .mb-chk.an b { background: var(--blau); border-color: var(--blau); } .mb-chk.an b::after { content: "✓"; color: #fff; font-size: .85rem; }
.mb-chk.rot.an { border-color: var(--danger); background: var(--rot-h); } .mb-chk.rot.an b { background: var(--danger); border-color: var(--danger); }
#mbgefv { margin-top: .6rem; }
.mb-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mb-seg2 button { border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-l); padding: .65rem .6rem; text-align: left; font: inherit; cursor: pointer; color: var(--ink2); }
.mb-seg2 b { display: block; font-size: .95rem; } .mb-seg2 small { font-size: .75rem; } .mb-seg2 .an { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.mb-mon, .mb-mat { border: 1px solid var(--line); border-radius: var(--r-l); padding: .6rem .65rem; margin-bottom: .5rem; }
.mb-mk { display: flex; gap: .45rem; align-items: center; } .mb-name { flex: 1; min-width: 0; font-weight: 700; }
.mb-x { width: 34px; height: 34px; border-radius: var(--r); border: 0; background: var(--bg); color: var(--muted-hell); font-size: 1rem; cursor: pointer; flex: none; }
.mb-zr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
.mb-zr label, .mb-std { background: var(--bg); border-radius: var(--r); padding: .35rem .45rem; min-width: 0; }
.mb-zr small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.mb-zr input { width: 100%; min-width: 0; border: 0; background: none; padding: .15rem 0; font: 700 1rem var(--font-num, inherit); min-height: 0; }
.mb-std b { font-size: 1.05rem; display: block; padding-top: .15rem; }
.mb-add { width: 100%; border: 1.5px dashed var(--line-stark); background: none; border-radius: var(--r); padding: .65rem; color: var(--blau); font: inherit; font-weight: 800; cursor: pointer; text-align: center; }
.mb-add svg.ic { width: 16px; height: 16px; vertical-align: -3px; }
.mb-sum { display: flex; gap: .5rem; margin-top: .6rem; } .mb-sum span { flex: 1; background: var(--blau); color: #fff; border-radius: var(--r); padding: .5rem .65rem; font-size: .75rem; }
.mb-sum b { display: block; font-size: 1.05rem; } .mb-sum .n { background: #3b4a8a; }
.mb-such { display: flex; gap: .5rem; align-items: center; border: 2px solid var(--blau); border-radius: var(--r-l); padding: 0 .7rem; }
.mb-such svg.ic { width: 18px; height: 18px; flex: none; color: var(--muted); } .mb-such input { border: 0; flex: 1; min-width: 0; padding: .7rem 0; background: none; font-size: 1rem; }
.mb-kat { display: flex; gap: .35rem; overflow-x: auto; margin: .6rem 0 .3rem; padding-bottom: .2rem; scrollbar-width: none; }
.mb-kat button { flex: none; border: 0; background: var(--bg); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink2); cursor: pointer; } .mb-kat .an { background: var(--blau); color: #fff; }
.mb-tr { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-height: 330px; overflow-y: auto; }
.mb-tr .mb-h { margin: .7rem; }
.mb-tz { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; padding: .55rem .75rem; border: 0; border-bottom: 1px solid var(--bg); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.mb-tz:hover { background: var(--bg); } .mb-tz span { min-width: 0; font-size: .95rem; } .mb-tz small { display: block; color: var(--muted); font-size: .75rem; } .mb-tz em { font-style: normal; color: var(--blau); font-weight: 800; white-space: nowrap; font-size: .85rem; }
.mb-mt { flex: 1; min-width: 0; } .mb-mt b { display: block; font-size: .95rem; } .mb-mt small { color: var(--muted); font-size: .75rem; }
.mb-mr { display: flex; gap: .45rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.mb-step { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mb-step button { width: 40px; height: 40px; border: 0; background: var(--bg); color: var(--blau); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.mb-step input { width: 52px; text-align: center; border: 0; font-weight: 800; min-height: 0; padding: 0; }
.mb-ein { font-weight: 700; color: var(--ink2); font-size: .95rem; } .mb-mr select { width: auto; }
.mb-seg { display: flex; background: var(--bg); border-radius: var(--r); padding: 3px; flex: 1 1 220px; }
.mb-seg button { flex: 1; border: 0; background: none; border-radius: var(--r); padding: .5rem .3rem; font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.mb-seg .an { background: #fff; color: var(--blau); box-shadow: 0 1px 3px rgba(0,30,60,.15); }
.mb-hd { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; font-size: .85rem; font-weight: 600; } .mb-hd input { flex: 1; min-width: 0; }
.mb-sig { position: relative; border: 1.5px dashed var(--line-stark); border-radius: var(--r-l); background: var(--bg); height: 150px; }
.mb-sig canvas { width: 100%; height: 100%; display: block; border-radius: var(--r-l); }
.mb-sig small { position: absolute; left: .7rem; bottom: .45rem; color: var(--muted-hell); font-size: .75rem; pointer-events: none; }
.mb-sigx { position: absolute; right: .4rem; top: .4rem; border: 0; background: #fff; border-radius: var(--r); padding: .3rem .6rem; font: inherit; font-size: .75rem; color: var(--danger); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mb-fuss { position: sticky; bottom: 0; z-index: 4; display: flex; gap: .6rem; background: #fff; padding: .7rem .8rem calc(.8rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 20px rgba(0,30,60,.1); }
.mb-fuss .btn { flex: 1; justify-content: center; min-height: 48px; font-size: 1rem; display: inline-flex; gap: .3rem; align-items: center; } .mb-fuss svg.ic { width: 16px; height: 16px; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.mb-pdfk { display: flex; gap: .5rem; flex-wrap: wrap; } .mb-pdfk .btn { flex: 1 1 10rem; justify-content: center; display: inline-flex; gap: .35rem; align-items: center; }
.mb-lz { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--bg); font-size: .85rem; } .mb-lz:first-of-type { border-top: 0; } .mb-lz span { text-align: right; }
@media (max-width: 420px) { .mb-zr { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-seg2 { grid-template-columns: 1fr; } }
/* Materialliste (Admins) */
.mv { background: var(--gelb-h); border: 1px solid #f3d9a8; border-radius: var(--r-l); padding: .8rem .9rem; margin-bottom: 1rem; }
.mv h2 { margin: 0 0 .3rem; font-size: 1rem; display: flex; gap: .4rem; align-items: center; } .mv h2 b { background: var(--orange); color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; } .mv h2 svg.ic { width: 18px; height: 18px; }
.mv-z { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid #f3e2c0; flex-wrap: wrap; }
.mv-t { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; } .mv-t b { font-size: .95rem; overflow-wrap: anywhere; } .mv-t small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.mv-k { display: flex; gap: .3rem; flex-wrap: wrap; }
.mv-l { background: #fff; border-radius: var(--r-l); padding: .4rem .6rem; }
.mv-r { display: flex; width: 100%; gap: .6rem; align-items: center; text-align: left; border: 0; background: none; border-bottom: 1px solid var(--bg); padding: .5rem .2rem; font: inherit; cursor: pointer; }
.mv-r:hover { background: var(--bg); } .mv-r.aus { opacity: .5; } .mv-r em { font-style: normal; font-weight: 700; color: var(--ink2); white-space: nowrap; font-size: .85rem; }
.mb-chk input, .ak-bart input, .pl-x input, .tstatus input { width: 1px !important; height: 1px !important; margin: 0; }
.mb-such input, .mb-such input:focus { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; padding-left: .2rem; min-width: 0; flex: 1; }
.mb-add svg.ic { width: 18px; height: 18px; position: static; }

/* ===== Bilder aus Trello ===== */
.tra { background: var(--bg); border-radius: var(--r-l); padding: .6rem .7rem; margin: .6rem 0; }
.tra-k { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; margin-bottom: .45rem; } .tra-k b { color: var(--blau); font-size: .85rem; } .tra-k small { color: var(--muted); font-size: .75rem; text-align: right; }
.tra-b { display: flex; gap: .45rem; flex-wrap: wrap; }
.tra-f { position: relative; width: 96px; height: 96px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); cursor: zoom-in; }
.tra-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tra-f span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.tra.gross .tra-f.eins { width: 100%; height: auto; max-height: 340px; aspect-ratio: 4 / 3; }
.tra.gross .tra-f.eins img { object-fit: cover; }
.tra.gross .tra-f.eins span { font-size: .75rem; padding: 4px 8px; }
.tra-p { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; } .tra-p .btn { display: inline-flex; gap: .3rem; align-items: center; } .tra-p svg.ic { width: 15px; height: 15px; }
.tra-g { background: #fff; border-radius: var(--r-l); padding: .8rem; width: min(980px, 100%); max-height: 94vh; display: flex; flex-direction: column; gap: .6rem; }
.tra-g img { max-width: 100%; max-height: calc(94vh - 80px); object-fit: contain; border-radius: var(--r); align-self: center; }
.tra-g b { overflow-wrap: anywhere; }

/* ---------- Urlaub, Abwesenheiten, Monat ---------- */
.useite { max-width: 980px; }
.uk { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: .9rem 1rem; margin-bottom: .8rem; min-width: 0; }
.uk h2 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--blau); display: flex; align-items: center; gap: .4rem; }
.ub { background: var(--orange-d); color: #fff; border-radius: 999px; font-size: .75rem; padding: .05rem .5rem; }
.u-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.u-grid .uk { margin-bottom: 0; } .u-grid + .uk { margin-top: .8rem; }
.ukon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; text-align: center; }
.ukon b { display: block; font-size: 1.75rem; color: var(--blau); line-height: 1.1; }
.ukon div:first-child b { color: var(--ok); font-size: 2rem; }
.ukon small { color: var(--muted); font-size: .75rem; }
.ubar { display: flex; height: 10px; border-radius: 999px; background: var(--gruen-h); overflow: hidden; margin-top: .7rem; }
.ubar i { background: var(--blau); } .ubar i.b { background: #f5b971; }
.ua { border: 1px solid #f1d9b5; background: var(--orange-h); border-radius: var(--r); padding: .6rem .7rem; margin-bottom: .5rem; }
.ua b, .ua small { display: block; } .ua small { color: var(--muted); font-size: .85rem; }
.ua-w { font-size: .85rem; color: var(--gelb); margin-top: .25rem; }
.ua-k { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.uz { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--bg); }
.uz:first-of-type { border-top: 0; }
.uz > span:first-child { flex: 1; min-width: 0; } .uz small { display: block; color: var(--muted); font-size: .85rem; }
.ust { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.ust.o { background: var(--gelb-h); color: var(--gelb); } .ust.g { background: var(--gruen-h); color: var(--ok); } .ust.r { background: var(--rot-h); color: var(--danger); } .ust.x { background: var(--bg); color: var(--muted); }
b.rot { color: var(--danger); }
.ptab2 { display: flex; gap: .3rem; background: var(--bg); border-radius: var(--r); padding: .2rem; margin-bottom: .8rem; width: max-content; max-width: 100%; overflow-x: auto; }
.ptab2 a { display: flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: var(--r); font-weight: 700; color: var(--ink2); text-decoration: none; white-space: nowrap; font-size: .95rem; }
.ptab2 a .ic { width: 16px; height: 16px; }
.ptab2 a.an { background: #fff; color: var(--blau); box-shadow: 0 1px 2px rgba(0,30,60,.15); }
.ptab2 b { background: var(--orange-d); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .4rem; }
.pmon { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pmon > b { font-size: 1.05rem; min-width: 9rem; text-align: center; }
.abw-g { display: block; }
.abw-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: .8rem; align-items: start; }
.abw-n .uk { margin-bottom: 0; }
.abw-s { overflow-x: auto; }
.abw { display: grid; grid-template-columns: 7.5rem repeat(var(--n), minmax(22px, 1fr)); gap: 2px; min-width: max-content; }
.ab-n { font-size: .85rem; font-weight: 700; color: var(--blau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; padding-right: .3rem; }
.ab-h { font-size: .75rem; text-align: center; color: var(--muted); line-height: 1.15; padding-bottom: .2rem; border-radius: var(--r-s); }
.ab-h.we, .ab-h.ft { color: var(--muted-hell); } .ab-h.kn { background: var(--rot-h); color: var(--danger); font-weight: 700; }
.ab-c { height: 24px; border-radius: var(--r-s); background: var(--bg); }
.ab-c.we { background: var(--line); } .ab-c.ft { background: var(--line); }
.ab-c.u, .abw-l i.u { background: #16a34a; } .ab-c.ub, .abw-l i.ub { background: #bbe5c8; }
.ab-c.k, .abw-l i.k { background: var(--danger); } .ab-c.s, .abw-l i.s { background: #7c3aed; } .ab-c.f, .abw-l i.f { background: #f59e0b; }
.abw-l i.ft { background: var(--line); } .abw-l i.kn { background: var(--rot-h); border: 1px solid #f3b4ad; }
.abw-l { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .7rem; font-size: .85rem; color: var(--ink2); }
.abw-l span { display: flex; align-items: center; gap: .3rem; } .abw-l i { width: 12px; height: 12px; border-radius: var(--r-s); display: inline-block; }
.mo-f { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.mo-fb { display: flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .25rem .6rem; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; color: #333; }
.mo-fb i { width: 10px; height: 10px; border-radius: 50%; } .mo-fb span { color: var(--muted-hell); }
.mo-fb.aus { opacity: .45; text-decoration: line-through; }
.mo-s { overflow-x: auto; }
.mo-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; min-width: 640px; }
.mo-h { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); padding: .2rem 0; }
.mo-d { background: #fff; border: 1px solid var(--line); border-radius: var(--r); min-height: 6.2rem; padding: .25rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mo-d.leer { background: transparent; border-color: transparent; }
.mo-d.we { background: var(--bg); } .mo-d.heute { border: 2px solid var(--blau); }
.mo-z { font-weight: 800; font-size: .85rem; color: var(--blau); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-z small { font-weight: 600; color: var(--danger); font-size: .75rem; }
.mo-t { display: block; font-size: .75rem; line-height: 1.25; padding: .12rem .3rem; border-radius: var(--r-s); text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.mo-mehr { font-size: .75rem; color: var(--muted); text-decoration: none; padding-left: .3rem; }
.mo-t.montage { background: var(--blau-hell); border-color: var(--blau-mittel); } .mo-fb.montage i { background: var(--blau-mittel); }
.mo-t.anfertigung { background: #ede9fe; border-color: #7c3aed; } .mo-fb.anfertigung i { background: #7c3aed; }
.mo-t.reparatur { background: var(--gelb-h); border-color: var(--orange-d); } .mo-fb.reparatur i { background: var(--orange-d); }
.mo-t.frist { background: var(--rot-h); border-color: var(--danger); font-weight: 700; } .mo-fb.frist i { background: var(--danger); }
.mo-t.wartung { background: #fef9c3; border-color: #a16207; } .mo-fb.wartung i { background: #a16207; }
.mo-t.urlaub { background: var(--gruen-h); border-color: #16a34a; } .mo-fb.urlaub i { background: #16a34a; }
@media (max-width: 767px) { .u-grid { grid-template-columns: minmax(0, 1fr); } .mo-f { margin-left: 0; } .ab-n { font-size: .75rem; } .abw { grid-template-columns: 5.5rem repeat(var(--n), 22px); } .ptab2 { width: 100%; } .ptab2 a { flex: 1 0 auto; justify-content: center; } }
@media (max-width: 420px) { .ukon b { font-size: 1.2rem; } .ukon div:first-child b { font-size: 1.45rem; } .pmon .btn[href*="-01"] { margin-left: 0 !important; width: 100%; justify-content: center; } }
.mo-li { display: none; }
.mo-lt { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .6rem; margin-bottom: .45rem; display: flex; flex-direction: column; gap: 3px; }
.mo-lt.heute { border: 2px solid var(--blau); }
.mo-lt > a:first-child { text-decoration: none; color: var(--blau); } .mo-lt > a small { color: var(--danger); font-weight: 600; }
.mo-lt .mo-t { font-size: .85rem; white-space: normal; padding: .3rem .45rem; } .mo-lt .mo-t small { display: block; color: var(--muted); font-size: .75rem; }
@media (max-width: 767px) { .mo-s { display: none; } .mo-li { display: block; } }
.mb-del { position: absolute; top: .8rem; right: 1rem; display: flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.mb-del .ic { width: 15px; height: 15px; } .mb-del:hover { background: var(--danger); border-color: var(--danger); }

/* ---------- Konto: Benachrichtigungen ---------- */
.konto-w { max-width: 760px; margin: 0 auto; }
.konto-w .card.login { margin-left: auto; margin-right: auto; }
.bn { margin-top: 1.4rem; }
.bn-k { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: .8rem 1rem; margin-bottom: .8rem; }
.bn-k.adm { border-left: 4px solid var(--orange-d); }
.bn-k h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--blau); }
.bn-z { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--bg); }
.bn-k h2 + .bn-z, .bn-k h2 + .bn-dev, .bn-k h2 + .bn-info { border-top: 0; }
.bn-z > span:first-child { flex: 1; min-width: 0; } .bn-z b { display: block; font-size: .95rem; } .bn-z small { display: block; color: var(--muted); font-size: .85rem; }
.bn-sw { position: relative; width: 46px; height: 28px; flex: none; cursor: pointer; }
.bn-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bn-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-stark); transition: background .15s; }
.bn-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.bn-sw input:checked + i { background: var(--blau); } .bn-sw input:checked + i::after { left: 21px; }
.bn-sw input:focus-visible + i { outline: 2px solid var(--blau); outline-offset: 2px; }
.bn-fest { font-size: .75rem; font-weight: 800; color: var(--gelb); background: var(--gelb-h); border-radius: var(--r-s); padding: .2rem .5rem; white-space: nowrap; }
.bn-dev { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--bg); border-radius: var(--r); padding: .65rem .8rem; }
.bn-dev.an { background: var(--blau-hell); } .bn-dev > span:nth-child(2) { flex: 1 1 12rem; min-width: 0; } .bn-dev b { display: block; color: var(--blau); } .bn-dev small { color: var(--ink2); }
.bn-ic { font-size: 1.45rem; }
.bn-info { background: var(--gelb-h); color: #6b4a00; border-radius: var(--r); padding: .65rem .8rem; font-size: .85rem; }
.bn-mail { display: flex; gap: .4rem; padding-bottom: .4rem; } .bn-mail input { flex: 1; min-width: 0; }
.bn-code { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding-bottom: .4rem; } .bn-code p { flex-basis: 100%; margin: 0; } .bn-code input { flex: 1 1 8rem; min-width: 0; }
.bn-zeit { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.bn-zeit input { width: 7rem; padding: .3rem .5rem; }
.bn-smtp { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .7rem; } .bn-smtp .ganz { grid-column: 1 / -1; }
.bn-k details summary { list-style: none; display: inline-flex; } .bn-k details summary::-webkit-details-marker { display: none; }
@media (max-width: 600px) { .bn-smtp { grid-template-columns: 1fr; } .bn-k { padding: .75rem .8rem; } }
/* Trello-Anhänge: Freigabe / Ausblenden (Admins) */
.tra-i { display: flex; flex-direction: column; gap: .25rem; width: 96px; }
.tra.gross .tra-i:has(.tra-f.eins) { width: 100%; }
.tra-pi { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tra-i.weg .tra-f, .tra-pi.weg .btn { opacity: .45; filter: grayscale(1); }
.tra-v { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--gelb); }
.tra-s { border: 1px solid var(--line); background: #fff; color: var(--blau); border-radius: var(--r); padding: .2rem .4rem; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.tra-s.frei { background: var(--blau); color: #fff; border-color: var(--blau); }
/* Urlaub: halber Tag */
.u-halb > span { display: block; font-size: .85rem; font-weight: 600; color: var(--ink2); margin-bottom: .3rem; }
.u-seg { display: flex; gap: .3rem; flex-wrap: wrap; }
.u-seg label { flex: 1 1 0; min-width: 0; position: relative; }
.u-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.u-seg b { display: block; text-align: center; border: 1.5px solid var(--line); border-radius: var(--r); padding: .5rem .25rem; font-size: .85rem; white-space: nowrap; cursor: pointer; background: #fff; }
.u-seg input:checked + b { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.u-seg input:focus-visible + b { outline: 2px solid var(--blau); outline-offset: 2px; }
.ab-c.halb, .abw-l i.halb { background-image: linear-gradient(135deg, transparent 50%, var(--bg) 50%); }
.ab-c.ub.halb { background-image: linear-gradient(135deg, transparent 50%, var(--bg) 50%); }

/* Mitarbeiter: Geräte-Freigabe und Ausgeschiedene */
.gwarte { border: 2px solid #e8a33d; margin-bottom: 1rem; }
.gz { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.gz > span { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.gz small { display: block; font-size: .85rem; }
.g-wartet { color: #a15c00; } .g-gesperrt { color: var(--danger); } .g-frei { color: var(--muted, #667085); }
.gliste > summary { cursor: pointer; padding: .3rem 0; }

/* Vorplanung: im Monat gestrichelt, bis Leute eingeteilt sind; in der Woche oben „Noch einzuteilen“ */
.mo-d { position: relative; }
.mo-neu { position: absolute; top: .15rem; right: .2rem; width: 1.3rem; height: 1.3rem; border-radius: var(--r-s); border: 1px solid var(--line); background: #fff; color: var(--blau); font: inherit; font-weight: 800; font-size: .85rem; line-height: 1; cursor: pointer; opacity: .35; padding: 0; }
.mo-d:hover .mo-neu, .mo-neu:focus { opacity: 1; }
button.mo-t { width: 100%; text-align: left; font: inherit; font-size: .75rem; cursor: pointer; }
.mo-t.offen { background: #fff; border: 1px dashed; border-left: 3px dashed; }
.mo-lt button.mo-t { font-size: .85rem; white-space: normal; padding: .3rem .45rem; } .mo-lt button.mo-t small { display: block; color: var(--muted); font-size: .75rem; }
.pvor { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .6rem; padding: .5rem .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pvor > b { font-size: .85rem; margin-right: .2rem; }
.pvor-c { font: inherit; font-size: .85rem; padding: .3rem .55rem; border-radius: var(--r-s); border: 1px dashed; border-left: 3px dashed; cursor: grab; background: #fff; color: var(--ink); text-align: left; }
.pvor-c.montage { border-color: var(--blau-mittel); } .pvor-c.anfertigung { border-color: #7c3aed; }
.pvor-c small { color: var(--muted); }
.ph-ab { display: inline-flex; align-items: center; gap: .35rem; background: #fac775; color: #412402; font-size: .85rem; font-weight: 700; border-radius: var(--r-s); padding: .2rem .6rem; margin-top: .45rem; }
.ph-geplant { margin-top: .7rem; padding: .55rem .8rem; border-radius: var(--r); background: rgba(255,255,255,.08); font-size: .85rem; }
.ph-geplant > span { display: block; font-size: .75rem; letter-spacing: .06em; opacity: .75; font-weight: 700; }
.ph-geplant small { opacity: .75; }

/* ================================================================ Feinschliff Oktober 2026
   Ruhigere Schrift, einheitliches blaues Seitenband, gleiche Reiter, weiche Karten. */
/* 1 · Ruhigere Schrift: etwas weniger fett, sauber ausgerichtete Zahlen */
body { color: #1d2733; }
#app h1 { font-weight: 750 !important; letter-spacing: -.015em; }
#app h2 { font-weight: 700 !important; letter-spacing: -.01em; }
#app b, #app strong { font-weight: 650; }
#app .big, #app [class*="zahl"], #app td, #app .mo-z, #app .ukon b { font-variant-numeric: tabular-nums; }

/* 2 · Einheitlicher Seitenkopf (skopf): jede Seite bekommt das blaue Band wie Start, Projekt und Betrieb */
.skopf { background: linear-gradient(160deg, var(--blau) 0%, var(--blau-dunkel) 100%) !important; color: #fff !important; border-radius: var(--r-l) !important;
  padding: 1.25rem 1.5rem 1.2rem !important; margin: 0 0 1.1rem !important; position: relative; overflow: hidden; box-shadow: 0 6px 20px rgba(0,43,77,.18);
  display: flex !important; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem 1.2rem; }
.skopf::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); pointer-events: none; }
.skopf > * { position: relative; }
.skopf h1 { color: #fff !important; margin: 0 !important; font-size: 1.75rem !important; }
.skopf p, .skopf .muted { color: rgba(255,255,255,.75) !important; margin: .25rem 0 0 !important; max-width: 70ch; }
.skopf .btn, .skopf a.btn { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: none !important; }
.skopf .btn:hover { background: rgba(255,255,255,.18) !important; }
.skopf .btn.primary { background: #fff !important; color: var(--blau) !important; border-color: #fff !important; font-weight: 700 !important; }
.skopf .btn svg, .skopf .btn .e-ic svg { stroke: currentColor; }
.skopf label, .skopf .inline { color: rgba(255,255,255,.85) !important; }
.skopf .navbadge { background: var(--orange) !important; color: #fff !important; }

/* 3 · Wochenplan: Blättern als ein Block, Werkzeuge leicht, nur „Eintragen“ hervorgehoben */
.skopf .pnav { gap: .4rem !important; align-items: center; }
.skopf #pprev { border-radius: var(--r) 0 0 var(--r) !important; margin-right: -.4rem !important; }
.skopf #pheute { border-radius: 0 !important; margin-right: -.4rem !important; border-left: 0 !important; border-right: 0 !important; }
.skopf #pnext { border-radius: 0 var(--r) var(--r) 0 !important; margin-right: .4rem !important; }
.skopf #pcopy, .skopf #pleer, .skopf #pprint, .skopf #ptrello, .skopf #pbest { background: transparent !important; border-color: transparent !important; }
.skopf #pcopy:hover, .skopf #pleer:hover, .skopf #pprint:hover, .skopf #ptrello:hover, .skopf #pbest:hover { background: rgba(255,255,255,.12) !important; }
.pchip { border-radius: var(--r) !important; padding: .32rem .5rem !important; border: 1px solid rgba(0,0,0,.05) !important; box-shadow: 0 1px 1px rgba(16,24,40,.04); }
.pc-t { font-weight: 650 !important; }
.pc-e { font-weight: 700 !important; border-radius: 999px !important; padding: 0 .4rem !important; font-size: .75rem !important; letter-spacing: .02em; }
.pc-n, .pc-z { color: var(--ink2) !important; }
.ptable { border-radius: var(--r-l) !important; }
.pwrap { border: 0 !important; border-radius: var(--r-l) !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(16,24,40,.06) !important; }
.ptable th { font-weight: 650 !important; }
.ptable td.pn { font-weight: 650 !important; }
.pvor { border: 0 !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(16,24,40,.06); border-radius: var(--r) !important; }

/* 4 · Gleiche Reiter überall (Zeiterfassung wie Wochenplan) */
.seg.zt-tabs { background: var(--line) !important; border: 0 !important; border-radius: var(--r) !important; padding: .2rem !important; gap: .2rem; }
.seg.zt-tabs button { border: 0 !important; border-radius: var(--r) !important; font-weight: 650 !important; color: var(--ink2) !important; padding: .42rem .85rem !important; }
.seg.zt-tabs button.on { background: #fff !important; color: var(--blau) !important; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.ptab2 { background: var(--line) !important; }

/* 5 · Karten: weicher Schatten statt grauem Rand, einheitliche Rundung */
.card, .uk, .rtable, .bn-k, .gz-k { border-color: transparent !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(16,24,40,.06) !important; }
table.rtable { background: #fff; border-radius: var(--r-l); overflow: hidden; border-collapse: separate !important; border-spacing: 0; }
table.rtable thead th { background: var(--bg) !important; color: var(--muted) !important; font-size: .75rem !important; letter-spacing: .06em; }
table.rtable td, table.rtable th { border-color: var(--bg) !important; }
.badge { border-radius: 999px !important; font-weight: 650 !important; padding: .1rem .55rem !important; }

/* 6 · „Tage ohne Arbeitsunfall“: alles in einer Zeile */
.unfall { border: 0 !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(16,24,40,.06); border-radius: var(--r-l) !important; padding: .8rem 1rem !important; }
.unfall > span:first-child { flex: none; }
.unfall input[type=date] { flex: none !important; width: 11rem !important; }
.unfall .btn { flex: none !important; width: auto !important; display: inline-flex !important; }

/* 7 · Unterweisungs-Übersicht: ruhige Punkte statt rosa Flächen */
.bmx-le i.r { background: #e5484d !important; } .bmx-le i.g { background: var(--ok) !important; } .bmx-le i.y { background: #d99a00 !important; }
.bmx td.r { background: transparent !important; color: var(--danger) !important; font-weight: 650 !important; }
.bmx td.r::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; margin-right: .35rem; vertical-align: 1px; }
.bmx td.g { background: transparent !important; color: var(--ok) !important; }
.bmx td.y { background: transparent !important; color: var(--gelb) !important; }
.bmx tbody tr td, .bmx tbody tr th { border-bottom: 1px solid var(--bg) !important; }
.bmx table { border-spacing: 0 !important; }
.bmx td, .bmx tbody th { border-radius: 0 !important; height: 34px !important; }


/* 9 · Handy: Wochenplan-Leiste in einer Zeile zum Wischen, „Eintragen“ vorne */
@media (max-width: 767px) {
  .skopf { border-radius: var(--r-l) !important; padding: 1rem 1rem .9rem !important; }
  .skopf h1 { font-size: 1.45rem !important; }
  .skopf .pnav { flex-wrap: nowrap !important; overflow-x: auto; width: 100%; padding-bottom: .1rem; scrollbar-width: none; }
  .skopf .pnav > * { flex: none !important; white-space: nowrap; }
  .skopf #pnew { order: -1; width: auto !important; margin-right: .3rem; }
}
/* Linien-Symbole statt Emojis: Größe in Text und Knöpfen */
.pchip svg.ic, .pc-z svg.ic, .pc-n svg.ic { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; }
.partseg svg.ic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }
.pnav svg.ic, .pmon svg.ic, .btn svg.ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.ng-ic { color: var(--blau); } .ng-ic svg.ic { width: 2.4rem; height: 2.4rem; }
.bn-ic svg.ic { width: 20px; height: 20px; }
.ua-w svg.ic, .notice svg.ic, .zt-fehlt svg.ic, .zt-hinweis svg.ic, .unfall svg.ic, .gwarte h2 svg.ic, h2 > svg.ic, .chip svg.ic, a > svg.ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* Fuhrpark (Betrieb › Fuhrpark) – baut auf den Maschinen-Bausteinen auf */
.bk-k.fp { background: linear-gradient(140deg,#5a7a99,#2f4c69); }
.fp-filter { margin: 0 0 1rem; }
.mfoto > * { grid-area: 1 / 1; } /* Foto liegt über dem Platzhalter-Symbol */
.fp-filter .muted { font-weight: 600; margin-left: .15rem; }
.fp-z { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-top: 1px solid var(--bg); font-size: .95rem; }
.fp-z span { color: var(--muted); } .fp-z b { text-align: right; overflow-wrap: anywhere; }
.fp-termine { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
.fp-log li { display: flex; gap: .5rem; align-items: flex-start; }
.fp-log li > svg.ic { width: 15px; height: 15px; margin-top: .2rem; color: var(--muted); flex: none; display: inline-block; }
.fp-log li > span { flex: 1; min-width: 0; }
.fp-notiz { display: flex; gap: .4rem; margin-bottom: .2rem; } .fp-notiz input { flex: 1; min-width: 0; }
.fp-probe { max-height: 50vh; overflow: auto; margin: .6rem 0; }

/* Reparatur: Ablauf und Rechnung (ersetzt die Trello-Spalten) */
.rab h2 { margin: .1rem 0; font-size: 1.2rem; overflow-wrap: anywhere; } .rab h3 { font-size: .95rem; margin: 0 0 .5rem; }
.rab-kopf small { display: block; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.rab-stand { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; padding: 0; margin: .8rem 0; }
.rab-stand li { border: 1px solid var(--line); border-radius: var(--r); padding: .4rem .2rem; text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; }
.rab-stand li span { hyphens: auto; -webkit-hyphens: auto; max-width: 100%; } .rab-stand li small { font-weight: 400; font-size: .75rem; }
.rab-stand li svg.ic { width: 13px; height: 13px; } .rab-stand li.ok { background: var(--gruen-h); color: var(--ok); border-color: #b7dfc3; } .rab-stand li.an { background: var(--blau-hell); color: var(--blau); border-color: #9cc0e0; }
.rab-dran { background: var(--bg); border-radius: var(--r); padding: .7rem .8rem; margin-bottom: .9rem; } .rab-dran.ich { background: var(--gelb-h); }
.rab-wer { display: flex; gap: .6rem; align-items: flex-start; } .rab-wer > svg.ic { width: 20px; height: 20px; flex: none; margin-top: .1rem; color: var(--blau); }
.rab-wer div { display: flex; flex-direction: column; min-width: 0; } .rab-wer span { overflow-wrap: anywhere; } .rab-wer small { color: var(--muted); font-size: .75rem; }
.rab-geben { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .rab-geben select { flex: 1 1 9rem; width: auto; } .rab-geben input { flex: 3 1 14rem; width: auto; min-width: 0; }
.rab-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .9rem; }
.rab-2 section, .rab-v { border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; min-width: 0; }
.rab-h { display: flex; gap: .5rem; align-items: center; font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: .6rem; cursor: pointer; } .rab-h input { width: auto; }
.rab-bnr label { font-size: .85rem; font-weight: 700; } .rab-zeile { display: flex; gap: .4rem; margin-top: .25rem; } .rab-zeile input { flex: 1; min-width: 0; }
.rab-auto { display: flex; gap: .45rem; align-items: center; margin: .45rem 0 0; font-size: .85rem; } .rab-auto span { flex: 1; min-width: 0; } .rab-auto small { color: var(--muted); font-size: .75rem; }
.rab-auto svg.ic, .rab-pf svg.ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.rab-pf { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .4rem; } .rab-pf a { font-weight: 700; overflow-wrap: anywhere; } .rab-pf small { color: var(--muted); font-size: .75rem; }
.rab-rs { margin: 0 0 .5rem; color: var(--blau); }
.rab-pr { background: var(--gelb-h); border-radius: var(--r); padding: .55rem .7rem; font-size: .85rem; margin-bottom: .5rem; } .rab-pr.gut { background: var(--gruen-h); }
.rab-pr > b { display: flex; gap: .35rem; align-items: center; } .rab-pr ul { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .3rem; }
.rab-pr li { display: flex; gap: .4rem; align-items: flex-start; } .rab-pr li span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .rab-pr svg.ic { width: 14px; height: 14px; flex: none; margin-top: .15rem; }
.rab-pr .rab-ok svg.ic { color: var(--ok); } .rab-pr .rab-warn { color: #8a3b00; } .rab-pr .rab-warn svg.ic { color: var(--danger); } .rab-pr .rab-info svg.ic { color: var(--blau); } .rab-pr small { color: var(--muted); }
.rab-k { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; } .rab-zf { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0; } .rab-zf .btn { align-self: flex-start; }
.rab-up { display: inline-block; margin-top: .3rem; cursor: pointer; }
.rab-v { margin: .9rem 0; } .rab-v ul { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; max-height: 14rem; overflow: auto; font-size: .85rem; }
.rab-v li { overflow-wrap: anywhere; } .rab-v li small { display: block; color: var(--muted); font-size: .75rem; }
@media (max-width: 600px) { .rab-stand { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .15rem; } .rab-stand li { font-size: .75rem; padding: .3rem .1rem; } .rab-stand li small { display: none; } }
.rab-regel { margin-top: .6rem; font-size: .85rem; } .rab-regel summary { cursor: pointer; font-weight: 700; color: var(--blau); }
.rab-regel ol { margin: .5rem 0 .3rem; padding-left: 1.2rem; display: grid; gap: .25rem; } .rab-regel li { overflow-wrap: anywhere; }
.rab-bw { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-weight: 700; font-size: .85rem; } .rab-bw select { width: auto; flex: 0 1 14rem; }
.rab-ag { background: #fff; border-radius: var(--r); padding: .4rem .9rem .6rem; margin-bottom: .9rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); }
.rab-ag h2 { font-size: 1rem; margin: .5rem 0; display: flex; gap: .5rem; align-items: center; } .rab-ag h2 b { font-size: .75rem; background: var(--bg); color: var(--muted); border-radius: 999px; padding: .1rem .5rem; }
.rab-hinweis { display: flex; gap: .45rem; align-items: flex-start; background: var(--gelb-h); color: #8a3b00; border-radius: var(--r); padding: .55rem .7rem; font-size: .85rem; margin: .4rem 0; } .rab-hinweis svg.ic { width: 15px; height: 15px; flex: none; margin-top: .15rem; color: var(--danger); }
.rab-az { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--bg); flex-wrap: wrap; }
.rab-azt { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; } .rab-azt em { font-style: normal; font-size: .75rem; font-weight: 800; color: var(--orange-d); }
.rab-azt b { font-size: .95rem; overflow-wrap: anywhere; } .rab-azt small, .rab-azs small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.rab-azs { display: flex; flex-direction: column; flex: 0 1 11rem; min-width: 0; } .rab-azk { display: flex; gap: .3rem; flex: none; }
/* Akte: Einsatz abschließen (fertig / geht weiter) mit Papier-Foto oder digitalem Bericht */
.mb-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .55rem; }
.mb-ab button, .mb-ab1 { display: flex; gap: .55rem; align-items: center; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: .65rem .7rem; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.mb-ab button span, .mb-ab1 span { display: flex; flex-direction: column; min-width: 0; } .mb-ab small, .mb-ab1 small { color: var(--muted); font-size: .75rem; }
.mb-ab b, .mb-ab1 b { font-size: .95rem; overflow-wrap: anywhere; } .mb-ab svg.ic, .mb-ab1 svg.ic { width: 22px; height: 22px; flex: none; color: var(--blau); }
.mb-ab button.an { border: 2px solid var(--blau); background: var(--blau-hell); }
.mb-wie { margin-top: .6rem; } .mb-wt { margin: 0 0 .1rem; font-size: .85rem; } .mb-wt span { color: var(--muted); font-size: .85rem; }
.mb-ab1 { width: 100%; margin-top: .4rem; } .mb-ab1.an { border: 2px solid var(--blau); background: var(--blau-hell); }
.mb-np { background: var(--orange-d); } .mb-np svg.ic { width: 16px; height: 16px; }
.ak-mb { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; border: 2px solid var(--blau); background: #fff; border-radius: var(--r-l); padding: .7rem .8rem; margin: 0 0 .7rem; }
.ak-mb > span { display: flex; gap: .55rem; align-items: center; flex: 1 1 220px; min-width: 0; } .ak-mb > span > span { display: flex; flex-direction: column; min-width: 0; }
.ak-mb b { font-size: .95rem; overflow-wrap: anywhere; } .ak-mb small { color: var(--muted); font-size: .75rem; } .ak-mb svg.ic { width: 22px; height: 22px; flex: none; color: var(--blau); }
@media (max-width: 420px) { .mb-ab { grid-template-columns: 1fr; } }
.ro-auf { display: flex; gap: .3rem; align-items: flex-start; margin-top: .2rem; color: var(--gelb) !important; font-weight: 700; font-size: .85rem !important; }
.ro-auf svg.ic { width: 13px; height: 13px; flex: none; margin-top: .15rem; } .ro-auf span { font-weight: 400; color: var(--muted); }
.rab-stand li { padding: 0; } .rab-stand li button { width: 100%; height: 100%; border: 0; background: none; font: inherit; color: inherit; padding: .45rem .2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; cursor: pointer; border-radius: var(--r); min-width: 0; }
.rab-stand li button:hover:not(:disabled) { background: rgba(0,64,112,.07); } .rab-stand li button:disabled { cursor: default; }
.rab-sh { margin: -.4rem 0 .8rem; font-size: .75rem; }
@media (max-width: 600px) { .rab-stand li button { padding: .35rem .1rem; } .rab-stand li span { overflow-wrap: anywhere; } }
.rab-papier { display: inline-block; margin-top: .6rem; cursor: pointer; } .rab-papier .btn { display: inline-flex; gap: .35rem; align-items: center; } .rab-papier svg.ic { width: 15px; height: 15px; }
/* Übergeben: feste Aufgaben als Knöpfe */
.rab-vl { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 100%; order: 1; }
.rab-vl label { cursor: pointer; } .rab-vl input { position: absolute; opacity: 0; pointer-events: none; }
.rab-vl span { display: inline-block; border: 1px solid var(--line-stark); background: #fff; border-radius: 999px; padding: .35rem .75rem; font-size: .85rem; font-weight: 700; color: var(--ink2); }
.rab-vl input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; } .rab-vl input:focus-visible + span { outline: 2px solid var(--blau-mittel); outline-offset: 2px; }
.rab-geben input[name=aufgabe] { order: 2; flex: 1 1 100%; } .rab-geben select { order: 3; } .rab-geben .btn { order: 4; }
/* Akte: Datei nur fürs Büro (Admins sehen den Schalter) */
.ak-dw { display: inline-flex; flex-direction: column; gap: .2rem; align-items: flex-start; max-width: 100%; }
.ak-sicht { border: 0; background: var(--gruen-h); color: var(--ok); border-radius: 999px; padding: .12rem .5rem; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; display: inline-flex; gap: .2rem; align-items: center; }
.ak-sicht svg.ic { width: 11px; height: 11px; } .ak-dw.nb .ak-sicht { background: var(--gelb-h); color: var(--gelb); } .ak-dw.nb img { opacity: .75; }
/* Trello-Übernahme */
.ti-z { margin: .5rem 0 .2rem; font-size: .85rem; } .ti-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .ti-bar i { display: block; height: 100%; background: var(--blau); transition: width .4s; }
.ti-tab { overflow-x: auto; margin: .4rem 0 .6rem; } .ti-tab table { width: 100%; border-collapse: collapse; font-size: .85rem; } .ti-tab th, .ti-tab td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--bg); vertical-align: top; }
.ti-tab th { font-size: .75rem; color: var(--muted); } .ti-tab small { color: var(--muted); } .ti-weg td { color: var(--muted); } .ti-sum td { font-weight: 800; border-bottom: 0; }
/* Reparaturen: Ansprechpartner */
.kp-l { background: #fff; border-radius: var(--r); padding: .2rem .9rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); }
.kp-z { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .65rem 0; border-top: 1px solid var(--bg); } .kp-z:first-child { border-top: 0; }
.kp-t { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; } .kp-t b { overflow-wrap: anywhere; } .kp-t small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; display: flex; gap: .25rem; align-items: center; }
.kp-k { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 12rem; min-width: 0; } .kp-k a { display: inline-flex; gap: .35rem; align-items: center; color: var(--blau); font-weight: 700; font-size: .85rem; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.kp-k svg.ic, .kp-t svg.ic { width: 14px; height: 14px; flex: none; } .kp-a { flex: none; }
.rauf-d { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; margin: 0 .35rem .3rem 0; padding: .15rem .5rem; border-radius: 999px; background: var(--line); color: #33404c; overflow-wrap: anywhere; }
.rauf-d a { text-decoration: none; color: #8a1f1f; font-weight: 700; }
.rab-fehlt { display: flex; gap: .5rem; align-items: flex-start; margin: .6rem 0 0; padding: .5rem .65rem; border-radius: var(--r); background: var(--gelb-h); color: #7a3e00; font-size: .85rem; }
.rab-fehlt svg { flex: 0 0 auto; margin-top: .15rem; } .rab-fehlt small { color: #8a5320; }
.ptboard button.on .muted { color: var(--line-stark); }
.rort-n .rot-t { color: var(--danger); font-weight: 700; }
.mk-st { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; left: .55rem; pointer-events: none; }
.mk-st .bpill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mverl { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .7rem; border-radius: var(--r); background: var(--gelb-h); color: #5c3a00; }
.mverl.rot { background: var(--rot-h); color: #8a1c12; } .mverl svg { flex: 0 0 auto; margin-top: .15rem; }
.mverl small { display: block; margin-top: .15rem; opacity: .9; overflow-wrap: anywhere; } .mverl b { overflow-wrap: anywhere; }
.mverl-f { display: flex; flex-direction: column; gap: .5rem; }
.mgruppe { font-size: 1.05rem; margin: 1.1rem 0 .55rem; } .mgruppe .muted { font-weight: 600; font-size: .95rem; }
.martw { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.martw label { display: flex; flex-direction: column; gap: .1rem; border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .65rem; cursor: pointer; background: #fff; }
.martw label small { color: var(--muted, var(--muted)); font-size: .75rem; } .martw label.on { border-color: var(--blau); background: var(--bg); box-shadow: 0 0 0 1px var(--blau) inset; }

/* Freigaben je Admin (Mitarbeiter bearbeiten) */
.urechte { display: block; color: var(--muted); font-size: .75rem; margin-top: .2rem; }
.urf { border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .75rem .65rem; margin: 0; min-width: 0; }
.urf legend { font-weight: 700; font-size: .85rem; padding: 0 .3rem; }
.urf .ugrid, .vt .ugrid, #vtNF .ugrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urf label.inline { display: flex; gap: .45rem; align-items: center; margin: .2rem 0; overflow-wrap: anywhere; } .urf label.inline input { width: auto; flex: none; }
@media (max-width: 600px) { .urf .ugrid, .vt .ugrid, #vtNF .ugrid { grid-template-columns: 1fr; } }

/* Vertrieb: Liste */
.vt-l { display: grid; gap: .5rem; }
.vt-z { display: flex; gap: .8rem; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: #fff; border: 0; border-radius: var(--r-l); padding: .75rem .9rem;
  box-shadow: 0 1px 2px rgba(0,30,60,.06); font: inherit; color: inherit; cursor: pointer; flex-wrap: wrap; }
.vt-z:hover { box-shadow: 0 2px 4px rgba(0,30,60,.08), 0 8px 20px rgba(0,30,60,.08); } .vt-z.faellig { box-shadow: inset 4px 0 0 var(--danger), 0 1px 2px rgba(0,30,60,.06); }
.vt-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 18rem; } .vt-t em { font-style: normal; font-size: .75rem; font-weight: 800; color: var(--orange-d); }
.vt-t b { font-size: .95rem; overflow-wrap: anywhere; } .vt-t small { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.vt-t .vt-dran { display: flex; gap: .3rem; align-items: center; color: var(--ink2); margin-top: .15rem; } .vt-t .vt-dran.ich { color: var(--gelb); font-weight: 700; } .vt-dran svg.ic { width: 13px; height: 13px; flex: none; }
.vt-s { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
.vt-s i { font-style: normal; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
.vt-s svg.ic { width: 12px; height: 12px; }
@media (max-width: 600px) { .vt-s { justify-content: flex-start; } }
/* Vertrieb: ein Vorgang */
.vt .rab-stand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vt-wv { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; font-size: .85rem; } .vt-wv > svg.ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.vt-wv span { flex: 1 1 12rem; min-width: 0; } .vt-wv input { width: auto; flex: 0 1 10rem; min-width: 0; }
.vt #vtNach { margin-top: .5rem; }
.vt-erg { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; background: var(--bg); border-radius: var(--r); padding: .65rem .8rem; margin: .7rem 0 .9rem; }
.vt-erg.gut { background: var(--gruen-h); } .vt-erg > svg.ic { width: 18px; height: 18px; flex: none; } .vt-erg span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; } .vt-erg small { display: block; color: var(--muted); font-size: .75rem; }
.vt-f { gap: .5rem; } .vt-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }
.vt-dat { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; gap: .3rem; font-size: .85rem; }
.vt-dat li { display: flex; gap: .4rem; align-items: center; min-width: 0; } .vt-dat li a { flex: 1; min-width: 0; overflow-wrap: anywhere; } .vt-dat small { color: var(--muted); font-size: .75rem; flex: none; }
.vt-dat svg.ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.vt-x { border: 0; background: none; padding: .2rem; cursor: pointer; color: var(--danger); flex: none; } .vt-x svg.ic { width: 15px; height: 15px; color: inherit; }
.vt-ende { border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; margin-top: .9rem; } .vt-ende h3 { margin: 0 0 .3rem; }
.vt-ok { background: var(--ok); border-color: var(--ok); }
.vt-tab { overflow-x: auto; margin-top: .6rem; } .vt-tab table { min-width: 34rem; font-size: .85rem; } .vt-unb td { background: var(--gelb-h); }
/* Projekt: Vorbereitung und Rechnung */
.pa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .8rem; margin: 0 0 1rem; align-items: start; }
.pa-vg { grid-column: 1 / -1; margin: 0; font-size: .85rem; display: flex; gap: .35rem; align-items: center; } .pa-vg svg.ic { width: 15px; height: 15px; color: var(--muted); }
.pa-box { background: #fff; border-radius: var(--r-l); padding: .8rem .95rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); min-width: 0; }
.pa-k { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pa-k h3 { margin: 0; font-size: 1rem; display: flex; gap: .4rem; align-items: center; } .pa-k h3 svg.ic { width: 17px; height: 17px; color: var(--blau); }
.pa-ok { background: var(--gruen-h); color: var(--ok); border-radius: 999px; padding: .15rem .65rem; font-size: .75rem; font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; } .pa-ok svg.ic { width: 13px; height: 13px; }
.pa-rs { background: var(--gelb-h); color: var(--gelb); border-radius: 999px; padding: .15rem .65rem; font-size: .75rem; font-weight: 700; } .pa-rs.ok { background: var(--gruen-h); color: var(--ok); }
.pa-l { display: grid; gap: .35rem; }
.pa-p { display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: .45rem .6rem; }
.pa-p.an { background: var(--bg); border-color: var(--gruen-h); }
.pa-h { display: flex; gap: .55rem; align-items: center; cursor: pointer; flex: 1 1 12rem; min-width: 0; margin: 0; } .pa-h input { width: 20px; height: 20px; flex: none; margin: 0; }
.pa-h span { display: flex; flex-direction: column; min-width: 0; } .pa-h b { font-size: .95rem; } .pa-h small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.pa-p select { width: auto; flex: 0 1 11rem; min-width: 0; font-size: .85rem; padding: .3rem .5rem; }
.pa-nf { display: flex; gap: .45rem; align-items: center; font-size: .85rem; margin-top: .55rem; cursor: pointer; } .pa-nf input { width: auto; flex: none; margin: 0; }
.pa-send { align-items: center; } .pa-send .pa-nf { margin: 0 .4rem 0 0; }
.pa-zu { background: #fff; border-radius: var(--r-l); padding: .6rem .95rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); min-width: 0; }
.pa-zu > summary { cursor: pointer; font-weight: 700; display: flex; gap: .4rem; align-items: center; list-style: none; } .pa-zu > summary svg.ic { width: 16px; height: 16px; color: var(--blau); }
.pa-zu[open] > summary { margin-bottom: .4rem; } .pa-zu .pa-box { box-shadow: none; padding: 0; } .pa-zu .pa-box .pa-k h3 { display: none; }
/* Vertrieb: Ansichten „Nach Stand“ (Spalten) und „Wer macht was“ (je Person) */
.vt-kopf { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .2rem; } .vt-kopf .rtabs { margin-bottom: .7rem; } .vt-kopf .such { flex: 1 1 16rem; min-width: 0; }
@media (max-width: 767px) { .vt-nurpc { display: none; } }
.vt-av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; flex: none; }
.vt-av.leer { background: var(--bg); color: var(--muted); border: 1px dashed var(--line-stark); }
.vt-b { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; align-items: start; }
@media (max-width: 1023px) and (min-width: 768px) { .vt-b { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.vt-sp { background: var(--line); border-radius: var(--r-l); padding: .55rem; min-width: 0; display: grid; gap: .4rem; }
.vt-sp h4 { margin: .1rem .2rem .2rem; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; color: #22303c; }
.vt-sp h4 b { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; color: var(--muted); }
.vt-ug { margin: .3rem .2rem 0; font-size: .75rem; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; } .vt-ug span { font-weight: 400; }
.vt-leer { margin: .2rem; color: var(--muted); font-size: .85rem; }
.vt-k { display: flex; flex-direction: column; gap: .15rem; text-align: left; background: #fff; border: 0; border-radius: var(--r); padding: .55rem .6rem; font: inherit; color: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,30,60,.08); min-width: 0; }
.vt-k:hover { box-shadow: 0 2px 4px rgba(0,30,60,.1), 0 6px 14px rgba(0,30,60,.08); } .vt-k.faellig { box-shadow: inset 3px 0 0 var(--danger), 0 1px 2px rgba(0,30,60,.08); }
.vt-k b { font-size: .85rem; overflow-wrap: anywhere; } .vt-k > small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-wer { display: flex; gap: .35rem; align-items: center; font-size: .75rem; color: var(--ink2); margin-top: .2rem; min-width: 0; } .vt-wer > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.vt-sch { display: flex; gap: .25rem; flex-wrap: wrap; } .vt-sch i { font-style: normal; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; margin-top: .2rem; overflow-wrap: anywhere; }
.vt-pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .8rem; align-items: start; }
.vt-pb { background: var(--line); border-radius: var(--r-l); padding: .55rem; display: grid; gap: .4rem; min-width: 0; } .vt-pb.ich { background: var(--gelb-h); }
.vt-pb h4 { margin: .1rem .2rem .2rem; font-size: .95rem; display: flex; gap: .45rem; align-items: center; } .vt-pb h4 > span:nth-child(2) { flex: 1; min-width: 0; }
.vt-pb h4 b { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; color: var(--muted); }
.vt-pb .vt-z { padding: .55rem .7rem; } .vt-pb .vt-t b { font-size: .85rem; }
/* Karten ziehen (Vertrieb- und Projekt-Spalten) */
[data-zk][draggable="true"] { cursor: grab; } .zieht { opacity: .45; }
.zielspalte { outline: 2px dashed var(--blau); outline-offset: -2px; background: var(--blau-hell) !important; }
.vt-ohne { color: var(--danger) !important; font-weight: 700; }
/* Konto: eigene Menü-Reihenfolge */
.mreihe { min-width: 0; }
.mr-l { list-style: none; padding: 0; margin: 0 0 .7rem; display: grid; gap: .35rem; }
.mr-z { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: var(--r); padding: .4rem .5rem; background: #fff; cursor: grab; min-width: 0; }
.mr-g { color: var(--muted-hell); font-size: 1.05rem; line-height: 1; } .mr-n { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.mr-p { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); width: 2.2rem; height: 2rem; font: inherit; font-weight: 700; color: var(--blau); cursor: pointer; flex: none; }
.mr-p:disabled { opacity: .35; cursor: default; }
.mreihe { margin-top: 1rem; }
/* Projektakte kompakt: Stand-Leiste zum Antippen, Vorbereitung/Rechnung als Schild-Zeilen */
.stl.stl-kompakt { margin-top: .8rem; padding: .65rem .9rem .5rem; border-radius: var(--r-l); }
.stl-kompakt .stl-k b { font-size: 1rem; } .stl-kompakt .stl-k .stl-l { margin-right: .3rem; } .stl-kompakt .stl-k small a { color: #fff; font-weight: 700; }
.stl-kompakt .stl-s { margin: .55rem 0 .2rem; }
button.stl-p { background: none; border: 0; font: inherit; color: inherit; padding: 0 0 .2rem; cursor: pointer; border-radius: var(--r); }
button.stl-p:hover i { box-shadow: 0 0 0 4px rgba(255,255,255,.3); } button.stl-p:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) { .stl-kompakt .stl-s { margin-bottom: 1.4rem; } }
.pa2 { display: grid; gap: .45rem; margin: .7rem 0 .9rem; }
.pa-z { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; background: #fff; border-radius: var(--r-l); padding: .5rem .7rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); min-width: 0; }
.pa-l { font-weight: 800; font-size: .85rem; color: var(--blau); margin-right: .2rem; }
.pa-c { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .28rem .7rem; font: inherit; font-size: .85rem; font-weight: 700; border: 0; background: var(--gelb-h); color: var(--gelb); cursor: default; overflow-wrap: anywhere; }
button.pa-c { cursor: pointer; } button.pa-c:hover { filter: brightness(.96); }
.pa-c.an { background: var(--gruen-h); color: var(--ok); } .pa-c.of { background: var(--gelb-h); color: var(--gelb); } .pa-c.aus { background: var(--bg); color: var(--muted); }
.pa-x { border: 0; background: none; font: inherit; font-size: .75rem; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0 .2rem; }
.pa-sel { width: auto; font-size: .75rem; padding: .2rem .45rem; border-radius: 999px; max-width: 10rem; }
.pa-r { font-size: .75rem; color: var(--muted); display: inline-flex; gap: .25rem; align-items: center; } .pa-r.ok { color: var(--ok); font-weight: 700; } .pa-r svg.ic { width: 14px; height: 14px; }
.pa-a { font-size: .85rem; font-weight: 700; display: inline-flex; gap: .25rem; align-items: center; overflow-wrap: anywhere; } .pa-a svg.ic { width: 14px; height: 14px; }
.pa2 .pa-nf { margin: 0; font-size: .75rem; } .pa-up { cursor: pointer; }
.pa-zf { display: flex; gap: .35rem; flex: 1 1 100%; } .pa-zf input { flex: 1; min-width: 0; }
.pa2 .error:empty { display: none; }
.pa-vg { font-size: .85rem; display: inline-flex; gap: .3rem; align-items: center; justify-self: start; } .pa-vg svg.ic { width: 14px; height: 14px; }
/* Projektkopf: Abholung durch Kunde direkt umschalten */
.ph-btn .btn.ph-abk svg.ic { width: 15px; height: 15px; } .ph-btn .btn.ph-abk.an { background: #fac775; border-color: #fac775; color: #412402; font-weight: 800; }
/* Vertrieb: fester Weg – großer „Erledigt → weiter“-Knopf, Ausnahmen klein darunter */
.vt-weiter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; } .vt-weiter .vt-ok { white-space: normal; text-align: left; }
.vt-mehr { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .55rem; } .vt-mehr select { width: auto; flex: 0 1 17rem; min-width: 0; font-size: .85rem; }
.vt-zf { flex-direction: row; flex-wrap: wrap; } .vt-zf input { flex: 2 1 12rem; min-width: 0; } .vt-zf select { flex: 1 1 9rem; width: auto; min-width: 0; }
/* Vorschaubilder: Fotos in Projektordnern und Dateien vom Kunden (Vertrieb) */
.file .icon.thumb { object-fit: cover; padding: 0; cursor: pointer; width: 3rem; height: 3rem; background: var(--chip); }
.vt-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; margin: 0 0 .5rem; }
.vt-bilder figure { margin: 0; position: relative; aspect-ratio: 1; max-width: 100%; border-radius: var(--r); overflow: hidden; background: var(--bg); }
.vt-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-bilder .vt-x { position: absolute; top: 3px; right: 3px; background: rgba(255,255,255,.9); border-radius: var(--r-s); padding: .15rem; }
/* Vertrieb: Büro für die Büro-Schritte (nur Inhaber) */
.vt-bz { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .85rem; color: var(--ink2); margin: 0 0 .7rem; }
.vt-bz svg.ic { width: 16px; height: 16px; color: var(--muted); } .vt-bz select { width: auto; flex: 0 1 14rem; min-width: 0; padding: .3rem .5rem; font-size: .85rem; }
/* Vertrieb: neue Anfrage aus einer Outlook-Mail (hineinziehen) */
.vt-mail { display: flex; gap: .7rem; align-items: center; border: 2px dashed #9cc0e0; background: var(--bg); border-radius: var(--r); padding: .8rem .9rem; cursor: pointer; margin: 0; }
.vt-mail.ueber { border-color: var(--blau); background: var(--blau-hell); } .vt-mail > svg.ic { width: 26px; height: 26px; color: var(--blau); flex: none; }
.vt-mail span { display: flex; flex-direction: column; min-width: 0; } .vt-mail b { color: var(--blau); } .vt-mail small { color: var(--muted); font-size: .75rem; }
.vt-oder { margin: .7rem 0 .3rem; }
.rseite.vt-drop { position: relative; } .rseite.vt-drop::after { content: "Mail hier loslassen – neue Anfrage wird angelegt"; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(227,238,248,.88); border: 3px dashed var(--blau); border-radius: var(--r-l); color: var(--blau); font-weight: 800; font-size: 1.05rem; text-align: center; padding: 1rem; pointer-events: none; }
/* Vertrieb: Tafel wie in Trello – eine Spalte je Schritt, seitlich wischbar, Spalten zuklappbar */
.tafel { display: flex; gap: .55rem; align-items: flex-start; overflow-x: auto; padding-bottom: .6rem; scrollbar-width: thin; }
.tsp { flex: 0 0 272px; background: var(--line); border-radius: var(--r-l); padding: .5rem; display: grid; gap: .45rem; min-width: 0; }
.tsp h4 { margin: .15rem .25rem .1rem; font-size: .85rem; display: flex; gap: .4rem; align-items: center; color: #22303c; }
.tsp-n { flex: 1; min-width: 0; } .tsp h4 b { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; color: var(--muted); }
.tsp-z { border: 0; background: none; cursor: pointer; color: var(--muted); font-weight: 800; padding: .1rem .3rem; border-radius: var(--r-s); font-size: .85rem; } .tsp-z:hover { background: rgba(0,0,0,.06); }
.tsp.zu { flex: 0 0 44px; padding: .5rem .25rem; } .tsp.zu h4 { flex-direction: column; writing-mode: vertical-rl; margin: 0; gap: .5rem; } .tsp.zu .tsp-z { writing-mode: horizontal-tb; }
.tk { display: flex; flex-direction: column; text-align: left; background: #fff; border: 0; border-radius: var(--r); padding: 0; font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 1px rgba(9,30,66,.18); min-width: 0; }
.tk:hover { box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 4px 10px rgba(9,30,66,.12); } .tk.faellig { box-shadow: inset 3px 0 0 var(--danger), 0 1px 1px rgba(9,30,66,.18); }
.tk-bild { width: 100%; height: 130px; object-fit: cover; display: block; background: var(--line); }
.tk-i { display: flex; flex-direction: column; gap: .3rem; padding: .5rem .6rem .45rem; min-width: 0; }
.tk-t { font-size: .85rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; color: var(--blau-dunkel); }
.tk-bad { display: flex; gap: .55rem; flex-wrap: wrap; color: #5e6c84; font-size: .75rem; } .tk-bad i { font-style: normal; display: inline-flex; gap: .2rem; align-items: center; } .tk-bad svg.ic { width: 13px; height: 13px; }
.tk-z { display: flex; flex-direction: column; color: #5e6c84; font-size: .75rem; line-height: 1.45; } .tk-z span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-fu { display: flex; align-items: center; gap: .35rem; margin-top: .1rem; } .tk-fu .vt-av { margin-left: auto; }
.tk-auf { font-size: .75rem; color: var(--ink2); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-fu > i { font-style: normal; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; flex: none; }
/* Tafel nutzt die ganze Bildschirmbreite (wie der Wochenplan); Spalten wachsen mit, bis 340 px */
body:has(.tafel) main { max-width: none; }
.tsp { flex: 1 0 260px; max-width: 340px; } .tsp.zu { flex: 0 0 44px; max-width: 44px; }
.rseite:has(.tafel) { max-width: none; }

/* Vertrieb: Checklisten-Fortschritt auf der Karte, Checkliste im Vorgang, Karten-Freigabe für Mitarbeiter */
.tk-fort { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.tk-fort > span { flex: 1; height: 5px; border-radius: var(--r-s); background: var(--line); overflow: hidden; }
.tk-fort i, .vt-s .tk-fort i { display: block; height: 100%; padding: 0; background: var(--accent, var(--blau)); border-radius: var(--r-s); }
.tk-fort small { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-fort.voll i, .vt-s .tk-fort.voll i { background: var(--ok); }
.tk-fort.voll small { color: var(--ok); font-weight: 600; }
.vt-s .tk-fort { min-width: 90px; margin-top: 0; }
.vt-check { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .15rem; }
.vt-check li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .2rem 0; border-top: 1px solid var(--bg); }
.vt-check li:first-child { border-top: 0; }
.vt-check label.inline { margin: 0; align-items: flex-start; }
.vt-check input:checked + span { color: var(--muted); text-decoration: line-through; }
.vt-check small { color: var(--muted); font-size: .75rem; }
.vt-zug { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; font-size: .95rem; }
.vt-zug select { width: auto; max-width: 100%; padding: .3rem .5rem; font-size: .85rem; }
.vt-chip { display: inline-flex; align-items: center; gap: .2rem; background: var(--gruen-h); color: #27500a; border-radius: 999px; padding: .1rem .2rem .1rem .6rem; font-size: .85rem; }
.vt-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .35rem; color: inherit; border-radius: 999px; }
.vt-chip button:hover { background: rgba(0,0,0,.08); }
.vt-wer { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }

/* Projekt-Ablauf: Tafel (Spalte je Schritt, Warten grau gestrichelt) und Weg-Leiste in der Akte */
a.tk { text-decoration: none; }
.tsp.tsp-w { background: var(--bg); outline: 1.5px dashed var(--line-stark); outline-offset: -1.5px; }
.tsp.tsp-w h4 { color: var(--muted); }
.pw-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.pw-kopf label.inline { margin: 0; font-weight: 600; }
.tk-fu .ep { font-size: .75rem; padding: .1rem .45rem; }
.pw-l { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .6rem; padding: 0; }
.pw-l li { font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid transparent; white-space: nowrap; }
.pw-l li.w { background: transparent; border: 1px dashed var(--line-stark); }
.pw-l li.f { background: var(--gruen-h); color: var(--ok); }
.pw-l li.f.w { border-color: #b7dcc4; }
.pw-l li.a { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); }
.pw .rab-dran { margin-bottom: .6rem; }
.pw-fertig { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pw-ok { margin: 0; color: var(--ok); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }
.pw .vt-mehr .pa-sel { max-width: 100%; }
/* Tafel mit der Maus seitlich schieben */
.tafel { cursor: grab; } .tafel.schiebt { cursor: grabbing; user-select: none; } .tafel .tk, .tafel .tsp-z { cursor: pointer; }
/* Startseite: Projekt-Aufgaben, die beim Mitarbeiter liegen (z. B. Zeichnen) */
.pw-start { background: var(--orange-h); border-radius: var(--r-l); padding: .8rem 1rem; margin: 0 0 1rem; }
.pw-start h2 { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; }
.pw-start h2 b { background: #fff; border-radius: 999px; padding: 0 .55rem; font-size: .85rem; }
.pw-sz { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: var(--r); padding: .6rem .8rem; text-decoration: none; color: inherit; margin-top: .4rem; }
.pw-sz > span:first-child { flex: 1; min-width: 0; display: grid; } .pw-sz b { overflow-wrap: anywhere; } .pw-sz small { color: var(--muted); overflow-wrap: anywhere; }
.pw-pf { font-size: 1.45rem; color: var(--muted); }

/* Projekt-Tafel farbig: Phase je Spalte (--pf), Symbol im Kopf, Karten mit Farbstreifen und Titelbild */
.ptafel .tsp { background: color-mix(in srgb, var(--pf) 9%, var(--bg)); border-top: 4px solid var(--pf); border-radius: var(--r) var(--r) var(--r-l) var(--r-l); }
.ptafel .tsp.tsp-w { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pf) 6%, var(--bg)) 0 10px, color-mix(in srgb, var(--pf) 11%, var(--bg)) 10px 20px); outline: 1.5px dashed color-mix(in srgb, var(--pf) 45%, #fff); outline-offset: -1.5px; border-top-style: dashed; }
.ptafel .tsp h4 { color: #1d2a36; align-items: center; }
.ptafel .tsp h4 .tsp-n { display: grid; line-height: 1.2; }
.ptafel .tsp h4 .tsp-n small { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pf); }
.ptafel .tsp h4 b { background: var(--pf); color: #fff; }
.pw-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pf); color: #fff; }
.pw-ic svg.ic { width: 15px; height: 15px; }
.ptafel .tsp.zu h4 .pw-ic, .ptafel .tsp.zu h4 small { display: none; }
.ptafel .tk.pk { flex-direction: column; align-items: stretch; border-left: 4px solid var(--pf); box-shadow: 0 1px 2px rgba(0,30,60,.08); transition: transform .12s, box-shadow .12s; }
.ptafel .tk.pk:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,30,60,.13); }
.ptafel .tk.pk.faellig { border-left-color: var(--danger); }
.ptafel .tk.pk .tk-bild { height: 92px; }
.pk-nr { align-self: flex-start; font-size: .75rem; font-weight: 800; color: var(--pf); background: color-mix(in srgb, var(--pf) 12%, #fff); border-radius: var(--r-s); padding: .05rem .4rem; margin-bottom: .15rem; }
.ptafel .tk-t { font-size: .85rem; }
.pw-ich { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; cursor: pointer; margin: 0; }
.pw-ich input { width: auto; margin: 0; } .pw-ich svg.ic { width: 15px; height: 15px; color: var(--accent); }
.pw-ich b { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
.pw-ich.an { background: var(--accent); color: #fff; border-color: var(--accent); } .pw-ich.an svg.ic { color: #fff; } .pw-ich.an b { background: #fff; color: var(--accent); }
.pw-leg { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .75rem; color: var(--ink2); }
.pw-leg i { font-style: normal; display: inline-flex; align-items: center; gap: .3rem; }
.pw-leg i::before { content: ''; width: 10px; height: 10px; border-radius: var(--r-s); background: var(--pf); }
.pw-leg i.w::before { display: none; } .pw-leg i.w svg.ic { width: 13px; height: 13px; }

/* Projektkarte mit Ablauf: Farbstreifen der Phase, Zeile „… ist dran“, Monteure beschriftet */
.pc.pcw { border-left: 5px solid var(--pf); }
.pc.pcw.faellig { border-left-color: var(--danger); }
.pc.pcw h3 { padding-right: 0; }
.pc-dran { display: flex; align-items: center; gap: .5rem; background: color-mix(in srgb, var(--pf) 8%, var(--bg)); border-radius: var(--r); padding: .4rem .55rem; margin-top: .6rem; font-size: .85rem; min-width: 0; }
.pc-dran > span:not(.vt-av) { flex: 1; min-width: 0; display: grid; } .pc-dran b { font-weight: 800; }
.pc-dran small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.pc-dran i { font-style: normal; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; }
.pc-dran .ep { flex: 0 0 auto; }
.pc .tags .pc-mo { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
.pc-mo i { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-style: normal; font-size: .75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-left: -4px; border: 2px solid #fff; }
.pc.pcw .stz { float: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin: .45rem 0 0; }
/* Projektleitung: Schild auf der Karte, Auswahl neben Karten/Ablauf */
.pc .tags .pc-pl { background: var(--gelb-h); color: var(--gelb); font-weight: 700; }
.ansicht select#pleitung { width: auto; max-width: 100%; padding: .3rem .5rem; font-size: .85rem; margin-right: .3rem; }

/* Projektakte: Ablauf-Block in den Farben der Tafel */
.pw .pw-l { gap: .3rem; margin-bottom: .7rem; }
.pw .pw-l li { display: inline-flex; align-items: center; gap: .3rem; background: color-mix(in srgb, var(--pf) 7%, var(--bg)); color: var(--muted); border: 1px solid transparent; }
.pw .pw-l li.w { background: transparent; border: 1px dashed color-mix(in srgb, var(--pf) 45%, #fff); }
.pw .pw-l li.f { background: color-mix(in srgb, var(--pf) 16%, #fff); color: color-mix(in srgb, var(--pf) 80%, #000); border-color: transparent; }
.pw .pw-l li.f svg.ic { width: 12px; height: 12px; stroke-width: 3; }
.pw .pw-l li.a { background: var(--pf); color: #fff; border-color: var(--pf); box-shadow: 0 2px 6px color-mix(in srgb, var(--pf) 40%, transparent); }
.pw .pw-l li.a svg.ic { width: 14px; height: 14px; }
.pw-dran { background: #fff; border-radius: var(--r-l); border-left: 6px solid var(--pf); padding: .85rem 1rem; box-shadow: 0 1px 2px rgba(0,30,60,.06), 0 6px 18px rgba(0,30,60,.06); margin-bottom: .7rem; }
.pw-dran.ich { background: color-mix(in srgb, var(--pf) 6%, #fff); }
.pw-dran.faellig { border-left-color: var(--danger); }
.pw-dk { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pw-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; }
.pw-dt { flex: 1 1 220px; min-width: 0; display: grid; gap: .05rem; }
.pw-dt small { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pf); }
.pw-dt b { font-size: 1.2rem; overflow-wrap: anywhere; }
.pw-dt span { color: var(--muted); font-size: .85rem; }
.pw-db { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pw-db .rab-k { margin: 0; } .pw-db .vt-ok { margin: 0; }
.pw-db .rab-zf { flex: 1 1 100%; }
.pw-dran .vt-wv { margin-top: .7rem; }
.pw-fuss { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; margin-top: .6rem; }
.pw-spr { width: auto; max-width: 100%; font-size: .85rem; padding: .3rem .5rem; color: var(--muted); background: var(--bg); border-color: transparent; }
.pw-auftrag { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; background: #fff; border-radius: var(--r-l); padding: .6rem .75rem; box-shadow: 0 1px 2px rgba(0,30,60,.06); margin-bottom: .6rem; }
.pw-auftrag .pa-l { margin-right: .2rem; }
.pw-pill { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); padding: .3rem .7rem .3rem .55rem; font: inherit; font-weight: 700; font-size: .85rem; color: var(--ink2); cursor: pointer; text-align: left; margin: 0; min-width: 0; }
.pw-pill > span { display: grid; line-height: 1.15; min-width: 0; }
.pw-pill small { font-size: .75rem; font-weight: 700; color: var(--muted); }
.pw-pill svg.ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted-hell); }
.pw-pill.an { background: var(--gruen-h); border-color: #b7dcc4; color: var(--ok); } .pw-pill.an svg.ic { color: var(--ok); }
.pw-pill.pw-sel { cursor: default; } .pw-pill.pw-sel svg.ic { color: var(--accent); }
.pw-pill select { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: #1d2a36; width: auto; max-width: 100%; cursor: pointer; }
.pw-pill input { border: 0; background: transparent; padding: 0; font: inherit; font-size: 1rem; font-weight: 700; color: #1d2a36; width: 7.5rem; max-width: 100%; height: 44px; }
.pw-auftrag .pw-pill b { display: flex; align-items: center; min-height: 44px; font-size: 1rem; color: #1d2a36; }
/* eingeklappte Spalten der Projekt-Tafel: Name senkrecht, Zahl darüber */
.ptafel .tsp.zu { padding: .45rem .2rem; }
.tafel .tsp.zu h4 { flex-direction: row; writing-mode: vertical-rl; align-items: center; gap: .45rem; margin: 0; } /* senkrechte Schrift: „row“ = untereinander */
.tafel .tsp.zu h4 b { writing-mode: horizontal-tb; } .tafel .tsp.zu .tsp-z { writing-mode: horizontal-tb; order: -1; }
.ptafel .tsp.zu h4 .tsp-n { display: block; flex: 0 0 auto; white-space: nowrap; font-size: .85rem; }
.ptafel .tsp.zu h4 b { writing-mode: horizontal-tb; padding: 0 .4rem; }
.ptafel .tsp.zu h4 .tsp-z { order: -1; }

/* Vertrieb im gleichen Stil wie Projekte: Umschalter Karten/Ablauf/Erledigt, Karten als Knopf */
.ansicht a { display: inline-flex; gap: .3rem; align-items: center; padding: .4rem .8rem; border-radius: var(--r); font-weight: 700; font-size: .85rem; color: var(--muted); text-decoration: none; }
.ansicht a.an { background: #fff; color: var(--blau); box-shadow: 0 1px 3px rgba(0,30,60,.12); }
.vt-kopf .ansicht { margin-bottom: 0; }
button.pc { border: 0; text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; }
button.pc .tk-fort { margin-top: .5rem; }
.rab.vt .pw-l { margin-top: .2rem; }
.rab.vt .pw-dran .vt-check, .rab.vt .pw-dran .vt-mehr, .rab.vt .pw-dran .vt-zug, .rab.vt .pw-dran .vt-wv { margin-top: .7rem; }
@media (max-width: 767px) { .ansicht a.vt-nurpc { display: none; } }
/* Auswahl „Wer ist dran“ als Pille (Projekte und Vertrieb) */
.pw-ich select { border: 0; background: transparent; padding: 0 .2rem; font: inherit; font-weight: 700; color: inherit; width: auto; max-width: 100%; cursor: pointer; }
.pw-ich.an select option { color: #1d2a36; }
.ansicht .pw-ich, .vt-kopf .pw-ich { margin-right: .4rem; padding: .25rem .7rem; }
.vt-kopf { flex-wrap: wrap; gap: .5rem; }
/* Vertrieb: Filter Projektleitung neben „Wer ist dran“ */
.pw-lsel { width: auto; max-width: 100%; padding: .35rem .6rem; font-size: .85rem; border-radius: 999px; }
/* Neue Anfrage: Kunde und Grundlage; Schalter „Grundlage“ rot umrandet, solange nichts gewählt ist */
.vt-wahl { display: grid; gap: .2rem; margin: 0; } .vt-wahl label.inline { margin: 0; }
.pw-pill.fehlt { border-color: #f0a29b; background: var(--rot-h); } .pw-pill.fehlt small { color: var(--danger); }

/* Aufmaßprotokolle im Vertrieb (Auswahl in der Karte, Formular zum Ausfüllen) */
.vt-am { border: 1px solid var(--line); border-left: 4px solid #0f8a73; border-radius: var(--r); padding: .7rem .8rem; margin: 0 0 .9rem; min-width: 0; }
.vt-am h3 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .4rem; } .vt-am h3 svg.ic { width: 18px; height: 18px; color: #0f8a73; }
.am-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .3rem .9rem; }
.am-w { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .1rem; border-bottom: 1px solid var(--bg); min-width: 0; }
.am-w label.inline { margin: 0; min-width: 0; }
.am-leer { font-size: .75rem; color: var(--muted); white-space: nowrap; flex: none; }
.am-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.am-l li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .45rem 0; border-top: 1px solid var(--bg); }
.am-l li:first-child { border-top: 0; }
.am-t { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .6rem; flex: 1 1 14rem; min-width: 0; }
.am-t small { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; }
.am-bar { height: 6px; border-radius: var(--r-s); background: var(--line); overflow: hidden; max-width: 9rem; } .am-bar i { display: block; height: 100%; background: #0f8a73; }
.am-alt { color: var(--gelb); font-style: normal; }
.am-k { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.am-form { min-width: 0; }
.am-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .4rem; }
.am-kopf small { color: var(--muted); font-size: .75rem; } .am-kopf h2 { margin: 0; font-size: 1.2rem; }
.am-st { font-size: .75rem; color: var(--ok); background: var(--gruen-h); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; flex: none; } .am-st.rot { color: var(--danger); background: var(--rot-h); }
.am-ab { margin: .7rem 0 0; }
.am-ab h3 { margin: 0 0 .45rem; padding: .35rem .6rem; background: var(--blau); color: #fff; border-radius: var(--r-s); font-size: .95rem; }
.am-ab:last-child h3 { background: var(--blau-hell); color: var(--blau); }
.am-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .55rem .9rem; }
.am-g > label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--ink2); min-width: 0; margin: 0; }
.am-g .am-voll { grid-column: 1 / -1; }
.am-z { display: flex; align-items: center; gap: .3rem; } .am-z input { flex: 1; min-width: 0; } .am-z i { font-style: normal; color: var(--muted); font-size: .85rem; min-width: 1.6rem; }
.am-h { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--muted); font-style: italic; }
.am-chips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.am-chips legend { font-size: .85rem; color: var(--ink2); padding: 0; margin-bottom: .3rem; width: 100%; } .am-chips legend small { color: var(--muted); }
.am-chips label { margin: 0; cursor: pointer; }
.am-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.am-chips span { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: #fff; line-height: 1.2; }
.am-chips input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; }
.am-chips input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.am-fuss { position: sticky; bottom: -1.1rem; background: #fff; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .7rem 0 .2rem; margin-top: .8rem; border-top: 1px solid var(--line); }
.am-sp { flex: 1; }
@media (max-width: 767px) { .am-fuss { bottom: calc(-1rem - env(safe-area-inset-bottom, 0px)); } .am-fuss .btn { flex: 1 1 auto; } .am-sp { display: none; } }
.am-t small .am-leer { font-size: inherit; }
.vt-preis { margin: 0 .4rem 0 0; font-weight: 600; }

.am-chips input.am-sx { position: static; opacity: 1; width: 100%; height: auto; flex: 1 1 100%; margin-top: .2rem; }
.am-name { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--ink2); margin: .2rem 0 .3rem; }

/* Nachfassen: Fahrplan mit Telefonskript und Mailvorschlag */
.nf { margin-top: .7rem; }
.nf-l { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.nf-l li { display: flex; align-items: center; gap: .3rem; font-size: .75rem; padding: .25rem .6rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.nf-l li.f { color: #6b4a2b; background: var(--orange-h); border-color: #f2c9b0; } .nf-l li.a { color: #fff; background: var(--orange); border-color: var(--orange); font-weight: 600; }
.nf-l svg.ic { width: 14px; height: 14px; }
.nf-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .7rem; }
.nf-2 section { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem; min-width: 0; }
.nf-2 h4 { margin: 0 0 .35rem; font-size: .95rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .nf-2 h4 small { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.nf-2 ul { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .85rem; } .nf-2 li { margin: .15rem 0; }
.nf-2 input { width: 100%; margin-bottom: .4rem; }
.nf-mail { white-space: pre-line; font-size: .85rem; line-height: 1.45; background: var(--bg); border-radius: var(--r); padding: .5rem .6rem; margin-bottom: .4rem; overflow-wrap: anywhere; }
.nf-fertig { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; }
.nf-l li button { all: unset; display: flex; align-items: center; gap: .3rem; cursor: pointer; } .nf-l li:has(button):hover { border-color: var(--orange); }
.nf-l li button:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 999px; }

/* Kachel „Auftrag“ in der Projektakte: Angebot und Infos aus dem Vertrieb */
.pa-auf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: .8rem; margin-top: .6rem; }
.pa-auf section { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .85rem; min-width: 0; }
.pa-auf .pa-voll { grid-column: 1 / -1; }
.pa-auf h3 { margin: 0 0 .45rem; font-size: .95rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .pa-auf h3 small { color: var(--muted); font-weight: 400; }
.pa-auf h3 svg.ic { width: 17px; height: 17px; color: var(--accent); }
.pa-auf p { margin: 0 0 .3rem; font-size: .95rem; overflow-wrap: anywhere; } .pa-auf .pa-txt { white-space: pre-line; color: var(--ink2); }
.pa-dl { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.pa-dl li { display: flex; align-items: center; gap: .4rem; min-width: 0; flex-wrap: wrap; } .pa-dl li a, .pa-dl li span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .pa-dl small { color: var(--muted); font-size: .75rem; }
.pa-dl svg.ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.pa-bi { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; margin-bottom: .5rem; }
.pa-bi img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; background: var(--bg); }
.pa-no { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .85rem; } .pa-no li { overflow-wrap: anywhere; } .pa-no small { color: var(--muted); }
.pa-auf .pa-vg { grid-column: 1 / -1; }
.pa-dl li small { flex-basis: 100%; padding-left: 1.35rem; margin-top: -.15rem; } .pa-dl li a, .pa-dl li span { overflow-wrap: break-word; }

/* Projekt-Schritt „Freigabe an den Kunden senden“: Freigabepläne und Mail */
.pa-fg { display: grid; gap: .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid rgba(0,0,0,.07); }
.pa-fg > .btn { justify-self: start; }
.pa-fgl { display: grid; gap: .25rem; font-size: .95rem; } .pa-fgl label.inline { margin: 0; min-width: 0; } .pa-fgl a { overflow-wrap: anywhere; }
.pa-drop { display: block; border: 1.5px dashed var(--line-stark); border-radius: var(--r); padding: .6rem .8rem; text-align: center; cursor: pointer; font-size: .95rem; color: var(--ink2); background: #fff; }
.pa-drop small { display: block; color: var(--muted); font-size: .75rem; } .pa-drop.an { border-color: var(--accent); background: var(--accent-soft); }
.pa-drop svg.ic { width: 15px; height: 15px; vertical-align: -2px; }
.pa-drop > span { display: inline-flex; align-items: center; gap: .3rem; }
.pa-fg .rab-k { margin-top: .2rem; }

/* Kachel Pläne: Werkpläne und Freigabe / Übersichten */
.pl-ber { margin: 0 0 1rem; } .pl-ber h3 { margin: 0 0 .4rem; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; } .pl-ber h3 small { color: var(--muted); font-weight: 400; font-size: .85rem; }
.pl-ber .pl-dz { padding: .7rem; margin-bottom: .5rem; }

.pa-sperre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: .7rem; padding: .55rem .7rem; border-radius: var(--r); background: var(--orange-h); border: 1px solid #f3c98b; font-size: .85rem; color: #6b4300; }
.pa-sperre span { flex: 1 1 14rem; min-width: 0; } .pa-sperre svg.ic { width: 17px; height: 17px; color: var(--orange-d); flex: none; }
.ck-warn { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .55rem; padding: .45rem .6rem; border-radius: var(--r); background: var(--rot-h); color: var(--danger); font-weight: 700; font-size: .95rem; } .ck-warn svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* =====================================================================================
   Einheitliche Optik (30.10.2026): feste Farben, drei Rundungen, ein Knopf-System,
   fingergerechte Größen am Handy, volle Breite auf großen Bildschirmen.
   Nur Aussehen – an Abläufen ändert sich nichts.
   ===================================================================================== */
:root {
  --blau-mittel: #0a5a96; --line-stark: #c9d4df; --muted: #5b6670; --muted-hell: #9aa4ad;
  --gelb: #8a5300; --card: #fff;
  --r-s: 6px; --r: 10px; --r-l: 16px; --radius: var(--r-l);
  --knopf-h: 40px; --knopf-h-klein: 32px;
}
@media (max-width: 767px), (pointer: coarse) { :root { --knopf-h: 44px; --knopf-h-klein: 40px; } }

/* Knöpfe: Normal (weiß), Haupt (blau), Gefahr (rot), Gut (grün); klein und groß */
.btn { min-height: var(--knopf-h); padding: .35rem 1rem; border-radius: var(--r); font-size: .95rem; font-weight: 600; line-height: 1.2;
  justify-content: center; gap: .4rem; border: 1px solid var(--line-stark); background: #fff; color: var(--ink); box-shadow: none; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover { border-color: var(--muted-hell); }
.btn.primary { background: var(--blau); border-color: var(--blau); color: #fff; box-shadow: 0 1px 3px rgba(0,64,112,.25); }
.btn.primary:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.btn.danger { color: var(--danger); border-color: #e5b9b5; }
.btn.danger:hover { background: var(--rot-h); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ok:hover { filter: brightness(.94); }
.btn.small { min-height: var(--knopf-h-klein); padding: .2rem .7rem; font-size: .85rem; }
.btn.big { min-height: 48px; padding: .5rem 1.4rem; font-size: 1.05rem; }
.btn svg.ic { width: 17px; height: 17px; }
.btn.small svg.ic { width: 15px; height: 15px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--blau-mittel); outline-offset: 2px; }

/* Eingabefelder: gleiche Höhe und Ecken wie die Knöpfe */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select) { min-height: var(--knopf-h); }
input, select, textarea { border-radius: var(--r); }

/* Karten, Fenster, Hinweise: gleiche Ecken */
.card, .empty, .modal .box, .lf { border-radius: var(--r-l); }
.chip, .badge { border-radius: 999px; }
.lf-k .btn { min-height: 44px; }
.lf-k .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Große Bildschirme: Platz nutzen. Listen, Tafeln und Pläne volle Breite, Masken bleiben lesbar */
@media (min-width: 1200px) {
  main { max-width: 1600px; }
  body[data-seite="konto"] main, body[data-seite="bericht"] main { max-width: 1100px; }
  .bseite, .mseite, .rseite, .useite { max-width: none; }
  .auf-kopf, .auf-liste { max-width: 1100px; }
}

/* Umschalter (z. B. Heute | Monat, Karten | Ablauf, Offen | Erledigt): überall gleiche graue Leiste, aktiver Teil weiß */
.seg, .ansicht, .tauf-f { display: inline-flex; gap: 2px; background: var(--line); border: 0; border-radius: var(--r); padding: 3px; overflow: auto; max-width: 100%; scrollbar-width: none; }
.seg button, .ansicht button, .tauf-f button { min-height: calc(var(--knopf-h-klein) - 2px); display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding: 0 .8rem; border: 0; border-radius: calc(var(--r) - 3px); background: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink2); cursor: pointer; white-space: nowrap; box-shadow: none; }
.seg button.on, .ansicht button.an, .tauf-f button.an { background: #fff; color: var(--blau); box-shadow: 0 1px 3px rgba(0,30,60,.12); }

/* Filter-Schilder (rund): gleiche Höhe überall */
.chips2 button, .rort-f button, .mo-f button, .bh-k a, .bh-k button { min-height: var(--knopf-h-klein); display: inline-flex; align-items: center; gap: .3rem; padding: 0 .85rem; font-size: .85rem; font-weight: 600; border-radius: 999px; }

/* Kleine Symbol-Knöpfe (×, Papierkorb, +): am Handy/Tablet groß genug für den Finger */
@media (max-width: 767px), (pointer: coarse) {
  .tdel, .mdx, .tsp-z, .mo-neu { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .prow .padd { min-height: 36px; }
}
@media (max-width: 600px) { .seg.katseg { background: none; padding: 0; gap: .4rem; } .seg.katseg button { border-radius: 999px; } }

/* Fenster am Handy: Knöpfe unten gleich breit, Hauptknopf unten */
@media (max-width: 600px) {
  .modal .spread > .btn:not(.small), .modal .spread > .row:has(> .btn:not(.small)) { flex: 1 1 100%; }
  .modal .spread > .row:has(> .btn:not(.small)) { flex-wrap: nowrap; }
  .modal .spread > .row > .btn:not(.small) { flex: 1 1 0; }
  .modal .spread > .btn.danger:not(.small) { order: 2; }
}

/* Für die Monteure (Projektseite), eine Akte, Hinweis „Baustelle fehlt“ */
.pang { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem 1rem; margin: 0 0 1rem; }
.pang-k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .8rem; margin-bottom: .5rem; }
.pang-k h3 { margin: 0; font-size: 1rem; }
.pang-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.pang-f label { font-size: .85rem; min-width: 0; }
.pang-f textarea { width: 100%; resize: vertical; }
.pang-a { display: flex; justify-content: flex-end; margin-top: .5rem; }
.pang-l { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .8rem; margin: 0; font-size: .9rem; }
.pang-l dt { color: var(--muted); }
.pang-l dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .pang-f { grid-template-columns: minmax(0, 1fr); } .pang-l { grid-template-columns: minmax(0, 1fr); } .pang-l dd { margin-bottom: .3rem; } }
.pfbau { background: var(--orange-h); border-radius: var(--r-s); padding: .55rem .7rem; font-size: .88rem; display: grid; gap: .4rem; }
.pfbau b { color: var(--orange-d); }
.pfbau-z { display: flex; gap: .4rem; }
.pfbau-z input { flex: 1; min-width: 0; }
.akte-tab { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.akte-tab .ak-verlauf { overflow: visible; }
.akte-tab > .ak-bl, .akte-tab > .tra, .akte-tab > #akber, .akte-tab > .ak-filter { margin-left: 1.1rem; margin-right: 1.1rem; }
.ak-proj { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; padding: .5rem 1.1rem; font-size: .88rem; border-bottom: 1px solid var(--line); }
.ak-proj svg.ic { width: 16px; height: 16px; color: var(--muted); }
.ak-filter { padding: .5rem 1.1rem 0; }
.akte-tab > .ak-filter { padding-left: 0; padding-right: 0; margin-top: .6rem; }
.ak-verlauf.nurfragen > .ak-e2:not(.offen), .ak-verlauf.nurfragen > .ak-leer { display: none; }
.ak-fb { display: inline-block; font-size: .72rem; padding: .05rem .4rem; border-radius: var(--r-s); background: var(--orange-h); color: var(--orange-d); font-weight: 700; }
.ak-fb.erl { background: var(--gruen-h); color: var(--ok); }
.ak-fa { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; }
.ak-antw { margin-top: .55rem; }
.ak-antw .ak-av { width: 24px; height: 24px; font-size: .65rem; }
@media (max-width: 420px) { .ak-zeile2 { flex-wrap: wrap; } .ak-zeile2 textarea { order: -1; flex: 1 1 100%; } .ak-zeile2 .ak-send { margin-left: auto; } }

/* Mitarbeitergespräche */
.gs-liste { padding: .3rem 1rem; }
.gs-z { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.gs-z:first-child { border-top: 0; }
.gs-z small { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.gs-pf { color: var(--muted); font-size: 1.3rem; }
.gs-tf label { display: block; font-size: .85rem; font-weight: 700; }
.gs-tf input, .gs-tf textarea { font-weight: 400; margin-top: .2rem; }
.gs-tf textarea { font-size: .9rem; resize: vertical; }
.gs-tg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .6rem; }
.gs-tl { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
.gs-tv { border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .7rem; max-height: 22rem; overflow-y: auto; }
.gs-v { padding: .4rem 0; border-top: 1px solid var(--line); }
.gs-v:first-child { border-top: 0; padding-top: 0; }
.gs-v b { display: block; margin-bottom: .2rem; }
.gs-v .gs-hin { margin: 0 0 .25rem; font-size: .8rem; }
.gs-vs { margin: 0 0 .25rem; padding: .25rem .5rem; background: var(--bg); border-radius: var(--r-s); font-size: .85rem; }
.gs-vz { display: inline-block; margin: 0 .25rem .25rem 0; padding: .2rem .5rem; border: 1px dashed var(--line-stark); border-radius: var(--r-s); font-size: .8rem; color: var(--ink2); }
.gs-kopf { gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.gs-kopf label { display: grid; gap: .15rem; font-size: .8rem; }
.gs-kopf input { width: auto; color: #1d2a36; }
.gs-s { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.gs-s button { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: .4rem .7rem; font: inherit; font-size: .85rem; color: var(--ink2); cursor: pointer; min-height: 40px; }
.gs-s button.an { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 700; }
.gs-k h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.gs-k h2 small { font-size: .85rem; font-weight: 400; }
.gs-hin { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.gs-satz { margin: 0 0 .5rem; padding: .5rem .75rem; background: var(--bg); border-radius: var(--r); font-size: 1rem; line-height: 1.45; }
.gs-nl { display: block; margin-top: .9rem; font-weight: 700; font-size: .9rem; }
.gs-nl textarea { width: 100%; margin-top: .25rem; resize: vertical; font-weight: 400; font-size: 1rem; }
.gs-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.gs-sp { flex: 1 1 auto; }
#gsSt.rot { color: var(--danger); }
.gs-davor { margin-bottom: .8rem; display: grid; gap: .4rem; }
.gs-davor h3 { margin: 0; font-size: 1rem; }
.gs-ziele h3 { margin: .3rem 0 .4rem; font-size: 1rem; }
.gs-ziel { display: grid; grid-template-columns: minmax(0, 1fr) 9rem auto; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.gs-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.gs-chip { border: 1px dashed var(--line-stark); background: transparent; border-radius: var(--r); padding: .4rem .65rem; font: inherit; font-size: .85rem; color: var(--ink2); cursor: pointer; text-align: left; min-height: 40px; }
.gs-chip:hover { background: var(--bg); }
.gs-folge { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .6rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.gs-folge label { display: grid; gap: .15rem; font-size: .85rem; }
.gs-folge input { width: auto; }
.gs-zfl { padding-left: 1.3rem; margin: .4rem 0 .8rem; display: grid; gap: .3rem; }
.gs-sigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .6rem 0; }
.gs-sigs small { display: block; margin-bottom: .2rem; color: var(--muted); }
@media (max-width: 700px) { .gs-ziel { grid-template-columns: minmax(0, 1fr); } .gs-sigs { grid-template-columns: minmax(0, 1fr); } .gs-tg { grid-template-columns: minmax(0, 1fr); } .gs-kopf input { width: 100%; } }

/* Vertrieb: heute anrufen = roter Rahmen, Anruf erst später = zurückhaltend */
.ptafel .tk.pk.vt-heute, .pc.pcw.vt-heute { box-shadow: 0 0 0 1.5px var(--danger), 0 1px 2px rgba(0,30,60,.08); }
.ptafel .tk.pk.vt-ruht, .pc.pcw.vt-ruht { background: var(--bg); }
.ziehen-an .tafel { align-items: stretch; } /* beim Ziehen: Spalten so hoch wie die längste */
.ziehen-an .tafel .tsp { align-content: flex-start; justify-content: flex-start; }

/* eigene Glocke je Bereich (Vertrieb, Projekte, Reparaturen) und offene Fragen auf der Startseite */
.bglocke { display: inline-grid; vertical-align: middle; margin-left: .5rem; width: 2.2rem; height: 2.2rem; }
.bpop-halter { position: relative; height: 0; z-index: 30; }
.bpop-halter .tmeldpop { top: -.6rem; left: 0; right: auto; width: min(26rem, 100%); }
.tmeldpop.tmodal { position: static; box-shadow: none; padding: 0; max-height: 70vh; margin-bottom: .6rem; }
a.tauf.tfrage { color: inherit; text-decoration: none; }

/* „Frage an …“: Frage-Vorgang an einer Karte */
.fr-box { display: grid; gap: .5rem; margin: .5rem 0 .7rem; }
.fr-f { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; min-width: 0; }
.fr-f.ich { border: 1.5px solid var(--orange); background: color-mix(in srgb, var(--orange) 5%, #fff); }
.fr-k { display: flex; gap: .4rem; align-items: center; font-size: .9rem; overflow-wrap: anywhere; }
.fr-f.ich .fr-k { color: var(--orange); }
.fr-l { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.fr-b { background: var(--bg); border-radius: var(--r); padding: .4rem .6rem; font-size: .92rem; overflow-wrap: anywhere; }
.fr-b.ich { background: var(--blau-hell); }
.fr-b small { display: block; color: var(--muted); font-size: .75rem; }
.fr-ab { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.fr-neu { display: flex; justify-content: flex-end; }
.fr-box .rab-zf { margin-top: .5rem; }
.fr-mk { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: .1rem .5rem; margin-bottom: .25rem; align-self: flex-start; max-width: 100%; }
.fr-mk.ich { color: #fff; background: var(--orange); }
.fr-mk svg.ic { width: 12px; height: 12px; }
.tfrage .fr-mk { margin-right: .4rem; }
.pa-dl .vt-dx { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: .15rem .3rem; }
.pa-dl .vt-dx:hover { color: var(--danger); }

/* Startseite oben: Stempelkarte schmal, daneben die Liste „Für dich offen“ (statt Schildern und Zahlenkacheln) */
.st-oben { display: flex; flex-direction: column; gap: .9rem; margin: -3.2rem 0 .9rem; position: relative; z-index: 2; }
.st-rechts { display: contents; }
@media (max-width: 767px) { #zeitstart { order: 1; } #heute { order: 2; } #meineweg { order: 3; } .st-offen { order: 4; } }
.st-oben .card, .st-oben .zt { margin: 0; }
.st-oben [id]:empty { display: none; }
@media (min-width: 768px) {
  .st-oben { display: grid; grid-template-columns: minmax(300px, 348px) minmax(0, 1fr); align-items: start; }
  .st-rechts { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
}
.st-offen { padding: 1rem 1.1rem .4rem; }
.st-offen:not(:has(.sk)) { display: none; }
.st-offen h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--ink); }
.st-zeilen { display: flex; flex-direction: column; }
.st-zeilen > div, .st-zeilen .sks { display: contents; }
.st-zeilen .sk { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 48px; padding: .3rem 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; order: 8; }
.st-zeilen .sk::after { content: ''; width: 7px; height: 7px; border-top: 2px solid var(--line-stark); border-right: 2px solid var(--line-stark); transform: rotate(45deg); margin-right: .25rem; }
.st-zeilen .sk .sk-i { display: none; }
.st-zeilen .sk b { font-size: 1.2rem; font-weight: 800; color: var(--blau-dunkel); font-variant-numeric: tabular-nums; }
.st-zeilen .sk span:last-of-type { font-size: .95rem; font-weight: 600; color: var(--ink); }
.st-zeilen .sk.warn { order: 1; background: none; } .st-zeilen .sk.warn b { color: var(--danger); }
.st-zeilen .sk[href="#/betrieb"] { order: 2; }
.st-zeilen .sk[href="#/projekte/s5"] { order: 3; }
.st-zeilen .sk[href="#/reparaturen/bestellungen"] { order: 4; }
.st-zeilen .sk[href="#/admin"] { order: 9; }
.st-zeilen .sk:hover span:last-of-type { color: var(--blau-mittel); }
.zt .zt-arten { grid-template-columns: 1fr 1fr; gap: .4rem; }
.zt .zt-arten span { flex-direction: row; justify-content: flex-start; gap: .45rem; min-height: 44px; padding: .3rem .6rem; border: 1px solid var(--line); background: #fff; border-radius: var(--r); font-size: .85rem; text-align: left; }
.zt .zt-arten span svg.ic { width: 18px; height: 18px; color: var(--muted); }
.zt .zt-arten input:checked + span svg.ic { color: var(--blau); }
#cockpit .ck-k h2 .muted { font-weight: 400; }

/* Tage ohne Arbeitsunfall: im Begrüßungskopf */
.sh-unfall { position: relative; display: flex; align-items: center; gap: .6rem; margin-top: .55rem; z-index: 1; }
.sh-unfall b { font-size: 1.45rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sh-unfall span { font-size: .85rem; font-weight: 600; line-height: 1.25; }
.sh-unfall small { display: none; font-size: .75rem; font-weight: 500; opacity: .75; }
@media (min-width: 768px) {
  .sh-unfall { position: absolute; top: 1.3rem; right: 1.4rem; margin: 0; text-align: left; }
  .sh-unfall b { font-size: 1.75rem; }
  .sh-unfall small { display: block; }
}

/* Konto → Portal-Version (nur Inhaber): Update über das Portal */
.up .bn-z .btn { flex: none; }
.up-info { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; margin: .5rem 0 0; border-radius: var(--radius); background: var(--bg); font-size: .92rem; }
.up-info span { color: var(--muted); font-size: .86rem; }
.up-info.ok { background: var(--gruen-h); } .up-info.ok b { color: var(--ok); }
.up-info.fehler { background: var(--rot-h); } .up-info.fehler b { color: var(--danger); }
.up-info .btn { align-self: flex-start; margin-top: .35rem; }
.up-neu { margin: .5rem 0 0; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); }
.up-neu > b { display: block; color: var(--blau); } .up-neu > small { display: block; color: var(--muted); }
.up-aend { margin: .4rem 0 .6rem 1.1rem; padding: 0; font-size: .9rem; overflow-wrap: anywhere; }
.up-aend li { margin: .1rem 0; }
.up-stand { margin: .4rem 0 0; }
.up-schr { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .92rem; }
.up-schr li { display: flex; align-items: center; gap: .55rem; padding: .25rem 0; color: var(--muted); }
.up-schr li i { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-stark); box-sizing: border-box; }
.up-schr li.ok { color: var(--text, inherit); } .up-schr li.ok i { background: var(--ok); border-color: var(--ok); }
.up-schr li.laeuft { color: var(--blau); font-weight: 650; } .up-schr li.laeuft i { border-color: var(--blau); border-top-color: transparent; animation: updreh 1s linear infinite; }
.up-schr li.fehler { color: var(--danger); font-weight: 650; } .up-schr li.fehler i { background: var(--danger); border-color: var(--danger); }
@keyframes updreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .up-schr li.laeuft i { animation: none; } }

/* Konto: Bereiche „Mein Zugang“ und „Darstellung“ */
.k-wer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: 0 0 .4rem; }
.k-wer p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.k-h2 { margin: .9rem 0 .3rem; font-size: 1.05rem; color: var(--blau); }
/* Dateien hineinziehen: Ablagestelle hervorheben (app.js, dzZiel) */
.dz-an { outline: 2px dashed var(--blau) !important; outline-offset: 2px; }
/* Konto (Entwurf 03.11.): Kopf mit Name und Rollen, zwei Spalten am PC */
.konto-w { max-width: 1180px; }
.k-kopf { align-items: center !important; justify-content: flex-start !important; }
.k-av { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--blau); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; flex: 0 0 auto; }
.k-name { flex: 1 1 12rem; min-width: 0; }
.k-name h1 { overflow-wrap: anywhere; }
.k-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; }
.k-chips span { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 999px; padding: .05rem .6rem; font-size: .75rem; font-weight: 700; }
.k-chips small { color: rgba(255,255,255,.7); font-size: .75rem; margin-left: .2rem; }
.k-sp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.1rem; align-items: start; }
.k-links { display: grid; gap: 1.1rem; min-width: 0; }
.k-karte { margin: 0; }
.k-t { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: 1.15rem; }
.k-sym { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; flex: 0 0 auto; }
.k-sym svg.ic { width: 18px; height: 18px; }
.k-sym.bl { background: var(--blau-hell); color: var(--blau); } .k-sym.gr { background: var(--gruen-h); color: var(--ok); } .k-sym.or { background: var(--gelb-h); color: var(--gelb); }
.k-sp .bn { margin-top: 0; }
.k-sp .card.login { max-width: none; margin: 0; }
.k-portal { margin-top: 1.4rem; }
@media (max-width: 900px) { .k-sp { grid-template-columns: minmax(0, 1fr); } }

/* Beschaffung: „Ich brauche …“, Liste „Für den Betrieb“, Online-Shops (public/beschaffung.js) */
.bs-l { margin: 0 0 .35rem; font-weight: 700; font-size: .9rem; }
.bs-reiter { margin: 0 0 .9rem; }
.bs-st { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 700; background: var(--bg); color: var(--muted); white-space: nowrap; }
.bs-st.bs-neu { background: var(--blau-hell); color: var(--blau); } .bs-st.bs-freigabe { background: var(--gelb-h); color: var(--gelb); }
.bs-st.bs-frei, .bs-st.bs-bestellt { background: var(--blau-hell); color: var(--blau); } .bs-st.bs-da { background: var(--gruen-h); color: var(--ok); } .bs-st.bs-abgelehnt { background: var(--rot-h); color: var(--danger); }
.bs-dr { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 700; background: var(--rot-h); color: var(--danger); }
.bs-z { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; margin: 0 0 .5rem; padding: .6rem .7rem; cursor: pointer; border: 1px solid var(--line); font: inherit; color: inherit; }
.bs-z:hover { border-color: var(--line-stark); }
.bs-z img, .bs-zi { width: 2.8rem; height: 2.8rem; border-radius: var(--r); object-fit: cover; flex: 0 0 auto; }
.bs-zi { display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.bs-zt { flex: 1 1 auto; min-width: 0; display: grid; } .bs-zt b { overflow-wrap: anywhere; } .bs-zt small { color: var(--muted); }
.bs-zr { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; flex: 0 1 auto; }
.bs-start .ck-k { gap: .5rem; flex-wrap: wrap; }
.bs-mz { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.bs-mz span:first-child { display: grid; min-width: 0; } .bs-mz b { overflow-wrap: anywhere; } .bs-mz small { color: var(--muted); }
.bs-dran { margin: .3rem 0 .8rem; }
.bs-sk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.bs-vl li { align-items: flex-start; } .bs-vt { display: grid; min-width: 0; overflow-wrap: anywhere; } .bs-vt small { color: var(--muted); }
.bs-vf { margin-top: .6rem; } .bs-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
.bs-foto { max-width: 100%; max-height: 16rem; border-radius: var(--r); display: block; }
.bs-ver { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .85rem; } .bs-ver small { display: block; color: var(--muted); font-size: .75rem; }
.bs-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: .8rem; }
.bs-sh { margin: 0; display: grid; gap: .35rem; min-width: 0; } .bs-sh a { overflow-wrap: anywhere; }
.bs-shk { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bs-sh dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .7rem; margin: .2rem 0 0; font-size: .85rem; } .bs-sh dt { color: var(--muted); } .bs-sh dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .bs-z { flex-wrap: wrap; } .bs-zt { flex: 1 1 calc(100% - 4rem); } .bs-zr { flex: 1 1 100%; justify-content: flex-start; padding-left: 3.5rem; } }
.vt-infos { align-items: flex-start; gap: .5rem; background: var(--blau-hell); border-radius: var(--r); padding: .55rem .7rem; }
.vt-infos span { display: grid; } .vt-infos small { color: var(--muted); font-size: .8rem; }
/* Vertrieb: Pläne in der Karte; Löschen gut sichtbar */
.vt-pl { margin: .2rem 0 .7rem; } .vt-plt { margin: .2rem 0 .3rem; font-size: .85rem; font-weight: 700; color: var(--ink2); }
.vt-dat .vt-x svg.ic { width: 18px; height: 18px; }
.vt-dn { display: grid; min-width: 0; overflow-wrap: anywhere; } .vt-dn small { color: var(--muted); font-size: .8rem; }
/* Startseite: eigene Fragen, die auf Antwort warten (public/team.js) */
.st-zeilen .sk.frw { order: 1; cursor: default; } .st-zeilen .sk.frw::after { visibility: hidden; } .st-zeilen .sk.frw b { color: var(--gelb); }
.st-frw { order: 1; display: flex !important; flex-direction: column; gap: .15rem; padding: 0 0 .5rem 3.9rem; font-size: .9rem; }
.st-frw a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; line-height: 1.4; padding: .15rem 0; }
.st-frw a:hover { color: var(--blau-mittel); } .st-frw .muted { color: var(--muted); } .st-frw .rot { color: var(--danger); font-weight: 700; }
@media (max-width: 420px) { .st-frw { padding-left: .2rem; } }