/* Colours: hairfree Colorguide 2023 (docs/specs/ui-farben.md). Every colour of the UI is a
   token of this block; the other style sheets and the templates only use var(--...). */
:root {
  /* Brand palette (brandbook hex). Tints 80/60/40/20/10 are backgrounds only; Typo and
     Signal have no tints. */
  --hf-weiss: #ffffff;
  --hf-primaer: #f891a5;
  --hf-primaer-80: #f4a8b6;
  --hf-primaer-60: #f7c0c9;
  --hf-primaer-40: #fad7dc;
  --hf-primaer-20: #fdebed;
  --hf-primaer-10: #fef5f6;
  --hf-s1: #968594;
  --hf-s1-80: #a89ea8;
  --hf-s1-60: #beb4bd;
  --hf-s1-40: #d2ccd2;
  --hf-s1-20: #eae5e8;
  --hf-s1-10: #f1f0f3;
  --hf-s2: #53565a;
  --hf-s2-80: #737478;
  --hf-s2-60: #939598;
  --hf-s2-40: #b5b6b8;
  --hf-s2-20: #d9dadc;
  --hf-s2-10: #ececec;
  --hf-typo: #0f1820;
  --hf-signal: #d40057;
  --hf-a1: #ebbeaf;
  --hf-a1-80: #efccc0;
  --hf-a1-60: #f3d7cf;
  --hf-a1-40: #f5e4dd;
  --hf-a1-20: #f6f0ed;
  --hf-a1-10: #f8f7f6;
  --hf-a2: #aac5c9;
  --hf-a2-80: #bad0d3;
  --hf-a2-60: #ccdcde;
  --hf-a2-40: #dbe7e8;
  --hf-a2-20: #ecf3f3;
  --hf-a2-10: #f4f7f8;
  --hf-a3: #b6b8dd;
  --hf-a3-80: #c4c5e4;
  --hf-a3-60: #d2d3ea;
  --hf-a3-40: #e0e1f1;
  --hf-a3-20: #eeeff7;
  --hf-a3-10: #f5f6f9;
  --hf-a4: #fecb8b;
  --hf-a4-80: #fed6a3;
  --hf-a4-60: #fae0b9;
  --hf-a4-40: #f6e8ce;
  --hf-a4-20: #f9f4e6;
  --hf-a4-10: #f9f8f1;
  --hf-a5: #aac27f;
  --hf-a5-80: #bace98;
  --hf-a5-60: #ccd9b0;
  --hf-a5-40: #dbe5cb;
  --hf-a5-20: #edf1e4;
  --hf-a5-10: #f3f8f1;

  /* Semantic tokens */
  --bg: var(--hf-a1-10);
  --surface: var(--hf-weiss);
  --text: var(--hf-typo);
  --muted: var(--hf-s2);              /* no secondary text colour in the brandbook; S2 7.4:1 */
  --border: var(--hf-s2-20);
  --control-border: var(--hf-s1);     /* form fields: 3.4:1 (WCAG 1.4.11) */
  --accent: var(--hf-signal);         /* buttons, links, call to action */
  --accent-text: var(--hf-weiss);
  --link: var(--hf-signal);
  --focus: var(--hf-signal);
  --error-bg: var(--hf-primaer-10);
  --error-text: var(--hf-signal);
  --error-border: var(--hf-signal);
  --success-bg: var(--hf-a5-20);
  --success-text: var(--hf-typo);
  --success-border: var(--hf-a5);
  --warning-bg: var(--hf-a4-20);
  --warning-text: var(--hf-typo);
  --warning-border: var(--hf-a4);
  --warnung-stark-bg: var(--hf-a4);   /* moved appointment in the booking warnings */
  --info-bg: var(--hf-a2-20);
  --info-text: var(--hf-typo);
  --info-border: var(--hf-a2);
  --brand-bar: var(--hf-primaer);
  --menu-hover-bg: var(--hf-primaer-10);
  --th-bg: var(--hf-s1-10);
  --summe-bg: var(--hf-s2-10);        /* S1-20 would leave Signal (negative sums) at 4.3:1 */
  --zebra-bg: var(--hf-a1-20);
  --hover-bg: var(--hf-primaer-10);
  --caption-bg: var(--hf-primaer-40);
  --caption-text: var(--hf-typo);
  --hera-plus-bg: var(--hf-a3);
  --highlight-bg: var(--hf-a4-20);    /* legacy yellow highlight (running contract) */
  --aktiv-bg: var(--hf-a4-40);        /* selected appointment card */
  --berechnet-bg: var(--hf-a2-40);    /* computed read-only fields (legacy #c8d2e2) */
  --memo-rand: var(--hf-a2);

  /* Functional colours: meaning of the legacy app */
  --negative-text: var(--hf-signal);  /* negative values, missed, inactive (legacy red) */
  --legacy-gruen: #1d5b2c;            /* exception: positive values, cancelled (legacy green) */
  --legacy-blau: #0000ff;             /* exception: Pausenregel individuell (legacy blue) */
  --legacy-gelb: #a68500;             /* exception: yellow status dot */
  --positive-text: var(--legacy-gruen);
  --individual-text: var(--legacy-blau);
  --ampel-rot: var(--hf-signal);
  --ampel-gelb: var(--legacy-gelb);
  --ampel-gruen: var(--positive-text);
  --areal-fill: #ffff7a;              /* exception: area drawing, as on the printed sheet */
  --areal-stroke: #ff0000;            /* exception */
  --feiertag-bg: var(--hf-primaer-20);
  --feiertag-kopf-bg: var(--hf-primaer-40);
  --samstag-bg: var(--hf-s2-10);
  --stundenzettel-tag-bg: var(--hf-s2-20);
  --krank-bg: var(--hf-primaer);
  --urlaub-bg: var(--hf-a5);
  --kalender-linie: var(--hf-s2-60);
  --kalender-stunde: var(--hf-s2-40);
  --kalender-slot: var(--hf-s2-10);
  --kalender-block: rgb(83 86 90 / 0.2);        /* exception: S2 with alpha */
  --karte-rand: rgb(0 0 0 / 0.3);               /* exception: border on data colours */
  --setz-bg: rgb(248 145 165 / 0.35);           /* exception: Primär with alpha */
  --setz-fixiert-bg: rgb(248 145 165 / 0.6);    /* exception: Primär with alpha */
  --shadow: rgb(0 0 0 / 0.08);                  /* exception: neutral shadow */
  --shadow-strong: rgb(0 0 0 / 0.15);           /* exception: neutral shadow */
  --backdrop: rgb(0 0 0 / 0.4);                 /* exception: modal backdrop */
}

/* New UI (docs/specs/ui-neu.md): light or dark by color-scheme (theme of the top bar, "auto"
   follows the system). Each token keeps its light value above as the first half of
   light-dark(); the dark half is a brand colour or a brand colour mixed into Typo. Shadows, the
   backdrop and the alpha exceptions stay as they are. The old UI
   (data-ui="alt") and browsers without light-dark() never see this block. */
