:root {
  --color-primary:      #F39200;
  --color-primary-light:#FDDCA2;
  --color-primary-dark: #c47600;
  --color-text:         grey;
  --color-text-dark:    #1F2E2E;
  --color-bg:           #F9F9F9;
  --color-nav-bg:       #eeeeee;
  --color-border:       #cccccc;
  --color-focus:        #9ab6ff;
  --color-error:        #c0392b;
  --radius-sm:          4px;
  --radius-md:          8px;
}

html {
	box-sizing: border-box;
}

*,
::before,
::after {
	box-sizing: inherit;
}

body {
	margin: auto;
	font-family: sans-serif;
	background: #F9F9F9;
	color: #595959;
}

a {
  color: #dddddd;
}

  /***********************/
 /*** Navigation Menu ***/
/***********************/

.navbody {
	margin: auto;
	font-family: sans-serif;
	background: #eeeeee;
	color: #595959;
  --bb-nav-bg: #eeeeee;
  --bb-nav-text: grey;
  --bb-nav-border: #d9d9d9;
  --bb-nav-panel-border: #e5e5e5;
  --bb-nav-focus: #9ab6ff;
  position: relative;
  z-index: 100000;
}

	
.navbar {
  background-color: var(--bb-nav-bg);
  position: relative;
  z-index: 100001;
  overflow: visible;
}

.navbar::after {
  content: "";
  display: block;
  clear: both;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: var(--bb-nav-text);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  position: relative;
  overflow: visible;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: var(--bb-nav-text);
  /* 10px statt 16px seitlich. Gemessen am 21.09.2026 mit den 13 Menüpunkten:
     Die Leiste belegte 1428px und brach bei einem 1280px-Fenster in zwei
     Zeilen um; bei 1440px blieben nur 12px Luft. Mit 10px sind es 1260px –
     eine Zeile ab 1280px. 10px ist dabei der größte Wert, der das schafft
     (12px spart nur 104 von 148 nötigen Pixeln), und es ist dasselbe
     Polster, das die Symbolknöpfe rechts längst haben. Die Höhe bleibt bei
     ~45px und damit über der 44px-Empfehlung für Klickflächen. */
  padding: 14px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,.06);
  touch-action: manipulation;
}

.dropdown .dropbtn i {
  margin-left: 6px;
  transition: transform .16s ease;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: var(--bb-nav-bg);
  color: var(--bb-nav-text);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bb-nav-bg);
  /* 160px reichten für „Kunden“ und „Termine“, nicht für
     „Systemeinstellungen“ oder „Zugriffsbegrenzung“ – dort brach der Text
     mitten im Wort um. Die Breite richtet sich jetzt nach dem längsten
     Eintrag, gedeckelt, damit das Menü nicht über den Bildschirm läuft. */
  min-width: max-content;
  max-width: 20rem;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100002;
  top: 100%;
  left: 0;
}

.dropdown-content a {
  float: none;
  color: var(--bb-nav-text);
  padding: 12px 16px;
  text-decoration: none;
  white-space: nowrap;
  display: block;
  text-align: left;
  overflow-wrap: anywhere;
}

.dropdown-content a:hover {
  background-color: #ffffff;
}

/* ── Reiterleiste ───────────────────────────────────────────────────────────
   Gemeinsam genutzt von den Verwaltungsseiten: den Gruppenreitern unter dem
   Menü (inc/verwaltung_menue.php) und den Seiten, die frühere Einzelseiten
   unter Reitern zusammenfassen (Rollen & Rechte, Prüfungen, Protokolle).
   Bis 0.9.3 in css/einstellungen.css. */
