/* ============================================================
   JuBase — Produktions-Stylesheet für die WordPress-Administration

   Alles ist unter .jubase gekapselt, damit weder wp-admin unsere
   Oberfläche zerschießt noch umgekehrt.

   SCHRIFTEN: bewusst lokal eingebunden. Ein Aufruf von
   fonts.gstatic.com würde die IP jeder Fachkraft an Google
   übertragen — in einer Einrichtung mit Sozialdaten ein
   vermeidbarer DSGVO-Verstoß. Dateien nach assets/fonts/ legen.
   Fehlen sie, greift die Fallback-Kette und das Layout hält.
   ============================================================ */

@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-variable.woff2') format('woff2');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-variable.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* ---------------------------------------------------- Designtokens */
.jubase,
.jubase-app{
  --paper:#F6F4EF;
  --paper-2:#EFEBE3;
  --surface:#FFFFFF;
  --ink:#16211D;
  --ink-2:#3D4A45;
  --muted:#77837D;
  --faint:#A3ADA8;
  --line:#E4E0D7;
  --line-2:#EDEAE3;

  --primary:#12695C;
  --primary-700:#0D5147;
  --primary-100:#DFEEEA;
  --primary-50:#F0F7F5;
  --primary-btn:#168372; /* Fuellung fuer .jubase-btn--primary: gleicher Ton, heller als --primary — als grosse Flaeche wirkt der dunkle Ton schwer */

  /* Schutzstufen — funktionale Farbe, nirgends dekorativ verwenden */
  --amber:#B0741A;      /* Schutzstufe 2 / Fristen */
  --amber-100:#FAEFDC;
  --rose:#A94257;       /* Schutzstufe 3 / Art. 9 / Kontaktverbot */
  --rose-100:#F9E8EB;
  --blue:#2C6499;       /* neutrale Sachinformation */
  --blue-100:#E5EEF6;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(22,33,29,.05), 0 1px 3px rgba(22,33,29,.04);
  --sh-2:0 2px 4px rgba(22,33,29,.04), 0 8px 22px -6px rgba(22,33,29,.10);

  --sans:'Figtree',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
}

/* ------------------------------------- wp-admin-Umgebung neutralisieren */
#wpcontent:has(.jubase){padding-left:0}
.jubase-page #wpbody-content{padding-bottom:0}
.jubase-page #wpfooter{display:none}

.jubase,
.jubase-app{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  min-height:calc(100vh - 32px);
  margin:0 0 0 -20px;
  padding:0;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
/* feine Papierkörnung — Wärme ohne Ablenkung */
.jubase::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.jubase *,
.jubase-app *{box-sizing:border-box}
.jubase h1,.jubase h2,.jubase h3,.jubase p,
.jubase-app h1,.jubase-app h2,.jubase-app h3,.jubase-app p{margin:0}
/* Die allgemeine Linkfarbe gilt fuer Links - nicht fuer Knoepfe.

   BEFUND, der immer wiederkam: `.jubase-app a` hat die Gewichtung (0,1,1)
   und schlaegt damit `.jubase-btn--primary` (0,1,0). Jeder Knopf, der als
   `<a>` gebaut ist - "Jetzt einrichten", "+ Aufnahme", "Zurueck zum
   Inhaltsverzeichnis" - bekam deshalb Dunkelgruen auf Gruen statt Weiss auf
   Gruen. Lesbar war das nicht.

   Es wurde zweimal einzeln nachgebessert (a.jubase-toc-fab, a.jubase-toc-card)
   und jedes Mal blieben die uebrigen stehen, weil niemand alle Fundstellen im
   Kopf hat. Die Ausnahme steht deshalb jetzt EINMAL hier: was eine
   jubase-btn-Klasse traegt, bestimmt seine Schriftfarbe selbst - auch jeder
   Knopf, der spaeter dazukommt.                                          */
.jubase a:not([class*="jubase-btn"]),
.jubase-app a:not([class*="jubase-btn"]){color:var(--primary-700)}
.jubase a,
.jubase-app a{text-decoration:none}
.jubase ::selection{background:var(--primary-100);color:var(--primary-700)}

/* WP-Buttons in unserem Bereich abschalten — wir bringen eigene mit */
.jubase .button,.jubase .button-primary{all:unset}

/* -------------------------------------------------------- Grundlayout

   Der Inhalt nutzt die Breite, die da ist.

   Hier stand `max-width:1360px` ohne `margin:0 auto` - der Inhalt hoerte
   also bei 1360px auf und der Rest des Bildschirms blieb leer liegen. Auf
   einem gewoehnlichen 1920er-Monitor sind das ueber 300px verschenkte
   Flaeche, genau dort, wo Kalender, Tabellen und Listen sie brauchen.

   Das seitliche Polster waechst jetzt mit dem Fenster mit (clamp), damit
   der Text auf grossen Schirmen nicht am Rand klebt. Die Obergrenze greift
   erst jenseits von 2200px - auf Ultrabreitbild waere eine Tabellenzeile
   ueber die volle Breite nicht mehr lesbar, weil das Auge den Zeilenanfang
   verliert. Auf allen ueblichen Bildschirmen ist sie ohne Wirkung.        */
.jubase-shell{
  position:relative;z-index:2;
  padding:26px clamp(20px,2.4vw,46px) 60px;
  max-width:2200px;
  margin-inline:auto;
}
.jubase-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.jubase-h1{font-family:var(--serif);font-size:29px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.jubase-h1 em{font-style:italic;color:var(--primary)}
.jubase-sub{color:var(--muted);font-size:13.5px;margin-top:3px}
.jubase-head-actions{margin-left:auto;display:flex;gap:8px;align-items:center}

.jubase-grid{display:grid;gap:16px}
/* auto-fit statt fester 4 Spalten: eine fuenfte oder sechste Kachel reiht
   sich ein, statt allein in einer neuen Zeile zu haengen (Rueckmeldung
   18./19.09.2026 zur Uebersichtsseite). */
.jubase-grid--kpi{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.jubase-grid--2-1{grid-template-columns:1.55fr 1fr}
.jubase-grid--1-1{grid-template-columns:1fr 1fr}
@media(max-width:1000px){.jubase-grid--2-1,.jubase-grid--1-1{grid-template-columns:1fr}}

/* Auf breiten Schirmen bekommt der Hauptteil den gewonnenen Platz, nicht
   die Nebenspalte. Eine Terminliste wird durch mehr Breite nicht besser -
   ein Kalender oder eine Tabelle schon. */
@media(min-width:1700px){.jubase-grid--2-1{grid-template-columns:2fr 1fr}}

/* ------------------------------------------------------------ Buttons */
.jubase-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;
  font-family:var(--sans);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:transform .12s,box-shadow .16s,border-color .16s;
}
.jubase-btn:hover{border-color:var(--faint);box-shadow:var(--sh-1);color:var(--ink)}
.jubase-btn:active{transform:translateY(1px)}
.jubase-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.jubase-btn--primary{background:var(--primary-btn);border-color:var(--primary-btn);color:#fff}
.jubase-btn--primary:hover{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 14px -4px rgba(18,105,92,.5)}
.jubase-btn--sm{padding:5px 11px;font-size:12px;border-radius:8px}
.jubase-btn--danger{color:var(--rose);border-color:var(--rose-100)}
.jubase-btn--danger:hover{background:var(--rose-100);color:var(--rose)}

/* -------------------------------------------------------------- Karte */
.jubase-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.jubase-card__head{display:flex;align-items:center;gap:10px;padding:16px 19px;border-bottom:1px solid var(--line-2)}
.jubase-card__title{font-size:14px;font-weight:700;letter-spacing:-.005em}
.jubase-card__body{padding:19px}
.jubase-card__foot{padding:12px 19px;border-top:1px solid var(--line-2);background:var(--primary-50);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------------------------------------------------------------- KPI */
.jubase-kpi{padding:17px 19px;position:relative;overflow:hidden}
.jubase-kpi::after{content:'';position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:var(--primary-50);opacity:.7}
.jubase-kpi__top{display:flex;align-items:center;gap:8px;position:relative}
.jubase-kpi__ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--primary-100);color:var(--primary-700)}
.jubase-kpi__ico--amber{background:var(--amber-100);color:var(--amber)}
.jubase-kpi__ico--blue{background:var(--blue-100);color:var(--blue)}
.jubase-kpi__ico--rose{background:var(--rose-100);color:var(--rose)}
.jubase-kpi__label{font-size:12.5px;color:var(--muted);font-weight:600}
.jubase-kpi__val{font-size:31px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:11px;font-variant-numeric:tabular-nums;position:relative}
.jubase-kpi__val small{font-size:15px;font-weight:600;color:var(--faint);letter-spacing:0}
.jubase-kpi__note{font-size:12px;color:var(--muted);margin-top:4px;position:relative}
/* Handlungskachel der Uebersicht: die ganze Kachel ist der Weg zur Arbeit,
   nicht ein Link darin. Farbe wird geerbt - die Kachel soll nicht wie ein
   Link aussehen, sondern wie eine Schaltflaeche mit Inhalt. */
.jubase-kpi--tat{display:block;text-decoration:none;color:inherit;transition:border-color .14s,box-shadow .14s,transform .14s}
.jubase-kpi--tat:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(20,30,28,.07);transform:translateY(-1px)}
.jubase-kpi--tat:focus-visible{outline:2px solid var(--primary-700);outline-offset:2px}
/* Dringend: schmaler roter Balken links, warmer Hof statt gruenem. */
.jubase-kpi--dringend{border-left:3px solid var(--rose)}
.jubase-kpi--dringend::after{background:var(--rose-100)}

/* Jede Handlungskachel bekommt oben einen schmalen Farbstreifen in ihrem
   eigenen Ton - nicht nur die dringenden. Auf einen Blick erkennbar, worum
   es grob geht, bevor der Text gelesen ist (Rueckmeldung 18./19.09.2026). */
.jubase-kpi--ton-amber{box-shadow:inset 0 2px 0 var(--amber),var(--sh-1)}
.jubase-kpi--ton-blue{box-shadow:inset 0 2px 0 var(--blue),var(--sh-1)}
.jubase-kpi--ton-rose{box-shadow:inset 0 2px 0 var(--rose),var(--sh-1)}
.jubase-kpi--dringend.jubase-kpi--ton-rose{box-shadow:inset 0 2px 0 var(--rose),0 6px 18px -6px rgba(169,66,87,.35)}
/* Leerzustand in Karten - war bisher nur im Markup, ohne eigene Regel. */
.jubase-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:18px 0;margin:0}

