/* ═══════════════════════════════════════════════════════════════
   BE:KI Direct – Design System
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette exakt wie BE:KI Base (Vorbild) */
  --navy:           #1648a6;
  --navy-d:         #0f3683;
  --teal:           #23b5a0;
  --teal-d:         #1c9583;
  --sky:            #15a7ce;

  --primary:        var(--navy);
  --primary-light:  var(--teal-d);
  --primary-bg:     #e8eef8;
  --accent:         var(--navy);

  --success:        #3a8c68;
  --success-bg:     #d4ede2;
  --warning:        #d97706;
  --warning-bg:     #fef3c7;
  --danger:         #dc2626;
  --danger-bg:      #fee2e2;
  --info:           #3a6cb0;
  --info-bg:        #e0eaf8;
  --muted:          #6b7a8d;
  --muted-bg:       #f4f6fa;

  --bg:             #f3f5f9;
  --surface:        #ffffff;
  --border:         #eef1f5;
  --border-dark:    #e1e6ee;
  --text:           #1a2740;
  --text-sub:       #64748b;

  --sidebar-w:      232px;
  --topbar-h:       58px;
  --radius:         10px;
  --radius-lg:      16px;
  --shadow:         0 1px 6px rgba(30,61,115,.07);
  --shadow-md:      0 4px 16px rgba(30,61,115,.10);
  --shadow-lg:      0 8px 40px rgba(30,61,115,.16);

  --font:           'Segoe UI', system-ui, sans-serif;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; height: 100vh; overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ─── Layout ─────────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: linear-gradient(160deg, #0d2557 0%, var(--navy) 58%, #1a7a6a 100%);
  box-shadow: 3px 0 18px rgba(13,35,71,.26);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 200;
  transition: transform .25s ease;
  overflow: hidden;
}

.sidebar-brand {
  background: #fff;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  cursor: pointer;
}

.sidebar-logo-img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  opacity: .95;
}

.brand-org {
  font-size: .68rem;
  color: #9ba8bb;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: rgba(255,255,255,.72);
  font-size: .88rem;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
  position: relative;
  text-decoration: none !important;
  border-left: 3px solid transparent;
}

.nav-item:hover   { background: rgba(255,255,255,.09); color: #fff; border-left-color: rgba(122,220,176,.55); }
.nav-item.active  { background: rgba(255,255,255,.14); color: #fff; border-left-color: rgba(122,220,176,.8); }

.nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; }

.nav-static {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav-badge {
  min-width: 18px; height: 18px;
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 9px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sidebar-bottom {
  padding: 10px 10px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}

#sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 190;
}

/* Nicht angemeldet: Nav-Items sichtbar, aber gesperrt (Suite-Stil) */
#sidebar.nav-locked .nav-item {
  opacity: .42;
  cursor: default;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   HERO / LANDING (vor Login, exakt wie BE:KI Base)
   ════════════════════════════════════════════════════════════ */
.hero-page {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 24px 28px;
  margin: -28px -28px -48px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(22, 72, 166, .22) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(13, 74, 107, .26) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(35, 181, 160, .18) 0%, transparent 50%),
    linear-gradient(to right, transparent 0%, rgba(5,10,20,.4) 100%),
    linear-gradient(to bottom, #0d2347 0%, var(--navy) 55%, #1a7a6a 100%);
}
.hero-content { max-width: 920px; width: 100%; text-align: center; }
.hero-footnote {
  margin-top: 18px;
  color: rgba(255,255,255,.45);
  font-size: 11.5px;
  letter-spacing: .04em;
  font-weight: 500;
}
.hero-logo {
  width: 720px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 38px;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.3));
}
.hero-headline {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.hero-sub {
  margin: 0 auto 22px;
  color: #cdd6e3;
  font-size: .98rem;
  line-height: 1.65;
  max-width: 580px;
  text-align: center;
}

/* 4 Module-Cards in Reihe */
.hero-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 26px;
}
@media (max-width: 760px) {
  .hero-modules { grid-template-columns: repeat(2, 1fr); }
}
.hero-module {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 14px 12px 16px;
  text-align: center;
  transition: transform .15s, border-color .15s;
}
.hero-module:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .26);
}
.hero-module-icon {
  font-size: 22px;
  margin-bottom: 4px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.hero-module-name {
  color: #f1f5f9;
  font-weight: 800;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.hero-module-desc {
  color: #94a3b8;
  font-size: 11.5px;
  line-height: 1.45;
}
.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-hero-primary {
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 18px 44px;
  font-size: 1.18rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 28px rgba(22, 72, 166, .5);
  transition: filter .15s, transform .05s;
  letter-spacing: .01em;
}
.btn-hero-primary:hover  { filter: brightness(1.1); }
.btn-hero-primary:active { transform: scale(.98); }
.btn-hero-ghost {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px);
  color: #f1f5f9;
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  padding: 13px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .35);
}

/* Header-Login-Formular (Base-Stil: .text-inp / .btn-navy) */
.text-inp {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-dark);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.text-inp:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,72,166,.10); }
.btn-navy {
  width: 100%;
  background: linear-gradient(135deg, var(--navy), var(--teal-d));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s;
}
.btn-navy:hover { filter: brightness(1.08); }
.btn-navy:disabled { opacity: .6; cursor: not-allowed; }
.hero-login-err {
  background: #ffe1ec; color: #b73166;
  border-radius: 8px; padding: 7px 11px;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}

/* ─── Main ───────────────────────────────────────────────────── */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Topbar ─────────────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 3px solid var(--navy);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 250;
  box-shadow: 0 2px 16px rgba(22,72,166,.10);
}

.topbar-logo-institut {
  height: 80px;
  width: auto;
  opacity: .92;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}

/* Login button (Gradient-Pille wie Base) */
#login-btn {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--navy), var(--teal-d));
  border: none; color: #fff;
  border-radius: 22px; padding: 7px 14px 7px 12px;
  cursor: pointer; font-family: inherit; font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(22,72,166,.15);
  transition: filter .15s, transform .05s;
}
#login-btn:hover  { filter: brightness(1.08); }
#login-btn:active { transform: scale(.98); }

.login-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(160deg, var(--navy), var(--teal));
  color: #fff;
  font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

#login-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.4) inset;
  width: 280px; z-index: 400;
  overflow: hidden;
}

.lp-block { padding: 12px 18px; }
.modal-error {
  background: #ffe1ec; color: #b73166;
  border-radius: 8px; padding: 7px 11px;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}

.lp-profile { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 0; }
.lp-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, var(--navy), var(--teal)); color: #fff; font-size: .88rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-name { font-size: 14px; font-weight: 800; color: var(--text); }
.lp-org  { font-size: 11.5px; color: var(--text-sub); margin-top: 1px; }
.lp-sep  { height: 1px; background: #f0f4f8; margin: 0; }
.lp-nav-btn {
  display: block; width: calc(100% - 36px); text-align: left;
  margin: 8px 18px; background: #fff; border: 1.5px solid var(--border-dark); padding: 9px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--navy);
  cursor: pointer; font-family: inherit; border-radius: 10px;
  transition: all .12s;
}
.lp-nav-btn:hover { border-color: var(--navy); background: var(--muted-bg); }

/* API-Key Modal */
.modal-overlay-custom {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box-custom {
  background: #fff; border-radius: 18px; padding: 28px 26px;
  width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); position: relative;
}
.modal-close-custom {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-sub);
}

/* Footer */
#app-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
}

#app-footer .footer-copy {
  font-size: 11.5px;
  color: #9ba8bb;
  font-weight: 500;
}

#app-footer .footer-copy strong {
  color: #6b7a8d;
  font-weight: 600;
}

#app-footer .footer-version {
  font-size: 11px;
  color: #c8d0dc;
}

#menu-toggle { display: none; }


/* ─── Page outlet ────────────────────────────────────────────── */
#page-outlet {
  flex: 1;
  overflow-y: auto;
  /* Unten war reichlich Luft, die nur Rollweg kostete. */
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ─── Page header ────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card.highlight {
  background: linear-gradient(180deg, rgba(58,140,104,.08), rgba(58,140,104,.02));
  border-color: rgba(58,140,104,.18);
}

/* ─── Erste Schritte (aus BE:KI First) ────────────────────────── */
.check-list { padding-left: 18px; }
.check-list li { margin-bottom: 9px; font-size: .88rem; line-height: 1.6; }

.accordion-wrap { display: grid; gap: 12px; }
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.accordion-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background: none;
  border: none;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
}
.accordion-title { font-size: .92rem; font-weight: 700; color: var(--navy); }
.accordion-icon { color: var(--teal-d); font-size: 1.1rem; font-weight: 700; }
.accordion-content { display: none; padding: 0 18px 18px; font-size: .88rem; line-height: 1.6; color: var(--text-sub); }
.accordion-item.open .accordion-content { display: block; }

.dialogue-card { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.dialogue-q { padding: 14px 16px; background: var(--muted-bg); color: var(--navy); font-size: .95rem; font-weight: 700; }
.dialogue-a { padding: 14px 16px 16px; font-size: .88rem; line-height: 1.6; min-height: 24px; }

.card-title {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════
   PINNWAND-DASHBOARD (exakt wie BE:KI Base/Suite)
   ════════════════════════════════════════════════════════════ */
.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.page-sub {
  font-size: 13px;
  color: var(--muted);
}

.dashboard-pinwand {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Obere Reihe so hoch wie ihr Inhalt, der Notizzettel bekommt den Rest.
   Vorher war es umgekehrt: die drei Karten zogen sich in die Länge und der
   breite Zettel darunter blieb ein Streifen – dabei wird auf ihm geschrieben
   und in den drei Karten nur nachgesehen. */
.dashboard-pinwand .desk-surface {
  flex: 1;
  grid-template-rows: auto minmax(200px, 1fr);
}
.dashboard-pinwand .desk-card { min-height: 0; }

/* In den drei Karten oben ist die Notizfläche ein Randvermerk, kein
   Schreibblock – drei Zeilen genügen. */
.dashboard-pinwand .desk-aufgaben .desk-writing-area,
.dashboard-pinwand .desk-fristen .desk-writing-area {
  flex: 0 0 auto;
  height: 72px;
  min-height: 72px;
}

.desk-surface {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr .96fr .9fr;
  gap: 16px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(251,255,248,.88), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    radial-gradient(circle at 22% 26%, rgba(111,146,104,.08) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 68% 62%, rgba(106,139,100,.06) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 82% 34%, rgba(98,129,93,.05) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #dfead6 0%, #d2e2c8 24%, #c4d8bc 54%, #d7e5ce 78%, #e8f1df 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.36),
    inset 0 -10px 24px rgba(67,96,62,.08),
    0 16px 36px rgba(67,96,62,.12);
  flex-shrink: 0;
}
.desk-surface::before {
  content:''; position:absolute; inset:14px;
  border-radius:18px; border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}
.desk-surface::after {
  content:''; position:absolute; inset:0; border-radius:26px;
  pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle at var(--stain-x1, 26%) var(--stain-y1, 24%),
      rgba(111,82,47,.12) 0, rgba(161,130,86,.07) 28%, transparent 55%),
    radial-gradient(circle at var(--stain-x2, 72%) var(--stain-y2, 66%),
      rgba(114,82,44,.10) 0, rgba(168,140,92,.05) 24%, transparent 50%);
  background-size: var(--stain-s1, 110px) var(--stain-s1, 110px),
                   var(--stain-s2, 88px) var(--stain-s2, 88px);
  background-repeat: no-repeat;
  filter: blur(.2px);
}

.desk-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(205,214,229,.96);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 22px rgba(30,61,115,.07), 0 3px 8px rgba(53,34,15,.08);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.desk-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}
.desk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.desk-card-date {
  font-size: 11px;
  color: #8a96a8;
  font-weight: 700;
}
.desk-card-pin {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b7f0d0, var(--teal-d) 68%, #2f6e54 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.desk-card-clip {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 18px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #dde3eb, #b4becd);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.desk-thumbtack {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #f3f3f3 66%, #d8d8d8 100%);
  border: 1px solid rgba(160,160,160,.7);
  box-shadow: 0 2px 5px rgba(0,0,0,.16);
}
.desk-thumbtack::before {
  content:''; position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:2px; height:13px;
  background: linear-gradient(180deg, #8b8b8b, #d4d4d4);
  border-radius:2px; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* Hier wird nachgesehen, nicht geschrieben: keine Linien, dafuer Luft.
   Die linierten Karten sind Vorgaenge und Fristen. */
.desk-termine {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,253,255,.96));
  padding-top: 22px;
}
.desk-termine .naechste-kopf   { margin-bottom: 16px; }
.desk-termine .naechste-datum  { font-size: 15.5px; line-height: 1.4; }
.desk-termine .naechste-meta   { font-size: 12px; margin-top: 5px; }
.desk-termine .naechste-teilnahme { padding-top: 14px; }
.desk-termine .teilnahme-zeile { margin-bottom: 14px; }
.desk-termine .teilnehmer-gruppe { margin-bottom: 12px; }
.desk-termine .teilnehmer-liste { gap: 5px; }
/* Linienpapier ueber die ganze Karte - Liste und Notizflaeche sitzen im
   selben Zeilenraster, statt dass nur der untere Teil liniert ist. */
.desk-aufgaben {
  /* Die Linien zuerst: die erste Ebene liegt oben. Lagen sie darunter,
     wusch die weisse Deckschicht sie weg und die Karte sah leer aus. */
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(30,61,115,.13) 23px 24px),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)),
    linear-gradient(180deg, #d9ecfb 0 18px, #eef7fe 18px, #f7fbff 100%);
  transform: rotate(-1deg);
  padding-top: 14px;
}
.desk-fristen {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(30,61,115,.13) 23px 24px),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,252,.95));
  padding-top: 22px;
}