@supports (color: light-dark(white, black)) {
  :root[data-ui="neu"] {
    color-scheme: light dark;
    --dunkel-bg: var(--hf-typo);
    --dunkel-surface: color-mix(in srgb, var(--hf-s2) 22%, var(--hf-typo));
    --dunkel-erhoeht: color-mix(in srgb, var(--hf-s2) 38%, var(--hf-typo));
    --dunkel-linie: color-mix(in srgb, var(--hf-s2) 65%, var(--hf-typo));

    --bg: light-dark(var(--hf-a1-10), var(--dunkel-bg));
    --surface: light-dark(var(--hf-weiss), var(--dunkel-surface));
    --text: light-dark(var(--hf-typo), var(--hf-s2-10));
    --muted: light-dark(var(--hf-s2), var(--hf-s2-40));
    --border: light-dark(var(--hf-s2-20), var(--dunkel-linie));
    --control-border: light-dark(var(--hf-s1), var(--hf-s2-60));
    --accent: light-dark(var(--hf-signal), var(--hf-primaer));
    --accent-text: light-dark(var(--hf-weiss), var(--hf-typo));
    --link: light-dark(var(--hf-signal), var(--hf-primaer));
    --focus: light-dark(var(--hf-signal), var(--hf-primaer));
    --error-bg: light-dark(var(--hf-primaer-10), color-mix(in srgb, var(--hf-signal) 28%, var(--hf-typo)));
    --error-text: light-dark(var(--hf-signal), var(--hf-primaer));
    --error-border: light-dark(var(--hf-signal), var(--hf-primaer));
    --success-bg: light-dark(var(--hf-a5-20), color-mix(in srgb, var(--hf-a5) 22%, var(--hf-typo)));
    --success-text: light-dark(var(--hf-typo), var(--hf-s2-10));
    --warning-bg: light-dark(var(--hf-a4-20), color-mix(in srgb, var(--hf-a4) 20%, var(--hf-typo)));
    --warning-text: light-dark(var(--hf-typo), var(--hf-s2-10));
    --warnung-stark-bg: light-dark(var(--hf-a4), color-mix(in srgb, var(--hf-a4) 40%, var(--hf-typo)));
    --info-bg: light-dark(var(--hf-a2-20), color-mix(in srgb, var(--hf-a2) 22%, var(--hf-typo)));
    --info-text: light-dark(var(--hf-typo), var(--hf-s2-10));
    --menu-hover-bg: light-dark(var(--hf-primaer-10), color-mix(in srgb, var(--hf-primaer) 18%, var(--hf-typo)));
    --th-bg: light-dark(var(--hf-s1-10), var(--dunkel-erhoeht));
    --summe-bg: light-dark(var(--hf-s2-10), var(--dunkel-erhoeht));
    --zebra-bg: light-dark(var(--hf-a1-20), color-mix(in srgb, var(--hf-s2) 30%, var(--hf-typo)));
    --hover-bg: light-dark(var(--hf-primaer-10), color-mix(in srgb, var(--hf-primaer) 18%, var(--hf-typo)));
    --caption-bg: light-dark(var(--hf-primaer-40), color-mix(in srgb, var(--hf-primaer) 35%, var(--hf-typo)));
    --caption-text: light-dark(var(--hf-typo), var(--hf-s2-10));
    --hera-plus-bg: light-dark(var(--hf-a3), color-mix(in srgb, var(--hf-a3) 35%, var(--hf-typo)));
    --highlight-bg: light-dark(var(--hf-a4-20), color-mix(in srgb, var(--hf-a4) 20%, var(--hf-typo)));
    --aktiv-bg: light-dark(var(--hf-a4-40), color-mix(in srgb, var(--hf-a4) 40%, var(--hf-typo)));
    --berechnet-bg: light-dark(var(--hf-a2-40), color-mix(in srgb, var(--hf-a2) 30%, var(--hf-typo)));
    --negative-text: light-dark(var(--hf-signal), var(--hf-primaer));
    --positive-text: light-dark(var(--legacy-gruen), var(--hf-a5));
    --individual-text: light-dark(var(--legacy-blau), var(--hf-a3));
    --ampel-rot: light-dark(var(--hf-signal), var(--hf-primaer));
    --ampel-gelb: light-dark(var(--legacy-gelb), var(--hf-a4));
    --feiertag-bg: light-dark(var(--hf-primaer-20), color-mix(in srgb, var(--hf-primaer) 20%, var(--hf-typo)));
    --feiertag-kopf-bg: light-dark(var(--hf-primaer-40), color-mix(in srgb, var(--hf-primaer) 35%, var(--hf-typo)));
    --samstag-bg: light-dark(var(--hf-s2-10), var(--dunkel-erhoeht));
    --stundenzettel-tag-bg: light-dark(var(--hf-s2-20), var(--dunkel-linie));
    --krank-bg: light-dark(var(--hf-primaer), color-mix(in srgb, var(--hf-primaer) 45%, var(--hf-typo)));
    --urlaub-bg: light-dark(var(--hf-a5), color-mix(in srgb, var(--hf-a5) 45%, var(--hf-typo)));
    --kalender-linie: light-dark(var(--hf-s2-60), var(--dunkel-linie));
    --kalender-stunde: light-dark(var(--hf-s2-40), color-mix(in srgb, var(--hf-s2) 50%, var(--hf-typo)));
    --kalender-slot: light-dark(var(--hf-s2-10), var(--dunkel-erhoeht));
  }
  :root[data-ui="neu"][data-theme="hell"] { color-scheme: light; }
  :root[data-ui="neu"][data-theme="dunkel"] { color-scheme: dark; }
  /* Contract and appointment colours are data colours and stay light in the dark theme: the
     entries and cards painted with them (text, tooltip, status colours) keep the light half */
  :root[data-ui="neu"] .listen-eintrag, :root[data-ui="neu"] .karte { color-scheme: light; }
}

* { box-sizing: border-box; }

/* Keyboard focus: one Signal ring everywhere */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }

.menubar-row { display: flex; align-items: center; gap: 16px; padding: 0 16px; min-height: 44px; }

.brand { font-weight: 700; letter-spacing: 0.04em; color: var(--muted); border-bottom: 3px solid var(--brand-bar); }

/* Main menu: hover or keyboard focus opens submenus */
.mainmenu { flex: 1; }
.mainmenu ul { list-style: none; margin: 0; padding: 0; }
.mainmenu .menubar { display: flex; flex-wrap: wrap; }
.mainmenu li { position: relative; }
.mainmenu .menu-label {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mainmenu .submenu .menu-label { padding: 6px 14px; }
.mainmenu .menu-group > .menu-label::after { content: " ▾"; color: var(--muted); }
.mainmenu .submenu .menu-group > .menu-label::after { content: " ▸"; }
.mainmenu a.menu-label:hover, .mainmenu button.menu-label:hover,
.mainmenu a.menu-label:focus-visible, .mainmenu button.menu-label:focus-visible {
  background: var(--menu-hover-bg);
}
.mainmenu .menubar > li > .menu-label:hover, .mainmenu .menubar > .menu-group:focus-within > .menu-label {
  box-shadow: inset 0 -3px 0 var(--brand-bar);
}
.mainmenu .menu-label:focus-visible { outline-offset: -2px; }
.mainmenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 220px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px var(--shadow);
}
.mainmenu .submenu .submenu { top: -5px; left: 100%; }
.mainmenu .menu-group:hover > .submenu,
.mainmenu .menu-group:focus-within > .submenu { display: block; }
.mainmenu .menubar > .menu-group:last-child { margin-left: auto; }
.mainmenu .menubar > .menu-group:last-child > .submenu { left: auto; right: 0; }
.menu-separator { height: 1px; margin: 4px 0; background: var(--border); }
.menu-pending { color: var(--muted); cursor: default; }
.pending-tag {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--bg);
  font-size: 11px;
  color: var(--muted);
}
.badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.userbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.userbar a, .userbar .link-button { color: inherit; }
.userbar form { margin: 0; }
.userbar-user, .userbar-lounge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.userbar-lounge { justify-content: flex-end; }
.env-banner {
  padding: 2px 12px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.env-banner-row { display: flex; justify-content: center; padding: 6px 16px; border-top: 1px solid var(--border); }

a { color: var(--accent); }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }

.card-page { display: flex; flex-direction: column; align-items: center; padding: 48px 16px; }

.card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.card h1 { margin: 0 0 16px; font-size: 20px; }

label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  font: inherit;
}
input[size] { width: auto; }

/* As wide as their text; only the account cards (login, password, lounge) span the card */
button[type="submit"]:not(.link-button) {
  margin-top: 16px;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.card button[type="submit"]:not(.link-button) { width: 100%; }

.choice-list { list-style: none; margin: 0; padding: 0; }
.choice-list li + li { margin-top: 8px; }
.choice-list button[type="submit"]:not(.link-button) {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  text-align: left;
  font-weight: 400;
}
.choice-list button.current { border-color: var(--accent); }

.messages { list-style: none; margin: 0 auto 16px; padding: 0; width: 100%; max-width: 380px; }
.page .messages { max-width: none; }
.message { padding: 8px 12px; border-radius: 6px; }
.message-error { background: var(--error-bg); color: var(--error-text); box-shadow: inset 4px 0 0 var(--error-border); }
.message-success { background: var(--success-bg); color: var(--success-text); box-shadow: inset 4px 0 0 var(--success-border); }
.message-warning { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 4px 0 0 var(--warning-border); }
.message-info { background: var(--info-bg); color: var(--info-text); box-shadow: inset 4px 0 0 var(--info-border); }

.form-error { margin: 6px 0; color: var(--error-text); font-size: 14px; }
.muted { color: var(--muted); }
.hints { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }

/* Information about the new UI after login (core/_ui_hinweis.html, docs/specs/ui-neu.md) */
.ui-hinweis { width: min(480px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 8px 32px var(--shadow-strong); }
.ui-hinweis::backdrop { background: var(--backdrop); }
.ui-hinweis h2 { margin: 0 0 8px; font-size: 19px; }
.ui-hinweis p { margin: 0 0 10px; }
.ui-hinweis-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ui-hinweis-knoepfe form { margin: 0; }
.ui-hinweis-knoepfe button[type="submit"]:not(.link-button) { width: auto; margin: 0; padding: 8px 16px; border: 1px solid var(--accent); }
.ui-hinweis-knoepfe button.secondary[type="submit"] { background: var(--surface); color: var(--accent); }
/* Warning before the end of the session (accounts/_sitzung.html), styled like the information */
.sitzung-dialog strong { font-variant-numeric: tabular-nums; }
/* UI switch at the top right (core/_ui_schalter.html); in the user bar, which takes the
   user's colour, track and knob follow its text colour. The new UI styles it in hera-neu.css. */
.userbar button.ui-schalter { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.userbar .ui-schalter-spur { position: relative; width: 36px; height: 20px; border: 2px solid currentColor; border-radius: 999px; }
.userbar .ui-schalter-knopf { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: transform 0.15s ease; }
.userbar .ui-schalter[aria-checked="true"] .ui-schalter-knopf { transform: translateX(16px); }

.card-footer { margin: 16px 0 0; font-size: 14px; text-align: center; }

/* Lounge page (lounges app): tabs and two-column record forms */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.page-head h1 { margin: 0 0 12px; font-size: 22px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.tab:hover { background: var(--surface); }
.tab.active { background: var(--surface); border-color: var(--border); font-weight: 600; margin-bottom: -1px; }
.tab-panel {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.form-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 8px 32px; }
.form-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; align-items: center; gap: 4px 12px; padding: 3px 0; }
.form-row label { margin: 0; font-weight: 400; }
.form-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.form-input input[type="text"], .form-input select, .form-input textarea {
  flex: 1 1 140px;
  min-width: 0;
  width: auto;
  padding: 6px 8px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.form-input input.input-plz { flex: 0 1 90px; }
.form-input input:disabled, .form-input select:disabled, .form-input textarea:disabled { background: var(--bg); color: var(--text); }
.form-input .form-error { flex-basis: 100%; margin: 0; }
.suffix, .static-value { color: var(--muted); font-size: 14px; }
.static-value { color: var(--text); }
.info { color: var(--muted); cursor: help; }
.form-spacer { height: 12px; }
.form-heading { margin: 12px 0 4px; font-style: italic; color: var(--muted); }
.form-intro { margin: 0 0 12px; font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.form-actions button[type="submit"]:not(.link-button), .button {
  width: auto;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary, .form-actions button.secondary { background: var(--surface); color: var(--accent); }
/* Filter rows (Zeitraum: von bis … Anzeigen): labels, fields and the button side by side */
.filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }
.filter-zeile label { display: inline; margin: 0; }
.filter-zeile button[type="submit"]:not(.link-button),
.zeiten-filter button[type="submit"]:not(.link-button),
.bericht-filter button[type="submit"]:not(.link-button) { margin: 0; padding: 4px 14px; }
.notice { margin: 0 0 16px; padding: 8px 12px; border-radius: 6px; background: var(--error-bg); color: var(--error-text); }
.notice a { color: inherit; font-weight: 600; }
.bwa-years { display: flex; flex-wrap: wrap; gap: 4px; }
.bwa-years label { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; font-weight: 400; }
.bwa-years label:has(input:checked) { background: var(--success-bg); border-color: var(--success-border); }
.section-title { margin: 0 0 8px; font-size: 15px; }
.staff-list { list-style: none; margin: 0 0 16px; padding: 0; }
.staff-list li { padding: 2px 0; }
.staff-list .staff-inactive:first-of-type, .staff-list li:not(.staff-inactive) + .staff-inactive { margin-top: 12px; }
.inaktiv { color: var(--negative-text); }
.sort-columns { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sort-column { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }
.sort-item { font-weight: 600; }
.sort-buttons { display: flex; gap: 2px; }
.sort-move { padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); cursor: pointer; }
.form-actions button[type="button"] { padding: 8px 16px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.raum-liste { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; }
.raum-item { min-width: 64px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.raum-item.selected { font-weight: 600; border-color: var(--accent); }
.raum-form { max-width: 480px; }
.raum-dialog { max-width: min(480px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.raum-dialog::backdrop { background: var(--backdrop); }
.zeiten-tabelle { margin-top: 12px; border-collapse: collapse; }
.zeiten-tabelle th { padding: 4px 12px 4px 0; font-weight: 400; font-style: italic; text-align: left; color: var(--muted); }
.zeiten-tabelle td { padding: 3px 12px 3px 0; vertical-align: top; }
.zeiten-tabelle select { padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
select.zeit-fehler { border-color: var(--error-text); background: var(--error-bg); }
.preis-tabelle { width: 100%; border-collapse: collapse; align-self: start; }
.preis-tabelle th { padding: 6px 8px; background: var(--th-bg); text-align: left; }
.preis-tabelle td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.preis-tabelle td.form-input input[type="text"] { flex: 0 1 100px; text-align: right; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.geraete-tabelle { border-collapse: collapse; min-width: 960px; }
.geraete-tabelle thead th { padding: 6px; background: var(--th-bg); font-weight: 600; font-size: 13px; text-align: left; vertical-align: bottom; }
.geraete-tabelle tbody th { padding: 3px 6px; font-weight: 400; text-align: right; white-space: nowrap; }
.geraete-tabelle td { padding: 3px 4px; vertical-align: top; }
.geraete-tabelle .geraet-block + .geraet-block tr:first-child td { border-top: 1px solid var(--border); }
.geraete-tabelle .form-input input[type="text"], .geraete-tabelle .form-input select { flex: 1 1 90px; min-width: 70px; }
.geraete-tabelle button.geraet-loeschen { width: auto; margin: 0; padding: 4px 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--accent); font: inherit; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Administration pages (Rechteverwaltung, Feiertage) */
.admin-panel { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.admin-panel + .admin-panel { margin-top: 16px; }
.rechte-tabelle { width: 100%; max-width: 760px; border-collapse: collapse; }
.rechte-tabelle th { padding: 12px 8px 6px; background: var(--th-bg); text-align: left; }
.rechte-tabelle td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.rechte-tabelle label { margin: 0; font-weight: 400; }
.rechte-tabelle td:last-child { width: 200px; }
.rechte-tabelle select, .admin-panel select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.feiertage-filter, .feiertag-neu { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.filter-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-field label { margin: 0; }
.filter-field select { width: auto; }
.feiertage-tabelle { border-collapse: collapse; }
.feiertage-tabelle th { padding: 4px 6px; background: var(--th-bg); text-align: left; font-size: 13px; }
.feiertage-tabelle th.land, .feiertage-tabelle td.land { width: 34px; text-align: center; }
.feiertage-tabelle th.laender-titel { text-align: center; font-weight: 400; }
.feiertage-tabelle td { padding: 3px 4px; border-bottom: 1px solid var(--border); }
input.feiertag-name { width: 200px; }
input.feiertag-datum { width: 110px; text-align: center; }
.feiertage-tabelle input[type="text"], .feiertag-neu input[type="text"] { padding: 4px 6px; border: 1px solid var(--control-border); border-radius: 6px; font: inherit; }
.icon-button { padding: 0 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--error-text); font: inherit; font-weight: 700; cursor: pointer; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.kopieren-text { margin: 4px 0; }

/* Customer file (kunden app) */
.kartei-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; margin-bottom: 12px; }
.kundensuche { position: relative; flex: 0 1 300px; }
.kundensuche label { margin: 0 0 4px; font-weight: 400; font-size: 13px; color: var(--muted); }
.kundenliste { position: absolute; z-index: 5; left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.kundenliste:empty { display: none; }
.kundenlisten-eintrag { display: block; padding: 4px 10px; color: var(--text); text-decoration: none; }
.kundenlisten-eintrag:hover, .kundenlisten-eintrag:focus-visible { background: var(--hover-bg); }
.kunde-kopf { flex: 1; align-self: center; font-style: italic; text-align: center; }
.kunde-gesperrt { margin: 24px; color: var(--error-text); text-align: center; }
.tab.disabled { color: var(--muted); }
.kartei-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.kartei-aktionen button[type="submit"]:not(.link-button) { width: auto; margin: 0; }
.ok-zeichen { color: var(--positive-text); font-weight: 700; }
.stammdaten-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 24px; }
.stammdaten-band { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.stammdaten .form-row { grid-template-columns: minmax(100px, 130px) 1fr; }
.stammdaten .form-input select { flex: 1 1 60px; }
.form-input input.input-kurz { flex: 0 1 100px; }
.generelle-info { white-space: normal; overflow-wrap: anywhere; }
.stammdaten textarea { width: 100%; }
.telefon-link { text-decoration: none; }
.telefonie-liste { width: 100%; border-collapse: collapse; font-size: 14px; }
.telefonie-liste td { padding: 1px 4px; }
.telefonie-liste .anruf-status td { border-bottom: 1px solid var(--border); }
.telefonie-liste:not(.alle) .telefonat-alt { display: none; }
.status-ok { color: var(--positive-text); }
.loeschhinweis { font-style: italic; }
.loeschhinweis.widerruf { color: var(--error-text); }
.wiedervorlage, .kunden-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.wiedervorlage label { margin: 0; font-weight: 400; }
.wiedervorlage select, .wiedervorlage input[type="text"] { width: auto; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.mahnstopp { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.kunden-flags .checkbox-label { margin: 0; }
.stammdaten [hidden], .tab-panel [hidden] { display: none !important; }
.kartei-dialog { width: min(760px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.kartei-dialog::backdrop { background: var(--backdrop); }
.dialog-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; }
.dialog-zeile label { margin: 0; font-weight: 400; }
.dialog-zeile select, .dialog-zeile input[type="text"], .dialog-zeile input[type="password"], .kartei-dialog textarea { width: auto; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.kartei-dialog textarea { width: 100%; }
.button.klein { padding: 2px 8px; font-size: 13px; font-weight: 400; }
/* Show/hide button inside password fields (static/js/passwort.js); after the field rules
   above, so the room for the button wins over their padding */
.passwort-feld { position: relative; display: block; }
.passwort-feld input[type] { padding-right: 40px; }
.passwort-zeigen { position: absolute; top: 0; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; margin: 0; padding: 0; border: 0; border-radius: 0 6px 6px 0; background: none; color: var(--muted); cursor: pointer; }
.passwort-zeigen:hover { color: var(--text); }
.passwort-zeigen:focus-visible { outline-offset: -3px; }
.passwort-zeigen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.passwort-zeigen:not([aria-pressed="true"]) .passwort-strich { display: none; }
.status-negativ { color: var(--negative-text); }
.kartei-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.kartei-tabelle th { padding: 6px 8px; background: var(--th-bg); text-align: left; font-weight: 600; }
.kartei-tabelle td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.memo-filter { margin-left: auto; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); font: inherit; }
.memo-text { overflow-wrap: anywhere; }
.leadkarte-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.leadkarte-frage legend { padding: 0 4px; }
.leadkarte-frage > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.leadkarte-frage label { margin: 0; font-weight: 400; }
.leadkarte-frage input[type="text"] { width: auto; padding: 4px 6px; border: 1px solid var(--control-border); border-radius: 6px; font: inherit; }
.mail-vorlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.mail-vorlage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.mail-vorlage select { width: 250px; max-width: 100%; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.mail-vorlage button[type="submit"] { width: auto; margin: 0; }
/* Read-only panels of other domains (Angebote, Verträge, Termine, Konto, Artikel) */
.kartei-tabelle .zahl { text-align: right; white-space: nowrap; }
.angebot, .vertrag { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.vertrag-tabelle th { background: var(--th-bg); }
.vertrag.hera-plus .vertrag-tabelle th { background: var(--hera-plus-bg); color: var(--text); }
.positionen { margin-top: 4px; font-size: 13px; }
.positionen .kuerzel-link { color: inherit; text-decoration: none; }
.positionen .kuerzel-link:hover, .positionen .kuerzel-link:focus-visible { text-decoration: underline; }
.vertrag-aktionen { margin: 6px 0 0; }
.aktion-folgt { color: var(--muted); cursor: default; }
.gestrichen td { text-decoration: line-through; }
.inaktiv td, tr.inaktiv td { font-style: italic; color: var(--muted); }
.betrag-negativ, .status-fehler, .status-verpasst { color: var(--negative-text); }
.betrag-positiv, .status-abgesagt { color: var(--positive-text); }
.offene-posten { margin-top: 4px; font-size: 12px; color: var(--text); }
.zwischensumme th, .zwischensumme td, .gesamtsumme th, .gesamtsumme td, .vertrag-total th, .vertrag-total td, .total-artikel th, .total-artikel td { background: var(--summe-bg); font-weight: 400; }
.konto-total tr:first-child th, .konto-total tr:first-child td { border-top: 2px solid var(--border); }
.hinweis { margin: 0 0 12px; color: var(--muted); }
/* Customer data sheets (popups of the Datenblatt tab) */
.popup-seite { max-width: 760px; margin: 0 auto; padding: 12px 16px; }
.popup-titel { margin: 0 0 12px; padding: 6px 12px; border-radius: 6px; background: var(--caption-bg); color: var(--caption-text); font-size: 17px; text-align: center; }
.popup-info { margin: 0 0 12px; padding: 6px 12px; border-radius: 6px; background: var(--warning-bg); text-align: center; }
.popup-info:empty { display: none; }
.popup-meldung { text-align: center; }
.popup-form .form-row { grid-template-columns: minmax(80px, 120px) 1fr; }
.areal-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.areal-kopf select { padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); font: inherit; }
.areal-zeichnung { max-width: 100%; overflow-x: auto; }
.areal-svg { display: block; background: var(--surface); }
.areal-svg.editierbar { cursor: crosshair; }
.areal-markierungen path { fill: var(--areal-fill); fill-opacity: 0.5; stroke: var(--areal-stroke); stroke-width: 1; }
.areal-entwurf path, .areal-entwurf line { fill: none; stroke: var(--areal-stroke); stroke-width: 1; }
.frage { margin: 0; padding: 4px 0; border: 0; border-bottom: 1px solid var(--border); }
.frage-text { margin: 0 0 2px; }
.frage-antworten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.frage-antworten label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
.hinweis-box { margin: 12px 0; padding: 10px 12px; background: var(--warning-bg); border-left: 4px solid var(--warning-border); font-size: 0.9em; line-height: 1.4; }
.popup-aktionen { justify-content: center; }
.unterschrift { text-align: center; }
.unterschrift-canvas { width: 480px; max-width: 100%; height: 240px; border: 1px solid var(--text); background: var(--surface); touch-action: none; }
.behandlung-tabelle select, .behandlung-tabelle input { padding: 4px 6px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); font: inherit; }
.behandlung-tabelle .input-zahl { width: 70px; text-align: center; }
.behandlung-tabelle [hidden] { display: none; }
.behandlung-kommentar { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.datenblatt-tabelle { margin-bottom: 12px; }
.datenblatt-datum { width: 100px; text-align: center; white-space: nowrap; }
.datenblatt-text { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.datenblatt-hinweis { text-align: center; }
.vertrag-gruppe { margin-bottom: 16px; }
.areal-zeile th { font-weight: 400; font-style: italic; }
.werte-tabelle, .antwort-tabelle { margin-top: 6px; border-collapse: collapse; font-size: 13px; }
.werte-tabelle th, .werte-tabelle td, .antwort-tabelle th, .antwort-tabelle td { padding: 2px 6px; border: 1px solid var(--border); text-align: center; }
.ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.ampel-gruen { background: var(--ampel-gruen); }
.ampel-gelb { background: var(--ampel-gelb); }
.ampel-rot { background: var(--ampel-rot); }
.areal-vorschau { display: inline-block; margin-left: 8px; vertical-align: top; }
.areal-vorschau summary { cursor: pointer; color: var(--accent); }
.areal-vorschau .areal-svg { margin-top: 4px; border: 1px solid var(--text); }
/* Customer lists (Datenschutz, Telefonie, Wiedervorlagen, Selektion, VIP, Kunden löschen) */
.listen-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 12px; }
.listen-filter .section-title { flex-basis: 100%; }
.listen-filter input[type="text"], .listen-filter select { width: auto; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.listen-filter .button, .listen-filter button[type="submit"]:not(.link-button) { width: auto; margin: 0; }
.kartei-tabelle tfoot th { background: var(--summe-bg); }
.wv-tage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.wv-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.wv-tage .button { min-width: 120px; }
.wv-datum .button { min-width: 0; }
.wv-optionen { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.memo-popup summary { cursor: pointer; color: var(--accent); }
.memo-popup-inhalt { position: absolute; z-index: 5; width: min(550px, calc(100vw - 32px)); right: 16px; padding: 8px 12px; background: var(--surface); border: 3px solid var(--memo-rand); border-radius: 6px; }
.memo-popup-inhalt .memo-text { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.selektion-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px 16px; }
.selektion-felder .filter-field { flex-wrap: wrap; align-items: center; }
.selektion-felder .filter-field > label, .selektion-felder .filter-field > span { flex-basis: 100%; font-weight: 600; }
.selektion-felder select, .selektion-felder input[type="text"] { max-width: 100%; }
option.hauptquelle { font-weight: bold; }
.sortierung-pfeile { display: inline-flex; flex-direction: column; line-height: 1; vertical-align: middle; margin-right: 4px; }
.sortierung-pfeile a { text-decoration: none; font-size: 11px; }
.massenaenderung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.massenaenderung form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.massenaenderung textarea { width: 100%; min-height: 80px; }
.wv-massenaenderung [hidden] { display: none; }
.mainz-filter { display: flex; flex-direction: column; gap: 10px; }
.mainz-gruppe { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mainz-gruppe legend { font-weight: 600; padding: 0 4px; }
.mainz-gruppe select { max-width: 100%; min-width: min(100%, 320px); }
.mainz-legende { columns: 2 220px; margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.zaehler-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.zaehler-tabelle th, .zaehler-tabelle td { text-align: center; padding: 2px 4px; }
.zaehler-tabelle tr.zaehler td { color: var(--negative-text); font-weight: bold; }
/* Offers and contracts: entry form popup and customer file entry points */
.kv-suche { max-width: 520px; }
.inline-form { display: inline; margin: 0; }
.inline-form button[type="submit"]:not(.link-button) { width: auto; margin: 0; }
.inline-label { display: inline; margin: 0; font-weight: 400; }
.vertrag-form [hidden] { display: none; }
.vertrag-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px 24px; align-items: start; }
.vertrag-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.vertrag-tabelle thead th { padding: 4px; background: var(--th-bg); text-align: center; font-weight: 600; }
.vertrag-tabelle thead th:first-child { text-align: left; }
.vertrag-tabelle td { padding: 2px 4px; }
.vertrag-tabelle tfoot th, .vertrag-tabelle tfoot td { padding-top: 6px; border-top: 1px solid var(--border); text-align: left; }
.vertrag-form input.betrag { width: 72px; text-align: right; }
.vertrag-form input.kurz { width: 48px; }
.vertrag-form .zentriert { text-align: center; }
.vertrag-form input[type="text"], .vertrag-form select { padding: 3px 5px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; }
.vertrag-form input:disabled, .vertrag-form select:disabled { background: var(--bg); color: var(--muted); }
.vertrag-form input.datum { width: 110px; }
.vertrag-form .form-input input#aktion { flex: 1 1 240px; }
.vertrag-form .feld-fehler { border-color: var(--error-text); background: var(--error-bg); }
.vertrag-form .label-fehler { color: var(--error-text); }
.vertrag-form .klein { font-size: 11px; }
.areal-blatt { text-decoration: none; }
.raten-kacheln { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.rate-kachel { padding: 3px; border: 1px solid var(--text); font-size: 11px; }
.rate-kachel label { margin: 0; font-weight: 400; font-size: 11px; }
.rate-kachel input.betrag { width: 56px; }
.bhz-vorschau { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; font-size: 13px; }
.info-text { flex-basis: 100%; font-size: 12px; font-style: italic; color: var(--muted); }
.info-text summary { cursor: pointer; color: var(--accent); font-style: normal; }
.vertrag-aktionen { justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
.vertrag-hinweise { padding: 4px; text-align: center; }
.vertrag-fehler { margin: 0 0 12px; padding-left: 18px; }
.popup-seite:has(.vertrag-form) { max-width: 1100px; }
/* Contract changes: Storno, KZV, Zahlungsart, Weiterbehandlung, Medizin (popups) */
.aenderung-werte { width: 100%; border-collapse: collapse; font-size: 14px; }
.aenderung-werte th { padding: 3px 4px; text-align: left; font-weight: 400; }
.aenderung-werte td { padding: 3px 4px; }
.aenderung-werte .trenner tr:first-child th, .aenderung-werte .trenner tr:first-child td { border-top: 1px solid var(--border); }
.aenderung-werte .saldo th, .aenderung-werte .saldo td { font-weight: 700; }
.saldo-positiv { color: var(--positive-text); }
.saldo-negativ { color: var(--negative-text); }
.aenderung-felder { margin: 12px 0; }
.aenderung-form [hidden] { display: none; }
.aenderung-form input.betrag { width: 90px; text-align: right; }
.aenderung-hinweise { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; }
.zentriert { text-align: center; }
.aenderung-form .label-fehler { color: var(--error-text); }
.aenderung-form .form-row > .label { font-weight: 600; }
.aenderung-form .raten-kacheln input.betrag { width: 64px; }
.button.warnung { background: var(--negative-text); border-color: var(--negative-text); color: var(--accent-text); }
.vertrag-aktionen { flex-wrap: wrap; gap: 6px; }
.konto-zahlungsart { align-items: center; gap: 8px; margin-bottom: 8px; }

/* Kundentermine (termine app): customer panel, navigation and the server-rendered grid.
   Positions come as CSS variables in minutes from the grid start (--start, --dauer). */
.page.page-kalender { max-width: none; padding: 12px 16px; }
.kalender-seite { --slot-hoehe: 20px; --spalte-min: 72px; --zeit-breite: 40px; }
.kalender-seite label { display: inline; margin: 0; font-weight: 400; }
.kalender-seite button[type="submit"]:not(.link-button) { width: auto; margin: 0; }
.kundenmaske { margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 14px; }
.kundenmaske-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.kundensuche-kalender { position: relative; }
.kundensuche-kalender input[type="search"] { width: 260px; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; font: inherit; }
.kalender-treffer { list-style: none; margin: 4px 0 0; padding: 0; max-height: 222px; overflow-y: auto; }
.kalender-treffer:empty { display: none; }
.kalender-treffer li button { display: block; width: 100%; padding: 3px 8px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.kalender-treffer li button:hover, .kalender-treffer li button:focus-visible { background: var(--hover-bg); }
.kundenmaske-listen { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.kundenmaske-spalte { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.kundenmaske-titel { color: var(--muted); }
.vertragsliste, .terminliste { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow-y: auto; border: 1px solid var(--border); padding: 2px; min-height: 40px; }
.listen-eintrag { display: block; padding: 2px 6px; border: 1px solid transparent; border-radius: 3px; background: var(--eintrag-farbe, var(--surface)); color: var(--text); font-size: 13px; text-decoration: none; }
.intern-liste { margin: 6px 0; font-size: 14px; }
.intern-liste ul { list-style: none; margin: 2px 0 0; }
.intern-panel .intern-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; margin-top: 4px; }
.intern-knoepfe { margin-top: 6px; }
.listen-eintrag[aria-current="true"] { border-color: var(--focus); outline: 2px solid var(--focus); }
.termindetails { flex: 1 1 520px; }
.termindetails-felder { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }
.termindetails-felder > div { display: flex; flex-direction: column; gap: 2px; }
.termindetails-felder input, .termindetails-felder select { padding: 3px 6px; border: 1px solid var(--control-border); border-radius: 4px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); }
.termindetails-felder input[type="text"] { width: auto; }
.termindetails-felder option.ohne-dienstplan { color: var(--negative-text); }
.termin-aktionen { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-basis: 100%; }
.termin-aktionen button { padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.termin-aktionen button:disabled { color: var(--muted); }
/* the actions as one row below the fields (not a column like the field groups), Speichern
   and Abbrechen at its right end */
.termindetails-felder > .termin-aktionen { flex-direction: row; padding-top: 6px; border-top: 1px solid var(--border); }
.termin-aktionen button[data-aktion="speichern"] { margin-left: auto; }
.abstand { font-size: 11px; }
.termindetails-felder .abstand input { width: 48px; }

.kalender-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 8px; font-size: 14px; }
.steuerung-gruppe { display: flex; align-items: center; gap: 6px; }
.kalender-steuerung .button { padding: 4px 10px; font-weight: 400; }
.kalender-steuerung input { padding: 4px 6px; border: 1px solid var(--control-border); border-radius: 6px; font: inherit; }
.kalender-steuerung input[type="number"] { width: 64px; }
.umschalter { display: inline-flex; border: 1px solid var(--accent); border-radius: 6px; overflow: hidden; }
.umschalter a { padding: 4px 10px; color: var(--accent); text-decoration: none; }
.umschalter a + a { border-left: 1px solid var(--accent); }
.umschalter a[aria-current="true"] { background: var(--accent); color: var(--accent-text); }
.raumauswahl { position: relative; }
.raumauswahl summary { cursor: pointer; color: var(--accent); }
.raumauswahl form { position: absolute; z-index: 30; top: 100%; left: 0; display: flex; flex-direction: column; gap: 4px; min-width: 180px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 6px 18px var(--shadow); }
.kalender-laden { visibility: hidden; color: var(--muted); }
.kalender-laden.htmx-request { visibility: visible; }
.kalender-weitere a { margin-right: 4px; }

.kalender-scroll { overflow: auto; max-height: calc(100vh - 140px); border: 1px solid var(--border); background: var(--surface); }
.kalender-tabelle { display: inline-flex; flex-direction: column; min-width: 100%; }
.kalender-kopf, .kalender-koerper { display: flex; }
.kalender-kopf { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--kalender-linie); }
.zeit-spalte { flex: 0 0 var(--zeit-breite); position: sticky; left: 0; z-index: 5; background: var(--surface); border-right: 1px solid var(--kalender-linie); font-size: 12px; text-align: center; }
.zeit-kopf { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; }
.stunde { height: calc(4 * var(--slot-hoehe)); border-bottom: 1px solid var(--kalender-stunde); }
.tag-kopf, .tag { flex: var(--spalten) 0 calc(var(--spalten) * var(--spalte-min)); min-width: calc(var(--spalten) * var(--spalte-min)); border-left: 2px solid var(--kalender-linie); }
.tag-kopf { display: flex; flex-direction: column; text-align: center; font-size: 13px; }
.tag-kopf.feiertag { background: var(--feiertag-kopf-bg); }
.feiertag-name { font-size: 12px; font-weight: 600; }
.spalten-koepfe { display: flex; margin-top: auto; }
.spalte-kopf { flex: 1 1 0; min-width: var(--spalte-min); overflow: hidden; padding: 1px 2px; border-left: 1px solid var(--border); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ausgeblendet { position: relative; margin: 2px auto; padding: 0 6px; border-radius: 9px; background: var(--warning-bg); color: var(--warning-text); font-size: 12px; cursor: help; }
.tag { display: flex; position: relative; height: calc(var(--slots) * var(--slot-hoehe)); }
.tag.feiertag { background: var(--feiertag-bg); }
.spalte {
  flex: 1 1 0;
  position: relative;
  min-width: var(--spalte-min);
  border-left: 1px solid var(--border);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(4 * var(--slot-hoehe) - 1px), var(--kalender-stunde) calc(4 * var(--slot-hoehe) - 1px) calc(4 * var(--slot-hoehe))),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--slot-hoehe) - 1px), var(--kalender-slot) calc(var(--slot-hoehe) - 1px) var(--slot-hoehe));
}
.block { position: absolute; left: 0; right: 0; top: calc(var(--start) / 15 * var(--slot-hoehe)); height: calc(var(--dauer) / 15 * var(--slot-hoehe)); background: var(--kalender-block); pointer-events: none; }
.block.krank, .block.urlaub { width: 45%; opacity: 0.6; }
.block.krank { background: var(--krank-bg); }
.block.urlaub { background: var(--urlaub-bg); }
.karte {
  position: absolute;
  z-index: 1;
  top: calc(var(--start) / 15 * var(--slot-hoehe));
  height: calc(var(--dauer) / 15 * var(--slot-hoehe) - 1px);
  left: calc(var(--lane) / var(--lanes) * 100%);
  width: calc(100% / var(--lanes) * var(--breite));
  border: 1px solid var(--karte-rand);
  border-radius: 3px;
  background: var(--farbe);
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
  cursor: default;
}
a.karte { cursor: pointer; }
.karte-text { display: block; height: 100%; overflow: hidden; padding: 1px 3px; }
.karte-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte.verpasst .karte-text { text-decoration: line-through; color: var(--negative-text); }
.karte.abgesagt .karte-text { text-decoration: line-through; color: var(--positive-text); }
.karte.aktiv { border: 2px solid var(--focus); background: var(--aktiv-bg); }
.karte:hover, .karte:focus, .karte:focus-within, .ausgeblendet:hover, .ausgeblendet:focus { z-index: 20; }
.karte:hover, .ausgeblendet:hover { outline: none; }
.karte .tooltip, .ausgeblendet .tooltip { display: none; position: absolute; top: 0; left: 100%; z-index: 20; min-width: 200px; padding: 6px 8px; border: 1px solid var(--kalender-linie); border-radius: 4px; background: var(--farbe, var(--surface)); box-shadow: 0 4px 12px var(--shadow-strong); color: var(--text); font-size: 12px; text-align: left; white-space: nowrap; text-decoration: none; }
.ausgeblendet .tooltip { top: 100%; left: 0; }
.tooltip span, .tooltip strong { display: block; min-height: 1.2em; }
.karte:hover .tooltip, .karte:focus .tooltip, .ausgeblendet:hover .tooltip, .ausgeblendet:focus .tooltip { display: block; }

/* Booking: placing the slot ('Setzen'), the action dialog and the message */
.setz-cursor { position: absolute; z-index: 15; left: 0; right: 0; top: calc(var(--start) / 15 * var(--slot-hoehe)); height: calc(var(--dauer) / 15 * var(--slot-hoehe)); border: 2px dashed var(--accent); background: var(--setz-bg); pointer-events: none; }
.setz-cursor.fixiert { border-style: solid; background: var(--setz-fixiert-bg); }
.kalender-seite.platzieren .spalte { cursor: crosshair; }
.kalender-seite.platzieren .karte.aktiv { opacity: 0.35; }
.kalender-meldung { margin: 4px 0; padding: 6px 10px; border-radius: 6px; background: var(--success-bg); color: var(--success-text); box-shadow: inset 4px 0 0 var(--success-border); }
.termin-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.termin-dialog::backdrop { background: var(--backdrop); }
.termin-dialog-titel { margin: 0 0 12px; font-size: 17px; }
.termin-dialog label { margin: 0; font-weight: 400; }
.termin-dialog input[type="text"], .termin-dialog select { padding: 4px 6px; border: 1px solid var(--control-border); border-radius: 6px; font: inherit; }
.termin-dialog button[type="submit"]:not(.link-button) { width: auto; margin: 0; }
.dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.termin-warnungen { margin: 0 0 12px; padding: 6px 10px; list-style: none; background: var(--accent); color: var(--accent-text); font-size: 1.1em; }
.termin-warnungen p { margin: 0; }
.termin-warnungen li.termin-verschoben { background: var(--warnung-stark-bg); color: var(--text); }
.termin-hinweis { padding: 6px 10px; background: var(--error-bg); color: var(--error-text); }
.termin-hinweis-rot { color: var(--negative-text); }
.termin-dialog-fehler p:first-child { color: var(--error-text); }

/* Druckansicht: panel hidden, grid in full height */
.kalender-seite.druckansicht .kundenmaske { display: none; }
.kalender-seite.druckansicht .kalender-scroll { max-height: none; }
@media print {
  .site-header, .kundenmaske, .kalender-steuerung, .kalender-weitere, .kalender-meldung, .setz-cursor { display: none; }
  .page.page-kalender { padding: 0; }
  .kalender-scroll { max-height: none; overflow: visible; border: 0; }
  .karte .tooltip { display: none !important; }
}

/* Kasse: Einnahmen/Ausgaben, Kassenbuch, Gutscheine */
.kasse-kunde { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.kasse-form { margin: 0 0 20px; }
.kasse-eingabe input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; }
.kasse-eingabe input.kasse-nummer { width: 6em; text-align: center; }
.kasse-eingabe input.kasse-menge { width: 4em; text-align: right; }
.kasse-eingabe input.kasse-betrag, input.kasse-betrag { width: 7em; text-align: right; }
.kasse-eingabe input[readonly] { background: var(--bg); color: var(--muted); }
.kasse-eingabe output { font-size: 15px; font-weight: 600; }
.kasse-hinweis { min-height: 1.2em; margin: 4px 0; color: var(--error-text); }
.kasse-journal .kasse-neutral td { color: var(--muted); font-style: italic; }
.kasse-journal .kasse-finanz td { color: var(--muted); font-style: italic; }
.kasse-journal tfoot th, .kasse-journal tfoot td { background: var(--summe-bg); font-weight: 600; }
.kasse-aktionen { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.konto-einnahme { color: var(--positive-text); }
.konto-ausgabe { color: var(--negative-text); }
.kasse-zusammenfassung { border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
.kasse-zusammenfassung th { text-align: left; font-weight: 400; padding: 2px 16px 2px 0; }
.kasse-zusammenfassung td { text-align: right; padding: 2px 0; white-space: nowrap; }
.kasse-zusammenfassung .kasse-stark th, .kasse-zusammenfassung .kasse-stark td { font-weight: 700; }
.kasse-zusammenfassung .kasse-grau th, .kasse-zusammenfassung .kasse-grau td { color: var(--muted); }
.kasse-exporte { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }

/* Lastschriften */
.ls-kopf { border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; }
.ls-kopf th { text-align: left; font-weight: 400; padding: 4px 12px 4px 0; }
.ls-kopf td { padding: 4px 12px; text-align: center; min-width: 10em; }
.ls-status-ok { background: var(--success-bg); }
.ls-status-fehlt { background: var(--error-bg); color: var(--error-text); }
.ls-warnung { margin: 8px 0 12px; padding: 10px 12px; background: var(--feiertag-bg); border-left: 4px solid var(--error-border); }
.ls-tabelle td { vertical-align: top; }
.ls-summen { display: flex; flex-wrap: wrap; gap: 24px; margin: 12px 0; }

/* OP-Liste */
.op-titel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.op-tabelle { margin-bottom: 24px; }
.op-tabelle .op-aktion { white-space: nowrap; }
.op-tabelle select.op-retext { background: var(--negative-text); color: var(--accent-text); }
.op-rls-panel[hidden] { display: none; }
.op-rls-panel { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

/* Artikel, Bestellliste, Warenentnahme */
.artikel-tabelle .nowrap { white-space: nowrap; }
.artikel-tabelle input.artikel-zahl { width: 6em; text-align: right; }
.artikel-tabelle input[name="bezeichnung"] { min-width: 14em; }
.artikel-tabelle .artikel-minus .nur-plus > *, .artikel-tabelle .artikel-minus .nur-plus { visibility: hidden; }
.artikel-meldung { display: block; font-size: 12px; color: var(--muted); }
.artikel-meldung.fehler { color: var(--error-text); }

/* Personal */
.personal-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.personal-auswahl select { max-width: 100%; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.personal-meldung { color: var(--error-text); }
.personal-gesperrt { margin: 20px; text-align: center; color: var(--error-text); }
.personal-aktuell { display: inline-block; min-width: 120px; }
.kartei-dialog .nowrap { white-space: nowrap; }
.pausen-form select[hidden] { display: none; }

/* Dienstpläne, IST-Arbeitszeiten, Stundenzettel */
.zeiten-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.dienstplan-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.dienstplan-tabelle select { min-width: 80px; }
.dienstplan-loeschen-ab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.dienstplan-loeschen-ab button[type="submit"] { width: auto; margin: 0; }
.zeiten-feiertag { color: var(--negative-text); }
.zeiten-hinweis { cursor: help; }
.zeiten-negativ { color: var(--negative-text); }
.zahl-spalte, .zeiten-tabelle td.zahl { text-align: right; white-space: nowrap; }
.zeiten-konto { margin-top: 24px; }
.zeiten-konto h2 { font-size: 17px; }
.zeiten-auszahlung { margin-top: 8px; }
.zeiten-auszahlung summary { cursor: pointer; color: var(--accent); }
.ist-tabelle tr.samstag td { background: var(--samstag-bg); }
.ist-tabelle tr.sonntag td, .ist-tabelle tr.feiertag td { background: var(--feiertag-bg); }
.ist-tabelle input.ist-pause { width: 56px; text-align: center; }
.pausenregel-aktiv { color: var(--positive-text); }
.pausenregel-inaktiv { color: var(--negative-text); }
.pausenregel-ind { color: var(--individual-text); }
.stundenzettel-tabelle td.rot { color: var(--negative-text); }
.stundenzettel-tabelle tr.stundenzettel-tag td { background: var(--stundenzettel-tag-bg); }
.provision-einstellungen { padding: 8px; background: var(--border); }
#provision-filter[hidden], .provision-einstellungen[hidden], .provision-einstellungen [hidden], .provision-tabelle [hidden] { display: none; }
.provision-hinweis { margin: 12px auto; padding: 10px 12px; max-width: 640px; border: 1px solid var(--error-text); color: var(--error-text); text-align: center; font-size: 14px; }
.provision-titel { font-size: 17px; margin: 16px 0 8px; }
.provision-tabelle td.betrag, .provision-tabelle th.betrag { text-align: right; white-space: nowrap; }
.provision-tabelle td.strike { text-decoration: line-through; color: var(--muted); }
.provision-tabelle .storno { display: block; color: var(--error-text); }
.provision-tabelle [data-details] { cursor: pointer; }
.provision-tabelle [data-details]:hover, .provision-tabelle [data-details]:focus { background: var(--hover-bg); }
.provision-tabelle tr.provision-total td { font-weight: 700; background: var(--summe-bg); }
.provision-tabelle tr.provision-details > td { background: var(--bg); }
.provision-tabelle .provision-drucken { float: right; }
.provision-meldung { margin: 24px 0; text-align: center; }
.provision-legende { margin-top: 16px; font-style: italic; color: var(--muted); }
.provision-ausstehend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
@media print {
  .no-print { display: none !important; }
}

/* Marketing and Promotor */
.marketing-meldung { display: block; font-size: 12px; color: var(--muted); }
.marketing-meldung.fehler { color: var(--error-text); }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog-kopf h2 { margin: 0; font-size: 18px; }
.leads-liste { margin: 8px 0; padding: 0; list-style: none; }

/* Lead inbox (Anfragen), Lead Anfragen report, Marketingaktionen */
.anfragen-tabelle .center, .lead-bericht .center { text-align: center; }
.anfragen-memo td { background: var(--bg); }
.anfragen-memo-text { max-width: 700px; overflow-wrap: anywhere; }
.dublette-marker { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--negative-text); }
.form-actions-rechts { justify-content: flex-end; }
p.center { text-align: center; }

/* Facebook screens */
.fb-seite .headline { margin: 0 0 12px; font-weight: 600; }
.fb-seite .note { color: var(--muted); font-size: 12px; font-weight: 400; }
.fb-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; }
.fb-zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fb-zeitraum select, .fb-zeitraum input[type="date"] { width: auto; padding: 4px 6px; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.fb-datum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.fb-datum[hidden] { display: none; }
.fb-tabelle { margin-bottom: 16px; }
.fb-fehler { margin: 8px 0; padding: 10px; border: 2px solid var(--hf-primaer); overflow-wrap: anywhere; }
.fb-seite .footnote { margin: 4px 0 16px; color: var(--muted); font-size: 13px; }

/* API-Zugänge (api app) */
.zugang-aktionen { white-space: nowrap; }
.zugang-aktionen form { display: inline; }
.zugang-aktionen > * + * { margin-left: 8px; }
.zugang-gruppe { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.zugang-gruppe legend { padding: 0 4px; font-weight: 600; }
.zugang-form input[type="text"] { max-width: 400px; }
.zugangsdaten dt { margin-top: 8px; font-weight: 600; }
.zugangsdaten dd { margin: 2px 0 0; }
.zugangsdaten code { word-break: break-all; user-select: all; }