/* --------------------------------------------------------- Kennzeichen */
.jubase-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;
  background:var(--paper-2);color:var(--muted);
}
.jubase-chip--green{background:var(--primary-100);color:var(--primary-700)}
.jubase-chip--amber{background:var(--amber-100);color:var(--amber)}
.jubase-chip--rose{background:var(--rose-100);color:var(--rose)}
.jubase-chip--blue{background:var(--blue-100);color:var(--blue)}
.jubase-chip--line{background:transparent;border:1px solid var(--line);color:var(--muted)}
/*
 * Chip als Link (Auftrag 22.09.2026, Abschnitt 8: sichtbarer Fokus).
 * Mehrere Stellen verlinken mit dieser Kennzeichnung (z. B. "Vorgang
 * öffnen", "Quelle öffnen") - ohne eigene Regel sah ein solcher Chip
 * genauso aus wie ein rein informativer, nicht klickbarer, UND eine
 * Tastaturbedienung hatte keinen sichtbaren Fokusring auf ihm.
 */
a.jubase-chip{text-decoration:none;cursor:pointer;transition:filter .12s ease}
a.jubase-chip:hover{filter:brightness(0.94)}
a.jubase-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Schutzstufen. Die Farbe trägt hier Bedeutung — nie umwidmen. */
.jubase-lvl{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.jubase-lvl--1{background:var(--paper-2);color:var(--muted)}
.jubase-lvl--2{background:var(--amber-100);color:var(--amber)}
.jubase-lvl--3{background:var(--rose-100);color:var(--rose)}

/* --------------------------------------------------------- Aktenkopf */
.jubase-file{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:22px 24px;margin-bottom:16px;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;position:relative;overflow:hidden;
}
.jubase-file::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary) 0%,#1E8B7B 100%)}
.jubase-file__av{
  width:60px;height:60px;border-radius:18px;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-size:23px;font-weight:600;
  background:linear-gradient(145deg,#E3EFEB,#D3E7E1);color:var(--primary-700);
}
.jubase-file__id{flex:1;min-width:230px}
.jubase-file__name{font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.jubase-file__ref{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.jubase-file__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.jubase-file__side{display:flex;flex-direction:column;gap:9px;align-items:flex-end}

/* Zugriffs-Transparenz: das Rechtemodell wird gezeigt, nicht versteckt */
.jubase-access{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 15px;border-radius:var(--r);margin-bottom:18px;
  background:var(--primary-50);border:1px solid var(--primary-100);
  font-size:12.5px;color:var(--primary-700);
}
.jubase-access__meta{margin-left:auto;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- Reiter */
.jubase-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.jubase-tab{
  padding:10px 15px 12px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;
  border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;display:flex;align-items:center;gap:7px;font-family:var(--sans);
  transition:color .16s,border-color .16s;
}
.jubase-tab:hover{color:var(--ink)}
.jubase-tab[aria-selected="true"]{color:var(--primary-700);border-bottom-color:var(--primary)}
.jubase-tab[aria-disabled="true"]{color:var(--faint);cursor:not-allowed}
.jubase-panel[hidden]{display:none}

/* --------------------------------------------------------- Datenfelder */
.jubase-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px}
@media(max-width:860px){.jubase-fields{grid-template-columns:1fr}}
.jubase-field{padding:11px 0;border-bottom:1px solid var(--line-2);display:flex;gap:12px;align-items:baseline}
.jubase-field__k{font-size:12px;color:var(--muted);font-weight:600;width:150px;flex:none;display:flex;align-items:center;gap:5px}
.jubase-field__v{font-size:13.5px;font-weight:500;color:var(--ink)}
.jubase-field__v--num{font-variant-numeric:tabular-nums}
/* Schloss an jedem verschlüsselten Feld — Fachkräfte sollen sehen, was geschützt ist */
.jubase-lock{width:11px;height:11px;color:var(--primary);opacity:.55;flex:none}

.jubase-section{display:flex;align-items:center;gap:9px;margin:26px 0 6px}
.jubase-section:first-child{margin-top:0}
.jubase-section h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.jubase-section::after{content:'';flex:1;height:1px;background:var(--line-2)}

/* ---------------------------------------------------------- Beziehung */
.jubase-rel{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);margin-bottom:9px;transition:border-color .16s,box-shadow .16s;
}
.jubase-rel:hover{border-color:var(--primary-100);box-shadow:var(--sh-1)}
.jubase-rel--past{opacity:.62;background:var(--paper)}
.jubase-rel__name{font-family:var(--serif);font-size:16px;font-weight:500}
.jubase-rel__org{font-size:12px;color:var(--muted);margin-top:1px}
.jubase-rel__tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.jubase-rel__time{font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;flex:none}
.jubase-rel__time b{display:block;color:var(--ink-2);font-weight:700}

/* Zeitstrahl der Historisierung */
.jubase-hist{border-left:2px solid var(--line);margin:4px 0 14px 19px;padding-left:18px}
.jubase-hist__item{position:relative;padding:7px 0;font-size:12.5px;color:var(--muted)}
.jubase-hist__item::before{content:'';position:absolute;left:-24px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.jubase-hist__item--now::before{background:var(--primary);border-color:var(--primary)}
.jubase-hist__item b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- Listen */
.jubase-list{display:flex;flex-direction:column}
.jubase-li{display:flex;align-items:center;gap:12px;padding:12px 19px;border-bottom:1px solid var(--line-2);transition:background .14s}
.jubase-li:last-child{border-bottom:none}
.jubase-li:hover{background:var(--primary-50)}
.jubase-li__main{min-width:0;flex:1}
.jubase-li__name{font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.jubase-li__meta{font-size:11.5px;color:var(--muted);margin-top:1px}
.jubase-li__right{text-align:right;font-size:11.5px;color:var(--muted);flex:none}

.jubase-av{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:12.5px;background:var(--paper-2);color:var(--ink-2);
}
.jubase-av--1{background:#E3EFEB;color:#12695C}
.jubase-av--2{background:#F3E9DA;color:#96631A}
.jubase-av--3{background:#E6EDF5;color:#2C6499}
.jubase-av--4{background:#F5E7EA;color:#A94257}

/* ------------------------------------------------------------ Balken */
.jubase-bars{display:flex;flex-direction:column;gap:15px}
.jubase-bar{display:grid;grid-template-columns:130px 1fr 54px;align-items:center;gap:13px}
.jubase-bar__name{font-size:13px;font-weight:600}
.jubase-bar__name span{display:block;font-size:11px;color:var(--faint);font-weight:500}
.jubase-bar__track{height:9px;border-radius:20px;background:var(--paper-2);overflow:hidden}
.jubase-bar__fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--primary) 0%,#1E8B7B 100%)}
.jubase-bar__fill--full{background:linear-gradient(90deg,var(--amber) 0%,#D0912F 100%)}
.jubase-bar__num{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ----------------------------------------------------------- Fristen */
.jubase-due{display:flex;align-items:center;gap:12px;padding:12px 19px;border-bottom:1px solid var(--line-2)}
.jubase-due:last-child{border-bottom:none}
.jubase-due__bar{width:3px;height:34px;border-radius:3px;flex:none;background:var(--line)}
.jubase-due__bar--amber{background:var(--amber)}
.jubase-due__bar--rose{background:var(--rose)}
.jubase-due__bar--green{background:var(--primary)}
.jubase-due__t{font-size:13px;font-weight:600;line-height:1.3}
.jubase-due__s{font-size:11.5px;color:var(--muted);margin-top:1px}
.jubase-due__when{margin-left:auto;text-align:right;flex:none}
.jubase-due__when b{display:block;font-size:12.5px;font-weight:700}
.jubase-due__when span{font-size:11px;color:var(--muted)}

/* ---------------------------------------------------- Zugriff fehlt */
/* Kein Verschwinden-Lassen: der Nutzer erfährt Ist- und Soll-Zugriffsgrad. */
.jubase-denied{
  text-align:center;padding:52px 30px;
  border:1px dashed var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface) 0%,var(--paper) 100%);
}
.jubase-denied__ico{width:52px;height:52px;border-radius:16px;margin:0 auto 15px;display:grid;place-items:center;background:var(--rose-100);color:var(--rose)}
.jubase-denied h3{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:7px}
.jubase-denied p{color:var(--muted);font-size:13px;max-width:430px;margin:0 auto 5px;line-height:1.6}
.jubase-denied__why{
  margin-top:18px;display:inline-flex;gap:8px;align-items:center;font-size:11.5px;
  background:var(--surface);border:1px solid var(--line);padding:7px 13px;border-radius:20px;color:var(--muted);
}

/* ---------------------------------------------------------- Protokoll */
.jubase-log{width:100%;border-collapse:collapse;font-size:12.5px}
.jubase-log th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:0 14px 9px;border-bottom:1px solid var(--line)}
.jubase-log td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.jubase-log tr:last-child td{border-bottom:none}
.jubase-log tbody tr:hover{background:var(--primary-50)}
.jubase-log__t{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.jubase-log__who{font-weight:600}
.jubase-log__denied{color:var(--rose)}
.jubase-hash{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;color:var(--faint);letter-spacing:-.02em}
.jubase-chain{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--primary-700);font-weight:600}
.jubase-chain--broken{color:var(--rose)}

/* ----------------------------------------------------------- Formular */
.jubase-input,.jubase-select,.jubase-textarea{
  width:100%;font-family:var(--sans);font-size:13.5px;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  transition:border-color .16s,box-shadow .16s;
}
.jubase-input:focus,.jubase-select:focus,.jubase-textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50);
}
.jubase-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.jubase-hint{font-size:11.5px;color:var(--faint);margin-top:4px}

/* ------------------------------------------------------------ Nachfrage

   Ein Feld, das erst durch eine Auswahl entsteht.

   Ohne Auszeichnung uebersieht man es: der Blick ist beim Auswahlfeld, das
   neue Feld erscheint darunter und sieht aus wie jedes andere. Wer dann
   weiterklickt, bekommt eine Fehlermeldung fuer ein Feld, das er nie gesehen
   hat. Deshalb eine eigene Flaeche mit farbiger Kante - dieselbe Sprache wie
   der Kartenfuss, nur schmaler.                                          */
.jubase-nachfrage{
  margin:0 0 12px;
  padding:12px 14px;
  background:var(--primary-50);
  border:1px solid var(--primary-100);
  border-left:3px solid var(--primary);
  border-radius:var(--r-sm);
}
.jubase-nachfrage__kopf{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.jubase-nachfrage__kopf .jubase-lbl{margin:0}
.jubase-nachfrage__pflicht{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary-700);background:var(--primary-100);
  padding:2px 7px;border-radius:999px;white-space:nowrap;
}
.jubase-nachfrage .jubase-input{background:var(--surface)}

/* Der Auftritt darf einen Wimpernschlag dauern - eine Bewegung sagt "hier
   ist etwas dazugekommen" schneller als jede Farbe. Wer Bewegung abgestellt
   hat, bekommt die Flaeche ohne. */
@media (prefers-reduced-motion: no-preference){
  .jubase-nachfrage{animation:jubase-nachfrage-auf .26s cubic-bezier(.22,.61,.36,1) both}
  @keyframes jubase-nachfrage-auf{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:none}
  }
}

/* =========================================== Klientendokumentation: Einstieg */
.jubase-doc-entry{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:860px){.jubase-doc-entry{grid-template-columns:1fr}}
.jubase-doc-entry__head{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.jubase-person-card{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;cursor:pointer}
.jubase-person-card:hover{border-color:var(--primary);box-shadow:var(--sh-1)}
.jubase-person-card.is-active{border-color:var(--primary);background:var(--primary-50)}
.jubase-person-card__avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--primary-100);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.jubase-person-card.is-active .jubase-person-card__avatar{background:var(--primary);color:#fff}
.jubase-person-card__name{font-size:13.5px;font-weight:600;line-height:1.3}
.jubase-anliegen-card{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.jubase-anliegen-card:not(.is-disabled):hover{border-color:var(--primary);box-shadow:var(--sh-1)}
.jubase-anliegen-card.is-disabled{opacity:.45;cursor:default;pointer-events:none}
.jubase-anliegen-card__title{font-weight:700;font-size:13.5px;margin-bottom:5px}
.jubase-anliegen-card__text{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ============================================== Tagesdokumentation
   Einträge sind unveränderlich. Eine Berichtigung erzeugt eine neue
   Fassung; deshalb trägt jeder Eintrag eine sichtbare Herkunft. */
.jubase-quick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px 18px;margin-bottom:18px}
.jubase-quick__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:11px}
.jubase-quick textarea{width:100%;min-height:78px;resize:vertical;font-family:var(--sans);font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);background:var(--paper)}
.jubase-quick textarea:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-50)}

.jubase-day{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.jubase-day h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.jubase-day::after{content:'';flex:1;height:1px;background:var(--line-2)}

.jubase-entry{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;overflow:hidden}
.jubase-entry__head{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.jubase-entry__who{font-size:12.5px;font-weight:700}
.jubase-entry__who span{font-weight:500;color:var(--muted)}
.jubase-entry__time{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.jubase-entry__body{padding:13px 15px;font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.jubase-entry__foot{padding:8px 15px;border-top:1px solid var(--line-2);background:var(--paper);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.jubase-entry--corrected{border-color:var(--amber-100)}
.jubase-entry--corrected .jubase-entry__head{background:var(--amber-100)}
.jubase-entry--retracted{background:var(--paper);border-style:dashed}
.jubase-entry--retracted .jubase-entry__body{text-decoration:line-through;color:var(--faint)}
.jubase-entry--draft{border-left:3px solid var(--rose)}
.jubase-entry--late{border-left:3px solid var(--blue)}

/* Aufklappbares Original — Nachvollziehbarkeit ohne Unruhe im Alltag */
.jubase-details{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.jubase-details summary{cursor:pointer;padding:8px 12px;font-size:11.5px;font-weight:700;color:var(--muted);list-style:none}
.jubase-details summary::-webkit-details-marker{display:none}
.jubase-details summary::before{content:'▸ ';font-size:10px}
.jubase-details[open] summary::before{content:'▾ '}
.jubase-details__body{padding:10px 12px 12px;font-size:13px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line-2)}

/* ================================================= Eskalationsspur
   Der eigentliche Fehler in der Praxis ist nicht die fehlende
   Dokumentation, sondern die vergessene Meldung. */
.jubase-esc{border-left:2px solid var(--line);margin:6px 0 0 20px;padding-left:22px}
.jubase-esc__step{position:relative;padding:14px 0}
.jubase-esc__step+.jubase-esc__step{border-top:1px solid var(--line-2)}
.jubase-esc__step::before{content:'';position:absolute;left:-29px;top:19px;width:13px;height:13px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.jubase-esc__step--done::before{background:var(--primary);border-color:var(--primary)}
.jubase-esc__step--open::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-100)}
.jubase-esc__step--late::before{background:var(--rose);border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-100)}
.jubase-esc__step--na::before{background:var(--paper-2);border-color:var(--line)}
.jubase-esc__title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.jubase-esc__title b{font-size:13.5px;font-weight:700}
.jubase-esc__step--na .jubase-esc__title b{color:var(--muted);font-weight:600}
.jubase-esc__meta{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.55}
.jubase-esc__meta b{color:var(--ink-2)}
.jubase-esc__proof{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:5px 11px;border-radius:20px}
.jubase-esc__form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}

.jubase-alarm{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border-radius:var(--r-lg);background:var(--rose-100);border:1px solid var(--rose);margin-bottom:18px}
/* ------------------------------------------------------------ Symbole

   Die SVG bringen nur eine viewBox mit und keine Breite. Im wp-admin hat
   WordPress sie begrenzt, im Frontend niemand - ein einzelnes Symbol fuellte
   damit den halben Bildschirm.

   Zuerst ein Auffangnetz fuer JEDES SVG in unserem Bereich, damit derselbe
   Fehler beim naechsten Symbol nicht wiederkommt. Die genaueren Regeln
   darunter ueberschreiben es, wo eine andere Groesse gewollt ist.          */
.jubase svg,
.jubase-app svg{
  width:16px;
  height:16px;
  flex:none;
}

.jubase-ic,
.jubase-lock{
  width:16px;
  height:16px;
  flex:none;
  display:inline-block;
  vertical-align:-2px;
}

/* In Ueberschriften und Schaltflaechen eine Spur groesser. */
.jubase-card__title .jubase-ic,
.jubase-h1 .jubase-ic{ width:18px; height:18px; vertical-align:-3px; }
.jubase-btn .jubase-ic{ width:15px; height:15px; }

.jubase-alarm .jubase-ic{color:var(--rose);flex:none;width:20px;height:20px;margin-top:1px}
.jubase-alarm b{color:var(--rose)}
.jubase-alarm__text{font-size:13px;color:var(--ink-2);line-height:1.6}

/* Rückmeldung nach einer Aktion */
.jubase-notice{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:var(--r);margin-bottom:16px;font-size:13px}
.jubase-notice--ok{background:var(--primary-50);border:1px solid var(--primary-100);color:var(--primary-700)}
.jubase-notice--warn{background:var(--amber-100);border:1px solid var(--amber-100);color:var(--amber)}
.jubase-notice--error{background:var(--rose-100);border:1px solid var(--rose-100);color:var(--rose)}

/* Segmentierter Filter */
.jubase-seg{display:inline-flex;background:var(--paper-2);padding:3px;border-radius:10px;gap:2px}
.jubase-seg a:not([class*="jubase-btn"]){padding:5px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--muted)}
.jubase-seg a[aria-current="true"]{background:var(--surface);color:var(--primary-700);box-shadow:var(--sh-1)}

/* ------------------------------------------------------ Barrierefrei */
.jubase-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .jubase *{animation:none !important;transition:none !important}
}
@media print{
  .jubase{background:#fff}
  .jubase::before,.jubase-head-actions,.jubase-btn{display:none}
  .jubase-card{box-shadow:none;border-color:#ccc}
}

/* Notfallblatt: gedruckt nur der Inhalt, keine Bedienelemente. Die
   Seitenleiste/Kopfzeile der Fachanwendung blendet jubase-app.css aus -
   das hier betrifft nur die Karten dieser einen Seite. */
.jubase-notfall-druck__kopf{display:none}
@media print{
  .jubase-notfall-druck__ausblenden{display:none !important}
  .jubase-notfall-druck__kopf{
    display:block;font-family:var(--serif);font-size:20px;font-weight:600;
    margin:0 0 16px;border-bottom:2px solid #000;padding-bottom:8px;
  }
}

/* Quittungsliste: was nur auf Papier gehoert und was nur am Bildschirm.

   Die Unterschriftszeile ist am Bildschirm eine leere Linie ohne Zweck; auf
   dem Papier ist sie der eigentliche Punkt. Umgekehrt haben Ankreuzfelder und
   Schaltflaechen auf einem Ausdruck nichts verloren.                       */
.jubase-nurdruck{display:none}
@media print{
  .jubase-nodruck{display:none !important}
  .jubase-nurdruck{display:block !important}
  .jubase-card{break-inside:avoid;page-break-inside:avoid}
}

/* ------------------------------------------ Mitarbeitendenverwaltung */
.jubase .jubase-lbl{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
  margin:14px 0 5px;
}
.jubase .jubase-lbl:first-of-type{margin-top:0}

.jubase .jubase-input--sm{
  padding:5px 9px;
  font-size:12.5px;
  min-height:auto;
}

/* --------------------------------------------------- Rechteuebersicht */
.jubase-perm{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.jubase-perm th,
.jubase-perm td{
  padding:9px 10px;
  border-bottom:1px solid var(--line-2);
  text-align:left;
  vertical-align:top;
}
.jubase-perm thead th{
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}
.jubase-perm__role{
  text-align:center;
  width:96px;
  line-height:1.3;
}
.jubase-perm__cell{text-align:center;vertical-align:middle}
.jubase-perm__task{font-weight:600;color:var(--ink)}
.jubase-perm__note{font-size:12px;color:var(--muted);margin-top:2px;max-width:36em}
.jubase-perm__scope{font-size:11.5px;color:var(--faint);margin-top:3px}
.jubase-perm__yes{color:var(--primary);font-weight:700}
.jubase-perm__no{color:var(--faint)}
.jubase-perm tbody tr:hover{background:var(--paper-2)}

/* ------------------------------------------------------------ Kalender */
.jubase-cal{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.jubase-cal__wd{
  background:var(--paper-2);
  padding:7px 8px;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.jubase-cal__day{
  background:var(--surface);
  min-height:104px;
  padding:5px 6px 7px;
}
.jubase-cal__day--aus{background:var(--paper);opacity:.55}
.jubase-cal__day--heute{box-shadow:inset 0 0 0 2px var(--primary)}
.jubase-cal__num{
  font-size:12px;
  font-weight:700;
  color:var(--ink-2);
  margin-bottom:4px;
}
.jubase-cal__day--heute .jubase-cal__num{color:var(--primary)}

.jubase-cal__ev{
  display:flex;
  gap:4px;
  align-items:baseline;
  font-size:11.5px;
  line-height:1.35;
  padding:2px 5px;
  margin-bottom:2px;
  border-radius:4px;
  border-left:3px solid var(--faint);
  background:var(--paper-2);
  overflow:hidden;
}
.jubase-cal__ev--s1{border-left-color:var(--primary);background:var(--primary-50)}
.jubase-cal__ev--s2{border-left-color:var(--amber);background:var(--amber-100)}
.jubase-cal__ev--s3{border-left-color:var(--rose);background:var(--rose-100)}
.jubase-cal__ev.is-overdue{border-left-color:var(--rose);font-weight:600}
.jubase-cal__t{font-weight:700;color:var(--ink-2);flex:0 0 auto}

/* Der Kindname steht auf einer EIGENEN Zeile ueber Zeit und Titel, nicht
   davor in derselben Zeile - sonst verdraengte er bei einem laengeren
   Namen die Uhrzeit oder den Titel aus dem sichtbaren Rest der Zeile.
   Ohne den Namen stand im Kaestchen nur "HPG Termin", und bei mehreren
   Kindern am selben Tag war unklar, wen es betrifft, ohne den Termin zu
   oeffnen. */
.jubase-cal__ev--klient{display:block;padding-block:3px}
.jubase-cal__who{display:block;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.jubase-cal__zeile{display:flex;gap:4px;align-items:baseline;overflow:hidden}
.jubase-cal__lbl{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink-2);
}
.jubase-cal__mehr{font-size:11px;color:var(--muted);padding:1px 5px}

/* Begleitung (seit 0.69.0): eigene Zeile unter dem Titel. Offen = gelb,
   Konflikt mit dem Dienstplan = rot umrandet. */
.jubase-cal__ev:has(.jubase-cal__begl){flex-wrap:wrap}
.jubase-cal__begl{flex:1 0 100%;display:block;font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jubase-cal__begl.is-offen{color:var(--amber);font-weight:600}
.jubase-cal__begl.is-konflikt{color:var(--rose);font-weight:600}

/* Ein Termin im Monatsraster war bis 0.51.1 nicht anklickbar - nur die
   "naechsten 14 Tage" in der Seitenleiste hatten Zugriff auf Status,
   Berichtigen und Verschieben. Ein Termin ausserhalb dieses Fensters
   liess sich ueberhaupt nicht mehr anfassen. Jetzt traegt ".jubase-cal__ev"
   dieselben Klassen wie zuvor, sitzt aber auf einem <summary> statt auf
   einem <div> - eine sichtbar unveraenderte Kachel, die sich oeffnen laesst. */
.jubase-cal__evwrap{margin-bottom:2px}
.jubase-cal__evwrap > summary{list-style:none;cursor:pointer}
.jubase-cal__evwrap > summary::-webkit-details-marker{display:none}
.jubase-cal__evwrap > summary::marker{content:''}
.jubase-cal__evwrap > summary.jubase-cal__ev{margin-bottom:0}
.jubase-cal__evwrap[open] > summary.jubase-cal__ev{border-radius:4px 4px 0 0}
.jubase-cal__evwrap__body{padding:2px 2px 6px}
.jubase-cal__evwrap__body .jubase-tstatus{padding:0 2px 8px;margin-top:2px;font-size:11px}
.jubase-cal__evwrap__body .jubase-tstatus summary{font-size:10.5px}

.jubase-cal__legende{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}
.jubase-cal__dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:2px;
  margin-right:5px;
  vertical-align:baseline;
}
.jubase-cal__dot--s1{background:var(--primary)}
.jubase-cal__dot--s2{background:var(--amber)}
.jubase-cal__dot--s3{background:var(--rose)}
.jubase-cal__dot--frist{background:var(--rose);border:2px solid var(--rose-100)}

@media (max-width:900px){
  .jubase-cal__day{min-height:76px}
  .jubase-cal__lbl{display:none}
}
.jubase-cal__ev--frist{
  border-left-color:var(--blue);
  background:var(--blue-100);
  font-weight:600;
}
.jubase-cal__ev--frist.is-overdue{border-left-color:var(--rose);background:var(--rose-100)}

/* --------------------------------------------- Tagesdoku: Einzeleintrag */
.jubase-dnote{
  border-left:3px solid var(--primary-100);
  padding:9px 0 9px 13px;
  margin-bottom:14px;
}
.jubase-dnote--alt{
  border-left-color:var(--amber-100);
  opacity:.72;
}
.jubase-dnote__kopf{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.jubase-dnote__wer{font-size:12px;color:var(--muted)}
.jubase-dnote__text{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  white-space:pre-line;
}
.jubase-dnote--alt .jubase-dnote__text{text-decoration:line-through;text-decoration-color:var(--amber)}
.jubase-dnote__grund{
  margin-top:7px;
  font-size:12.5px;
  color:var(--amber);
  background:var(--amber-100);
  padding:6px 9px;
  border-radius:var(--r-sm);
}
.jubase-dnote__fix{margin-top:9px}
.jubase-dnote__fix summary{
  cursor:pointer;
  font-size:12.5px;
  color:var(--primary-700);
  user-select:none;
}
.jubase-dnote__fix[open] summary{margin-bottom:9px}
.jubase-li.is-active{background:var(--primary-50)}

/* ---------------------------------------- Tagesdoku: weitere Angaben */
.jubase-weitere{
  margin-top:16px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:11px 13px;
  background:var(--paper);
}
.jubase-weitere summary{
  cursor:pointer;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-2);
  user-select:none;
}
.jubase-weitere summary span{
  display:block;
  font-weight:400;
  font-size:12px;
  color:var(--faint);
  margin-top:2px;
}
.jubase-weitere[open] summary{
  margin-bottom:12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line-2);
}

/* Schnellaktion "kein Bogen noetig" unter dem Listeneintrag */
.jubase-skip{
  padding:0 19px 11px 62px;
  margin-top:-6px;
}
.jubase-skip summary{
  cursor:pointer;
  font-size:12px;
  color:var(--muted);
  user-select:none;
}
.jubase-skip summary:hover{color:var(--primary-700)}
.jubase-skip[open] summary{margin-bottom:7px}

/* Termin abhaken - unter dem Listeneintrag */
.jubase-tstatus{padding:0 19px 12px 19px;margin-top:-8px}
.jubase-tstatus summary{
  cursor:pointer;
  font-size:12px;
  color:var(--muted);
  user-select:none;
}
.jubase-tstatus summary:hover{color:var(--primary-700)}
.jubase-tstatus[open] summary{margin-bottom:8px}

/* Terminmarke in der Akte */
.jubase-tmark{
  width:9px;height:9px;
  border-radius:50%;
  margin-top:6px;
  flex:none;
  display:block;
  background:var(--primary);
}
.jubase-tmark--s2{background:var(--amber)}
.jubase-tmark--s3{background:var(--rose)}

/* ------------------------------------------------- Zweiter Faktor */
.jubase-secret{
  font-family:Consolas,Monaco,monospace;
  font-size:17px;
  letter-spacing:.14em;
  padding:13px 16px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  word-break:break-all;
  user-select:all;
}
.jubase-codes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px;
}
.jubase-codes span{
  font-family:Consolas,Monaco,monospace;
  font-size:14px;
  letter-spacing:.06em;
  padding:8px 10px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  text-align:center;
  user-select:all;
}

/* ------------------------------------------------------- Befundzeile */
.jubase-befund{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:8px 0;
}
.jubase-befund__mark{
  width:9px;height:9px;
  border-radius:50%;
  margin-top:5px;
  flex:none;
}
.jubase-befund__mark--ok{background:var(--primary)}
.jubase-befund__mark--warn{background:var(--amber)}
.jubase-befund__mark--manuell{background:var(--muted)}
.jubase-befund__t{font-size:13.5px;font-weight:600;color:var(--ink)}
.jubase-befund__s{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}

/* QR-Code beim Einrichten des zweiten Faktors */
.jubase-qr{
  width:196px;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  margin-bottom:12px;
}
.jubase-qr svg{width:100%;height:auto;display:block}

/* ------------------------------------------------------- Anwenderhandbuch */
.jubase-md{
  max-width:760px;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
}
.jubase-md h1,
.jubase-md h2,
.jubase-md h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
  scroll-margin-top:24px;
}
.jubase-md h1{font-size:26px;margin:0 0 14px}
.jubase-md h2{
  font-size:21px;
  margin:40px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.jubase-md h2:first-child{margin-top:0;padding-top:0;border-top:none}
.jubase-md h3{font-size:16.5px;margin:22px 0 8px}
.jubase-md p{margin:0 0 14px}
.jubase-md ul,
.jubase-md ol{margin:0 0 14px;padding-left:22px}
.jubase-md li{margin-bottom:6px}
.jubase-md li:last-child{margin-bottom:0}
.jubase-md strong{color:var(--ink);font-weight:600}
.jubase-md em{font-style:italic}
.jubase-md code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:12.5px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
  color:var(--ink);
}
.jubase-md a:not([class*="jubase-btn"]):not([class*="jubase-toc"]){color:var(--primary);text-decoration:underline;text-decoration-color:var(--primary-100)}
.jubase-md a:not([class*="jubase-btn"]):not([class*="jubase-toc"]):hover{color:var(--primary-700);text-decoration-color:currentColor}
.jubase-md hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.jubase-md table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13px}
.jubase-md th,
.jubase-md td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.jubase-md thead th{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper-2);border-bottom:1px solid var(--line);
}
.jubase-md tbody tr:hover{background:var(--paper-2)}
.jubase-md > :first-child{margin-top:0}
.jubase-md > :last-child{margin-bottom:0}

/* Inhaltsverzeichnis als Symbol-Raster */
.jubase-toc-gruppe{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin:22px 0 10px;
}
.jubase-toc-gruppe:first-child{margin-top:0}
.jubase-toc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:10px;margin-bottom:4px;
}
a.jubase-toc-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);
  transition:transform .12s,box-shadow .16s,border-color .16s;
}
.jubase-toc-card:hover{border-color:var(--primary-100);box-shadow:var(--sh-1);transform:translateY(-1px)}
.jubase-toc-card__icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:var(--primary-50);color:var(--primary-700);
  display:grid;place-items:center;
}
.jubase-toc-card__icon .jubase-ic{width:17px;height:17px}
.jubase-toc-card__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.jubase-toc-card__num{font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.03em}
.jubase-toc-card__titel{
  font-size:13px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Schwebender Ruecksprung zum Inhaltsverzeichnis — immer sichtbar, egal
   wie weit gescrollt wurde (position:fixed), mit Beschriftung statt
   blossem Symbol, damit sein Zweck auf den ersten Blick klar ist. */
a.jubase-toc-fab{
  position:fixed;right:26px;bottom:26px;z-index:10;
  display:flex;align-items:center;gap:8px;
  height:46px;padding:0 18px 0 16px;border-radius:999px;
  background:var(--primary-btn);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:600;
  box-shadow:var(--sh-2);
  transition:background .16s,transform .12s,box-shadow .16s;
}
.jubase-toc-fab:hover{background:var(--primary);transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(18,105,92,.45)}
.jubase-toc-fab .jubase-ic{width:19px;height:19px;flex:0 0 19px}
@media (max-width:640px){
  .jubase-toc-fab{right:16px;bottom:16px;height:44px;padding:0 16px}
  .jubase-toc-fab span{display:none}
  .jubase-toc-fab{padding:0;width:44px;justify-content:center}
}

/* ============================================================
   Dienstplan — Monatsraster je Wohngruppe

   Die harte Groesse ist die Tagesspalte. 31 Spalten muessen ohne
   Querscrollen nebeneinander passen; auf einem Laptop bleiben dafuer
   rund 29 Pixel je Tag, und in 29 Pixel passt genau ein
   Grossbuchstabe. Alles Weitere folgt daraus: einstellige Kuerzel,
   Uhrzeiten zweizeilig, Farbe traegt, Buchstabe bestaetigt.

   Zwei Bildsprachen, damit Dienste und Abwesenheiten im selben
   Raster lesbar bleiben:
     Dienst      = gefuellte Flaeche
     Abwesenheit = gestreifter Balken, laeuft ueber die Tage durch
   ============================================================ */
/* Die Tabelle nimmt den Platz, den sie hat - sie rechnet ihn nicht aus.
   Vorher stand hier eine Formel aus der FENSTERbreite mit einem geschaetzten
   Abzug fuer Seitenleiste und Rand. Stimmt die Schaetzung nicht, laeuft die
   Tabelle ueber den Rand hinaus, und die stehenden Spalten links und rechts
   werden abgeschnitten. `table-layout:fixed` mit `width:100%` macht die
   Schaetzung ueberfluessig: Namens- und Summenspalte bekommen ihre feste
   Breite, die 31 Tage teilen sich den Rest. */
.jubase .jp-wrap{
  --jp-name:168px; --jp-sum:118px;
  margin-top:14px;
  min-width:0;
}
.jubase .jp-filter select{font:inherit;font-size:13.5px;font-weight:600;padding:7px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.jubase .jp-monat{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:2px}
/* Nur die Pfeile der Monatsnavigation, nicht jeder Link darin - ein Knopf
   soll seine eigene Farbe behalten (Regel aus jubase-css-check). */
.jubase .jp-monat a:not([class*="jubase-btn"]){width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:17px;text-decoration:none}
.jubase .jp-monat a:not([class*="jubase-btn"]):hover{background:var(--paper-2);color:var(--ink)}
.jubase .jp-monat span{padding:0 10px;font-weight:600;font-size:13.5px;white-space:nowrap}

/* --- Stiftleiste: die Legende IST das Werkzeug -------------------- */
.jubase .jp-stifte{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.jubase .jp-lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:3px 12px 3px 4px;white-space:nowrap;cursor:pointer;transition:border-color .14s,box-shadow .14s}
.jubase .jp-lg span{color:var(--faint);font-size:11px}
.jubase .jp-lg:hover{border-color:var(--faint)}
.jubase .jp-lg.jp-an{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50);color:var(--primary-700);font-weight:700}
.jubase .jp-lg .jp-mk{position:static;width:22px;height:22px;flex:none}
.jubase .jp-trenner{width:1px;height:18px;background:var(--line);margin:0 3px}

.jubase .jp-werkzeuge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.jubase .jp-tipp{font-size:12px;font-weight:600;color:var(--primary-700);background:var(--primary-50);border:1px solid var(--primary-100);border-radius:22px;padding:4px 12px}
.jubase .jp-stand{margin-left:auto;font-size:12px;color:var(--muted)}
.jubase .jp-stand.jp-warn{color:var(--amber);font-weight:700}

/* --- Das Raster --------------------------------------------------- */
.jubase table.jp-tabelle{border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);width:100%;table-layout:fixed}
.jubase .jp-tabelle th,.jubase .jp-tabelle td{padding:0;font-weight:500}
.jubase .jp-tabelle thead th{position:sticky;top:32px;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.jubase .jp-tabelle th.jp-d{text-align:center;font-size:10.5px;color:var(--muted);line-height:1.15;padding:7px 0 6px}
.jubase .jp-tabelle th.jp-d b{display:block;font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.jubase .jp-tabelle .jp-we{background:var(--paper-2)}
/* Wochentrennung als Luecke, nicht als Linie: das Auge zaehlt Wochen von selbst */
.jubase .jp-tabelle .jp-mo{border-left:5px solid var(--paper)}

.jubase .jp-tabelle .jp-nm{position:sticky;left:0;z-index:20;background:var(--surface);width:var(--jp-name);text-align:left;padding:5px 14px 5px 13px;border-right:1px solid var(--line)}
.jubase .jp-tabelle thead th.jp-nm{z-index:40;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:800}
.jubase .jp-n{display:block;font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jubase .jp-r{display:block;font-size:10.5px;color:var(--muted);line-height:1.2}
/* Die Wochenstunden stehen da wie eine Angabe, nicht wie ein Formular -
   ein Rahmen entsteht erst, wenn jemand hinfasst. Der Bildschirm hat
   zwoelf solcher Felder; als Kaesten untereinander sehen sie aus wie eine
   Baustelle. */
/* Die Stufenpfeile bleiben: eine halbe Stunde hoch oder runter ist der
   haeufigste Handgriff an diesem Feld, und ihn ueber die Tastatur zu
   verlangen waere Schikane. Sichtbar werden sie ohnehin erst beim
   Ueberfahren - so bleiben zwoelf Felder untereinander ruhig. */
.jubase input.jp-std{width:58px;font:inherit;font-size:11px;padding:1px 2px 1px 4px;border:1px solid transparent;border-radius:5px;background:none;color:var(--muted);font-variant-numeric:tabular-nums}
.jubase input.jp-std:hover{border-color:var(--line);background:var(--paper)}
.jubase input.jp-std:focus{outline:none;border-color:var(--primary);background:var(--surface);color:var(--ink)}
.jubase .jp-r::after{content:' h';font-size:10.5px;color:var(--faint)}

.jubase .jp-tabelle tbody tr{height:36px}
.jubase .jp-tabelle tbody td.jp-d{text-align:center;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);position:relative;cursor:cell}
/* Kreuz-Hervorhebung.
   Das Ueberlagerungsfeld gilt AUSDRUECKLICH nur fuer die Koerperzellen -
   die haben `position:relative`. Die Fusszellen haben das nicht; dort
   suchte sich `position:absolute` den naechsten positionierten Vorfahren
   und legte einen gruenen Schleier ueber die ganze Seite, sobald jemand
   mit der Maus ueber den Plan fuhr. Sie bekommen deshalb schlicht eine
   Einfaerbung ohne Pseudoelement. */
.jubase .jp-tabelle th.jp-hi{background:rgba(18,105,92,.06)}
.jubase .jp-tabelle tbody td.jp-hi::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:rgba(18,105,92,.05)}
.jubase .jp-tabelle tfoot td.jp-hi{box-shadow:inset 0 0 0 99px rgba(18,105,92,.05)}
.jubase .jp-tabelle td.jp-sel{outline:2px solid var(--primary);outline-offset:-2px;z-index:6}

/* --- Die Marke in der Zelle --------------------------------------- */
.jubase .jp-mk{position:absolute;inset:2px 1px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:700;font-style:normal;user-select:none;z-index:2}
.jubase .jp-art1{background:var(--primary-100);color:var(--primary-700)}
.jubase .jp-art2{background:var(--amber-100);color:var(--amber)}
.jubase .jp-art3{background:var(--blue-100);color:var(--blue)}
.jubase .jp-art4{background:#EEEAF7;color:#6E5A9E}
.jubase .jp-art5{background:var(--paper-2);color:var(--ink-2)}
/* Farben aus dem Dienstkatalog (seit 0.70.0). Nach .jp-artN, damit die
   gewaehlte Farbe gewinnt; vor .jp-nacht, damit Nachtdienste dunkel bleiben.
   Dienste ohne Farbe und ohne eigene .jp-artN-Regel bekommen Grau. */
.jubase :where(.jp-mk[class*="jp-art"]){background:var(--paper-2);color:var(--ink-2)}
.jubase .jp-farbe-petrol{background:var(--primary-100);color:var(--primary-700)}
.jubase .jp-farbe-amber{background:var(--amber-100);color:var(--amber)}
.jubase .jp-farbe-blau{background:var(--blue-100);color:var(--blue)}
.jubase .jp-farbe-lila{background:#EEEAF7;color:#6E5A9E}
.jubase .jp-farbe-rose{background:var(--rose-100);color:var(--rose)}
.jubase .jp-farbe-gruen{background:#E3F1E4;color:#2F6B3A}
.jubase .jp-farbe-sand{background:#F3EBDD;color:#7A5C2E}
.jubase .jp-farbe-grau{background:var(--paper-2);color:var(--ink-2)}
.jubase .jp-nacht{background:#28352F;color:#DCE6E1}
.jubase .jp-zeit{background:var(--blue-100);color:var(--blue);font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.02;display:flex;flex-direction:column;justify-content:center;align-items:center}
.jubase .jp-zeit u{text-decoration:none;opacity:.72}
.jubase .jp-frei{color:var(--faint);font-size:15px;font-weight:400}
/* "Noch offen" war zuerst bernsteinfarben schraffiert - und sah damit dem
   Urlaubsbalken zum Verwechseln aehnlich. Jetzt neutral grau: die
   Schraffur sagt "hier fehlt etwas", die Farbe sagt nichts. */
.jubase .jp-offen{color:var(--muted);font-size:15px;font-weight:700;background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(119,131,125,.14) 5px 10px)}

/* Abwesenheit: ein durchlaufendes Objekt, nicht vierzehn Buchstaben */
.jubase .jp-abw{inset:5px 0;border-radius:0;font-size:10.5px;font-weight:800}
.jubase .jp-abw.jp-s0{left:2px;border-radius:6px 0 0 6px}
.jubase .jp-abw.jp-e0{right:2px;border-radius:0 6px 6px 0}
.jubase .jp-abw.jp-mitte{color:transparent}
.jubase .jp-abw-U{background:repeating-linear-gradient(135deg,var(--amber-100) 0 5px,#F2DFC0 5px 10px);color:var(--amber)}
.jubase .jp-abw-K{background:repeating-linear-gradient(135deg,var(--rose-100) 0 5px,#F0D2D8 5px 10px);color:var(--rose)}
.jubase .jp-abw-FB{background:repeating-linear-gradient(135deg,var(--blue-100) 0 5px,#D2E1F0 5px 10px);color:var(--blue);font-size:9.5px}
/* Neutrale Abwesenheit fuer alle ohne Berechtigung am Grund (Audit D-01):
   bewusst unauffaellig grau - die Farbe soll nichts verraten, was das
   Kuerzel gerade nicht mehr verraet. */
.jubase .jp-abw-A{background:repeating-linear-gradient(135deg,var(--line) 0 5px,#E6E2DA 5px 10px);color:var(--muted)}

/* --- Ist gegen Soll ----------------------------------------------- */
.jubase .jp-tabelle .jp-sum{position:sticky;right:0;z-index:20;background:var(--surface);border-left:1px solid var(--line);width:var(--jp-sum);padding:4px 14px 4px 10px;text-align:right}
.jubase .jp-tabelle thead th.jp-sum{z-index:40;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:800;text-align:right}
.jubase .jp-v{display:block;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.jubase .jp-v span{color:var(--faint);font-weight:600}
.jubase .jp-df{display:block;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.jubase .jp-ok{color:var(--muted)} .jubase .jp-plus{color:var(--rose)} .jubase .jp-minus{color:var(--blue)}

/* --- Besetzung unten ---------------------------------------------- */
.jubase .jp-tabelle tfoot td{border-top:1px solid var(--line);background:var(--paper);height:27px}
.jubase .jp-tabelle tfoot tr:first-child td{border-top:2px solid var(--line)}
.jubase .jp-tabelle tfoot td.jp-d{text-align:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);border-right:1px solid var(--line-2)}
.jubase .jp-tabelle tfoot td.jp-leer{background:var(--rose-100);color:var(--rose)}

/* Termine mit Begleitung (seit 0.69.0): Punkt im Tageskopf, Ecke in der
   Zelle der benannten Person - rot, wenn sie zur Terminzeit keinen Dienst
   hat. Nur Markierung; Einzelheiten stehen im Tooltip. */
/* Kein eigenes position hier: die Kopfzellen kleben (position:sticky) und
   sind damit schon Bezugsrahmen fuer den Punkt. Ein frueheres
   position:relative (0.69.0) hob das Kleben auf, und das top:32px der
   klebenden Kopfzeile verschob den Kopf ueber die erste Zeile. */
.jubase .jp-tdot{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.jubase .jp-tm{position:absolute;top:-3px;right:-3px;min-width:13px;height:13px;padding:0 2px;border-radius:7px;display:grid;place-items:center;font-size:9px;font-weight:800;font-style:normal;line-height:1;background:var(--primary);color:#fff;box-shadow:0 0 0 1.5px var(--surface);z-index:5;pointer-events:auto}
.jubase .jp-tm.jp-tm-konflikt{background:var(--rose)}
.jubase .jp-lesen .jp-tabelle tbody td.jp-d{position:relative}

/* Termine mit Begleitung: Liste unter dem Raster (seit 0.70.0). */
.jubase .jp-termine{margin:18px 0 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px}
.jubase .jp-termine h2{font-size:14px;margin:0 0 4px}
.jubase .jp-termine-tab{border-collapse:collapse;width:100%;margin-top:8px}
.jubase .jp-termine-tab th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:0 12px 5px 0;font-weight:800}
.jubase .jp-termine-tab td{padding:5px 12px 5px 0;font-size:12.5px;border-top:1px solid var(--line-2);vertical-align:top}
.jubase .jp-t-offen{color:var(--amber);font-weight:700}
.jubase .jp-t-ok{color:var(--primary-700)}
.jubase .jp-t-konflikt{color:var(--rose);font-weight:700}
.jubase .jp-karte-begl{display:block;color:var(--primary-700);font-weight:600}

/* Dienste verwalten (seit 0.70.0). */
.jubase .jp-katalog-tab td{vertical-align:top;padding-top:4px;padding-bottom:4px}
.jubase .jp-katalog-tab .jp-mk{position:static;display:inline-grid;width:24px;height:22px}
.jubase .jp-katalog-tab tr.jp-aus{opacity:.55}
.jubase .jp-dbearb summary{font-size:11px;color:var(--primary-700);cursor:pointer;padding:2px 0}
.jubase .jp-dform{display:grid;gap:8px;max-width:560px;margin:6px 0 10px;font-size:12px}
.jubase .jp-dform label{display:block;font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:2px}
.jubase .jp-dform input:not([type=checkbox]):not([type=radio]),.jubase .jp-dform select{font:inherit;font-size:12px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.jubase .jp-dform-reihe{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.jubase .jp-dform-breit{flex:1 1 200px}
.jubase .jp-dform-breit input{width:100%}
.jubase .jp-dform-deckt{border:1px solid var(--line-2);border-radius:6px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:4px 14px}
.jubase .jp-dform-deckt legend{font-size:10.5px;font-weight:700;color:var(--muted);padding:0 4px}
.jubase .jp-dform-deckt label,.jubase .jp-dform-check{display:inline-flex;gap:5px;align-items:center;font-size:12px;font-weight:500;color:var(--ink-2);margin:0}
.jubase .jp-dform-deckt small{flex-basis:100%;color:var(--faint)}
.jubase .jp-farbwahl{display:inline-flex;gap:6px;flex-wrap:wrap}
.jubase .jp-farbwahl label{display:inline-flex;align-items:center;gap:2px;margin:0;cursor:pointer}
.jubase .jp-farbwahl .jp-mk{position:static;display:inline-grid;width:24px;height:22px}
.jubase .jp-katalog-neu{font-size:13px;margin:14px 0 2px}
@media (max-width:640px){.jubase .jp-termine-tab th:nth-child(5),.jubase .jp-termine-tab td:nth-child(5){display:none}}
.jubase .jp-tabelle tbody td.jp-d:has(.jp-tm-konflikt){box-shadow:inset 0 0 0 2px var(--rose)}
.jubase .jp-fusslabel{background:var(--paper);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);vertical-align:middle}

/* --- Eigene Zeiten ------------------------------------------------ */
.jp-pop{position:absolute;z-index:200;background:#fff;border:1px solid #E4E0D7;border-radius:12px;box-shadow:0 14px 34px -10px rgba(22,33,29,.34);padding:12px;width:236px;font-family:'Figtree',ui-sans-serif,system-ui,sans-serif}
.jp-pop h4{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#A3ADA8;margin:0 0 9px}
.jp-pop-z{display:flex;gap:7px;align-items:center}
.jp-pop-z input{font:inherit;font-size:13.5px;width:100%;padding:6px 8px;border:1px solid #E4E0D7;border-radius:8px;background:#F6F4EF;font-variant-numeric:tabular-nums}
.jp-pop-a{display:flex;gap:7px;margin-top:10px}
.jp-pop-a button{flex:1;text-align:center;justify-content:center;font:inherit;font-size:12.5px;font-weight:600;padding:6px 0;border:1px solid #E4E0D7;border-radius:10px;background:#fff;cursor:pointer}
.jp-pop-a button[data-x="ok"]{background:#168372;border-color:#168372;color:#fff}

.jubase .jp-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.jubase .jp-fuss form{margin:0}
.jubase .jp-hinweis{flex:1 1 100%;font-size:11.5px;color:var(--muted);margin-top:4px}
.jubase .jp-hinweis kbd{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;background:var(--surface);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;margin-right:2px}

/* Papier: der Plan haengt im Dienstzimmer an der Wand. */
/* Ohne eigene @page-Regel druckt der Browser mit SEINER Voreinstellung -
   haeufig Hochformat mit Standardraendern. Bei 31 Tagesspalten ist das der
   Unterschied zwischen lesbar und einer Kollision von Schrift und
   Spalten. Deshalb hier festgelegt, nicht dem Druckdialog ueberlassen. */
@page{size:A4 landscape;margin:8mm}

@media print{
  .jubase .jp-werkzeuge,.jubase .jp-fuss,.jubase .jp-filter,.jubase .jp-monat{display:none!important}
  /* Etwas breiter als vorher (118px): der schmale Wert liess laengere
     Namen und die Besetzungszeile "NACHTBEREITSCHAFT" ohne jede
     Ausweichmoeglichkeit - siehe .jp-fusslabel und .jp-n unten. */
  .jubase .jp-wrap{--jp-name:142px;--jp-sum:92px}
  .jubase .jp-tabelle thead th,.jubase .jp-nm,.jubase .jp-sum{position:static}
  .jubase .jp-tdot,.jubase .jp-tm{display:none}
  .jubase *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Ein Name wird auf dem Papier NICHT mit "..." abgeschnitten - er
     wird ungekuerzt gedruckt und laeuft dafuer in eine zweite Zeile.
     Am Bildschirm bleibt die einzeilige Kuerzung mit Ellipse richtig
     (dort zaehlt kompakte Hoehe mehr als der volle Name), auf dem
     Aushang zaehlt Lesbarkeit ohne Ratewerk mehr. */
  /* Kleinere Schrift statt mehr Zeilen: bei 14px (Bildschirmgroesse) wickelte
     ein Name wie "Beispiel Einrichtungsleitung" auf drei Zeilen und blaehte
     jede Zeile der Tabelle unnoetig auf. 10,5px reicht auf Papier zum Lesen
     und laesst die meisten Namen in ein bis zwei Zeilen passen. */
  .jubase .jp-n{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;font-size:10.5px;line-height:1.25}
  .jubase .jp-tabelle tbody tr{height:auto;min-height:26px}

  /* Dieselbe Kuerzung, die "Martin Schwetje" schon hatte, fehlte den
     Besetzungszeilen (FRUEHDIENST, SPAETDIENST, NACHTBEREITSCHAFT) ganz -
     ein zusammenhaengendes Wort ohne Leerzeichen bricht nicht um, es
     lief bei knapper Spaltenbreite einfach in die erste Tagesspalte
     hinein. Jetzt dieselbe Ellipse wie bei den Namen. */
  .jubase .jp-fusslabel{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}

/* --- Dienstplan: Aushang -------------------------------------------
   Der Plan haengt im Dienstzimmer an der Wand. Deshalb ist der Druck
   keine Zugabe, sondern die zweite Hauptansicht.               */
.jubase .jp-druckkopf{display:none}
.jubase .jp-stundenschalter{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.jubase .jp-stundenschalter input{margin:0}

/* Legende ohne Werkzeugcharakter, wenn niemand planen darf. */
.jubase .jp-nur-legende .jp-lg{cursor:default}
.jubase .jp-nur-legende .jp-lg:hover{border-color:var(--line)}
.jubase .jp-lg[disabled]{opacity:1}

@media print{
  /* Die Werkzeuge verschwinden, die Legende bleibt: auf Papier ist sie
     die einzige Erklaerung fuer F, S, N und T, die es gibt. */
  .jubase .jp-stifte{gap:5px;margin-bottom:6px}
  .jubase .jp-lg{border-color:#bbb;padding:1px 8px 1px 3px;font-size:9.5px}
  .jubase .jp-lg .jp-mk{width:16px;height:16px;font-size:9px}
  .jubase .jp-lg.jp-an{box-shadow:none;border-color:#bbb;color:inherit;font-weight:inherit}

  /* "leeren" ist ein Werkzeug und erklaert nichts - auf dem Aushang weg. */
  .jubase .jp-lg[data-stift="leer"]{display:none}

  /* Die Wochenstunden sind ein Vertragsdatum wie die Bilanz: nur mitdrucken,
     wenn es ausdruecklich gewollt ist. Das Eingabefeld wuerde auf Papier
     ohnehin wie ein leerer Kasten aussehen. */
  body:not(.jp-stunden-drucken) .jubase .jp-r{display:none}
  body.jp-stunden-drucken .jubase input.jp-std{border:none;background:none;padding:0;width:auto;color:#333}

  .jubase .jp-druckkopf{display:block;font-size:11px;color:#333;margin:0 0 8px}
  .jubase .jp-h1,.jubase .jubase-h1{font-size:18px}
  .jubase .jubase-sub{display:none}
  .jubase .jubase-notice{display:none}

  /* Stundenbilanz nur, wenn ausdruecklich gewuenscht: wer wie viel ueber
     seinem Vertrag liegt, geht niemanden an, der am Aushang vorbeilaeuft. */
  body:not(.jp-stunden-drucken) .jubase .jp-sum{display:none}

  /* Kopfzeile auf jeder Seite wiederholen, falls der Druck doch umbricht. */
  .jubase .jp-tabelle thead{display:table-header-group}
  .jubase .jp-tabelle tr{break-inside:avoid}
}

/* --- Feiertage ------------------------------------------------------
   Ein Feiertag ist kein Werktag und kein Wochenende. Er bekommt
   deshalb ein eigenes Zeichen: die Tagesziffer in Rosé, der Name im
   Tooltip. Die Flaeche bleibt ruhig - der Plan soll nicht bunter
   werden, nur genauer.                                              */
.jubase .jp-tabelle .jp-fei{background:var(--rose-100)}
.jubase .jp-tabelle thead th.jp-fei b{color:var(--rose)}
.jubase .jp-tabelle thead th.jp-fei{background:var(--rose-100)}

.jubase .jp-land{display:inline-flex;align-items:center;gap:7px;margin:0}
.jubase .jp-land label{font-size:12px;color:var(--muted)}
.jubase .jp-land select{font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);max-width:230px}

@media print{
  /* Auf Papier bleibt der Feiertag erkennbar, auch in Graustufen: die
     Flaeche allein reicht dort nicht. */
  .jubase .jp-land{display:none!important}
  .jubase .jp-tabelle thead th.jp-fei b{text-decoration:underline}
}

/* Rhythmus-Rad: Knopf und Laenge gehoeren zusammen. */
.jubase .jp-rad{display:inline-flex;align-items:center;gap:6px}
.jubase .jp-rad select{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}

/* Mindestbesetzung: ausgeklappt nur, wenn jemand sie sucht. */
.jubase .jp-ziele{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 12px}
.jubase .jp-ziele summary{cursor:pointer;padding:9px 0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.jubase .jp-ziele[open]{padding-bottom:12px}
.jubase .jp-ziele-text{font-size:11.5px;color:var(--muted);max-width:52ch;margin:4px 0 10px}
.jubase .jp-ziele-tab{border-collapse:collapse;margin-bottom:10px}
.jubase .jp-ziele-tab th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:0 14px 4px 0;font-weight:800}
.jubase .jp-ziele-tab td{padding:2px 14px 2px 0;font-size:12.5px}
.jubase .jp-ziele-tab input{width:56px;font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-variant-numeric:tabular-nums}
/* Das Formular "Dienste verwalten" liegt in einer Zelle dieser Tabelle - die
   56px gelten nur fuer die Zahlenfelder der Tabelle selbst, nicht fuer das
   Formular (sonst waren Zeiten und Bezeichnung abgeschnitten). */
.jubase .jp-ziele-tab .jp-dform input{width:auto}
.jubase .jp-ziele-tab .jp-dform input[type=checkbox],.jubase .jp-ziele-tab .jp-dform input[type=radio]{width:auto;padding:0}
.jubase .jp-ziele-tab .jp-dform input[name=code]{width:4.5em}
.jubase .jp-ziele-tab .jp-dform input[type=time]{width:7.5em}
.jubase .jp-ziele-tab .jp-dform input[name=stunden]{width:6.5em}
.jubase .jp-ziele-tab .jp-dform input[name=reihe]{width:5em}
.jubase .jp-ziele-tab .jp-dform .jp-dform-breit input{width:100%}

/* --- Dienstplan: Leseansicht fuer Fachkraefte ----------------------
   Oben "Meine Dienste" als Kartenreihe - die Frage, mit der jemand diese
   Seite oeffnet, ist "wann bin ich dran", nicht "wie sieht das Raster
   aus". Darunter das Gruppenraster in derselben Bildsprache wie beim
   Planen, mit der eigenen Zeile und dem heutigen Tag hervorgehoben.   */
.jubase .jp-meine{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px 18px;margin:0 0 18px}
.jubase .jp-meine-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.jubase .jp-meine-kopf h2{font-family:var(--serif);font-size:19px;font-weight:600;margin:0;color:var(--ink)}
.jubase .jp-meine-kopf span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jubase .jp-meine-leer{margin:0;font-size:13px;color:var(--muted)}
.jubase .jp-karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 8px}
.jubase .jp-karte{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper)}
.jubase .jp-karte-dat{display:flex;flex-direction:column;align-items:center;min-width:34px;line-height:1.1}
.jubase .jp-karte-dat small{font-size:10.5px;color:var(--muted);font-weight:600}
.jubase .jp-karte-dat b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.jubase .jp-karte-mk{position:relative;width:30px;height:30px;flex:none}
.jubase .jp-karte-mk .jp-mk{inset:0;border-radius:8px}
.jubase .jp-karte-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.jubase .jp-karte-txt b{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jubase .jp-karte-txt small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jubase .jp-karte em{position:absolute;top:-8px;right:8px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:10px;background:var(--primary);color:#fff}
.jubase .jp-karte.jp-jetzt,.jubase .jp-karte.jp-naechst{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.jubase .jp-karte.jp-vorbei{opacity:.5}

.jubase .jp-lesen .jp-tabelle tbody td.jp-d{cursor:default}
.jubase .jp-lesen .jp-tabelle th.jp-heute{background:var(--primary);color:rgba(255,255,255,.8)}
.jubase .jp-lesen .jp-tabelle th.jp-heute b{color:#fff}
.jubase .jp-lesen .jp-tabelle tbody td.jp-heute{box-shadow:inset 1px 0 0 var(--primary),inset -1px 0 0 var(--primary)}
.jubase .jp-lesen .jp-tabelle tr.jp-ich td:not(.jp-we):not(.jp-fei){background-color:var(--primary-50)}
.jubase .jp-lesen .jp-tabelle tr.jp-ich td.jp-nm{box-shadow:inset 3px 0 0 var(--primary)}
.jubase .jp-lesen .jp-du{color:var(--primary-700);font-weight:700}
.jubase .jp-lesen .jp-du::after{content:none}
.jubase .jp-lesen .jp-tabelle tbody tr:last-child td{border-bottom:0}

@media (max-width:720px){
  .jubase .jp-karten{grid-template-columns:1fr}
  .jubase .jp-lesen{overflow-x:auto}
  .jubase .jp-lesen .jp-tabelle{min-width:760px}
}
@media print{
  .jubase .jp-meine,.jubase .jp-lesen+.jp-hinweis{display:none}
  .jubase .jp-lesen .jp-tabelle tr.jp-ich td{background-color:transparent}
  .jubase .jp-lesen .jp-tabelle th.jp-heute{background:var(--surface);color:var(--muted)}
  .jubase .jp-lesen .jp-tabelle th.jp-heute b{color:var(--ink-2)}
  .jubase .jp-lesen .jp-tabelle tbody td.jp-heute{box-shadow:none}
}

/* --- Uebersicht: Mein Tag ------------------------------------------
   Persoenlich zuerst: eigener Dienst heute/morgen, wer mit im Dienst
   ist, Termine des Tages, ungelesene Uebergabe. Die Dienstmarken sind
   dieselben wie im Dienstplan (.jp-mk/.jp-artN), damit F/S/N ueberall
   gleich aussieht.                                                   */
.jubase .jmt{margin-bottom:16px}
.jubase .jmt .jubase-card__head .jubase-chip{margin-left:4px}
.jubase .jmt-link{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--primary-700);text-decoration:none}
.jubase .jmt-link:hover{text-decoration:underline}
.jubase .jmt-uebergabe{display:flex;align-items:center;gap:10px;margin:14px 19px 0;padding:10px 14px;border-radius:var(--r);background:var(--amber-100);border:1px solid #EFD9B2;color:var(--ink);font-size:13px;text-decoration:none}
.jubase .jmt-uebergabe .jubase-ic,.jubase .jmt-uebergabe svg{color:var(--amber);flex:none;width:18px;height:18px}
.jubase .jmt-uebergabe b{color:var(--amber)}
.jubase .jmt-uebergabe .jmt-pfeil{margin-left:auto;font-size:18px;color:var(--amber)}
.jubase .jmt-uebergabe:hover{border-color:var(--amber)}
.jubase .jmt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0}
.jubase .jmt-spalte{padding:14px 19px 18px;min-width:0}
.jubase .jmt-spalte+.jmt-spalte{border-left:1px solid var(--line-2)}
.jubase .jmt-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.jubase .jmt-h .jmt-link{text-transform:none;letter-spacing:0;font-size:12px}

.jubase .jmt-dienst{display:flex;align-items:center;gap:12px;padding:7px 0}
.jubase .jmt-dienst+.jmt-dienst{border-top:1px dashed var(--line-2)}
.jubase .jmt-wann{width:58px;flex:none;font-size:12px;font-weight:700;color:var(--muted)}
.jubase .jmt-dienst:first-of-type .jmt-wann{color:var(--primary-700)}
.jubase .jmt-dienst .jp-karte-mk{width:32px;height:32px}
.jubase .jmt-was{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.jubase .jmt-was b{font-size:14px;font-weight:600;color:var(--ink)}
.jubase .jmt-was small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.jubase .jmt-dienst--frei .jmt-was b{color:var(--muted);font-weight:500}
.jubase .jmt-naechst{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.jubase .jmt-naechst b{color:var(--ink)}

.jubase .jmt-team{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.jubase .jmt-team-h{flex:1 1 100%;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:2px}
.jubase .jmt-person{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border:1px solid var(--line);border-radius:20px;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink)}
.jubase .jmt-person small{font-weight:500;color:var(--faint);font-size:11px}
.jubase .jmt-punkt{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

.jubase .jmt-leer{margin:4px 0 0;font-size:13px;color:var(--muted)}
.jubase .jmt-termine{list-style:none;margin:0;padding:0}
.jubase .jmt-termine li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:8px 0}
.jubase .jmt-termine li+li{border-top:1px dashed var(--line-2)}
.jubase .jmt-zeit{width:62px;flex:none;display:flex;flex-direction:column;line-height:1.2;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.jubase .jmt-zeit b{font-size:14.5px;color:var(--ink)}
.jubase .jmt-termin{display:flex;flex-direction:column;min-width:0;line-height:1.3;text-decoration:none;color:inherit}
.jubase .jmt-termin b{font-size:13.5px;font-weight:600;color:var(--ink)}
.jubase .jmt-termin small{font-size:12px;color:var(--muted)}
.jubase .jmt-termin:hover b{color:var(--primary-700)}
.jubase .jmt-du{margin-left:auto;flex:none;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-700);background:var(--primary-50);border:1px solid var(--primary-100);border-radius:10px;padding:2px 8px}
.jubase .jmt-du.jmt-offen{color:var(--amber);background:var(--amber-100);border-color:var(--amber-100)}
.jubase .jmt-termine li.jmt-mir{background:linear-gradient(90deg,var(--primary-50),transparent 70%);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}
.jubase .jmt-termine li.jmt-vorbei{opacity:.5}

@media (max-width:820px){
  .jubase .jmt-raster{grid-template-columns:1fr}
  .jubase .jmt-spalte+.jmt-spalte{border-left:0;border-top:1px solid var(--line-2)}
}

/* ===================================================================
   Gefuehrte Tagesdoku (seit 0.72.0)
   Eine Frage pro Bildschirm, grosse Antwortflaechen (Tablet im
   Dienstzimmer), wenig Text. Ohne Skript stehen die Schritte
   untereinander - erst .jb-wiz--js blendet auf einen Schritt.
   =================================================================== */
.jubase .jb-wiz-shell{max-width:720px}
.jubase .jb-wiz-kopf{margin-bottom:14px}
.jubase .jb-wiz-zurueck{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:6px}
.jubase .jb-wiz-zurueck:hover{color:var(--primary-700)}
.jubase .jb-wiz-kontext{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);padding:10px 14px;margin-bottom:14px;font-size:13px}
.jubase .jb-wiz-kontext summary{cursor:pointer;font-weight:700;color:var(--ink-2)}
.jubase .jb-wiz-kontext ul{margin:4px 0 8px 16px;padding:0}
.jubase .jb-wiz-kontext li{margin:2px 0;color:var(--ink-2)}
.jubase .jb-wiz-k-titel{margin:10px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.jubase .jb-wiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-1)}
.jubase .jb-wiz-fortschritt{height:4px;border-radius:2px;background:var(--line-2);margin:0 0 14px;overflow:hidden;display:none}
.jubase .jb-wiz--js .jb-wiz-fortschritt{display:block}
.jubase .jb-wiz-fortschritt span{display:block;height:100%;width:0;background:var(--primary);transition:width .25s ease-out}
.jubase .jb-wiz-schritt{padding:6px 0 18px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.jubase .jb-wiz--js .jb-wiz-schritt{display:none;border-bottom:0;margin-bottom:0;padding-bottom:0}
.jubase .jb-wiz--js .jb-wiz-schritt.is-aktiv{display:block;animation:jb-wiz-ein .18s ease-out}
@keyframes jb-wiz-ein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jubase .jb-wiz--js .jb-wiz-schritt.is-aktiv{animation:none}.jubase .jb-wiz-fortschritt span{transition:none}}
.jubase .jb-wiz-nr{margin:0 0 4px;font-size:12px;color:var(--faint)}
.jubase .jb-wiz-frage{font-family:var(--serif);font-size:24px;line-height:1.25;font-weight:600;margin:0 0 6px;color:var(--ink)}
.jubase .jb-wiz-hilfe{margin:0 0 14px;font-size:13px;color:var(--muted);max-width:60ch}
.jubase .jb-wiz-tipp{margin:0 0 10px;font-size:13px;color:var(--primary-700);background:var(--primary-50);border-radius:var(--r-sm);padding:6px 10px}
.jubase .jb-wiz-wahl{display:flex;flex-wrap:wrap;gap:8px}
.jubase .jb-wiz-knopf{position:relative;cursor:pointer;margin:0}
.jubase .jb-wiz-knopf input{position:absolute;opacity:0;width:1px;height:1px}
.jubase .jb-wiz-knopf span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:22px;background:var(--paper);font-size:15px;color:var(--ink-2);transition:background .12s,border-color .12s}
.jubase .jb-wiz-knopf:hover span{border-color:var(--primary)}
.jubase .jb-wiz-knopf input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
.jubase .jb-wiz-knopf input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.jubase .jb-wiz-knopf--leise span{color:var(--muted);border-style:dashed}
.jubase .jb-wiz-text{width:100%;font-size:15px;line-height:1.5;min-height:120px}
.jubase .jb-wiz-leiste{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.jubase .jb-wiz-leiste .jubase-btn{min-height:42px}
.jubase .jb-wiz:not(.jb-wiz--js) .jb-wiz-leiste [data-jb-wiz]{display:none}
.jubase .jb-wiz-summe{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:6px 14px;margin:0;font-size:14px}
.jubase .jb-wiz-summe dt{font-weight:700;color:var(--ink-2)}
.jubase .jb-wiz-summe dd{margin:0;white-space:pre-wrap;color:var(--ink)}
.jubase .jb-wiz-summe dd.jb-wiz-leer{color:var(--faint)}
.jubase .jb-wiz:not(.jb-wiz--js) [data-jb-wiz-ende] .jb-wiz-frage,
.jubase .jb-wiz:not(.jb-wiz--js) [data-jb-wiz-ende] .jb-wiz-hilfe{display:none}
.jubase .jb-wiz-fuss{margin-top:16px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.jubase .jb-wiz-skip summary{cursor:pointer;color:var(--muted)}
.jubase .jb-wiz-skip form{margin-top:8px}
.jubase .jb-wiz-link{color:var(--muted)}
@media (max-width:640px){
  .jubase .jb-wiz{padding:16px 14px;border-radius:var(--r)}
  .jubase .jb-wiz-frage{font-size:21px}
  .jubase .jb-wiz-summe{grid-template-columns:1fr}
  .jubase .jb-wiz-leiste .jubase-btn{flex:1 1 auto;justify-content:center}
}

/* Einstieg in der Uebersicht */
.jubase .jb-wiz-start{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 19px;border:1px solid var(--primary-100);background:var(--primary-50);border-radius:var(--r-lg);margin-bottom:16px}
.jubase .jb-wiz-start p{margin:0;flex:1 1 260px;color:var(--ink-2);font-size:14px}
.jubase .jb-wiz-start .jubase-btn{min-height:44px;font-size:15px}
.jubase .jb-wiz-einst{margin-top:16px}
.jubase .jb-wiz-einst summary{cursor:pointer}
.jubase .jb-wiz-einst label{display:flex;gap:6px;align-items:center;margin:3px 0;font-size:13px}

.jubase .jubase-doc-entry__gruppe{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 6px}

/* Schnellstart auf "Mein Dienst" (seit 0.73.0) */
.jubase .jb-schnell{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 18px}
.jubase .jb-schnell__weg{display:flex;flex-direction:column;gap:3px;padding:14px 16px;min-height:64px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:border-color .12s,transform .12s}
.jubase .jb-schnell__weg:hover{border-color:var(--primary)}
.jubase .jb-schnell__weg:active{transform:scale(.99)}
.jubase .jb-schnell__weg b{font-size:15px}
.jubase .jb-schnell__weg span{font-size:12.5px;color:var(--muted)}
.jubase .jb-schnell__weg.is-haupt{background:var(--primary);border-color:var(--primary);color:#fff}
.jubase .jb-schnell__weg.is-haupt span{color:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){.jubase .jb-schnell__weg{transition:none}}

/* Medikamentengabe (seit 0.74.0) - fuer das Tablet am Medikamentenkasten */
.jubase .jb-med{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.jubase .jb-med-v{padding:6px 0 10px;border-bottom:1px solid var(--line-2)}
.jubase .jb-med-v:last-child{border-bottom:0}
.jubase .jb-med-name{margin:0 0 8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.jubase .jb-med-name b{font-size:15px}
.jubase .jb-med-name span{font-size:13px;color:var(--muted)}
.jubase .jb-med-slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px;border-radius:var(--r-sm);margin-bottom:4px;background:var(--paper-2)}
.jubase .jb-med-slot.is-offen{background:var(--amber-100)}
.jubase .jb-med-slot.is-gegeben{background:var(--primary-50)}
.jubase .jb-med-slot.is-verweigert,.jubase .jb-med-slot.is-ausgelassen{background:var(--rose-100)}
.jubase .jb-med-zeit{font-weight:800;font-variant-numeric:tabular-nums;min-width:52px}
.jubase .jb-med-stand{font-size:13px;color:var(--ink-2);flex:1 1 160px}
.jubase .jb-med-schnell{margin:0}
.jubase .jb-med-knopf{min-height:40px;min-width:96px;justify-content:center}
.jubase .jb-med-mehr summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.jubase .jb-med-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.jubase .jb-med-form label{display:inline-flex;gap:4px;align-items:center;font-size:13px}
.jubase .jb-med-bedarf{margin-top:6px}
.jubase .jb-med-plan{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 12px;margin:10px 0}
.jubase .jb-med-plan legend{font-size:12px;font-weight:700;color:var(--muted);padding:0 4px}
@media (max-width:640px){.jubase .jb-med{grid-template-columns:1fr}}

/* ===================================================================
   Handy (seit 0.74.0) - gefunden mit tools/jubase-mobil-browser.mjs.
   Ziel: keine Seite scrollt quer; breite Tabellen scrollen in ihrem
   eigenen Rahmen.
   =================================================================== */
/* Kalender: Spalten duerfen schmaler werden als ihr Inhalt - sonst gibt die
   laengste Terminbeschriftung die Mindestbreite des ganzen Rasters vor. */
.jubase-cal{grid-template-columns:repeat(7,minmax(0,1fr))}
.jubase .jp-katalog-tab{display:block;overflow-x:auto;max-width:100%}
/* Gitter-Spalten duerfen schmaler werden als ihr breitester Inhalt -
   sonst drueckt etwa der Kalender die einspaltige Ansicht auf. */
.jubase-grid > *{min-width:0}
.jubase .jp-dform select,.jubase .jp-dform input:not([type=checkbox]):not([type=radio]){max-width:100%;min-width:0}
.jubase .jp-fuss > *{max-width:100%;min-width:0}
.jubase .jp-dform-breit{min-width:0}
.jubase .jp-land{flex-wrap:wrap}
.jubase .jp-land select{max-width:min(230px,100%);min-width:0}
@media (max-width:640px){
  .jubase-head-actions{margin-left:0;flex-wrap:wrap;max-width:100%}
  .jubase-head-actions select,.jubase-head-actions .jubase-select{max-width:100%}
  .jubase-head-actions form{flex-wrap:wrap;max-width:100%}
  .jubase-li{flex-wrap:wrap}
  .jubase-li__main{flex:1 1 160px}
  .jubase-li__right{flex:0 1 auto;min-width:0;white-space:normal}
  .jubase-cal__wd{padding:6px 2px;font-size:10px;text-align:center;letter-spacing:0}
  .jubase-cal__day{padding:3px 3px 5px}
  /* Inline-Spaltenangaben einzelner Seiten (z. B. Stundenkonto: drei
     Spalten) schlagen sonst die einspaltige Handy-Regel. */
  .jubase-fields{grid-template-columns:1fr !important}
  .jubase-field{flex-wrap:wrap}
  .jubase-field__k{width:auto;flex:1 1 100%}
}

/* Gruppenwahl (seit 0.74.0): Knoepfe bis sechs Gruppen, sonst Auswahlliste */
.jubase .jb-gruppenwahl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.jubase .jb-gruppenwahl select{max-width:100%;min-width:0}