/* Auf liniertem Papier braucht die Schreibflaeche keine eigenen Linien -
   sonst laegen zwei Raster uebereinander. */
.desk-aufgaben .desk-writing-area,
.desk-fristen .desk-writing-area {
  background: none;
  box-shadow: none;
}
/* Und die Liste keine gestrichelten Trenner: die Linien trennen schon. */
.desk-aufgaben .desk-item,
.desk-fristen .desk-item { border-top: none; }
.desk-sticky {
  grid-column: 1 / -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.9)),
    linear-gradient(180deg, #fffef6 0%, #f9efc8 100%);
  transform: rotate(-.6deg);
}
.desk-sticky::before, .desk-sticky::after {
  content:''; position:absolute; top:-12px;
  width:64px; height:18px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #dde3eb, #b4becd);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.desk-sticky::before { left: 24px; transform: rotate(-7deg); }
.desk-sticky::after  { right: 24px; transform: rotate(7deg); }

.desk-letterhead {
  margin: -2px -2px 10px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid rgba(30,61,115,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(236,242,250,.95), rgba(247,249,252,.65));
}
.desk-letterhead img {
  display: block;
  width: 44px; height: 44px;
  object-fit: contain;
  mix-blend-mode: multiply;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 2px rgba(30,61,115,.08));
}