.bb-reiter { display:flex; flex-wrap:wrap; gap:4px; margin:14px 0 0; border-bottom:2px solid #e6e6e6; }
.bb-reiter a {
  padding:9px 16px; text-decoration:none; font-size:14px; font-weight:600;
  color:#555; border:2px solid transparent; border-bottom:none;
  border-radius:8px 8px 0 0; margin-bottom:-2px;
}
.bb-reiter a:hover { background:#f3f3f3; color:#222; }
.bb-reiter a.is-aktiv { background:#fff; border-color:#e6e6e6; color:#1a2744; }

/* Gruppenreiter des Verwaltungsmenüs – so breit wie die Verwaltungsseiten
   (.set-wrap), damit Reiter und Inhalt bündig stehen. */
.bb-verwaltung { max-width:1200px; margin:0 auto; padding:16px 14px 0; }
.bb-verwaltung-titel {
  font-size:11px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:#777;
}
.bb-verwaltung .bb-reiter { margin-top:6px; }
/* Der Seiteninhalt hält sonst 75 px Abstand zum Menü – mit den Reitern
   dazwischen stünde er abgesetzt darunter. Den Abstand übernimmt jetzt die
   Leiste. */
.bb-verwaltung ~ section:first-of-type { margin-top:0; }

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown.is-open .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}

.dropdown.is-open .dropbtn i,
.dropdown:focus-within .dropbtn i {
  transform: rotate(180deg);
}

/* Weiteres: ganz rechts in der Leiste */
.navbar .dropdown.bb-nav-right {
  float: right;
}
.navbar .dropdown.bb-nav-icon-btn .dropbtn {
  font-size: 1.1em;
  color: #222;
  padding: 14px 10px;
  text-decoration: none;
}
.navbar .dropdown.bb-nav-icon-btn .dropbtn:hover {
  color: #000;
}
.navbar .dropdown.bb-nav-right .dropbtn .bb-more-dots {
  color: #222;
  font-weight: 900;
  font-size: 0.75em;
  letter-spacing: 3px;
  vertical-align: middle;
  line-height: 1;
}
.navbar .dropdown.bb-nav-right .dropdown-content {
  right: 0;
  left: auto;
}

/* ── Session-Dot ── */
.bb-session-dot {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  margin: 16px 8px;
  padding: 0;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  transition: background 0.4s;
}
.bb-session-dot--green  { background: #22c55e; }
.bb-session-dot--orange { background: #f97316; }
.bb-session-dot--red    { background: #ef4444; width: 20px; height: 20px; margin: 13px 6px; font-size: 8px; }

.dropdown .dropbtn,
.dropdown-content a,
.bb-nav-toggle {
  min-height: 44px;
}

.dropdown-content a:focus-visible {
  outline: 2px solid var(--bb-nav-focus);
  outline-offset: -2px;
}

.dropdown .dropbtn:focus-visible,
.bb-nav-toggle:focus-visible {
  outline: 2px solid var(--bb-nav-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dropdown .dropbtn i {
    transition: none;
  }
}

.menuline {
	max-height: 3px;
	margin-top: 0px;
	font-family: sans-serif;
	background: #F39200;
}

  /*********************/
 /*** Standard Kram ***/
/*********************/

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #eeeeee;
  color: #595959;
  text-align: center;
  font-size: x-small;
}

section {
	margin-top: 75px;
	margin-left: 50px;
	margin-right: 50px;
	font-family: sans-serif;
	background: #F9F9F9;
	color: #595959;
}

.sectionstart {
	margin-top: 175px;
	font-family: sans-serif;
	background: #F9F9F9;
	color: #595959;
}

.wrapper350 {
	width: 350px;
	padding: 20px;
}

  /*************/
 /*** Input ***/
/*************/


input[type=text],
input[type=password],
input[type=date],
select {
  width: 100%;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=text],
input[type=password] {
  padding: 12px 20px;
}

input[type=date],
select {
  padding: 11px 20px;
}

input[type=submit] {
  width: 100%;
  background-color: #FDDCA2;
  font-size: medium;
  color: #1F2E2E;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


input[type=submit]:hover {
  /* #3d2b00 statt Weiss: Auf dem Markenorange erreicht Weiss nur 2,35:1 und
     faellt unter jeder Kontrastschwelle durch. Das NOSONAR hat die Meldung
     frueher nur stummgeschaltet. Dieselbe Farbe wie bei .af-btn/.ev-btn –
     sonst spraenge ein Knopf beim Ueberfahren auf Weiss, waehrend der
     daneben dunkel bleibt. */
  background-color: #F39200;
  color: #3d2b00;
}

  /***************/
 /*** Columns ***/
/***************/

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px;
}

.column3 {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

  /*********************/
 /*** Button Styles ***/
/*********************/


.button1 {  
  width: 100%;
  background-color: #FDDCA2;
  font-size: medium;
  color: #1F2E2E;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button1:hover {
  background-color: #F39200;
  color: #3d2b00;
}

.button2 {  
  width: 20%;
  background-color: #FDDCA2;
  font-size: medium;
  color: #1F2E2E;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button2:hover {
  background-color: #F39200;
  color: #3d2b00;
}

.button3 {  
  width: 15%;
  background-color: #FDDCA2;
  font-size: 14px;
  color: #1F2E2E;
  padding: 12px 6px;
  margin-top: 8px;
  margin-left: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button3:hover {
  background-color: #F39200;
  color: #3d2b00;
}

.button4 {  
  width: 50%;
  background-color: #FDDCA2;
  font-size: medium;
  color: #1F2E2E;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button4:hover {
  background-color: #F39200;
  color: #3d2b00;
}

.button5 {  
  width: 100%;
  background-color: #FDDCA2;
  font-size: medium;
  color: #1F2E2E;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}



  
.button5:hover {
  background-color: #F39200;
  color: #3d2b00;
}

/* Compact select-action button used across JS-rendered tables */
.ButtonSelect{
  width:auto !important;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#FDDCA2;
  color:#1F2E2E;
  padding:8px 12px;
  margin:0;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  line-height:1.2;
  text-decoration:none;
}

.ButtonSelect:hover{
  background-color:#F39200;
  color:#3d2b00;
}

/*************/
 /*** Suche ***/
/*************/

.container {
    width: 95%;
    margin-top: 40px;

}

.form-group {
    margin-bottom: 15px;
}

.row-suche {
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
}


.input-suche {
    width: 83%;
float: left;

}



.input-submit {
    width: 17%;
    float: left;
}

  /************************/
 /*** Angebot Position ***/
/************************/

.poscolumn1 {
  float: left;
  width: 8%;
}
.poscolumn2 {
  float: left;
  width: 8%;
}
.poscolumn3 {
  float: left;
  width: 60%;
}
.poscolumn4 {
  float: left;
  width: 8%;
}
.poscolumn5 {
  float: left;
  width: 8%;
}
.poscolumn6 {
  float: left;
  width: 8%;
}

/* Shared layout utilities */
.nav-logo-wrap {
  float: left;
  width: 3.2em;
  position: relative;
  z-index: 100002;
}

.nav-logo-slot {
  float: left;
}

/* Das Logo ist seit dem 21.09.2026 ein Link zum Dashboard. Ohne diese Regel
   erbte es die globale a-Regel (Farbe #dddddd) und den Unterstrich; display:block
   verhindert zusätzlich die Grundlinien-Lücke unter dem Bild. */
.nav-logo-link {
  display: block;
  text-decoration: none;
  line-height: 0;
}

.nav-logo-img {
  display: block;
  width: 49px;
  height: 45px;
}

.nav-logout-form {
  display: none;
}

.bb-nav-toggle{
  display:none;
}

.rotate {
  animation: bb-rotation 1.5s linear;
}

@keyframes bb-rotation {
  0% { transform: scale(0, 0) rotate(130deg); }
  100% { transform: scale(1, 1) rotate(360deg); }
}

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 56px 16px 24px;
}

.login-logo {
  width: min(520px, 90vw);
  height: auto;
}

.login-card {
  width: min(350px, 100%);
}

.login-title {
  margin: 0 0 14px;
  text-align: center;
}

.login-help {
  display: block;
  min-height: 20px;
}

.login-error-text {
  color: #ff0000;
}

/* Von der Verwaltung abgemeldet – mit Begründung. Kräftiger als der
   Zeitablauf: Hier hat jemand eingegriffen, das soll man sehen. */
.login-abmeldung-notice {
  background: #e7f0fb;
  border: 1px solid #7ba7d7;
  border-left-width: 4px;
  border-radius: 4px;
  color: #1c3d5f;
  font-size: 0.875rem;
  margin-bottom: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.login-timeout-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  color: #664d03;
  font-size: 0.875rem;
  margin-bottom: 14px;
  padding: 10px 14px;
}

.password-notice {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 14px;
}

.password-notice__inner {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  background: rgba(253, 220, 162, 0.35);
}

.password-notice__title {
  font-weight: 800;
}

.password-notice__text {
  opacity: 0.8;
  margin-top: 4px;
}

/* Navigation mobile mode */
@media (max-width: 980px) {
  .navbody {
    padding-bottom: 4px;
  }

  .nav-logo-wrap {
    width: auto;
    float: none;
    display: inline-flex;
    margin: 0 12px;
  }

  .bb-nav-toggle {
    display: none;
    width: calc(100% - 24px);
    margin: 8px 12px 2px;
    padding: 10px 12px;
    border: 1px solid var(--bb-nav-border);
    border-radius: 10px;
    background: #f7f7f7;
    color: #444;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
    touch-action: manipulation;
  }

  .navbody.bb-nav-ready .bb-nav-toggle {
    display: block;
  }

  .navbody.bb-nav-ready .navbar {
    display: none;
    clear: both;
    padding: 6px 12px 10px;
  }

  .navbody.bb-nav-ready .navbar.is-expanded {
    display: block;
  }

  .navbar a,
  .dropdown {
    float: none;
  }

  .dropdown {
    width: 100%;
    margin: 0 0 8px;
  }

  .dropdown .dropbtn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    border: 1px solid var(--bb-nav-border);
    border-radius: 10px;
    background: #f7f7f7;
    padding: 10px 12px;
  }

  .dropdown-content {
    position: static;
    display: none;
    min-width: 0;
    border: 1px solid var(--bb-nav-panel-border);
    border-radius: 10px;
    box-shadow: none;
    margin-top: 6px;
    overflow: hidden;
  }

  .dropdown-content a {
    display: flex;
    align-items: center;
    padding: 12px 14px;
  }
}

/* ============================= */
/* === Focus-visible (WCAG 2) === */
/* ============================= */

input[type=text]:focus-visible,
input[type=password]:focus-visible,
input[type=date]:focus-visible,
input[type=email]:focus-visible,
input[type=number]:focus-visible,
input[type=tel]:focus-visible,
input[type=search]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

input[type=submit]:focus-visible,
.button1:focus-visible,
.button2:focus-visible,
.button3:focus-visible,
.button4:focus-visible,
.button5:focus-visible,
.ButtonSelect:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Legacy baseline mobile hardening */
@media (max-width: 900px) {
  section {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 70px;
  }

  .sectionstart {
    margin-top: 120px;
  }

  .wrapper350 {
    width: 100%;
    padding: 14px;
  }

  .column,
  .column3 {
    float: none;
    width: 100%;
    height: auto;
  }

  .input-suche,
  .input-submit {
    float: none;
    width: 100%;
  }

  .button2,
  .button3,
  .button4 {
    width: 100%;
    margin-left: 0;
  }

  .poscolumn1,
  .poscolumn2,
  .poscolumn3,
  .poscolumn4,
  .poscolumn5,
  .poscolumn6 {
    float: none;
    width: 100%;
  }

  .footer {
    position: static;
  }
}

/* ========================== */
/* === Print CSS (GoBD §1(4)) === */
/* ========================== */

@media print {
  /* Hide non-document UI */
  .navbody,
  .navbar,
  .footer,
  .bb-nav-toggle,
  .dropdown,
  .menuline,
  .button1,
  .button2,
  .button3,
  .button4,
  .button5,
  .ButtonSelect,
  input[type=submit],
  button,
  .input-suche,
  .input-submit,
  form.search-form,
  nav,
  .bb-dash-card-foot,
  .bb-dash-overdue {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    margin: 0;
  }

  section,
  .sectionstart {
    margin: 0;
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }

  th, td {
    border: 1px solid #999;
    padding: 4px 6px;
    font-size: 9pt;
  }

  tr {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    color: #000;
    page-break-after: avoid;
  }

  @page {
    margin: 15mm 12mm 15mm 12mm;
  }
}

/* ================================= */
/* === bb_datefields.js – Styles  === */
/* ================================= */

.bb-date-wrap{position:relative;display:block}
.bb-date-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid rgba(0,0,0,.12);background:#f7f7f7;border-radius:10px;padding:6px 8px;cursor:pointer;z-index:3}
.bb-date-btn:disabled{opacity:.5;cursor:default}
.bb-date-input{padding-right:44px}
.bb-cal-pop{position:fixed;z-index:99999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:10px;width:280px;user-select:none}
.bb-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.bb-cal-title{font-weight:700;font-size:14px}
.bb-cal-btn{border:1px solid rgba(0,0,0,.12);background:#f7f7f7;border-radius:10px;padding:6px 10px;cursor:pointer}
.bb-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bb-cal-dow{font-size:12px;color:rgba(0,0,0,.55);text-align:center;padding:4px 0}
.bb-cal-day{border:1px solid transparent;background:#fff;border-radius:10px;padding:8px 0;text-align:center;cursor:pointer}
.bb-cal-day:hover{background:#f4f2ee}
.bb-cal-day.is-muted{color:rgba(0,0,0,.32);cursor:default}
.bb-cal-day.is-selected{background:#FDDCA2;border-color:rgba(0,0,0,.12)}
.bb-cal-day.is-today{border-color:rgba(0,0,0,.25)}


/* ── Hinweisband: Verzeichnisse außerhalb von web/ erreichbar ───────────── */
.bb-exposure {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 5px solid #b02a37;
    background: #f8d7da;
    color: #58151c;
    font-size: 0.95em;
    line-height: 1.45;
}
.bb-exposure--warnung {
    border-left-color: #b98900;
    background: #fff3cd;
    color: #5c4500;
}
.bb-exposure a { color: inherit; font-weight: 600; }
.bb-exposure-liste { margin: 8px 0 0 18px; padding: 0; }
.bb-exposure-liste code { background: rgba(0, 0, 0, 0.07); padding: 1px 4px; border-radius: 3px; }
.bb-exposure-tat { margin: 8px 0 0; font-weight: 600; }


/* ── Hinweis: Zwei-Faktor noch nicht eingerichtet ───────────────────────── */
.bb-totp-hinweis {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-radius: 6px;
    border-left: 5px solid #0d6efd;
    background: #e7f1ff;
    color: #084298;
    font-size: 0.95em;
}
.bb-totp-hinweis a { color: inherit; font-weight: 600; }

/* Zwei-Faktor-Abfrage (Frontend-Pflege 2026-09-27) */
.tv-text { margin-bottom: 16px; font-size: .9rem; color: #555; text-align: center; }
.tv-trenner { margin: 20px 0; border: 0; border-top: 1px solid #e0e0e0; }
.tv-details { font-size: .88rem; }
.tv-summary { cursor: pointer; color: #555; text-align: center; list-style: none; margin-bottom: 10px; }
.tv-hinweis { margin-bottom: 10px; color: #666; font-size: .85rem; text-align: center; }
.form-control.tv-code { letter-spacing: 2px; text-align: center; }
.tv-fuss { text-align: center; margin-top: 16px; font-size: .85rem; }

/* Navigation: Symbole (Frontend-Pflege 2026-09-27) */
.nav-icon { vertical-align: middle; }
.nav-icon--block { display: inline-block; }

/* Scroll-Huelle fuer Tabellen, auf jeder Seite verfuegbar (Frontend-Pflege
   2026-09-27): eine breite Tabelle scrollt in ihrem Kasten statt die Seite
   zur Seite zu schieben. Dasselbe steht in einstellungen.css - hier, weil
   style.css ueber header.php ueberall geladen wird. */
.bb-overflow-auto { overflow: auto; }