/* Base styles on top of Tailwind: calm, factual; petrol #2C4A47, sand gold #B8956B */
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
.navlink { padding: .3rem .5rem; border-radius: .25rem; color: rgb(255 255 255 / .85); }
.navlink:hover { background: rgb(255 255 255 / .1); color: #fff; }
.navlink.aktiv { background: #B8956B; color: #fff; }
.feld { display: block; width: 100%; margin-top: .25rem; padding: .5rem .75rem;
        border: 1px solid #d6d3d1; border-radius: .25rem; }
.feld:focus { outline: 2px solid #B8956B; outline-offset: 0; }
.karte { background: #fff; border: 1px solid #e7e5e4; border-radius: .5rem; padding: 1.25rem; }
.knopf { background: #2C4A47; color: #fff; border-radius: .25rem; padding: .45rem .9rem; font-size: .875rem; }
.knopf:hover { background: #3a605c; }
.knopf-zweit { border: 1px solid #d6d3d1; border-radius: .25rem; padding: .45rem .9rem; font-size: .875rem; background: #fff; }
.tabelle { width: 100%; border-collapse: collapse; background: #fff; font-size: .875rem; }
.tabelle th { text-align: left; font-weight: 600; color: #2C4A47; border-bottom: 2px solid #B8956B; padding: .4rem .6rem; }
.tabelle td { border-bottom: 1px solid #f0efed; padding: .35rem .6rem; vertical-align: top; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.status-ok { color: #2C4A47; } .status-fehler { color: #b91c1c; font-weight: 600; } .status-laeuft { color: #B8956B; }
.datenstand { font-size: .75rem; color: rgb(255 255 255 / .75); border: 1px solid rgb(255 255 255 / .25);
  border-radius: 999px; padding: .15rem .65rem; white-space: nowrap; }
.datenstand:hover { color: #fff; border-color: #B8956B; }
/* on/off switch */
.kippschalter { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: #78716c; background: none; border: 0; cursor: pointer; }
.kippschalter span { position: relative; width: 2.4rem; height: 1.3rem; border-radius: 999px; background: #d6d3d1; transition: background .15s; }
.kippschalter span::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: left .15s; }
.kippschalter.an { color: #2C4A47; font-weight: 600; }
.kippschalter.an span { background: #6aa84f; }
.kippschalter.an span::after { left: 1.25rem; }
.tabelle.zeitplan td { vertical-align: middle; }
/* import protocol */
.aufklapp { border: 0; background: none; cursor: pointer; color: #2C4A47; font-size: .9rem; width: 1.4rem; }
.tabelle.laeufe tbody + tbody { border-top: 0; }
.lauf-details td { background: #fafaf9; }
.protokoll { padding: .4rem 0 .6rem; }
.protokoll .filter-chip { cursor: pointer; border: 0; background: #e4ecea; color: #2C4A47; border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; }
.protokoll .filter-chip.aktiv { background: #2C4A47; color: #fff; }
.protokoll-art { font-size: .68rem; padding: .05rem .4rem; border-radius: .25rem; white-space: nowrap; }
.art-neu { background: #e3f3e3; color: #2f6b2f; } .art-geaendert { background: #e4ecea; color: #2C4A47; }
.art-entfernt { background: #f4ece1; color: #7a5a30; } .art-fehler { background: #fee2e2; color: #991b1b; }
.aenderung { display: inline-block; margin-right: .8rem; white-space: nowrap; }

/* tabs (statistics, master data) */
.stat-reiter { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid #B8956B; }
.stat-reiter a { padding: .35rem .8rem; font-size: .85rem; color: #2C4A47; border-radius: .35rem .35rem 0 0; }
.stat-reiter a:hover { background: #f4ece1; }
.stat-reiter a.aktiv { background: #2C4A47; color: #fff; }
.tabelle td.zahl, .tabelle th.zahl { white-space: nowrap; }

/* list tables with fixed, adjustable column widths (static/js/spalten.js) */
.tabelle.fest { table-layout: fixed; }
.tabelle.fest > thead > tr > th, .tabelle.fest > tbody > tr > td, .tabelle.fest > tfoot > tr > td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .45rem; padding-right: .45rem; }
.tabelle.fest > thead > tr > th { position: relative; }
.spalten-griff { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 1; }
.spalten-griff:hover, .spalten-ziehen .spalten-griff:hover { background: rgba(184, 149, 107, .45); }
.spalten-ziehen { cursor: col-resize; user-select: none; }

/* import folder */
.ordner-hinweis { background: #B8956B; color: #fff; border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; }
.ordner-hinweis:hover { background: #a3825b; }
.ordner-liste { max-height: 14rem; overflow-y: auto; border: 1px solid #e7e5e4; border-radius: .4rem; }
.ordner-liste li { border-bottom: 1px solid #f0efed; }
.ordner-liste li a { display: block; padding: .3rem .6rem; }
.ordner-liste li a:hover { background: #f4ece1; }
.datei-wartet { color: #b45309; font-weight: 600; }
.datei-importiert { color: #3f7d4a; }
.datei-fehler { color: #b5452f; font-weight: 600; }
.datei-doppelt, .datei-ignoriert, .datei-unbekannt { color: #78716c; }
.datei-laeuft { color: #2C4A47; font-style: italic; }
.kategorien-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .75rem; }
tr.blass td { opacity: .5; }
.zahl-feld { width: 5.5rem; text-align: right; }

/* fixed header: navigation and master data tabs stay visible while scrolling */
.kopf-fix { position: sticky; top: 0; z-index: 60; }
.stat-reiter.fix { position: sticky; top: var(--kopf-h, 52px); z-index: 50; background: #fafaf9; padding-top: .35rem; }
/* measuring the natural column widths (spalten.js) */
.tabelle.spalten-messen { table-layout: auto !important; width: auto !important; }
.tabelle.spalten-messen > thead > tr > th, .tabelle.spalten-messen > tbody > tr > td { white-space: nowrap; }
.tabelle.fest > tbody > tr.lauf-details > td { white-space: normal; overflow: visible; }
.tabelle.fest td input.feld-klein, .tabelle.fest td select.feld-klein { max-width: 100%; }
.tabelle.fest td input.notiz { width: 100%; }
/* one-line filter bars with ↺ */
.filterzeile { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.filterzeile > * { flex-shrink: 0; }
.filterzeile .suche { min-width: 8rem; width: 15rem; flex-shrink: 1; }
.filterzeile select.feld-klein { max-width: 11rem; }
.filterzeile label { white-space: nowrap; }
.tabelle th.klick-sort { cursor: pointer; user-select: none; }
.tabelle th.klick-sort:hover { color: #B8956B; }
.tabelle th.aktiv { color: #B8956B; }

/* inbox: conversations | messages | booking card */
.posteingang { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr) minmax(13rem, 18rem); gap: .75rem;
  height: calc(100vh - var(--kopf-h, 52px) - 9rem); min-height: 28rem; }
.pe-liste, .pe-verlauf, .pe-karte { background: #fff; border: 1px solid #e7e5e4; border-radius: .6rem; overflow-y: auto; }
.pe-verlauf, .pe-karte { padding: 1rem; }
.pe-gespraech { display: block; padding: .55rem .75rem; border-bottom: 1px solid #f0efed; position: relative; }
.pe-gespraech .pe-link { display: block; color: inherit; text-decoration: none; padding-right: 1.4rem; }
.pe-gespraech .sammel-box { position: absolute; right: .6rem; top: .7rem; }
.sammel-leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: #f4ece1; border: 1px solid #e5d3b8; border-radius: .5rem; padding: .4rem .7rem; margin-bottom: .6rem; }
.pe-gespraech:hover { background: #fafaf9; }
.pe-gespraech.aktiv { background: #f4ece1; border-left: 3px solid #B8956B; }
.pe-nachricht { max-width: 85%; padding: .6rem .8rem; border-radius: .6rem; margin-bottom: .7rem; background: #f5f5f4; }
.pe-nachricht.aus { margin-left: auto; background: #e4ecea; }
.pe-text { white-space: pre-wrap; font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.kanal { display: inline-block; font-size: .65rem; font-weight: 700; padding: 0 .3rem; border-radius: .25rem; margin-right: .2rem; }
.kanal.wa { background: #dcf3e4; color: #1e6b3a; } .kanal.em { background: #e4ecea; color: #2C4A47; }
.thema { display: inline-block; font-size: .65rem; background: #f4ece1; color: #6b4f2a; border-radius: .25rem; padding: 0 .35rem; margin: .15rem .2rem 0 0; }
.pe-h { font-family: Georgia, serif; color: #2C4A47; margin: .9rem 0 .3rem; font-size: .95rem; }
@media (max-width: 860px) { .posteingang { grid-template-columns: 1fr; height: auto; } }
.vorschlag { border: 1px solid #e7e5e4; border-radius: .5rem; padding: .5rem .6rem; margin-bottom: .5rem; font-size: .85rem; }
.vorschlag .punkte { font-size: .7rem; background: #e4ecea; color: #2C4A47; border-radius: 999px; padding: 0 .45rem; height: 1.2rem; }

.nav-zahl { display: inline-block; min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: #B8956B; color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center; margin-left: .2rem; }
.pe-status { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.pe-gespraech.neu b { color: #1c1917; }
.neu-punkt { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: #B8956B; margin-right: .35rem; vertical-align: middle; }
.abruf-takt { display: flex; align-items: center; gap: .3rem; }
.abruf-takt input { width: 4rem; text-align: center; }
.abruf-takt .knopf-zweit { padding: .2rem .6rem; }
.takt-ok { font-size: .75rem; color: #3f7d4a; min-width: 6rem; }
.takt-ok.fehler { color: #b5452f; }
.pe-aktionen { position: sticky; top: -1rem; z-index: 2; background: #fff; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .6rem; margin: -1rem -1rem .8rem; padding: .6rem 1rem; border-bottom: 1px solid #e7e5e4; }
.status-chip { display: inline-block; font-size: .65rem; border-radius: .25rem; padding: 0 .35rem; margin: .15rem .2rem 0 0; background: #e7e5e4; color: #44403c; }
.status-chip.arbeit { background: #fde9c8; color: #7a4b0c; } .status-chip.erledigt { background: #dcf3e4; color: #1e6b3a; }
.status-chip.wv { background: #e0e7ff; color: #3730a3; }
.platzhalter { font-family: ui-monospace, monospace; font-size: .72rem; background: #f4ece1; color: #6b4f2a; border-radius: .25rem; padding: 0 .3rem; }
.platzhalter:hover { background: #ead9c0; }
.pe-antwort { border: 1px solid #e7e5e4; border-radius: .6rem; padding: .6rem .8rem; margin-bottom: 1rem; background: #fafaf9; }
.pe-antwort > summary { display: inline-block; cursor: pointer; list-style: none; }
.pe-antwort > summary::-webkit-details-marker { display: none; }
.fuer-voffice { background: #fdf6ea; border: 1px solid #ecd9b5; border-radius: .5rem; padding: .5rem .7rem; margin: .6rem 0; }
.fakt { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .8rem; padding: .15rem 0; }
.kopieren { font-size: .7rem; border: 1px solid #d6d3d1; border-radius: .3rem; padding: 0 .4rem; background: #fff; }

/* cleaning tasks */
tr.wechseltag td:first-child { box-shadow: inset 3px 0 0 #b91c1c; }
tr.wechseltag { outline: 1px solid rgba(185, 28, 28, .35); outline-offset: -1px; }
.rstatus { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .75rem; background: #eee; }
.rstatus-offen { background: #fde7c7; color: #7a4a0c; }
.rstatus-abgereist { background: #fbd5d5; color: #7f1d1d; }
.rstatus-begonnen { background: #dbeafe; color: #1e3a8a; }
.rstatus-erledigt, .rstatus-geprueft { background: #d9f2df; color: #14532d; }
.rstatus-entfallen { background: #eee; color: #666; text-decoration: line-through; }
.segment a.aktiv span { background: #2C4A47; color: #fff; }
.segment a:first-child span { border-left: 0; }
/* Vorgänge (cases) in the inbox */
.pe-gespraech.mein { border-left: 3px solid #2C4A47; }
.pe-gespraech.fremd { background: #f7f6f4; color: #57534e; }
.pe-gespraech.fremd:hover { background: #f0efed; }
.status-chip.st-in_arbeit { background: #fde9c8; color: #7a4b0c; }
.status-chip.st-wartet_gast, .status-chip.st-wartet_extern { background: #e0e7ff; color: #3730a3; }
.status-chip.st-erledigt { background: #dcf3e4; color: #1e6b3a; }
.status-chip.bearbeiter { background: #e4ecea; color: #2C4A47; }
.segment .zaehler { opacity: .7; font-weight: normal; }
.segment button { padding: .3rem .6rem; color: #57534e; border-left: 1px solid #e7e5e4; background: #fff; font-size: .78rem; cursor: pointer; }
.segment button:first-of-type { border-left: 0; }
.segment button.aktiv { background: #2C4A47; color: #fff; }
.segment button:disabled { cursor: default; }
.pe-menu { position: relative; display: inline-block; }
.pe-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.pe-menu > summary::-webkit-details-marker { display: none; }
.pe-menu-inhalt { position: absolute; top: 100%; left: 0; z-index: 5; background: #fff; border: 1px solid #d6d3d1; border-radius: .4rem; padding: .5rem; display: flex; gap: .3rem; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.pe-html { width: 100%; height: 30rem; resize: vertical; border: 1px solid #e7e5e4; border-radius: .4rem; background: #fff; margin: .3rem 0; }
.pe-notiz-eintrag { background: #fef9c3; border: 1px solid #fde68a; border-radius: .6rem; padding: .6rem .8rem; margin-bottom: .7rem; max-width: 85%; }
.pe-notiz > summary { display: inline-block; cursor: pointer; list-style: none; }
.nav-at { background: #fde68a; color: #78350f; margin-left: .3rem; }
.pe-protokoll { font-size: .7rem; color: #78716c; margin: 0 0 .5rem; padding-left: .3rem; border-left: 2px solid #e7e5e4; }
/* categories, tags, priority */
.status-chip.prio-hoch { background: #fde9c8; color: #7a4b0c; font-weight: 600; }
.status-chip.prio-kritisch { background: #fbd5d5; color: #7f1d1d; font-weight: 600; }
.status-chip.kat { background: #e4ecea; color: #2C4A47; border: 1px solid #c9d8d5; }
.status-chip.kat.vorschlag { border-style: dashed; background: #fff; }
.status-chip.tag-rot { background: #fbd5d5; color: #7f1d1d; } .status-chip.tag-gruen { background: #dcf3e4; color: #1e6b3a; }
.status-chip.tag-gelb { background: #fef3c7; color: #78350f; } .status-chip.tag-grau { background: #e7e5e4; color: #44403c; }
.pe-menu-breit { white-space: normal; flex-direction: column; align-items: flex-start; min-width: 26rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.chip-wahl span { display: inline-block; padding: .15rem .5rem; border: 1px solid #d6d3d1; border-radius: 999px; font-size: .75rem; cursor: pointer; }
.chip-wahl input:checked + span { background: #2C4A47; color: #fff; border-color: #2C4A47; }
.chip-wahl input:disabled + span { cursor: default; opacity: .75; }
.chip-wahl.chip-rot input:checked + span { background: #9f3a2e; border-color: #9f3a2e; }
.vo-link { color: #B8956B; font-size: .8em; text-decoration: none; margin-left: .2rem; } .vo-link:hover { text-decoration: underline; }

/* Tagesplan (day plan) */
.tagesplan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .tagesplan { grid-template-columns: 1fr; } }
.tp-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem; }
.tp-team { background: #fff; border: 1px solid #e7e5e4; border-radius: .6rem; padding: .6rem .7rem; min-height: 8rem; }
.tp-team.ziel { outline: 2px dashed #B8956B; outline-offset: -2px; background: #fbf7f1; }
.tp-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; }
.tp-mitglieder { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.tp-person { display: inline-flex; align-items: center; gap: .3rem; background: #e4ecea; color: #2C4A47; border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; cursor: grab; }
.tp-person.warn { background: #fde9c8; color: #7a4b0c; }
.tp-person .weg { color: #7f1d1d; font-weight: bold; cursor: pointer; }
.tp-warnungen { font-size: .72rem; color: #7a4b0c; background: #fff7e6; border-radius: .4rem; padding: .3rem .5rem; margin: .3rem 0; }
.tp-aufgaben { list-style: none; margin: 0; padding: 0; min-height: 2rem; }
.tp-aufgabe { border: 1px solid #e7e5e4; border-left: 4px solid #B8956B; border-radius: .4rem; padding: .35rem .5rem; margin-bottom: .35rem; background: #fafaf9; cursor: pointer; font-size: .85rem; }
.tp-aufgabe:hover { background: #f4ece1; }
.tp-aufgabe.wechsel { border-left-color: #b91c1c; }
.tp-aufgabe.st-erledigt, .tp-aufgabe.st-geprueft { opacity: .6; border-left-color: #1e6b3a; }
.tp-aufgabe.st-begonnen { border-left-color: #1e3a8a; }
.tp-dialog { border: 1px solid #d6d3d1; border-radius: .6rem; padding: 1rem 1.2rem; width: min(34rem, 92vw); }
.tp-dialog::backdrop { background: rgba(0,0,0,.25); }

/* links: always underlined; Ctrl/Cmd-click jumps to vOffice (data-voffice) */
a.link { text-decoration: underline; text-decoration-color: #c9b89b; text-underline-offset: 2px; }
a.link[data-voffice=""] { text-decoration-color: #ddd8d0; }

/* dashboard tiles and ♡ favourites */
.symbol { display: inline-block; vertical-align: -3px; }
.navlink .symbol { vertical-align: -2px; margin-right: .1rem; }
.herz-form { display: inline; }
.herz { color: rgb(255 255 255 / .7); background: transparent; border: 0; cursor: pointer; padding: .2rem; line-height: 0; }
.herz:hover { color: #fff; }
.herz.an { color: #f0a8b8; }
.herz.an .symbol { fill: #f0a8b8; }
.herz.klein { color: #a8a29e; }
.herz.klein:hover { color: #2C4A47; }
.herz.klein.an { color: #b91c1c; } .herz.klein.an .symbol { fill: #b91c1c; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; }
.kachel { display: block; background: #fff; border: 1px solid #e7e5e4; border-radius: .7rem; padding: .8rem .9rem; color: inherit; text-decoration: none; cursor: grab; min-height: 6.5rem; }
.kachel:hover { border-color: #B8956B; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kachel-kopf { display: flex; justify-content: space-between; align-items: center; color: #2C4A47; }
.kachel-name { font-weight: 600; margin-top: .3rem; }
.kachel-zahl { font-family: Georgia, serif; font-size: 2rem; color: #2C4A47; line-height: 1.1; margin-top: .2rem; }
.kachel-zahl.null { color: #a8a29e; }
.funktionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .8rem; margin-top: .8rem; }
/* menu: symbols only (toggle in the header), names as tooltip */
.nav-umschalter { border: 1px solid rgb(255 255 255 / .35); color: rgb(255 255 255 / .8); border-radius: .25rem; padding: .1rem .45rem; font-size: .8rem; line-height: 1.3; }
.nav-umschalter:hover { background: rgb(255 255 255 / .1); color: #fff; }
body.menu-symbole .navlink .nav-text { display: none; }
body.menu-symbole .navlink { padding: .3rem .38rem; }
/* narrow header: ☰ opens the menu as a list below the header, with text */
body.menu-offen #hauptmenu { position: absolute; left: 0; top: 100%; z-index: 60; flex-direction: column; gap: 0; background: #2C4A47; padding: .5rem; border-radius: 0 0 .5rem 0; box-shadow: 0 6px 16px rgb(0 0 0 / .25); min-width: 14rem; }
body.menu-offen #hauptmenu .navlink { padding: .45rem .75rem; display: flex; align-items: center; gap: .5rem; }
body.menu-offen #hauptmenu .navlink .nav-text { display: inline; }
body.menu-offen #kopf { position: relative; }
body.menu-symbole .navlink .symbol { width: 18px; height: 18px; margin-right: 0; }
/* status buttons in the action bar: the same colours as the chips */
.segment button.st-in_arbeit.aktiv { background: #fde9c8; color: #7a4b0c; }
.segment button.st-wartet_gast.aktiv, .segment button.st-wartet_extern.aktiv { background: #e0e7ff; color: #3730a3; }
.segment button.st-erledigt.aktiv { background: #dcf3e4; color: #1e6b3a; }
.segment button.st-in_arbeit:hover:not(:disabled) { background: #fef3e2; }
.segment button.st-wartet_gast:hover:not(:disabled), .segment button.st-wartet_extern:hover:not(:disabled) { background: #eef2ff; }
.segment button.st-erledigt:hover:not(:disabled) { background: #edf9f1; }
.status-chip.st-neu { background: #f5f5f4; color: #57534e; }
.pe-aktionen .status-chip { font-size: .75rem; }
.reiter button.aktiv .reiter-x { opacity: .7; margin-left: .15rem; } .reiter button.aktiv:hover .reiter-x { opacity: 1; }
.segment input:checked + span { cursor: pointer; }
.segment input:checked + span::after { content: " ×"; opacity: .6; font-size: .9em; }
.segment input[value=""]:checked + span::after { content: ""; }
/* quick status filter in the booking bar: same chips as the list - selected = filled, unselected = outlined */
.status-schnell { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.status-schnell .chip-wahl span.chip { font-size: .75rem; padding: .3rem .6rem; cursor: pointer; font-weight: 600; }
.status-schnell .chip-wahl input:not(:checked) + span.chip { background: #fff; border: 1px solid currentColor; text-decoration: none; }
.status-schnell .chip-wahl input:not(:checked) + span.status-confirmed { color: #4f8a2f; }
.status-schnell .chip-wahl input:not(:checked) + span.status-definitive { color: #3d8a9e; }
/* "vorläufig" is not a vOffice status but "not imported yet": sand-gold, set apart from the status chips */
.status-schnell .chip-wahl input:not(:checked) + span.chip-vorlaeufig { color: #8a6a3f; border: 1px dashed #B8956B; }
.status-schnell .chip-wahl input:checked + span.chip-vorlaeufig { background: #B8956B; color: #fff; border-color: transparent; }
.status-schnell .chip-wahl:has(.chip-vorlaeufig) { margin-left: .5rem; padding-left: .6rem; border-left: 1px solid #d6d3d1; }
.status-schnell .chip-wahl input:not(:checked) + span.status-offer, .status-schnell .chip-wahl input:not(:checked) + span.status-option { color: #c97a1a; }
.status-schnell .chip-wahl input:not(:checked) + span.status-freeze { color: #3f3f46; }
.status-schnell .chip-wahl input:not(:checked) + span.status-draft { color: #57534e; border-style: dashed; }
.status-schnell .chip-wahl input:not(:checked) + span.status-canceled { color: #b91c1c; text-decoration: line-through; }
.status-schnell .chip-wahl input:checked + span.status-confirmed { background: #6aa84f; color: #fff; border-color: transparent; }
.status-schnell .chip-wahl input:checked + span.status-definitive { background: #4a9bb0; color: #fff; border-color: transparent; }
/* checked: the generic .chip-wahl rule would paint everything dark - restore the list colours per status */
.status-schnell .chip-wahl input:checked + span.status-offer { background: #eb9a35; color: #fff; border-color: transparent; }
.status-schnell .chip-wahl input:checked + span.status-option { background: repeating-linear-gradient(135deg, #eb9a35, #eb9a35 6px, #f2b86a 6px, #f2b86a 12px); color: #fff; border-color: transparent; }
.status-schnell .chip-wahl input:checked + span.status-freeze { background: #3f3f46; color: #fff; border-color: transparent; }
.status-schnell .chip-wahl input:checked + span.status-draft { background: #fff; color: #57534e; border: 1px dashed #a8a29e; }
.status-schnell .chip-wahl input:checked + span.status-canceled { background: #fff; color: #b91c1c; border: 1px solid #fca5a5; text-decoration: line-through; }
.status-schnell .chip-wahl input:checked + span.chip { box-shadow: 0 0 0 2px #2C4A47; }
.status-schnell .chip-wahl input:focus-visible + span.chip { outline: 2px solid #2C4A47; outline-offset: 2px; }
/* header: always one line */
.kopf-zeile { min-width: 0; overflow: hidden; }
.kopf-zeile .datenstand { white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* tight header: the "Stand" pill shrinks to a clock symbol, the popup stays reachable */
.datenstand .ds-uhr { display: none; }
@media (max-width: 1100px) { .kopf-zeile .datenstand .ds-text { display: none; } .kopf-zeile .datenstand .ds-uhr { display: inline; } }
body.kopf-eng .kopf-zeile .datenstand .ds-text { display: none; }
body.kopf-eng .kopf-zeile .datenstand .ds-uhr { display: inline; }

#hauptmenu { gap: 0; }
#hauptmenu .navlink .symbol { margin-right: .05rem; }
/* tables that must fit the page width (no horizontal scrolling): cells may wrap */
.tabelle.tabelle-passend { table-layout: auto; width: 100%; }
.tabelle.tabelle-passend th, .tabelle.tabelle-passend td { white-space: normal; overflow-wrap: anywhere; }
.tabelle.tabelle-passend td:first-child { white-space: nowrap; }
/* compact master-data tables */
.tabelle.tabelle-kompakt { font-size: .8rem; }
.tabelle.tabelle-kompakt th, .tabelle.tabelle-kompakt td { padding: .25rem .4rem; }
.tabelle.tabelle-kompakt select.feld-klein, .tabelle.tabelle-kompakt input.feld-klein { max-width: 100%; width: 100%; padding: .1rem .25rem; font-size: .78rem; }
.tabelle.tabelle-kompakt td.vo { color: #57534e; }
.tabelle.tabelle-kompakt .text-center { text-align: center; }
/* day plan: unassigned tasks and available staff as a strip above the teams (drag sources always visible) */
.tp-oben { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tp-oben .tp-block { padding: .6rem .8rem; }
.tp-oben .tp-aufgaben { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 14rem; overflow-y: auto; }
.tp-oben .tp-aufgaben .tp-aufgabe { width: 16rem; margin: 0; }
.tagesplan-teams .tp-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem; }
/* booking list: header row stays visible while scrolling (below the sticky page header).
   overflow-x: clip does not create a scroll container, so position: sticky works against the page. */
/* contain: the wide table must not widen the page (overflow: clip is no scroll container, so without this the
   table's width pushes its flex/grid parent - and the whole page - wider than the window) */
.tabelle-fixkopf { overflow-x: clip; contain: inline-size; width: 100%; }
/* the whole head (headings + filter row) sticks below the page header */
.tabelle-fixkopf > .tabelle > thead { position: sticky; top: calc(var(--kopf-h, 52px) + var(--reiter-h, 0px)); z-index: 3; background: #fff; box-shadow: 0 2px 0 #B8956B; }
.tabelle-fixkopf > .tabelle > thead > tr > th { background: #fff; }
/* message view: HTML by default when present, text on demand (body.pe-modus-text) */
.pe-nachricht.hat-html .pe-textteil, body.pe-modus-text .pe-nachricht .pe-htmlteil, .pe-umschalter .wenn-text { display: none; }
body.pe-modus-text .pe-nachricht.hat-html .pe-textteil { display: block; }
body.pe-modus-text .pe-umschalter .wenn-html { display: none; }
body.pe-modus-text .pe-umschalter .wenn-text { display: inline; }
/* office phone preview: the cleaning app in a device frame */
.handy-rahmen { position: relative; overflow: hidden; }
.handy-rahmen iframe { position: absolute; top: 12px; left: 12px; border: 12px solid #1c1917; border-radius: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); background: #fff; transform-origin: 0 0; box-sizing: content-box; }
/* category row in the Vorgang header: one click sets the category, tags in a popup that never leaves the screen */
.kat-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; width: 100%; margin-top: .3rem; }
.kat-zeile .chips { gap: .25rem; }
.kat-zeile .chip-wahl span { font-size: .75rem; padding: .2rem .55rem; }
.kat-zeile .kat-chip.kat-vorschlag input:not(:checked) + span { border-style: dashed; border-color: #B8956B; color: #8a6a3f; }
.kat-zeile .pe-menu-inhalt { max-width: min(38rem, calc(100vw - 2rem)); right: auto; }
/* compact Vorgang header: everything in two tight rows, the mail stays visible below */
.pe-aktionen { gap: .25rem .4rem; padding: .35rem 1rem; margin-bottom: .4rem; }
.pe-aktionen .knopf, .pe-aktionen .knopf-zweit, .pe-aktionen .feld-klein { padding: .2rem .55rem; font-size: .78rem; }
.pe-aktionen .segment button { padding: .2rem .5rem; font-size: .75rem; }
.kat-zeile { margin-top: 0; gap: .2rem .3rem; }
.kat-zeile .chip-wahl span { font-size: .7rem; padding: .08rem .45rem; line-height: 1.3; }
.kat-zeile .knopf-klein { padding: .08rem .45rem; font-size: .7rem; border-radius: 999px; }
.pe-antwort { padding: .3rem .6rem; margin-bottom: .4rem; }
.pe-antwort:not([open]) { display: inline-block; margin-right: .4rem; }
.pe-antwort > summary.knopf-zweit, .pe-antwort > summary .knopf-zweit { padding: .2rem .6rem; font-size: .8rem; }
.pe-antwort > summary.knopf { padding: .2rem .6rem; font-size: .8rem; }
/* attachments: tick boxes + "alle" / "Auswahl" as ZIP */
.anhaenge { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; }
.anhaenge .anhang { white-space: nowrap; }
.anhaenge .knopf-klein { padding: .05rem .45rem; font-size: .7rem; border-radius: 999px; }
/* list toolbar bottom right: record count + reload (like vOffice) */
.listen-leiste { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; display: flex; gap: .3rem; align-items: center; }
.listen-leiste button { width: 2rem; height: 2rem; border-radius: .3rem; border: 1px solid #d6d3d1; background: #fff; color: #2C4A47;
  font: 600 .95rem Georgia, serif; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.listen-leiste .ll-info { background: #2C4A47; color: #fff; border-color: #2C4A47; font-style: italic; }
.listen-leiste button:hover { filter: brightness(1.1); }
.listen-leiste .ll-blase { position: absolute; right: 0; bottom: 2.6rem; background: #fff; border: 1px solid #d6d3d1; border-radius: .4rem;
  padding: .35rem .7rem; font-size: .85rem; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
@media print { .listen-leiste { display: none; } }
/* filter row under the table header (class "zeilenfilter"): one field per column, filters while typing */
tr.spaltenfilter th { padding: .15rem .3rem; border-bottom: 1px solid #e7e5e4; background: #fafaf9; font-weight: 400; }
tr.spaltenfilter input, tr.spaltenfilter select { width: 100%; min-width: 0; box-sizing: border-box; font-size: .75rem; padding: .1rem .3rem; border: 1px solid #d6d3d1; border-radius: .2rem; background: #fff; }
table.zeilenfilter > thead > tr:first-child > th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.zeilenfilter select.feld-klein, table.zeilenfilter input.feld-klein { width: 100%; max-width: 100%; }
/* Dubletten: result card replacing a decided group in place */
.dubletten-ergebnis { padding: .5rem .8rem; }
.dubletten-ergebnis.erfolg { background: #edf7ef; border-color: #b7dfc1; color: #1e6b3a; }
.dubletten-ergebnis.fehler { background: #fdecec; border-color: #f3b9b9; color: #991b1b; }
.dubletten-ergebnis.info { background: #f4ece1; border-color: #e3cfae; color: #6b4f2a; }
/* Dubletten: travelling companions are no duplicates - marked and not ticked */
.chip.chip-mitreisend { background: #f4ece1; color: #6b4f2a; border: 1px solid #e3cfae; font-size: .7rem; }
tr.mitreisend td { color: #78716c; }
/* header + filter row stick together: the whole thead is sticky, not the single cells */
/* group rows inside a list (a day, a year …): stay in place when sorting, vanish when the filter empties them */
.tabelle tr.gruppe td { background: #e4ecea; color: #2C4A47; font-weight: 600; padding-top: .45rem; }
/* CSV preview: import / discard always reachable at the top */
.import-leiste { position: sticky; top: var(--kopf-h, 52px); z-index: 20; background: #fafaf9; padding: .5rem 0; margin-bottom: .5rem; border-bottom: 1px solid #e7e5e4; }
/* progress bar of the history mail import */
.ticker-balken { height: .5rem; background: #e7e5e4; border-radius: 999px; overflow: hidden; margin-top: .35rem; }
.ticker-balken span { display: block; height: 100%; background: #2C4A47; transition: width .6s; }
/* Einstellungen: sidebar on every settings page, tiles on the overview */
.einst-rahmen { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.einst-leiste { position: sticky; top: calc(var(--kopf-h, 52px) + .75rem); max-height: calc(100vh - var(--kopf-h, 52px) - 1.5rem); overflow-y: auto;
  background: #fff; border: 1px solid #e7e5e4; border-radius: .6rem; padding: .6rem; font-size: .85rem; }
.einst-start { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #2C4A47; padding: .3rem .4rem; border-radius: .3rem; }
.einst-suche { width: 100%; margin: .4rem 0 .5rem; }
.einst-gruppe { margin-bottom: .5rem; }
.einst-gruppe-titel { display: flex; align-items: center; gap: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #8a6a3f; padding: .3rem .4rem .1rem; }
.einst-link { display: block; padding: .25rem .4rem .25rem 1.4rem; border-radius: .3rem; color: #44403c; }
.einst-link:hover, .einst-start:hover { background: #f4ece1; }
.einst-link.aktiv, .einst-start.aktiv { background: #2C4A47; color: #fff; }
.einst-mobil { display: none; width: 100%; }
.einst-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.einst-hinweis { background: #fdf3e2; color: #8a5a14; border-radius: .3rem; padding: .2rem .45rem; font-size: .78rem; margin-bottom: .35rem; }
@media (max-width: 900px) {
  .einst-rahmen { grid-template-columns: minmax(0, 1fr); }
  .einst-leiste { position: static; max-height: none; }
  .einst-leiste .einst-gruppe, .einst-leiste .einst-suche { display: none; }
  .einst-mobil { display: block; margin-top: .3rem; }
}
/* statistics: report list on the left (same look as the settings sidebar), foldable */
.stat-rahmen { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.stat-rahmen.zu { grid-template-columns: 2.2rem minmax(0, 1fr); }
.stat-rahmen.zu .stat-leiste > :not(.stat-einklappen) { display: none; }
.stat-einklappen { float: right; border: 1px solid #e7e5e4; border-radius: .3rem; background: #fff; width: 1.6rem; height: 1.6rem; color: #2C4A47; cursor: pointer; }
.stat-rahmen.zu .stat-einklappen { float: none; transform: rotate(180deg); }
@media (max-width: 900px) { .stat-rahmen, .stat-rahmen.zu { grid-template-columns: minmax(0, 1fr); } }
/* contact kinds as chips (unselected outlined, selected filled) */
.art-chips .chip-wahl input:not(:checked) + span.chip { background: #fff; border: 1px solid currentColor; color: #44403c; }
.art-chips .chip-wahl input:checked + span.art-gast { background: #2C4A47; color: #fff; }
.art-chips .chip-wahl input:checked + span.art-eigentuemer { background: #4a9bb0; color: #fff; }
.art-chips .chip-wahl input:checked + span.art-reinigung { background: #6aa84f; color: #fff; }
.art-chips .chip-wahl input:checked + span.art-dienstleister { background: #B8956B; color: #fff; }
.art-chips .chip-wahl input:checked + span.art-team { background: #7c6aa8; color: #fff; }
.art-chips .chip-wahl input:checked + span.art-unerwuenscht { background: #b91c1c; color: #fff; }
/* row height chosen in the list toolbar (≡) */
body.zeilen-kompakt .tabelle th, body.zeilen-kompakt .tabelle td { padding-top: .15rem; padding-bottom: .15rem; font-size: .8rem; }
body.zeilen-mehrzeilig .tabelle.fest > tbody > tr > td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* "Stand" in the header: per source when it was last synchronised */
.datenstand-menu { position: relative; }
.datenstand-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.datenstand-menu > summary::-webkit-details-marker { display: none; }
.datenstand-liste { position: fixed; top: calc(var(--kopf-h, 52px) - .2rem); z-index: 80; background: #fff; color: #1c1917; border: 1px solid #e7e5e4;
  border-radius: .5rem; padding: .6rem .7rem; min-width: 15rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); font-size: .82rem; }
.datenstand-liste > a { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem .2rem; border-radius: .25rem; }
.datenstand-liste > a:hover { background: #f4ece1; }
/* Dubletten: the tabs read as numbered work steps, each with one line of explanation */
.dub-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.dub-schritte > a { border: 1px solid #e7e5e4; border-radius: .5rem; padding: .5rem .7rem; background: #fff; color: #2C4A47; font-size: .85rem; }
.dub-schritte > a > span { display: block; color: #78716c; font-size: .75rem; margin-top: .15rem; }
.dub-schritte > a:hover { border-color: #B8956B; }
.dub-schritte > a.aktiv { background: #2C4A47; color: #fff; border-color: #2C4A47; }
.dub-schritte > a.aktiv > span { color: #e7e5e4; }
.dub-schritte > a.nebenweg:not(.aktiv) { border-style: dashed; border-color: #d9a54a; }
/* breadcrumb line above detail pages */
.brotkrumen { font-size: .85rem; color: #78716c; margin-bottom: .4rem; }
.brotkrumen .krume-trenner { color: #B8956B; margin: 0 .25rem; }
.zuletzt-menu .datenstand-liste { min-width: 18rem; max-width: 24rem; }
.zuletzt-menu .datenstand-liste > a > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* header: the logo switches the menu (symbols / text; when too narrow it opens the menu as a list) */
.kopf-logo { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; white-space: nowrap; color: #fff; padding: .15rem .35rem .15rem .15rem; border-radius: .4rem; cursor: pointer; }
.kopf-logo:hover { background: rgb(255 255 255 / .08); }
.kopf-logo img { height: 30px; width: auto; display: block; }
.kopf-logo .logo-text { font-variant: small-caps; letter-spacing: .02em; }
.kopf-logo .logo-zeichen { width: 30px; height: 30px; border-radius: .35rem; background: #B8956B; color: #fff; font-family: Georgia, serif; font-size: 1.15rem; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; }
.kopf-logo .logo-text { font-family: Georgia, serif; font-size: 1.15rem; line-height: 1; }
.kopf-logo .logo-text span { color: #B8956B; }
.kopf-logo.eng::after { content: "☰"; font-size: .85rem; opacity: .8; }
body.menu-symbole .kopf-logo .logo-text, body.kopf-zu-eng .kopf-logo .logo-text { display: none; }
.benutzer-menu > summary { display: inline-flex; align-items: center; gap: .3rem; }
.benutzer-menu .benutzer-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
body.kopf-eng .benutzer-menu .benutzer-name { display: none; }
.benutzer-menu .datenstand-liste { min-width: 12rem; }
.benutzer-abmelden { width: 100%; text-align: left; padding: .15rem .2rem; border-radius: .25rem; color: #8a6a43; }
.benutzer-abmelden:hover { background: #f4ece1; }
.rollen { white-space: nowrap; } .rollen .chip { margin-right: .2rem; }
.spalte-gezogen { opacity: .45; } .spalte-ziel { box-shadow: inset 3px 0 0 #B8956B; } thead th[draggable="true"] { cursor: grab; }
.rolle { display: inline-block; border: 1px solid #d6d3d1; border-radius: 999px; padding: 0 .5rem; margin-right: .2rem; font-size: .75rem; line-height: 1.35rem; background: #fff; color: #2C4A47; white-space: nowrap; }
a.rolle:hover { border-color: #B8956B; }
.rolle-rot { color: #991b1b; border-color: #fca5a5; }
/* booking detail: travel companions as a compact list */
.mitreisende { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.mitreisende li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .4rem 0; border-bottom: 1px solid #f0efed; }
.mitreisende li:last-child { border-bottom: 0; }
.mitreisende .name { flex: 1 1 10rem; min-width: 0; }
.mitreisende .daten { color: #44403c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mitreisende .daten small { color: #78716c; }
.mitreisende .ms { font-size: .75rem; }
.mitreisende.mr-vorschlag li { align-items: center; }
.mitreisende-titel { font-family: Georgia, serif; font-size: .95rem; color: #2C4A47; margin: 1rem 0 .25rem; padding-top: .75rem; border-top: 1px solid #e7e5e4; }
.mitreisende-titel small { font-family: Arial, sans-serif; font-size: .7rem; font-weight: normal; color: #B8956B; text-transform: uppercase; letter-spacing: .05em; margin-left: .35rem; }
.mr-ok { color: #3f7d4e; margin-left: .3rem; }
.mr-warn { color: #a8642a; margin-left: .3rem; }
/* year selection as in the calendar corner (− 2026 +), with "alle" */
.jahr-schritt-gruppe { display: inline-flex; align-items: center; gap: .35rem; }
.jahr-schritt { display: inline-flex; border: 1px solid #d6d3d1; border-radius: .3rem; overflow: hidden; background: #fff; }
.jahr-schritt button { width: 2rem; background: #fafaf9; color: #2C4A47; font-size: 1rem; }
.jahr-schritt button:hover { background: #f4ece1; }
.jahr-schritt input { width: 4.6rem; text-align: center; font-family: Georgia, serif; font-size: 1rem; color: #2C4A47;
  border-left: 1px solid #d6d3d1; border-right: 1px solid #d6d3d1; -moz-appearance: textfield; padding: .25rem 0; }
.jahr-schritt input::-webkit-inner-spin-button, .jahr-schritt input::-webkit-outer-spin-button { display: none; }
.jahr-schritt input::placeholder { color: #a8a29e; font-style: italic; }
.jahr-alle { border: 1px solid #d6d3d1; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; color: #57534e; background: #fff; }
.jahr-alle.aktiv { background: #2C4A47; border-color: #2C4A47; color: #fff; }

/* test server: always visible so nobody mistakes it for the live system */
.testserver-band { background: #B8956B; color: #1c1917; text-align: center; font-size: .8rem; font-weight: 600;
  padding: .3rem 1rem; letter-spacing: .02em; }
/* status light of the background fetches (header pill "Stand …") */
.ampel { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; flex: none; }
.ampel-gruen { background: #3f9d5a; }
.ampel-gelb { background: #d99a2b; }
.ampel-rot { background: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .25); animation: ampel-puls 1.6s ease-in-out infinite; }
.ampel-grau { background: #a8a29e; }
@keyframes ampel-puls { 50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, .08); } }
@media (prefers-reduced-motion: reduce) { .ampel-rot { animation: none; } }
.abruf-status { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; display: flex; align-items: center; }
.ampel-text-rot { color: #a33a32; } .ampel-text-gelb { color: #8a5a12; }