.desk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 132px;
  overflow-y: auto;
  padding-right: 4px;
}
.desk-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 0;
  border-top: 1px dashed #d9e1ee;
}
.desk-item:first-child { border-top: none; padding-top: 2px; }
.desk-item-badge {
  min-width: 48px;
  border-radius: 10px;
  background: #f4f7fb;
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  padding: 6px 8px;
  text-align: center;
  flex-shrink: 0;
}
.desk-item-badge.urgent { background: #ffe1ec; color: #b73166; }
.desk-item-badge.warn   { background: #fdf3d3; color: #a07c00; }

/* Drei Tage vor Fristende. Ein farbiger Streifen am Rand und sonst
   nichts: die Zeile steht ohnehin oben, und ein zweites lautes Zeichen
   neben der Marke „dringlich“ machte aus einer Auskunft eine Warnung. */
.desk-item.ist-dringlich {
  border-left: 3px solid #b73166;
  margin-left: -9px;
  padding-left: 6px;
}

/* Die Marke hinter dem Titel ist kleiner als die Datumsmarke davor –
   sie sagt etwas über die Zeile, sie ist nicht ihr Anfang. */
.desk-item-title .desk-item-badge {
  min-width: 0;
  margin-left: 5px;
  padding: 1px 6px;
  font-size: 9.5px;
  vertical-align: middle;
}
.desk-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.desk-item-meta {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.desk-item-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

.desk-writing-area {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  border-radius: 10px;
  padding: 10px 12px 8px;
  font: 500 12.5px/24px "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
  color: #39465b;
  background:
    linear-gradient(180deg, transparent 0 23px, rgba(30,61,115,.10) 23px 24px),
    linear-gradient(90deg, rgba(199,79,61,.14) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.76));
  background-size: 100% 24px, 100% 100%, 100% 100%;
  box-shadow: inset 0 1px 3px rgba(30,61,115,.05);
  flex: 1;
  min-height: 60px;
}
.desk-writing-area::placeholder { color: #8e8f96; font-style: italic; }
.desk-writing-area:focus {
  box-shadow: inset 0 1px 3px rgba(30,61,115,.05), 0 0 0 2px rgba(30,61,115,.08);
}

/* ─── Dashboard grid ─────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.dash-grid .card-title {
  margin-bottom: 14px;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.data-table th {
  background: var(--muted-bg);
  border-bottom: 1px solid var(--border);
  padding: 11px 14px;
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-sub);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f0f4fa; }

.data-table .actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* ─── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.filter-bar input[type="text"],
.filter-bar input[type="search"],
.filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: .875rem;
  background: var(--surface);
  color: var(--text);
}

.filter-bar input[type="text"],
.filter-bar input[type="search"] { min-width: 220px; }
.filter-bar select { min-width: 150px; }

/* ─── Suchfeld (web/suche.js) ─────────────────────────────────────
   Mittig und begrenzt breit, nicht über den ganzen Schirm gezogen –
   ein randloses Feld liest sich nicht besser, nur weiter. */
.ki-suche {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 620px;
  margin: 0 auto;
}

.ki-suche input[type="search"] {
  flex: 1 1 320px;
  min-width: 220px;
  min-height: 52px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.ki-suche input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
}

.ki-suche-knopf { white-space: nowrap; min-height: 52px; padding-inline: 20px; }

/* Verlauf einer abgelegten Auskunft im Dialog – lang genug für ein
   Gespräch mit fünf Rückfragen, deshalb mit eigenem Rollbalken. */
.ki-archiv-verlauf { max-height: 60vh; overflow-y: auto; margin-bottom: 12px; }

/* ─── Feld mit Änder-Knopf und Regeln bei Bedarf ──────────────────
   Wie ein Benutzername oder Passwort aussehen muss, steht nicht dauerhaft
   da, sondern geht auf, sobald man das Feld anfasst. */
.feld-aendern {
  border: none;
  background: none;
  padding: 0 4px;
  margin-left: 4px;
  font-size: .85rem;
  color: var(--primary);
  cursor: pointer;
}

.feld-aendern:hover { color: var(--text); }

.feld-regeln {
  margin-top: 6px;
  padding: 7px 10px;
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  background: var(--muted-bg);
  font-size: .78rem;
  color: var(--text-sub);
}

/* ─── Kopfzeile einer Karte: Titel und Knöpfe beieinander ─────────
   Vorher standen sie an den beiden Rändern; hinter der Lücke dazwischen
   ging rechts regelmäßig etwas unter. */
.splan-kopf {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 12px;
}

/* ─── Ordner (web/ordner.js) ─────────────────────────────────── */
.ordner-leiste { margin-bottom: 16px; }

.ordner-brotkrumen {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ordner-krume {
  background: none;
  border: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 5px;
}

.ordner-krume:hover { background: var(--muted-bg); }
.ordner-krume.aktiv { color: var(--text); cursor: default; }
.ordner-pfeil { color: var(--text-sub); font-size: .85rem; }

.ordner-kacheln { display: flex; gap: 8px; flex-wrap: wrap; }

.ordner-kachel {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

/* Kategorie-Ordner entstehen automatisch – sie sehen bewusst anders aus als
   selbst angelegte, weil man sie nicht umbenennen oder löschen kann. */
.ordner-kachel.automatisch { background: var(--muted-bg); border-style: dashed; }

.ordner-oeffnen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.ordner-oeffnen:hover { background: var(--muted-bg); }

.ordner-zahl {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--muted-bg);
  border-radius: 999px;
  padding: 1px 7px;
}

.ordner-mini {
  border: none;
  border-left: 1px solid var(--border);
  background: none;
  padding: 0 8px;
  font-size: .8rem;
  color: var(--text-sub);
  cursor: pointer;
}

.ordner-mini:hover { background: var(--muted-bg); color: var(--text); }

.ordner-neu {
  padding: 7px 12px;
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
}

.ordner-neu:hover { color: var(--primary); border-color: var(--primary); }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-group label .req { color: var(--danger); margin-left: 2px; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.form-group input,
.form-group textarea { width: 100%; }

/* Auswahlfenster sollen sich am Inhalt orientieren, nicht die ganze Spalte füllen */
.form-group select { width: auto; min-width: 140px; max-width: 100%; }

/* Kurze Eingaben (Alter, Reihenfolge, PLZ …) sollen nicht die ganze Spaltenbreite einnehmen */
.form-group.field-xs input { width: auto; max-width: 90px; }
.form-group.field-sm input { width: auto; max-width: 180px; }

/* ── Ein Feld so breit wie das, was hineingehört ──────────────────
   Ein Datum braucht keine halbe Seitenbreite. Die Regel darüber sagt
   das zwar für Auswahlfelder, aber `input { width: 100% }` zog alles
   andere weiterhin auf die volle Spalte – auch Datum, Uhrzeit und
   Anzahl. Das betraf gut 40 Felder in der App und war die häufigste
   Platzverschwendung. Feste Obergrenzen nach Feldart statt einer
   Sonderklasse, die man an jedem Feld einzeln setzen müsste. */
.form-group input[type="date"]   { width: auto; max-width: 165px; }
.form-group input[type="time"]   { width: auto; max-width: 115px; }
.form-group input[type="number"] { width: auto; max-width: 110px; }
.form-group input[type="tel"]    { width: auto; max-width: 210px; }

/* Reihe aus lauter kurzen Feldern: die Spalten richten sich nach dem
   Inhalt, statt den Platz gleichmäßig zu verteilen und leer zu lassen. */
.form-row-eng {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
}
.form-row-eng .form-group { margin-bottom: 0; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.form-group textarea { resize: vertical; min-height: 80px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.form-row-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.form-hint {
  font-size: .75rem;
  color: var(--text-sub);
  margin-top: 4px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

.form-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--primary);
  margin: 22px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-bg);
}

/* Checkboxes */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 400;
  cursor: pointer;
  background: var(--muted-bg);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: background .1s;
}

.checkbox-group label:has(input:checked) {
  background: var(--primary-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.checkbox-group input[type="checkbox"] { margin: 0; }

/* Toggle */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-row label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
  text-decoration: none !important;
  white-space: nowrap;
}

.btn:active { transform: scale(.97); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-light); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--primary); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803d; }

.btn-ghost {
  background: transparent;
  color: var(--text-sub);
  border: 1px solid var(--border-dark);
}
.btn-ghost:hover { background: var(--muted-bg); }

/* Ein Knopf, der einen erteilten Zustand an- und wieder abschaltet –
   etwa das vorübergehende Schreibrecht im Protokoll (Gremium). */
.btn-ghost.ist-aktiv {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
}
.btn-ghost.ist-aktiv:hover { background: var(--success-bg); filter: brightness(0.96); }

/* ─── Demo-Zugang (Button auf Hero-Seite + im Login-Panel) ───── */
.btn-demo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 18px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff;
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: filter .15s;
}
.btn-demo:hover  { filter: brightness(1.07); }
.btn-demo:disabled { opacity: .6; cursor: not-allowed; }

#lp-demo { margin-top: 10px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.demo-hint { font-size: .72rem; color: var(--muted); text-align: center; margin: 8px 0 0; line-height: 1.4; }

.hero-demo { max-width: 340px; margin: 4px auto 30px; }
.hero-demo-hint { font-size: .78rem; color: #cdd6e3; text-align: center; margin: 9px 0 0; line-height: 1.5; }

.btn-sm { padding: 5px 10px; font-size: .8rem; }
.btn-xs { padding: 3px 8px; font-size: .75rem; }
.btn-icon { padding: 6px 8px; }

.icon-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--text-sub);
  cursor: pointer;
  transition: background .15s;
}

.icon-btn:hover { background: var(--muted-bg); }

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-blue    { background: #dbeafe; color: #1d4ed8; }
.badge-green   { background: var(--success-bg); color: var(--success); }
.badge-yellow  { background: var(--warning-bg); color: var(--warning); }
.badge-orange  { background: #fed7aa; color: #c2410c; }
.badge-red     { background: var(--danger-bg); color: var(--danger); }
.badge-gray    { background: var(--muted-bg); color: var(--muted); }
.badge-purple  { background: #ede9fe; color: #7c3aed; }
.badge-dark    { background: #1e293b; color: #f1f5f9; }

/* GdB badge */
.gdb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 24px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--primary-bg);
  color: var(--primary);
}

/* ─── Person avatar ──────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-lg {
  width: 56px; height: 56px;
  font-size: 1.1rem;
}

/* ─── Merkzeichen pills ──────────────────────────────────────── */
.merkzeichen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.merkzeichen-pill {
  display: inline-block;
  padding: 1px 7px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 4px;
}

/* ─── Detail view ────────────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.detail-header-info { flex: 1; min-width: 0; }
.detail-header-info h2 { font-size: 1.4rem; font-weight: 700; }
.detail-header-info .meta { color: var(--text-sub); font-size: .875rem; margin-top: 4px; }

.detail-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 20px;
  margin-bottom: 24px;
}

.info-item label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-sub);
  display: block;
  margin-bottom: 2px;
}

.info-item .value {
  font-size: .9rem;
  color: var(--text);
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-bg);
}

.detail-text {
  font-size: .9rem;
  color: var(--text);
  white-space: pre-wrap;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 48px;
}

.empty-text {
  color: var(--text-sub);
  font-style: italic;
  font-size: .875rem;
}

/* ─── Personen cards ─────────────────────────────────────────── */
.personen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none !important;
  color: var(--text);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.person-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.person-card-info { flex: 1; min-width: 0; }
.person-card-name { font-weight: 700; font-size: .95rem; margin-bottom: 2px; }
.person-card-sub  { font-size: .8rem; color: var(--text-sub); margin-bottom: 8px; }

/* ─── Aufgaben Kanban ────────────────────────────────────────── */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kanban-col {
  background: var(--muted-bg);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.kanban-count {
  min-width: 22px; height: 22px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-sub);
}

.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow .15s;
  font-size: .875rem;
}

.task-card:hover { box-shadow: var(--shadow-md); }

.task-card-title {
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  font-size: .78rem;
  color: var(--text-sub);
}

.task-due {
  font-size: .78rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.task-due.overdue { background: var(--danger-bg); color: var(--danger); }
.task-due.today   { background: var(--warning-bg); color: var(--warning); }
.task-due.normal  { background: var(--muted-bg); color: var(--text-sub); }

/* ─── Termine calendar ───────────────────────────────────────── */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cal-header {
  background: var(--muted-bg);
  padding: 8px;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-sub);
}

.cal-day {
  background: var(--surface);
  min-height: 80px;
  padding: 6px;
  position: relative;
}

.cal-day.other-month { background: #fafafa; }
.cal-day.today { background: #e8eef8; }

.cal-day-num {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 2px;
}

.cal-day.today .cal-day-num {
  background: var(--accent);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.cal-event {
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--primary-bg);
  color: var(--primary);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Vergangene Termine bleiben im Kalender stehen – man muss nachsehen
   können, wann was war. Sie treten nur zurück, damit der Blick auf dem
   hängt, was noch kommt. Anklickbar bleiben sie. */
.cal-event.vergangen {
  opacity: .45;
  filter: grayscale(.7);
}
.cal-event.vergangen:hover { opacity: .8; filter: none; }

/* ─── Sitzungsplaner: drei Monate kompakt nebeneinander ─────── */
.sitzkal-mini .cal-day { min-height: 38px; padding: 4px; }
.sitzkal-mini .cal-day-num { font-size: .72rem; margin-bottom: 1px; }
.sitzkal-mini .cal-event { font-size: .6rem; padding: 0 3px; }
.sitzkal-mini .cal-header { padding: 5px; font-size: .68rem; }

.monat-block { flex: 1; min-width: 210px; }
.monat-titel {
  font-size: .84rem; font-weight: 700; color: var(--primary, #1e3d73);
  margin-bottom: 5px;
}

/* ── Sitzungsplaner: alles auf einen Schirm ───────────────────────
   Drei Monate, Legende, Knöpfe und der Termin darunter ergaben zusammen
   mehr Höhe, als ein Bildschirm hergibt – und man scrollte durch eine
   reine Übersicht. Deshalb hier durchweg engere Maße als sonst; die
   übrigen Seiten bleiben unberührt. */
.planer-seite .page-header { margin-bottom: 12px; }
.planer-seite .page-header h2 { font-size: 1.12rem; }
.planer-seite .planer-reiter { margin-bottom: 12px; }
.planer-seite .card { padding: 13px 15px; }
.planer-seite .card.mb-16 { margin-bottom: 12px; }
.planer-seite .card .mb-16 { margin-bottom: 10px; }

.planer-seite .sitzkal-mini .cal-day { min-height: 27px; padding: 2px 3px; }
.planer-seite .sitzkal-mini .cal-day-num { font-size: .67rem; margin-bottom: 0; line-height: 1.3; }
.planer-seite .sitzkal-mini .cal-event { font-size: .57rem; padding: 0 3px; line-height: 1.4; }
.planer-seite .sitzkal-mini .cal-header { padding: 3px; font-size: .63rem; letter-spacing: .3px; }
/* Der Tageskreis von „heute“ diktiert sonst die Zeilenhöhe. */
.planer-seite .cal-day.today .cal-day-num { width: 16px; height: 16px; font-size: .6rem; }

.planer-seite .termin-legende {
  margin-top: 9px; padding-top: 8px; gap: 10px; font-size: .72rem;
}
.planer-seite .kalender-aktionen { margin-top: 9px; padding-top: 9px; }

/* Der Termin darunter: Kopfzeile enger. */
.planer-seite .card-title { font-size: .92rem; }

/* Eine Zeile: Wann, Art, Ort, Beginn, Hybrid. „Wann" braucht am meisten
   Platz (es steht ein ausgeschriebenes Datum drin), die Uhrzeit am wenigsten.
   Die Zeile hört bei 900 Pixeln auf: auf einem breiten Schirm zöge sie sich
   sonst über die ganze Breite und die Felder stünden weit auseinander. */
.splan-felder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  max-width: 900px;
}

.splan-felder .form-group { flex: 1 1 130px; min-width: 120px; margin-bottom: 0; }
.splan-felder .feld-wann  { flex: 2 1 240px; }
.splan-felder .feld-zeit  { flex: 0 0 110px; min-width: 100px; }

/* Text darf die Spalte fuellen; Uhrzeiten regelt die Feldart oben. */
.splan-felder .form-group input[type="text"],
.splan-felder .form-group input:not([type]) { width: 100%; min-width: 0; }

/* Hier schwebt der Kalender, statt die Zeile auseinanderzuziehen. In einem
   Dialog klappt er weiterhin auf – dort würde er sonst abgeschnitten. */
.splan-felder .spanne-panel {
  position: absolute;
  left: 0;
  z-index: 20;
  min-width: 280px;
}

/* Das Hybrid-Kästchen steht als eigene Kachel in der Zeile. Mit
   Elementanteil notiert, sonst gewinnt `.form-group label { display:block }`. */
label.termin-hybrid {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--muted-bg);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: 0;
}

label.termin-hybrid input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* ─── Anwesenheit (Ordentliche Mitglieder / Ersatzmitglieder, wie Session) ─── */
.anwesenheit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.anwesenheit-check {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border-dark);
  border-radius: var(--radius); font-size: .85rem; cursor: pointer;
}
.anwesenheit-check input { flex-shrink: 0; }
.anwesenheit-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

.sitzorg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.static-field {
  padding: 9px 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--muted-bg);
  color: var(--text);
}

/* ─── Tabs ───────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ─── View toggle ────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.view-toggle-btn {
  background: none;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  transition: background .15s;
}

.view-toggle-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-sub);
}

.empty-state-icon { font-size: 3rem; margin-bottom: 12px; opacity: .4; }
.empty-state h3   { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.empty-state p    { font-size: .875rem; }

/* ─── Modal ──────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modal-box.wide { max-width: 820px; }

#modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  flex: 1;
}

#modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* ─── Confirm dialog ─────────────────────────────────────────── */
#confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#confirm-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 400px;
  padding: 24px;
}

#confirm-box h2 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
#confirm-box p  { font-size: .9rem; color: var(--text-sub); margin-bottom: 20px; }

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ─── Toasts ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 280px;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  animation: toast-in .2s ease;
  font-size: .875rem;
}

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

.toast-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.toast-text { flex: 1; }
.toast-title { font-weight: 700; margin-bottom: 2px; }
.toast-msg   { color: var(--text-sub); font-size: .82rem; }

.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.info    { border-left: 3px solid var(--accent); }

/* ─── Begrüßung ──────────────────────────────────────────────── */
/* ─── Upcoming list ──────────────────────────────────────────── */
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}

.upcoming-item:last-child { border-bottom: none; }

.upcoming-date {
  flex-shrink: 0;
  text-align: center;
  min-width: 44px;
}

.upcoming-date .day   { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.upcoming-date .month { font-size: .68rem; text-transform: uppercase; color: var(--text-sub); }

.upcoming-info { flex: 1; min-width: 0; }
.upcoming-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-sub   { font-size: .78rem; color: var(--text-sub); }

/* ─── Overdue list ───────────────────────────────────────────── */
.overdue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
  cursor: pointer;
}

.overdue-item:last-child { border-bottom: none; }
.overdue-item:hover .overdue-title { color: var(--accent); }

.overdue-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}

.overdue-info { flex: 1; min-width: 0; }
.overdue-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overdue-due   { font-size: .75rem; color: var(--danger); font-weight: 600; }

/* ─── Einstellungen ──────────────────────────────────────────── */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.settings-section-title {
  font-size: .85rem;
  font-weight: 700;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--muted-bg);
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.settings-body {
  padding: 20px;
}

.data-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: .875rem;
  border-bottom: 1px solid var(--border);
}

.data-stat-row:last-child { border-bottom: none; }
.data-stat-row .label { color: var(--text-sub); }
.data-stat-row .value { font-weight: 600; }

/* ─── Utilities ──────────────────────────────────────────────── */
.hidden       { display: none !important; }
.text-muted   { color: var(--text-sub); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-sm      { font-size: .8rem; }
.fw-600       { font-weight: 600; }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: 16px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }
.flex         { display: flex; }
.flex-gap-8   { display: flex; gap: 8px; }
.flex-gap-12  { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.back-link    { font-size: .85rem; color: var(--text-sub); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px; }
.back-link:hover { color: var(--accent); }

.vertraulich-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .85rem;
  color: #c2410c;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Protokoll / Timeline ───────────────────────────────────── */
.protokoll-entry {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.protokoll-entry:last-of-type { border-bottom: none; }

.protokoll-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}
.protokoll-dot[data-typ="statusaenderung"] { background: var(--warning); }
.protokoll-dot[data-typ="aktion"]          { background: var(--success); }
.protokoll-dot[data-typ="kontakt"]         { background: var(--info, #0284c7); }
.protokoll-dot[data-typ="dokument"]        { background: var(--muted); }

.protokoll-body { flex: 1; min-width: 0; }

.protokoll-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .75rem;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.protokoll-typ   { font-weight: 600; }
.protokoll-autor { font-style: italic; }
.protokoll-text  { font-size: .88rem; white-space: pre-wrap; }

/* ─── Kontakte ───────────────────────────────────────────────── */
.kontakt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--primary);
  text-decoration: none;
  padding: 2px 0;
}
.kontakt-link:hover { text-decoration: underline; }

/* ─── Ladescreen ─────────────────────────────────────────────── */
#loader-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-box {
  text-align: center;
}

.loader-spinner {
  width: 42px; height: 42px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loader-msg {
  color: var(--text-sub);
  font-size: .9rem;
}

/* ─── Schreiben ──────────────────────────────────────────────── */
/* Gruppen-Überschriften Schritt 1 */
.sw-gruppe { margin-bottom: 28px; }
.sw-gruppe-title {
  font-size: .8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--primary);
  margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-bg);
}

/* Karten-Selektion */
.sw-typ-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sw-typ-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.sw-typ-selected { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(30,61,115,.1) !important; }

/* Schritt 2 */
.sw-step2-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.sw-section-card { margin-bottom: 14px; }
.sw-typ-hint-inline {
  font-size: .72rem; font-weight: 700; color: var(--success);
  background: var(--success-bg); padding: 2px 7px; border-radius: 10px; margin-left: 6px;
}

/* Schritt 3 */
.sw-result-layout {
  display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start;
}
.sw-result-main {}
.sw-result-sidebar {}

@media (max-width: 860px) {
  .sw-result-layout { grid-template-columns: 1fr; }
}

.sw-steps {
  display: flex; align-items: center; gap: 0;
  margin-left: auto;
}
.sw-step {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--text-sub);
}
.sw-step.active .sw-step-num { background: var(--primary); color: #fff; }
.sw-step.active { color: var(--primary); }
.sw-step.done .sw-step-num { background: var(--success); color: #fff; }
.sw-step.done { color: var(--success); }
.sw-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--border); color: var(--text-sub);
  font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sw-step-line { width: 28px; height: 2px; background: var(--border); margin: 0 4px; }

.sw-section-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-sub); margin-bottom: 14px;
}

.sw-typ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.sw-typ-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--muted-bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .15s, background .15s;
}
.sw-typ-btn:hover { border-color: var(--primary); background: var(--primary-bg); }
.sw-typ-btn.selected { border-color: var(--primary); background: var(--primary-bg); }

.sw-typ-icon  { font-size: 1.4rem; margin-bottom: 2px; }
.sw-typ-label { font-size: .82rem; font-weight: 700; color: var(--text); }
.sw-typ-hint  { font-size: .7rem; color: var(--success); font-weight: 600; }

.sw-back-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sw-cur-typ { font-size: .85rem; font-weight: 700; color: var(--primary); }

.sw-two-col {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px;
  align-items: start;
}

.sw-context-box {
  background: var(--primary-bg); border: 1px solid var(--border-dark);
  border-radius: var(--radius); padding: 10px 12px;
  font-size: .8rem; color: var(--primary); line-height: 1.5;
  margin-top: 8px;
}

.sw-ton-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--muted-bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 5px 12px;
  font-size: .8rem; font-weight: 600; color: var(--text-sub);
  cursor: pointer; transition: all .12s;
}
.sw-ton-btn input[type="radio"] { display: none; }
.sw-ton-btn.selected,
.sw-ton-btn:has(input:checked) { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }

.sw-loading {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 20px; gap: 16px;
}
.sw-loading-msg { color: var(--text-sub); font-size: .9rem; }

.sw-result-actions {
  display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px;
}

@media (max-width: 860px) {
  .sw-two-col { grid-template-columns: 1fr; }
  .sw-typ-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
  #sidebar, #topbar, .page-header .btn, .page-header .view-toggle,
  .page-header .filter-bar, #toast-container, #modal-overlay,
  #confirm-overlay, .detail-header-actions, .data-table .actions,
  .btn-primary, .btn-accent { display: none !important; }

  #main    { margin-left: 0 !important; }
  body     { background: #fff !important; color: #000 !important; }
  .card, .table-wrap, .settings-section {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  #page-outlet { padding: 0 !important; }
  a { color: #000 !important; text-decoration: none !important; }

  .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000;
  }

  .print-header h1 { font-size: 1.2rem; }
  .print-header p  { font-size: .85rem; color: #555; }

  .no-print { display: none !important; }
}

.print-header { display: none; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kanban-board { grid-template-columns: 1fr; }
}

/* ─── Persönlicher Bereich ────────────────────────────────────── */
.profil-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--muted-bg); border: 1.5px solid var(--border-dark);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; position: relative;
}
.profil-avatar span { font-size: 22px; font-weight: 800; color: var(--muted); }
.profil-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ─── KI-Widget (Eingruppierung / Wissen) – Optik wie Law/Grade ── */
.ki-intake {
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom: 16px;
}
.ki-intake-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.ki-intake-desc  { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; line-height: 1.6; }
.ki-intake-textarea { resize: vertical; min-height: 140px; line-height: 1.6; margin-bottom: 0; }
.ki-analyse-btn {
  width: 100%; margin-top: 14px;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--navy), var(--navy-d));
  color: #fff; border: none; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 16px rgba(22,72,166,.35);
  transition: all .2s;
}
.ki-analyse-btn:hover  { box-shadow: 0 6px 24px rgba(22,72,166,.45); transform: translateY(-1px); }
.ki-analyse-btn:active { transform: translateY(0); }

.ki-followup { margin-top: 4px; }
.ki-followup textarea { resize: vertical; min-height: 70px; margin-bottom: 0; }

.ki-msg { max-width: 88%; margin-bottom: 12px; }
.ki-msg-user { margin-left: auto; }
.ki-msg-ai   { margin-right: auto; }
.ki-msg-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-sub); margin-bottom: 3px;
}
.ki-msg-user .ki-msg-label { text-align: right; }
.ki-msg-text {
  padding: 10px 14px; border-radius: var(--radius-lg);
  font-size: .88rem; line-height: 1.55;
}
.ki-msg-user .ki-msg-text { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.ki-msg-ai   .ki-msg-text { background: var(--muted-bg); color: var(--text); border-bottom-left-radius: 4px; }

@media (max-width: 768px) {
  #sidebar {
    transform: translateX(-100%);
    z-index: 210;
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay.open { display: block; }

  #main { margin-left: 0; }
  #menu-toggle { display: block; }

  #page-outlet { padding: 16px 14px 40px; }

  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .dash-grid  { grid-template-columns: 1fr; }
  .desk-surface { grid-template-columns: 1fr; }
  .personen-grid { grid-template-columns: 1fr; }
  .calendar-grid { display: none; }

  .page-header { gap: 8px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Sitzungskoordination
   ═══════════════════════════════════════════════════════════════ */

.koord-select {
  padding: 5px 8px;
  border: 1.5px solid var(--border-dark);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  max-width: 190px;
}

.koord-pos {
  width: 70px;
  padding: 5px 8px;
  border: 1.5px solid var(--border-dark);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}

.koord-select:focus, .koord-pos:focus {
  outline: none;
  border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   Termine, Unterlagen, Gremium
   ═══════════════════════════════════════════════════════════════ */

/* Termintypen – Farbe unterscheidet Sitzung von allem anderen */
.cal-event.typ-sitzung      { background: var(--primary-bg); color: var(--primary); }
.cal-event.typ-klausur      { background: #ede4fa; color: #6b3fa0; }
.cal-event.typ-schulung     { background: var(--success-bg); color: var(--success); }
.cal-event.typ-gespraech    { background: var(--warning-bg); color: var(--warning); }
.cal-event.typ-sprechstunde { background: #e0f2f6; color: #0e7490; }
.cal-event.typ-sonstiges    { background: var(--muted-bg); color: var(--muted); }

.termin-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.legende-punkt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sub);
}

.termin-farbe {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}

.termin-farbe.typ-sitzung      { background: var(--primary); }
.termin-farbe.typ-klausur      { background: #6b3fa0; }
.termin-farbe.typ-schulung     { background: var(--success); }
.termin-farbe.typ-gespraech    { background: var(--warning); }
.termin-farbe.typ-sprechstunde { background: #0e7490; }
.termin-farbe.typ-sonstiges    { background: var(--muted); }

/* Vorschau der Terminreihe */
.serie-vorschau {
  background: var(--muted-bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  max-height: 220px;
  overflow-y: auto;
}

/* Unterlagen am Termin */
.datei-gruppe { margin-bottom: 12px; }

.datei-gruppe-titel {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.datei-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.datei-zeile:last-child { border-bottom: none; }

.datei-name {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.datei-name:hover { text-decoration: underline; }

.datei-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.datei-upload select {
  padding: 7px 10px;
  border: 1.5px solid var(--border-dark);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

/* Gremium */
.koord-name {
  padding: 5px 8px;
  border: 1.5px solid var(--border-dark);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  min-width: 190px;
}

.koord-name:focus { outline: none; border-color: var(--primary); }

.gremium-aktionen {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.hinweis-block {
  background: var(--muted-bg);
  border-radius: 10px;
  padding: 14px 16px;
}

.nowrap { white-space: nowrap; }

.zugangsdaten {
  width: 100%;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 12px;
  border: 1.5px solid var(--border-dark);
  border-radius: 10px;
  background: var(--muted-bg);
  color: var(--text);
  resize: vertical;
}

/* QR-Code zur Handy-App
   Eine begrenzte, mittige Karte wie bei „Erste Schritte“ – vorher stand
   der Inhalt in einer weißen Fläche über die ganze Seitenbreite, mit dem
   Code am linken und der Anleitung am rechten Rand. */
.handy-karte {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 30px;
  background: #fff;
  border: 1.5px solid var(--line, #dde3ec);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(30, 61, 115, .07);
}

.handy-inhalt { flex: 1 1 320px; min-width: 0; }
.handy-inhalt h3 { font-size: 18px; color: #1e3d73; margin: 0 0 12px; }

.qr-bild {
  width: 190px;
  height: 190px;
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  flex-shrink: 0;
}

.qr-schritte {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.7;
}

/* Gesperrte Benachrichtigungen: gleiche Breite und Kante wie die Karte
   darüber, nur ohne den QR-Code daneben – es gehört zur Einrichtung,
   ist aber nicht Teil der vier Schritte. */
.handy-sperre {
  max-width: 820px;
  margin: 18px auto 0;
  padding: 22px 30px 18px;
  background: #fff;
  border: 1.5px solid var(--line, #dde3ec);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(30, 61, 115, .07);
}
.handy-sperre h3 { font-size: 18px; color: #1e3d73; margin: 0 0 10px; }
.handy-sperre p { margin: 0 0 12px; line-height: 1.6; }
.handy-sperre p:last-child { margin-bottom: 0; }
.handy-sperre .table-wrap { margin-bottom: 12px; }
.handy-sperre .data-table td { vertical-align: top; line-height: 1.55; }
.handy-sperre .data-table td:first-child { white-space: nowrap; font-weight: 600; }

/* Am Handy untereinander: Code oben mittig, Anleitung darunter über die
   volle Breite – eine nummerierte Liste liest sich zentriert schlecht. */
@media (max-width: 720px) {
  .handy-karte { flex-direction: column; align-items: center; gap: 18px; padding: 22px 18px; }
  .handy-inhalt { width: 100%; }
  .qr-bild { width: 170px; height: 170px; }
  .qr-schritte { padding-left: 18px; }
  .handy-sperre { padding: 20px 18px 16px; }
  /* Die Gerätespalte darf hier umbrechen, sonst quetscht sie die zweite. */
  .handy-sperre .data-table td:first-child { white-space: normal; }
}

@media print {
  #sidebar, #topbar, #app-footer, .page-header button { display: none !important; }
  #main { margin-left: 0 !important; }
}

/* Von vorn anfangen – bewusst abgesetzt vom Rest der Seite */
.gefahren-zone {
  border: 1.5px solid var(--danger);
  background: linear-gradient(0deg, var(--danger-bg) 0%, var(--surface) 60%);
}

.gefahren-zone .card-title { color: var(--danger); }

.gefahren-zone code {
  background: var(--muted-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
}

@media print {
  .no-print { display: none !important; }
}

.koord-login {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.koord-user {
  padding: 3px 7px;
  border: 1.5px solid var(--border-dark);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-sub);
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  min-width: 150px;
}

.koord-user:focus { outline: none; border-color: var(--primary); color: var(--text); }

/* Handy-App steht bewusst abseits der Arbeitsbereiche */
.nav-item.nav-abgesetzt {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Mehrtägige Termine im Kalender */
.cal-event.mehrtaegig {
  font-style: italic;
  opacity: .92;
}

/* ═══════════════════════════════════════════════════════════════
   Startseite: nächste Sitzung
   ═══════════════════════════════════════════════════════════════ */

/* Nur ein Termin statt einer Liste – der Scrollbalken entfällt damit. */
.desk-termine .desk-list { max-height: none; overflow: visible; }

.naechste-kopf { margin-bottom: 10px; }

.naechste-datum {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
}

.naechste-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.naechste-hinweis {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  padding: 6px 0;
  border-top: 1px dashed #d9e1ee;
}

.naechste-teilnahme {
  border-top: 1px dashed #d9e1ee;
  padding-top: 8px;
}

.teilnahme-zeile {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
}

.teilnahme-zahl {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}

.teilnahme-text { font-size: 11px; color: var(--muted); line-height: 1.45; }
.teilnahme-text .ok    { color: var(--success); }
.teilnahme-text .fehlt { color: var(--danger); }
/* Unter der Sollstärke zu tagen ist zulässig, unter der
   Beschlussfähigkeit nicht – deshalb gelb und nicht rot. */
.teilnahme-text .knapp { color: var(--warning); }

.teilnehmer-gruppe { margin-bottom: 7px; }

.teilnehmer-titel {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 3px;
}

.teilnehmer-liste { display: flex; flex-wrap: wrap; gap: 4px; }

.teilnehmer {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: #f4f7fb;
  border-radius: 7px;
  padding: 2px 7px;
}

.teilnehmer.ersatz { font-style: italic; background: #eef5f1; color: #2c6b52; }

.teilnehmer-fussnote {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

/* Notizen deutlich abgesetzt vom Termin */
.desk-notiz-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid rgba(30, 61, 115, .13);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.desk-notiz-titel {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 5px;
}

/* ═══════════════════════════════════════════════════════════════
   Zeitraum-Auswahl (Kalender zum Anklicken)
   ═══════════════════════════════════════════════════════════════ */

/* Zeigt ein Datum oder einen Zeitraum – mehr Breite als der Text
   braucht es nicht. Vorher lief der Knopf über die ganze Spalte. */
.spanne-feld { position: relative; display: inline-block; }

.spanne-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 210px;
  padding: 9px 12px;
  border: 1.5px solid var(--border-dark);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.spanne-knopf:hover { border-color: var(--primary); }
.spanne-icon { color: var(--muted); font-size: 11px; }

/* Aufklappend statt schwebend: wird in Dialogen sonst abgeschnitten */
.spanne-panel {
  margin-top: 8px;
  border: 1.5px solid var(--border-dark);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 4px 14px rgba(26, 39, 64, .08);
}

.spanne-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.spanne-monat { font-weight: 700; font-size: 14px; text-transform: capitalize; }

.spanne-nav {
  border: 1.5px solid var(--border-dark);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.spanne-nav:hover { border-color: var(--primary); color: var(--primary); }

.spanne-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.spanne-wt {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 4px;
}

.spanne-tag {
  aspect-ratio: 1;
  min-height: 34px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.spanne-tag.leer { cursor: default; }
.spanne-tag:not(.leer):hover { background: var(--muted-bg); }
.spanne-tag.heute { box-shadow: inset 0 0 0 1.5px var(--border-dark); }
.spanne-tag.drin  { background: var(--primary-bg); color: var(--primary); border-radius: 0; }

.spanne-tag.start,
.spanne-tag.ende {
  background: var(--primary);
  color: #fff;
}

.spanne-tag.start { border-radius: 8px 0 0 8px; }
.spanne-tag.ende  { border-radius: 0 8px 8px 0; }
.spanne-tag.start.ende { border-radius: 8px; }

.spanne-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.spanne-hinweis { font-size: 11.5px; color: var(--muted); flex: 1; min-width: 160px; }

/* Unterlagen direkt beim Ladungsstand */
.koord-unterlagen {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   Sitzungsplaner: Reiter
   ═══════════════════════════════════════════════════════════════ */

.planer-reiter {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}

.planer-reiter-knopf {
  padding: 10px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}

.planer-reiter-knopf:hover { color: var(--primary); }
.planer-reiter-knopf.aktiv { color: var(--primary); border-bottom-color: var(--primary); }

.kalender-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   An-/Abwesenheiten: Monatsübersicht
   ═══════════════════════════════════════════════════════════════ */

.abw-scroll { overflow-x: auto; padding-bottom: 4px; }

.abw-tabelle {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.abw-tabelle th,
.abw-tabelle td { border: 1px solid var(--border); }

.abw-name {
  text-align: left;
  padding: 5px 10px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 165px;
}

.abw-kopf-tag {
  padding: 3px 0;
  min-width: 22px;
  font-weight: 600;
  color: var(--text-sub);
  line-height: 1.25;
}

.abw-wt { display: block; font-size: 9px; text-transform: uppercase; opacity: .7; }
.abw-tag { display: block; font-size: 11px; }

.abw-kopf-tag.wochenende,
.abw-zelle.wochenende { background: var(--muted-bg); }

.abw-kopf-tag.heute { color: var(--primary); font-weight: 800; }

.abw-kopf-tag.termin {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.abw-zelle { height: 24px; }
.abw-zelle.termin { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }

/* Abwesenheitsgründe – ohne Recht auf den Grund kommt „sonstiges“ an */
.abw-zelle.weg.typ-urlaub      { background: #f6c344; }
.abw-zelle.weg.typ-fortbildung { background: #6fbf8f; }
.abw-zelle.weg.typ-dienst      { background: #7fb4dd; }
.abw-zelle.weg.typ-krank       { background: #e08585; }
.abw-zelle.weg.typ-sonstiges   { background: #b9c2d1; }
.abw-zelle.weg.typ-null        { background: #b9c2d1; }

.abw-farbe { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.abw-farbe.typ-urlaub      { background: #f6c344; }
.abw-farbe.typ-fortbildung { background: #6fbf8f; }
.abw-farbe.typ-dienst      { background: #7fb4dd; }
.abw-farbe.typ-krank       { background: #e08585; }
.abw-farbe.typ-sonstiges   { background: #b9c2d1; }
.abw-farbe.termin-spalte   { background: var(--primary); }

.abw-trenner th,
.abw-trenner td {
  background: var(--muted-bg);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-sub);
  padding: 3px 10px;
}

.abw-summe {
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-sub);
  background: var(--surface);
  padding: 4px 0;
}

.abw-summe.knapp { background: var(--danger-bg); color: var(--danger); }

/* Abgesetzt von den Personenzeilen darüber: sie zählt sie, sie ist
   keine. Der Abstand entsteht über den Rahmen, weil `margin` an einer
   Tabellenzeile nichts tut. */
.abw-summenzeile th,
.abw-summenzeile td {
  border-top: 3px solid var(--muted-bg);
}

.abw-summenzeile th.abw-name { background: var(--surface); }

/* ── Unterlagen-Ansicht (nur lesen, kein Download) ───────────────── */
.datei-ansicht-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column;
  background: rgba(10, 20, 50, .92);
  -webkit-user-select: none; user-select: none;
}
.datei-ansicht-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #dde3ec;
}
.datei-ansicht-name { font-weight: 700; font-size: 14px; color: #1e3d73;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-ansicht-kopf [data-zu] { margin-left: auto; flex-shrink: 0; }
.datei-ansicht-buehne { flex: 1; min-height: 0; display: flex; position: relative;
  align-items: center; justify-content: center; padding: 12px; overflow: hidden; }

/* Wasserzeichen liegt ueber der Unterlage, faengt aber keine Klicks ab. */
.datei-wasserzeichen {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 34px 46px; transform: rotate(-28deg) scale(1.5);
}
.datei-wasserzeichen span {
  font: 700 13px "Segoe UI", system-ui, sans-serif;
  color: rgba(30, 61, 115, .20);
  white-space: nowrap; letter-spacing: .04em;
}
.datei-ansicht-buehne iframe { width: 100%; height: 100%; border: 0;
  background: #fff; border-radius: 6px; }
.datei-ansicht-buehne img { max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px; pointer-events: none; }
.datei-ansicht-fuss {
  padding: 8px 16px; text-align: center;
  font-size: 12px; font-weight: 600; color: #ffd9d9;
  background: rgba(120, 20, 20, .55);
}
@media (max-width: 640px) {
  .datei-ansicht-buehne { padding: 0; }
  .datei-ansicht-name { font-size: 13px; }
}

/* Drucken sperren, solange eine Unterlage offen ist. */
@media print {
  body.datei-ansicht-offen > * { display: none !important; }
  body.datei-ansicht-offen::after {
    content: "Unterlagen der MAV dürfen nicht ausgedruckt werden.";
    display: block; padding: 40px; font: 700 14px "Segoe UI", system-ui, sans-serif;
  }
  .datei-ansicht-overlay { display: none !important; }
}

/* Unterlagen-Name ist ein Knopf, soll aber wie ein Link aussehen. */
.datei-ansehen {
  background: none; border: 0; padding: 0;
  font: inherit; color: #1e3d73; text-decoration: underline;
  cursor: pointer; text-align: left;
}
.datei-ansehen:hover { color: #16306a; }

/* ── Erste Schritte: Verweis auf BE:KI First ──────────────────────── */
/* Begrenzte Breite und mittig – auf einem breiten Schirm stünde sonst der
   Text ganz links und der QR-Code ganz rechts. */
.first-karte {
  display: flex; gap: 32px; flex-wrap: wrap; align-items: center;
  justify-content: center;
  max-width: 880px; margin: 0 auto;
  padding: 32px 34px;
  background: #fff; border: 1.5px solid var(--line, #dde3ec);
  border-radius: 18px; box-shadow: 0 4px 20px rgba(30, 61, 115, .07);
}
.first-inhalt { flex: 1 1 320px; min-width: 0; }
.first-logo { height: 62px; object-fit: contain; margin-bottom: 16px; }
.first-inhalt h3 { font-size: 20px; color: #1e3d73; margin-bottom: 10px; }
.first-inhalt p { font-size: 14.5px; line-height: 1.6; color: #4b5a6e; margin-bottom: 20px; max-width: 52ch; }
.first-knopf {
  display: inline-block; padding: 12px 26px;
  font-weight: 700; font-size: 15px; color: #fff; text-decoration: none;
  background: #1e3d73; border-radius: 10px; transition: background .15s;
}
.first-knopf:hover { background: #16306a; }
.first-adresse { margin-top: 12px; font-size: 12.5px; color: #9ba8bb; letter-spacing: .02em; }
.first-qr {
  flex: 0 0 auto; text-align: center;
  padding: 18px; background: #f8fafc;
  border: 1.5px solid var(--line, #dde3ec); border-radius: 14px;
}
.first-qr img { display: block; width: 190px; height: 190px; }
.first-qr-text { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #6b7a8d; }
/* Am Handy untereinander und mittig – der Text ist kurz genug dafür. */
@media (max-width: 720px) {
  .first-karte {
    flex-direction: column; align-items: center; text-align: center;
    padding: 22px; gap: 22px;
  }
  .first-inhalt { flex: 0 1 auto; }
  .first-inhalt p { margin-left: auto; margin-right: auto; }
  .first-qr { padding: 14px; }
  .first-qr img { width: 160px; height: 160px; }
}

/* ── Einstellungsanfragen ────────────────────────────────────────── */

/* Kompaktes Formular: die Anfrage soll ohne Scrollen in den Dialog
   passen – der Weg dahin ist weniger Luft, nicht weniger Inhalt. */
.form-kompakt .form-group { margin-bottom: 12px; }
.form-kompakt .form-row,
.form-kompakt .form-row-3,
.form-kompakt .form-row-4,
.form-kompakt .form-row-5 { gap: 12px; }
.form-kompakt .form-group label { margin-bottom: 3px; font-size: .78rem; }
.form-kompakt .form-group input,
.form-kompakt .form-group select { padding: 7px 10px; font-size: .87rem; }
.form-kompakt .form-section-title { margin: 14px 0 10px; padding-bottom: 4px; }
.form-kompakt .form-actions { margin-top: 16px; }

/* Fünf Felder in einer Zeile: enger gefasst, sonst sprengt es die Breite. */
.form-kompakt .form-row-5 .form-group label { font-size: .74rem; }
.form-kompakt .form-row-5 .form-group input,
.form-kompakt .form-row-5 .form-group select { padding: 6px 8px; font-size: .82rem; }
.form-kompakt .form-row-5 .form-group select { min-width: 0; }

/* Häkchen nebeneinander statt je eine eigene Zeile */
.haken-reihe {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 9px 12px; margin-bottom: 12px;
  background: #f8fafc; border: 1.5px solid var(--line, #dde3ec); border-radius: 9px;
}
.haken {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; cursor: pointer;
}
.haken input { margin: 0; cursor: pointer; }

/* Ohne Enddatum gibt es keine Befristung – dann auch keine Grundlage. */
.haken-reihe.gesperrt { opacity: .5; }
.haken-reihe.gesperrt .haken { cursor: not-allowed; }

/* ── Gremium: Kontaktdaten und Ladungsstand je Person ─────────────
   Die Angaben stammen aus dem Persönlichen Bereich der Person selbst –
   hier werden sie nur gezeigt, nicht gepflegt. */
.gremium-zeile.offen { background: var(--primary-bg, #eef3fb); }
.gremium-kontakt > td { background: #f8fafc; padding: 12px 16px; }

.kontakt-block {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.kontakt-titel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-sub, #6b7a8d); margin-bottom: 2px;
}
.kontakt-wert { font-size: 13.5px; }
.kontakt-wert a { color: var(--primary, #1e3d73); }

/* Die drei Stufen der Einladung untereinander – nebeneinander wird die
   Spalte zu breit. */
.ladungs-marken { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }

/* Abwesenheiten, die sich hier pflegen lassen (Vorsitz, Sekretariat) */
.abw-zelle.pflegbar { cursor: pointer; }
.abw-zelle.pflegbar:hover { outline: 2px solid var(--primary, #1e3d73); outline-offset: -2px; }

/* ── Detailbereich unter dem Sitzungskalender ─────────────────────
   Oben der Termin in einer Zeile, darunter über die volle Breite, wer an
   dem Tag kann. Vorher stand die Namensliste in einer 230-Pixel-Spalte
   daneben und schnitt jeden zweiten Namen ab. */
.verfuegbar {
  background: #f8fafc;
  border: 1.5px solid var(--line, #dde3ec);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 16px;
}
.verfuegbar-titel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-sub, #6b7a8d); margin-bottom: 7px;
}
/* Über die volle Breite lohnen sich Spalten – sonst stünden drei Namen
   untereinander und rechts bliebe die halbe Karte leer. */
.verfuegbar-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 18px;
}
.verfuegbar-liste li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; padding: 2px 0;
}
.verfuegbar-punkt {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--success, #3a8c68);
}
.verfuegbar-liste li.weg .verfuegbar-punkt { background: var(--danger, #c0392b); }
.verfuegbar-liste li.weg .verfuegbar-name { color: var(--text-sub, #6b7a8d); }
.verfuegbar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verfuegbar-grund { font-size: 11px; color: var(--text-sub, #6b7a8d); flex-shrink: 0; }
.verfuegbar-fuss { margin-top: 8px; }

/* Die Tagesordnung sitzt seit dem Wegfall der Sitzungszentrale am Termin. */
.tagesordnung { margin-top: 16px; }

/* Knöpfe der Liste untereinander statt an die Ränder verteilt */
.anfragen-knoepfe {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin-bottom: 16px;
}

/* Aufklappknopf: sichtbar machen, dass sich hier etwas öffnet */
.anfragen-tabelle th.sp-auf,
.anfragen-tabelle td.sp-auf { width: 34px; padding-right: 0; text-align: center; }

/* Zwei Dinge klappen in dieser Tabelle auf, und sie tun Verschiedenes:
   links ⊞ (blau) öffnet einen ganzen Zusatzbereich, rechts ✎ (bernstein)
   öffnet ein Feld zum Hineinschreiben. Vorher sahen beide gleich aus und
   trugen beide ein „−“ – Farbe und Zeichen sagen es jetzt vorher. */
.auf-zu {
  width: 24px; height: 24px; padding: 0;
  font: 700 14px/1 inherit; color: #1648a6;
  background: #e3ecfb;
  border: 1.5px solid #b9cdf0; border-radius: 6px;
  cursor: pointer;
}
.auf-zu:hover { background: #fff; border-color: #1648a6; }

/* Das Erörterungs-Häkchen öffnet ein Eingabefeld. */
.zustimmung.eingabefeld { color: #92400e; font-weight: 600; }

.aufklapp-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 5px; font-size: 11px;
  background: #fdf0dc; color: #b45309;
}

.eroerterung-feld {
  margin: 7px 0 2px;
  padding: 8px 10px;
  border-left: 3px solid #b45309;
  border-radius: 0 8px 8px 0;
  background: #fffaf2;
}

.eroerterung-feld textarea {
  width: 100%; min-width: 180px;
  font-family: inherit; font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--border-dark, #dde3ec); border-radius: 6px;
  background: var(--surface, #fff); color: var(--text);
  resize: vertical;
}

/* Zustimmung direkt in der Liste */
.anfragen-tabelle .anfrage-zeile { cursor: pointer; }
.anfragen-tabelle .anfrage-zeile.offen { background: var(--primary-bg, #eef3fb); }
.zustimmung {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.zustimmung + .zustimmung { margin-top: 4px; }
.zustimmung input { margin: 0; cursor: pointer; }

/* Die Erörterung ist kein dritter Zustimmungspunkt, sondern ein eigener
   Weg – deshalb eine Linie davor. */
.zustimmung-trenner {
  height: 1px; margin: 7px 0 6px;
  background: var(--line, #dde3ec);
}

/* Eine laufende Eroerterung haelt den Vorgang offen - das muss man auf
   den ersten Blick sehen, auch wenn die Ruecktmeldung schon raus ist. */
.anfragen-tabelle .anfrage-zeile.eroerterung > td {
  background: #fff4e2;
  border-top: 2px solid #b45309;
  border-bottom: 2px solid #b45309;
}
.anfragen-tabelle .anfrage-zeile.eroerterung > td:first-child { border-left: 4px solid #b45309; }

/* Abgelegte Anfragen sind unveränderlich – das soll man ihnen ansehen. */
.anfragen-tabelle .anfrage-zeile.abgelegt { opacity: .68; }

/* Aufklappbereich: Kommentar und wer dabei war */
.anfrage-beratung > td { background: #f8fafc; padding: 14px 16px; }
.beratung-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.beratung-titel {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-sub, #6b7a8d); margin-bottom: 6px;
}
.beratung-kommentar {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1.5px solid var(--line, #dde3ec); border-radius: 9px;
  background: #fff; color: var(--text); resize: vertical;
}
.beratung-raster .teilnehmer-liste {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 12px;
  background: #fff; border: 1.5px solid var(--line, #dde3ec); border-radius: 9px;
}
.teilnehmer-eintrag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.teilnehmer-eintrag input { margin: 0; cursor: pointer; }

/* Dokumente an einer Einstellungsanfrage – im Eintragungsfenster und in
   der Beratung dieselbe schlichte Liste. */
.anfrage-dateien { list-style: none; margin: 0; padding: 0; }
.anfrage-dateien li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line, #dde3ec);
}
.anfrage-dateien li:last-child { border-bottom: none; }

/* Rückmeldung an die Personalabteilung – abgesetzt, weil sie den
   Vorgang abschließt. */
.rueckmeldung {
  margin-top: 16px; padding-top: 14px;
  border-top: 1.5px solid var(--line, #dde3ec);
}
.rueckmeldung-zeile {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
}
.feld-klein { display: block; }
.feld-klein > span {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-sub, #6b7a8d); margin-bottom: 4px;
}
.feld-klein input,
.feld-klein select {
  padding: 7px 10px; font: inherit; font-size: 13.5px;
  border: 1.5px solid var(--line, #dde3ec); border-radius: 9px;
  background: #fff; color: var(--text);
}

@media (max-width: 768px) {
  .form-kompakt .form-row-4,
  .form-kompakt .form-row-5 { grid-template-columns: 1fr 1fr; }
  .beratung-raster { grid-template-columns: 1fr; }
}

/* Abgesagt und abwesend: durchgestrichen, damit die Liste auf einen Blick
   zeigt, wer fehlt – ohne dass man die Überschrift lesen muss. */
.teilnehmer-liste.weg .teilnehmer {
  text-decoration: line-through;
  opacity: .7;
}

/* ─── PDF-Seiten als Bilder (web/pdf-ansicht.js) ───────────────── */
.pdf-blaetter {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #525659;
}

.pdf-seite {
  width: 100%;
  max-width: 900px;
  height: auto;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  /* Kein Ziehen und kein Bild-Kontextmenue: das Canvas soll sich nicht
     wie eine Datei anfassen lassen. */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Die Ladung von Hand ist der Ausnahmefall – sie steht abgesetzt am Ende
   des Kopfteils, nicht als auffälligster Knopf der Karte. */
.koord-aktion {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}

/* ─── Gremium: drei getrennte Blöcke ───────────────────────────────
   Gewählt, nachrückend und gar nicht geladen: drei verschiedene Wege in
   die Sitzung, die getrennt gepflegt werden. Als eine durchlaufende
   Liste stand in jeder Zeile die Hälfte der Spalten auf „–“.

   Kein „ohne Mandat“: ein Nachrücker IST für die Sitzung, in der er
   einspringt, ordentliches Mitglied. Getrennt wird, wie jemand in die
   Sitzung kommt, nicht, was er dort ist. */
.gremium-block { margin-bottom: 22px; }

.gremium-block-titel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.gremium-block .empty-text { margin: 0; font-size: 13.5px; }

/* ─── Persönlicher Bereich: drei Spalten ───────────────────────────
   Vorsitz – übrige Gewählte – Nachrücker und Sekretariat. Jede Tabelle
   hat zwei bis drei schmale Spalten, drei davon passen also in dieselbe
   Breite, die vorher eine Liste brauchte.

   KEIN `max-width` mehr. Die Karte reicht ohnehin nur so weit wie der
   Inhaltsbereich, und die Deckelung auf 1080 px liess rechts Platz
   liegen, während die Spalten so eng wurden, dass unter der ersten
   Tabelle eine waagerechte Bildlaufleiste erschien – für zwei Wörter.
   Platz, den es gibt, und daneben eine Bildlaufleiste: das ist beides
   zusammen nicht zu erklären.

   `auto-fit` bricht auf einem schmalen Schirm von selbst um. */
.profil-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 22px;
  align-items: start;
}

/* Die dritte Spalte trägt zwei Blöcke untereinander – der zweite darf
   nicht am ersten kleben. */
.profil-gruppen .gremium-block + .gremium-block { margin-top: 18px; }

/* Enger als die allgemeine Tabelle und mit umbrechendem Kopf: sonst
   sprengt schon „Reihenfolge" neben „Name" und „Einrichtung" die Spalte. */
.profil-gruppen .data-table th,
.profil-gruppen .data-table td {
  padding: 7px 10px;
}

.profil-gruppen .data-table th {
  white-space: normal;
  letter-spacing: .3px;
}

/* Und hier wird NICHT gerollt. `.table-wrap` bringt `overflow-x: auto`
   mit – richtig für eine breite Datentabelle, falsch für drei schmale
   nebeneinander: dort entstand die Bildlaufleiste, statt dass die
   Spalten sich den vorhandenen Platz nahmen. Die Tabelle darf hier
   schrumpfen, der Text bricht um. */
.profil-gruppen .table-wrap { overflow-x: visible; }
.profil-gruppen .data-table { font-size: .82rem; table-layout: auto; }
.profil-gruppen .data-table td,
.profil-gruppen .data-table th { overflow-wrap: break-word; }

.data-table tr.ist-selbst td { background: var(--muted-bg); }

/* Passwort setzen steht in der Zeile der Stammdaten. Feld und Knopf
   nebeneinander: das Feld ist kurz, und ein Knopf darunter machte aus
   einer Zeile im Raster zwei. */
.profil-pass-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profil-pass-zeile input { min-width: 0; }

/* ─── Die eigene Ladung am Rechner ─────────────────────────────────
   Steht über dem Kalender: eine Ladung, die auf Antwort wartet, ist das
   Dringlichste auf dieser Seite. Beantwortet tritt die Karte zurück. */
.meine-ladung.ist-offen {
  border-left: 3px solid #2563eb;
  background: #f5f9ff;
}

.ladung-zeichen { color: #2563eb; }

/* Das Zeichen in der Seitenleiste. Kein Zähler wie bei den Vorgängen,
   sondern ein Briefsymbol – es geht nicht um eine Menge, sondern darum,
   DASS etwas angekommen ist. */
.nav-badge.ist-ladung {
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  letter-spacing: .5px;
}

/* Die eigene Zeile im Abwesenheitsplan – die einzige, die man selbst
   pflegen kann, wenn man weder Vorsitz noch Sekretariat ist. */
.abw-tabelle tr.ist-selbst .abw-name { font-weight: 700; }

/* Sitzungsleitung, Protokoll und Moderation am Ladungsstand. */
.koord-rollen {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.koord-rolle { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.koord-rolle > span { color: var(--muted, #667085); }

/* Zu- und Absage von Hand: der Ausnahmeweg für die Person, die anruft
   statt die App zu benutzen. Zurückhaltend am Zeilenende, damit die
   Liste weiter als Stand gelesen wird und nicht als Formular. */
.koord-fuer {
  white-space: nowrap;
  text-align: right;
}

.koord-fuer .btn { opacity: .55; }
tr:hover .koord-fuer .btn { opacity: 1; }

/* Wie viele gerade in einer Tagesordnung schreiben - in der Übersicht. */
.to-jetzt {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  white-space: nowrap;
}

/* ─── Kopf der Sitzung ─────────────────────────────────────────────
   Anwesende, Leitung, Beginn und Ende stehen über dem Dokument und
   nicht darin: sie gehören zu genau einer Sitzung und beginnen bei der
   nächsten wieder leer. Bewusst gedrängt und nicht über die volle
   Breite – der Blick gehört dem Dokument darunter. */
.to-kopf-karte {
  max-width: 900px;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #dde3ec);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.to-kopf-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #667085);
}

.to-kopf-felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 14px;
}

/* ─── Die Zeile über dem Ausdruck ──────────────────────────────────
   Nur auf Papier. Auf dem Schirm übernimmt .to-phase-banner (unten)
   dieselbe Auskunft – gross und zuerst, statt nur klein im Badge. Ein
   Blatt dagegen liegt später allein auf einem Tisch und muss für sich
   selbst sagen, was es ist. */
.to-druckkopf { display: none; }

/* „Fassungen …“ und „In … übertragen“ – deutlich von den übrigen
   Knöpfen der Zeile abgesetzt, nicht nur durch Abstand: eine
   Trennlinie, damit klar ist, dass hier eine andere Art Knopf beginnt
   (Marcus, 19.08.). */
.to-kopf-getrennt {
  border-left: 1.5px solid var(--border-dark);
  padding-left: 12px;
}

/* ─── Tagesordnung oder Protokoll? Die Antwort zuerst und gross ────
   Die drei Zustände (Entwurf/Sitzung/Protokoll) sind fürs Feingefühl
   richtig, aber nicht die Frage, die zuerst beantwortet werden muss:
   schreibe ich hier VOR der Sitzung (Tagesordnung) oder WÄHREND/DANACH
   (Protokoll)? Deshalb ein eigener, breiter Streifen ganz oben – vor
   der Werkzeugleiste, nicht als Badge darin versteckt. Nur das Wort
   selbst, kein Untertitel (Marcus, 18.08.). */
.to-phase-banner {
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
}
.to-phase-banner strong { font-size: 17px; font-weight: 700; }
.to-phase-banner.ist-tagesordnung-phase {
  background: #dbeafe; color: #1d4ed8;
}
.to-phase-banner.ist-protokoll {
  background: var(--success-bg); color: var(--success);
}

@media print {
  .to-druckkopf {
    display: block !important;
    margin: 0 0 14pt;
    text-align: center;
    color: #000;
  }

  /* Was das Blatt IST, steht oben und gross – dieselbe Bezeichnung, die
     auch das erzeugte PDF trägt. Darunter kleiner, welche Sitzung. */
  .to-druckkopf strong { display: block; font-size: 20pt; font-weight: 700; }
  .to-druckkopf span   { display: block; margin-top: 3pt; font-size: 11pt; font-weight: 400; }

  /* Der Kopf trägt jetzt weniger: die Sitzungszeile steht darüber und
     muss nicht zweimal dastehen, und „Aus den Zu- und Absagen füllen“
     ist ein Werkzeug zum Ausfüllen – auf Papier ist nichts mehr
     auszufüllen. Beides sitzt in der Titelzeile des Kopfes. */
  .to-kopf-titel { display: none !important; }

  .to-kopf-karte {
    max-width: none;
    margin: 0 0 12pt;
    padding: 0;
    border: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Anwesende und Entschuldigte sind Namenslisten – sie bekommen die
   ganze Zeile, die kurzen Angaben teilen sich eine. */
.to-kopf-feld.ist-gross { grid-column: 1 / -1; }

/* Ein Kopffeld ausserhalb des Rasters, in einer eigenen, schmalen
   Zeile: SBV+JAV zusammen, darunter Sitzungsleitung, Protokoll,
   Moderation, Beginn und Ende (Marcus, 19.08.) – siehe toKopfBloecke
   in pages/tagesordnung.js. */
.to-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.to-kopf-zeile .to-kopf-feld { flex: 1 1 150px; }
/* Beginn und Ende brauchen nur eine Uhrzeit – halb so breit wie die
   übrigen Felder der Zeile. */
.to-kopf-zeile .to-kopf-feld.ist-halb { flex: 1 1 75px; }
.to-kopf-zeile .to-kopf-feld input { width: 100%; max-width: none; }

.to-kopf-zeile + .to-kopf-felder,
.to-kopf-felder + .to-kopf-zeile,
.to-kopf-zeile + .to-kopf-zeile { margin-top: 8px; }

/* Übrige kleine Felder im Raster – etwa eigene, in der Vorlage
   angelegte Zeilen –, ziehen sich sonst über die ganze Spalte, sobald
   in der Zeile Platz übrig ist. */
.to-kopf-feld:not(.ist-gross) input { max-width: 190px; }

.to-kopf-feld { display: flex; flex-direction: column; gap: 3px; }

.to-kopf-feld > span {
  font-size: 12px;
  color: var(--muted, #667085);
}

.to-kopf-feld input,
.to-kopf-feld textarea {
  padding: 6px 9px; font: inherit; font-size: 13.5px;
  border: 1.5px solid var(--line, #dde3ec); border-radius: 8px;
  background: #fff; color: var(--text);
}

/* Die Felder wachsen mit ihrem Inhalt (siehe toKopfHoehe). Kein
   Rollbalken: in einem Kästchen mit Rollbalken sieht man immer nur
   zwei Zeilen – und genau das, was man vergleichen will, ist verdeckt. */
.to-kopf-feld textarea {
  overflow: hidden;
  resize: none;
  line-height: 1.55;
}

/* Eine Zeile je kommender Sitzung – als Liste gelesen, nicht als Absatz. */
.to-kopf-feld.ist-liste textarea {
  font-size: 14px;
  line-height: 1.75;
  padding: 8px 11px;
}

.to-kopf-feld.ist-liste > span { font-weight: 600; color: var(--text); }

.to-kopf-feld input[readonly],
.to-kopf-feld textarea[readonly] { background: #f6f7f9; color: var(--muted, #667085); }

/* ═══════════════════════════════════════════════════════════════
   Tagesordnung: Aussehen nach der Word-Vorlage
   ───────────────────────────────────────────────────────────────
   Die Werte stammen nicht aus dem Gefühl, sondern aus `TO Blanko.docx`
   (styles.xml, ausgelesen beim Bauen der Vorlage):

     Grundschrift    Arial 11 pt
     Überschrift 1   Arial 12 pt fett, schwarz, 18 pt Abstand darüber
     Überschrift 2   Arial 11 pt, schwarz, 12 pt darüber
     Überschrift 3   6 pt darüber
     Nummerierung    mehrstufig dezimal, hängend eingerückt

   Nur in der Tagesordnung, nicht unter „Schreiben": ein Brief hat
   keine nummerierten Tagesordnungspunkte. Deshalb die Klasse am
   Rahmen und nicht am Editor selbst. */

#word-editor-wrap.ist-tagesordnung .ProseMirror {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
}

#word-editor-wrap.ist-tagesordnung .ProseMirror h1,
#word-editor-wrap.ist-tagesordnung .ProseMirror h2,
#word-editor-wrap.ist-tagesordnung .ProseMirror h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  /* Hängend: die Nummer steht links, der Text bleibt in der Flucht –
     wie in Word (w:ind left=432 hanging=432). */
  padding-left: 2.2em;
  text-indent: -2.2em;
}

#word-editor-wrap.ist-tagesordnung .ProseMirror h1 {
  font-size: 12pt;
  font-weight: 700;
  margin-top: 18pt;
  margin-bottom: 0;
}

#word-editor-wrap.ist-tagesordnung .ProseMirror h2 {
  font-size: 11pt;
  font-weight: 400;
  margin-top: 12pt;
  margin-bottom: 0;
}

#word-editor-wrap.ist-tagesordnung .ProseMirror h3 {
  font-size: 11pt;
  font-weight: 400;
  margin-top: 6pt;
  margin-bottom: 0;
}

/* Die Nummern stehen NICHT im Text, sondern werden gezeichnet. Damit
   stimmen sie immer: wer einen Punkt löscht, verschiebt oder einen
   dazwischensetzt, bekommt die Folge von selbst wieder lückenlos –
   niemand muss nachzählen.

   Gerechnet werden sie in `web/to-nummern.js` und als `data-nr` an die
   Überschrift geschrieben; hier steht nur, wo sie hingehören. Vorher
   zählten das CSS-Zähler, und deren Rücksetzung je Punkt griff nicht:
   unter „3. MAV Orga“ stand 3.3, unter „16. Ausschüsse“ 16.30 – die
   laufende Nummer aller Unterpunkte des Dokuments. Der Server rechnete
   daneben richtig, sodass Schirm und PDF verschiedene Nummern für
   denselben Punkt zeigten. Jetzt rechnet beides dieselbe Stelle. */
#word-editor-wrap.ist-tagesordnung .ProseMirror h1::before,
#word-editor-wrap.ist-tagesordnung .ProseMirror h2::before,
#word-editor-wrap.ist-tagesordnung .ProseMirror h3::before {
  content: attr(data-nr) " ";
}

#word-editor-wrap.ist-tagesordnung .ProseMirror h1::before { font-weight: 700; }

/* Das Eintragungsfeld unter einem Punkt.
   Es beginnt NICHT an der Überschrift, sondern zwei Zeichen weiter
   rechts – sonst liest es sich, als schriebe man hinter die
   Überschrift weiter. Ganz leicht hinterlegt, damit man sieht, wo man
   hineinschreiben darf, und wo der Punkt endet. Eine Höhe ist nicht
   gesetzt: das Feld wächst mit dem, was man hineinschreibt.

   JEDER Absatz des Dokuments, nicht nur der hinter einer Überschrift.
   Vorher trafen die Regeln `h1 + p` und `p + p` – ein Absatz nach einer
   Tabelle bekam deshalb keinen Rahmen, und es sah aus, als sei mal ein
   Feld da und mal nicht. Was ein Feld ist, hängt aber nicht davon ab,
   was darüber steht.

   Das `>` ist wesentlich: Absätze in Tabellenzellen sind keine Felder,
   die Zelle ist schon eines. */
#word-editor-wrap.ist-tagesordnung .ProseMirror > p {
  margin: 6pt 0 0 calc(2.2em + 2ch);
  padding: 6px 10px;
  border: 1px solid #e8ecf3;
  border-left: 2px solid #d7dfea;
  border-radius: 6px;
  background: #fafbfd;
  min-height: 1.6em;
}

#word-editor-wrap.ist-tagesordnung .ProseMirror > p:focus {
  border-left-color: #2563eb;
  background: #fff;
}

#word-editor-wrap.ist-tagesordnung .ProseMirror table {
  margin: 6pt 0 0 calc(2.2em + 2ch);
  font-size: 10.5pt;
}

/* Enger als anderswo. Die Abstimmungstabellen haben sechs Spalten mit
   langen Überschriften („Beschlussfähigkeit", „Enthaltungen") und
   stehen dazu eingerückt – mit dem Innenabstand des allgemeinen
   Editors bliebe für die Wörter kein Platz mehr, und der Browser
   trennte sie wieder mitten durch. Der Inhalt der Zellen sind Zahlen
   und Stichworte; die brauchen die Luft nicht. */
#word-editor-wrap.ist-tagesordnung .ProseMirror td,
#word-editor-wrap.ist-tagesordnung .ProseMirror th {
  padding: 3px 5px;
  min-width: 0;
}

/* ─── Werkzeuge im Dokument ────────────────────────────────────────
   Häkchen und Knöpfe liegen ÜBER dem Text, sie sind nicht darin
   (web/to-werkzeuge.js). Sie dürfen deshalb weder auswählbar noch
   druckbar sein – sonst landen sie im Ausdruck als Zeichen, die
   niemand geschrieben hat. */
.to-haken {
  margin-left: 6px;
  color: #059669;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}

@media print { .to-haken, .to-leiste-werkzeuge { display: none !important; } }

/* ─── Die Werkzeugleiste neben dem Blatt ───────────────────────────
   EINE Spalte statt zweier Gruppen an zwei Stellen. Vorher standen die
   Knöpfe am Punkt oben rechts und die Zeilenknöpfe an der Tabelle,
   dazu ein Kreuz neben jeder Zeile; sie überlagerten sich, und ihre
   Beschriftungen waren abgeschnitten.

   Sie steht im grauen Rand NEBEN dem Blatt und verdeckt deshalb nie
   den Text. Zurückhaltend gesetzt: sie ist immer da, solange man in
   einem Punkt schreibt, und darf sich nicht vordrängen. */
.to-leiste-werkzeuge {
  position: absolute;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 132px;
  -webkit-user-select: none;
  user-select: none;
}

.to-leiste-werkzeuge button {
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  text-align: left;
  /* Kein Umbruch: „Tabelle entfernen" auf zwei Zeilen liesse die
     Leiste bei jedem Wechsel eine andere Höhe haben. */
  white-space: nowrap;
  color: var(--muted, #667085);
  cursor: pointer;
}

.to-leiste-werkzeuge button:hover {
  border-color: var(--line, #dde3ec);
  background: #fff;
  color: var(--text, #1f2937);
}

/* Was entfernt, bleibt blass, bis man darauf zeigt – und wird dann rot.
   Es steht neben jedem Punkt, in dem geschrieben wird, und soll nicht
   wie der nächste Schritt aussehen. */
.to-leiste-werkzeuge button.ist-leise { color: #aab3c2; }

.to-leiste-werkzeuge button.ist-leise:hover {
  border-color: #f5c3bd;
  background: #fef3f2;
  color: #b42318;
}

/* „Punkt gelöscht – zurückholen". Bleibt stehen, bis er benutzt oder
   das Dokument verlassen wird: wer sich vertan hat, merkt es manchmal
   erst zwei Absätze später. */
.to-zurueckholen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 10px;
  padding: 8px 14px;
  border: 1px solid #fde3c7;
  border-radius: 10px;
  background: #fffaf3;
  font-size: 13px;
  color: #7c5b12;
}

.to-zurueckholen button {
  padding: 3px 12px;
  border: 1px solid #e8c99a;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: #7c5b12;
  cursor: pointer;
}

.to-zurueckholen button:hover { background: #fff3e2; }

/* Liegt GENAU auf der Zelle (web/to-werkzeuge.js setzt Ort und Grösse).
   Deshalb kein Schatten und keine runden Ecken mehr: es soll nicht
   aussehen wie ein Fenster über der Tabelle, sondern wie die Zelle
   selbst, in der man gerade schreibt. Deckendes Weiss ist Pflicht –
   sonst steht der alte Wert der Zelle dahinter durch.

   `box-sizing`, weil Ort und Grösse aus dem Rechteck der Zelle kommen:
   ohne das legten Rahmen und Innenabstand die Auswahl daneben. */
.to-zellen-picker {
  position: absolute;
  z-index: 45;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1.5px solid #2563eb;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 10.5pt;
  outline: none;
  -moz-appearance: textfield;
}
/* Die Zelle ist oft schmaler als das Symbol für Kalender/Uhr breit ist –
   dann verdeckt es die letzten Ziffern. Weg damit, genau wie bei Beginn
   und Ende im Kopfbereich: getippt wird ohnehin, ein Symbol braucht es
   nicht. */
.to-zellen-picker::-webkit-calendar-picker-indicator { display: none; }
.to-zellen-picker::-webkit-inner-spin-button,
.to-zellen-picker::-webkit-clear-button { display: none; -webkit-appearance: none; margin: 0; }

/* ─── Direktlinks aus bestimmten Wörtern ───────────────────────────
   Gepunktet statt durchgezogen unterstrichen – erkennbar anders als
   ein echter, gesetzter Link, weil es keiner ist: die Dekoration
   steht nicht im Dokument (siehe ToBegriffLinks, data/word-editor.js). */
#tiptap-editor .ProseMirror .to-begriff-link {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  color: var(--navy, #1e3a5f);
  cursor: pointer;
}

/* Aufklappbare Zeile im Begriffs-Fenster (web/to-werkzeuge.js,
   toBegriffFenster): alle eingetragenen Angaben zu einem Fall, ohne
   dafür die volle Seite aufzurufen. */
.detail-liste { padding: 8px 4px 4px; display: grid; gap: 4px; }
.detail-liste > div { line-height: 1.4; }

/* ─── Gesperrter Tagesordnungspunkt ────────────────────────────────
   Wer in einem Punkt schreibt, hat ihn allein. Der fremde Punkt tritt
   zurück und trägt an seiner Überschrift den Namen dessen, der ihn
   hält – der eigene bekommt nur eine ruhige Kante, damit man sieht,
   wo man schreiben darf. */
#tiptap-editor .ProseMirror .punkt-fremd {
  opacity: .55;
  background: rgba(0, 0, 0, .015);
  cursor: not-allowed;
}

#tiptap-editor .ProseMirror [data-punkt-wer] {
  position: relative;
  border-left: 3px solid var(--punkt-farbe, #888);
  padding-left: 8px;
}

#tiptap-editor .ProseMirror [data-punkt-wer]::after {
  content: attr(data-punkt-wer);
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--punkt-farbe, #888);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

#tiptap-editor .ProseMirror .punkt-meiner {
  box-shadow: -3px 0 0 0 #2563eb;
}

.to-punkt-stand { font-size: 12.5px; color: var(--muted, #667085); }
.to-punkt-stand.ist-fremd { color: #b45309; font-weight: 600; }

/* Frühere Fassungen eines Dokuments. */
.to-fassung-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
}

.to-fassung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line, #dde3ec);
  border-radius: 8px;
}

.to-fassung.ist-neueste { border-color: #bfdbfe; background: #f5f9ff; }

/* ─── Tagesordnungspunkte ──────────────────────────────────────────
   Die Gliederung des Dokuments als Liste. Unterpunkte rücken ein, damit
   man sieht, was zu was gehört – und damit beim Entfernen klar ist, was
   mitgeht. */
.to-punkt-liste { display: flex; flex-direction: column; gap: 2px; }

.to-punkt-zeile {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: calc(var(--tiefe, 0) * 16px);
  border-radius: 7px;
}

.to-punkt-zeile:hover { background: rgba(37, 99, 235, .06); }

.to-punkt-titel {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.to-punkt-titel:hover { text-decoration: underline; }

/* Die Knöpfe treten zurück, bis man die Zeile ansteuert – sonst liest
   sich die Gliederung wie eine Werkzeugleiste. */
.to-punkt-zeile .btn { opacity: 0; }
.to-punkt-zeile:hover .btn,
.to-punkt-zeile:focus-within .btn { opacity: 1; }

/* Die Kopffelder der Vorlage bearbeiten – eine Zeile je Feld. */
.to-feld-liste { display: flex; flex-direction: column; gap: 6px; }

.to-feld-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.to-feld-zeile > input[type="text"] { flex: 1 1 180px; min-width: 140px; }

.to-feld-zeile input[type="text"],
.to-feld-zeile select {
  padding: 5px 8px; font: inherit; font-size: 13px;
  border: 1.5px solid var(--line, #dde3ec); border-radius: 7px;
  background: #fff; color: var(--text);
}

.to-feld-gross {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--muted, #667085);
  white-space: nowrap; cursor: pointer;
}

/* Der nächste Schritt der Kette: aus diesem Protokoll wird die
   Tagesordnung der nächsten Sitzung. Steht als Handlungsaufforderung
   da, nicht als Hinweis. */
.to-kette {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  font-size: 13.5px;
}

/* Woher der Text kam und wohin er schon gegangen ist. Das Zweite ist
   das wichtigere: es sagt, dass Änderungen hier nicht mehr ankommen. */
.to-hinweis {
  max-width: 900px;
  margin: 0 auto 10px;
  padding: 9px 14px;
  border-left: 3px solid #d97706;
  border-radius: 0 8px 8px 0;
  background: #fffbeb;
  font-size: 13px;
  color: #7c5b12;
}

.to-hinweis a { color: inherit; font-weight: 600; }

/* Empfängerauswahl beim Versenden: je Empfänger entsteht ein
   eigenes PDF, deshalb ist es eine Liste zum Ankreuzen und keine
   einzelne Auswahl. */
.to-empf-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 14px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border, #dde3ec);
  border-radius: 8px;
}

.to-empf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13.5px;
  cursor: pointer;
}
.to-empf input { margin: 0; flex-shrink: 0; }