#juhidb-container h2 {
    font-size: 26px;
}

#juhidb-container h3 {
    font-size: 22px;
}

#juhidb-container button {
  text-transform: none;
  letter-spacing: 0px;
}

.vollebreite {
  display: block;
}

/* Desktop-Ansicht (ab 768px Breite nebeneinander) */
@media (min-width: 768px) {
  .vollebreite {
    /*grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
  }
}

.einhalb img {
  width: 100%;
  max-width: 300px !important;
  height: auto;
  border-radius: 8px; /* Leichte Rundung passend zum Input */
  display: inline-block;
}

input {
  -webkit-appearance: none;
}

.formulare-standard a {
  color: rgb(28, 153, 84) !important;
}

.pw-hinweis {
    font-size: 12px !important;
}

#login-fk-btn-pwforget, #login-jama-btn-pwforget {
    font-size: 12px !important;
    color: rgb(28, 153, 84) !important;
    cursor: pointer;
}

#bitte-warten h2, #bitte-warten h3 {
  text-align: center;
  margin-bottom: 50px;
}

#startmenu h2, #startmenu-jama h2 {
  text-align: center;
  margin-bottom: 50px;
}

#startmenu button, #startmenu-jama button {
  background-color: rgba(28,153,84,0.11);
  border-color: #1c9954;
  border-radius: 10px;
  color: #66CC33;

  font-size: 20px;
  font-weight: 500;
  padding: .3em 1em;
  line-height: 1.7em !important;

  border: 2px solid;

  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: all !important;
  transition-property: all !important;  

  margin-bottom: 20px;
  cursor: pointer;
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   LISTENZEILEN  ("Variante A")

   Gegenstueck zum Modul "ZENTRALES LISTEN-RENDERING" in JuHi-DB.js.
   Alle Listen der App benutzen diese Klassen - wer hier etwas aendert,
   aendert das Aussehen ueberall gleichzeitig.

   Aufbau:  [Statuskante] [Avatar] [Textblock] [Ampeln + Profilbalken]

   Farbwerte bewusst als CSS-Variablen, damit ein Theme-Wechsel nur oben
   stattfindet und nicht in 40 Regeln.
   ========================================================================= */

:root {
    --jl-gruen:      #1c9954;
    --jl-rot:        #d11f00;
    --jl-gelb:       #d99411;
    --jl-blau:       #2a6fb8;
    --jl-lila:       #6b4fa8;
    --jl-tuerkis:    #0f6e56;

    --jl-text:       #2c2c2a;
    --jl-text-leise: #63625d;
    --jl-text-still: #8f8e88;

    --jl-flaeche:    #ffffff;
    --jl-flaeche-hover: #faf9f6;
    --jl-rand:       #e4e3de;
    --jl-rand-stark: #d0cfc8;
    --jl-spur:       #ecebe5;

    /* Masse der Ampelleiste. Der Profilbalken darunter rechnet seine Breite
       aus genau diesen Werten, damit beide exakt buendig sind - wer hier
       etwas aendert, muss nichts nachziehen.
       9 Flex-Kinder (8 Punkte + 1 Trenner) => 8 Abstaende. */
    --jl-punkt:         11px;
    --jl-punkt-abstand:  5px;
    --jl-punkt-trenner:  8px;
    --jl-ampelleiste: calc(8 * var(--jl-punkt)
                         + var(--jl-punkt-trenner)
                         + 8 * var(--jl-punkt-abstand));
}

.liste-zeile {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 10px 14px;
    margin-bottom: 6px;

    background: var(--jl-flaeche);
    border: 1px solid var(--jl-rand);
    border-left: 4px solid var(--jl-rand-stark);
    border-radius: 8px;

    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    color: var(--jl-text);

    cursor: pointer;

    /* Zwei sehr weiche Lagen statt einer harten: die obere zeichnet die Kante
       nach, die untere hebt die Zeile vom Hintergrund ab. */
    box-shadow: 0 1px 1px rgba(40, 38, 30, .04),
                0 2px 6px rgba(40, 38, 30, .05);

    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.liste-zeile:hover {
    background: var(--jl-flaeche-hover);
    border-color: var(--jl-rand-stark);
    box-shadow: 0 1px 2px rgba(40, 38, 30, .06),
                0 4px 10px rgba(40, 38, 30, .07);
}

/* Zeilen ohne onclick sollen sich auch nicht klickbar anfuehlen. */
.liste-zeile.jl-nichtklickbar { cursor: default; }
.liste-zeile.jl-nichtklickbar:hover { background: var(--jl-flaeche); }

/* Farbe der linken Statuskante */
.liste-zeile.jl-status-gruen   { border-left-color: var(--jl-gruen); }
.liste-zeile.jl-status-rot     { border-left-color: var(--jl-rot); }
.liste-zeile.jl-status-warnung { border-left-color: var(--jl-gelb); }
.liste-zeile.jl-status-info    { border-left-color: var(--jl-blau); }
.liste-zeile.jl-status-spezial { border-left-color: var(--jl-lila); }
.liste-zeile.jl-status-akzent  { border-left-color: var(--jl-tuerkis); }
.liste-zeile.jl-status-neutral { border-left-color: var(--jl-rand-stark); }

/* --- Avatar ------------------------------------------------------------- */
/* Statt eines Profilbildes (zu viel Datenvolumen fuer eine Liste) stehen hier
   die Initialen, eingefaerbt nach FK-Typ. Ohne Namen tritt ein Icon an die
   Stelle. */
.jl-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}
.jl-avatar svg { width: 19px; height: 19px; }

/* --- Textblock ---------------------------------------------------------- */
.jl-haupt { flex: 1 1 auto; min-width: 0; }

.jl-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.jl-titel {
    font-size: 15px;
    font-weight: 600;
    color: var(--jl-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.jl-titel-leer {
    font-weight: 400;
    font-style: italic;
    color: var(--jl-text-still);
}

.jl-kennung {
    font-size: 12px;
    color: var(--jl-text-still);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Kontaktzeile ------------------------------------------------------- */
.jl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 3px;

    font-size: 13px;
    color: var(--jl-text-leise);
}
.jl-meta-teil {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}
.jl-meta-teil > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jl-meta-teil svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    opacity: .7;
}
.jl-meta-gedimmt { color: var(--jl-text-still); font-style: italic; }

/* --- Badges und Tags ---------------------------------------------------- */
.jl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.jl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 2px 9px;
    border-radius: 20px;

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 100%;
}
.jl-badge > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.jl-badge svg { flex: 0 0 12px; width: 12px; height: 12px; }

/* -------------------------------------------------------------------------
   FARBTOENE  >>> HIER die Farben von Initialenkreis und Badges anpassen.

   Jede Zeile ist ein Ton: heller Hintergrund + kraeftige Schrift AUS DERSELBEN
   Farbfamilie. Nie schwarz auf farbigem Grund - das wirkt schmutzig.

   Welcher FK-Typ welchen Ton bekommt, steht in JuHi-DB.js in der Tabelle
   LISTE_FK_TYPEN. Ein neuer Ton = eine neue Zeile hier + der Name dort.
   ------------------------------------------------------------------------- */
.jl-ton-neutral { background: #eeeeea; color: #4a4a45; }
.jl-ton-info    { background: #e6f1fb; color: #0c447c; }
.jl-ton-akzent  { background: #e1f5ee; color: #0f6e56; }
.jl-ton-erfolg  { background: #eaf3de; color: #3b6d11; }
.jl-ton-warnung { background: #faeeda; color: #854f0b; }
.jl-ton-gefahr  { background: #fcebeb; color: #a32d2d; }
.jl-ton-spezial { background: #eeedfe; color: #3c3489; }

/* Reserve - bereits nutzbar, damit weitere FK-Typen nicht dieselbe Farbe
   bekommen muessen wie ein bestehender. */
.jl-ton-koralle { background: #faece7; color: #993c1d; }
.jl-ton-pink    { background: #fbeaf0; color: #993556; }
.jl-ton-oliv    { background: #f2f1e0; color: #5c5a17; }

/* --- Rechte Spalte: Ampeln und Profilbalken ----------------------------- */
.jl-rechts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    padding-top: 3px;
}

/* Die Reihenfolge der Punkte ist fuer jede Fachkraft identisch, damit sich
   die Position mit der Zeit einpraegt. Der Tooltip nennt Leistung und
   Zustand im Klartext. */
.jl-ampeln {
    display: flex;
    align-items: center;
    gap: var(--jl-punkt-abstand);
}
/* Setzt die drei Aufsichts-/Beratungsampeln sichtbar von den fuenf
   Betreuungsampeln ab - auf jeder Bildschirmbreite gleich. */
.jl-ampel-trenner { flex: 0 0 var(--jl-punkt-trenner); width: var(--jl-punkt-trenner); }

.jl-ampel {
    display: block;
    flex: 0 0 var(--jl-punkt);
    width: var(--jl-punkt);
    height: var(--jl-punkt);
    border-radius: 50%;
    box-sizing: border-box;
}
.jl-ampel-gruen           { background: var(--jl-gruen); }
.jl-ampel-rot             { background: var(--jl-rot); }
.jl-ampel-inaktiv         { background: #dedcd5; }
/* Angeboten, aber Freigabe fehlt -> nur Rand. Die Randfarbe zeigt, welchen
   Wert die Ampel haette, wenn sie freigegeben waere. */
.jl-ampel-gesperrt-gruen  { background: var(--jl-flaeche); border: 2px solid var(--jl-gruen); }
.jl-ampel-gesperrt-rot    { background: var(--jl-flaeche); border: 2px solid var(--jl-rot); }

.jl-fortschritt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    /* buendig mit der Ampelleiste darueber - siehe :root */
    width: var(--jl-ampelleiste);
}
.jl-fortschritt-spur {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--jl-spur);
    overflow: hidden;
}
.jl-fortschritt-wert { height: 100%; border-radius: 2px; }
.jl-fortschritt-gruen { background: var(--jl-gruen); }
.jl-fortschritt-gelb  { background: var(--jl-gelb); }
.jl-fortschritt-rot   { background: var(--jl-rot); }
.jl-fortschritt-text  { font-size: 11px; color: var(--jl-text-still); }

.jl-notiz { font-size: 11px; color: var(--jl-text-still); }

/* Notiz-Toene (aktuell: "eFZ vom ..." unter dem Profilbalken).
   stark   = Angabe liegt vor -> schwarz, gut lesbar
   warnung = Angabe fehlt     -> roetlich hinterlegt
   ERWEITERN: weitere Toene hier ergaenzen, in listeZeile() reicht dann der
   passende Wert in notizTon. */
.jl-notiz-stark {
    color: #1a1a1a;
    font-weight: 600;
}
.jl-notiz-warnung {
    color: #b3261e;
    font-weight: 600;
    background: #fdecea;
    border-radius: 4px;
    padding: 1px 6px;
}

/* --- Legende ueber der FK-Liste ----------------------------------------- */
.jl-legende {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #f7f6f2;
    border-radius: 8px;
    font-size: 12px;
    color: var(--jl-text-leise);
    text-align: left;
}
.jl-legende-farben {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 5px;
}
.jl-legende-farben > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.jl-legende-text { color: var(--jl-text-still); line-height: 1.5; }

/* --- Mobil -------------------------------------------------------------- */
/* Die rechte Spalte klappt unter den Textblock und legt sich dort als eigene
   Zeile quer - so bleiben Ampeln und Balken lesbar, statt sich zu quetschen. */
@media (max-width: 700px) {
    .liste-zeile {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }
    .jl-avatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .jl-avatar svg { width: 16px; height: 16px; }

    .jl-haupt { flex: 1 1 calc(100% - 42px); }

    .jl-titel { font-size: 14.5px; }
    .jl-meta  { font-size: 12.5px; gap: 2px 12px; }

    .jl-rechts {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 8px;
        border-top: 1px solid #f1f0ea;
    }
    .jl-fortschritt { flex: 0 0 auto; }
    .jl-legende-text { display: none; }
}

@media (max-width: 400px) {
    .liste-zeile { padding: 9px 10px; }
}

/* --- Altbestand --------------------------------------------------------- */
/* Falls irgendwo noch eine Zeile im alten Schema (.name/.email/.adresse)
   erzeugt wird, bricht sie damit nicht das Layout, sondern stapelt sich
   sauber untereinander. */
.liste-zeile .name,
.liste-zeile .email,
.liste-zeile .adresse {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.liste-zeile .name { font-weight: 600; }
.liste-zeile .email,
.liste-zeile .adresse { font-size: 13px; color: var(--jl-text-leise); }

.bv-zeile {
  padding: 8px 12px;
  background: #1c9954;
  color: #fff;
  margin-bottom: 1px;
}

#formular-jm h2, #formular-fk h2, #liste-jm h2, #liste-fk h2, #login-ja-ma h2, #signin-ja-ma h2, #signin-ja-ma p, #login-fk h2, .formulare-standard h2 {
    margin-bottom: 50px;
}

#formular-jm label, #formular-fk label, #login-ja-ma label, #signin-ja-ma label, #login-fk label, .formulare-standard label {
    display: inline-block;
	width: 220px;
}

#formular-jm h2, #formular-fk h2, .formulare-standard h2 {
	margin-top: 15px;
}

#signin-ja-ma input[type="text"], #signin-ja-ma input[type="password"], .formulare-standard input[type="text"], .formulare-standard input[type="password"] {
	padding: 4px;
  color: #4e4e4e;
  font-size: 16px;
  margin-bottom: 8px !important;
  border-style: none none solid solid;
  width: 195px;
  display: inline-block;
}

#login-ja-ma input[type="text"], #login-ja-ma input[type="date"], #login-ja-ma input[type="password"] {
	padding: 4px;
  color: #4e4e4e;
  font-size: 16px;
  margin-bottom: 8px !important;
  border-style: none none solid solid;
  width: 195px;
  display: inline-block;
}

#login-fk input[type="text"], #login-fk input[type="date"], #login-fk input[type="password"] {
	padding: 4px;
  color: #4e4e4e;
  font-size: 16px;
  margin-bottom: 8px !important;
  border-style: none none solid solid;
  width: 195px;
  display: inline-block;
}

#formular-jm input[type="text"], #formular-jm input[type="date"] {
	padding: 4px;
  	color: #4e4e4e;
  	font-size: 16px;
  	margin-bottom: 8px !important;
  	border-style: none none solid solid;
    width: 195px;
    display: inline-block;
}

#formular-fk input[type="text"] {
	padding: 4px;
  color: #4e4e4e;
  font-size: 16px;
  margin-bottom: 8px !important;
  border-style: none none solid solid;
  width: 195px;
  display: inline-block;
}

/* Sichtbarkeit Datepicker in Safari */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 195px;
  min-height: 40px;
  padding: 6px 10px;
  margin-bottom: 8px !important;
  font-size: 16px;
  line-height: normal;
  color: #4e4e4e;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: left;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.2em;
}

input[type="date"]::-webkit-datetime-edit {
  color: #4e4e4e;
  opacity: 1;
  padding: 0;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ===== Abschluss (Monat/Jahr) bei Zertifikaten - ersetzt input[type="date"] ===== */
label.fk-zert-abschluss-label,
.formulare-standard label.fk-zert-abschluss-label,
#formular-fk #fk-zertifikat-container label.fk-zert-abschluss-label {
  width: auto !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: normal !important;
  color: #4e4e4e;
}

select.fk-zert-monat-select,
.formulare-standard select.fk-zert-monat-select,
#formular-fk select.fk-zert-monat-select {
  box-sizing: border-box;
  width: 130px !important;
  max-width: 100%;
  min-height: 40px !important;
  margin: 0 6px 8px 0 !important;
  padding: 6px 8px !important;
  font-size: 16px !important;
  line-height: normal;
  color: #4e4e4e;
  background-color: #fff;
  border: 1px solid #ccc !important;
  border-radius: 6px;
  vertical-align: top;
  text-align: left !important;
}

input.fk-zert-jahr-input,
.formulare-standard input.fk-zert-jahr-input,
#formular-fk input.fk-zert-jahr-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 90px !important;
  max-width: 100%;
  min-height: 40px !important;
  margin: 0 0 8px 0 !important;
  padding: 6px 10px !important;
  font-size: 16px !important;
  line-height: normal;
  color: #4e4e4e;
  background-color: #fff;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  vertical-align: top;
  text-align: left !important;
}

/* Sichtbarkeit Datepicker in Safari */
/*input[type="date"]:focus {
  outline: none;
  border-color: #009688; /* oder Deine Akzentfarbe */
/*  box-shadow: 0 0 3px rgba(0, 150, 136, 0.5);
}*/


#formular-fk h3 {
  border: 2px solid #bbb;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 40px;
}

.bg-fk-deleted {
    background-color: #f8d7da !important;
}

select, input[type="number"] {
  display: inline-block !important;
  width: 170px !important;
  font-size: 16px !important;
  padding: 5px !important;
  border-right: none !important;
  border-top: none !important;
  padding-left: 10px !important;
}

input[type="number"] {
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  width: 220px !important;
}

#login-ja-ma button, #signin-ja-ma button, #login-fk button, #signin-fk button {
  background-color: rgba(28,153,84,0.11);
  border-color: #1c9954;
  border-radius: 10px;
  color: #66CC33;

  font-size: 20px;
  font-weight: 500;
  padding: .3em 1em;
  line-height: 1.7em !important;

  border: 2px solid;

  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: all !important;
  transition-property: all !important;  

  cursor: pointer;
  width: 200px;
  display: block;
}

#liste-jm button, #liste-fk button, #formular-jm button, #formular-fk button, .formulare-standard input[type="submit"], .formulare-standard input[type="file"], .formulare-standard button {
  background-color: rgba(28,153,84,0.11);
  border-color: #1c9954;
  border-radius: 10px;
  color: #66CC33;

  font-size: 20px;
  font-weight: 500;
  padding: .3em 1em;
  line-height: 1.7em !important;

  border: 2px solid;

  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: all !important;
  transition-property: all !important;  

  margin-bottom: 20px;
  cursor: pointer;
  width: 200px;
}

.formulare-standard input[type="file"] {
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  background: #eee;
  color: #4e4e4e;
  margin-bottom: 20px;
  cursor: pointer;
  width: 390px;
  display: block;
}

.formulare-standard #fk-details-abschnitt2 input[type="file"] {
  width: 280px;
}

.formulare-standard input[type="number"] {
  width: 100px;
  display: inline-block;
  margin-bottom: 10px;
}

.formulare-standard input[type="checkbox"] {
  margin-right: 12px !important;
}

.formulare-standard input[type="checkbox"] + label {
  vertical-align: top;
}

.formulare-standard input[type="checkbox"].sublevel + label {
  vertical-align: middle;
}

.formulare-standard input[type="text"] {
  margin-right: 20px;
}

.formulare-standard input[type="radio"] + label {
  width: 50px !important;
  display: inline-block;
}

.formulare-standard p {
  font-size: 18px;
  border: none;
  color: #4e4e4e;
  margin-bottom: 20px;
}

.formulare-standard .zwischen-ueberschrift {
  font-size: 22px;
  font-weight: bolder;
  border: none;
  color: #4e4e4e;
  margin-top: 20px;
  padding: 10px !important;
  padding-left: 0px !important;
  border-bottom: 1px dotted #4e4e4e;
}

.formulare-standard p.is-child {
  font-size: 15px;
  border: none;
  color: #4e4e4e;
  margin-bottom: 10px;
}

.formulare-standard .form-sektion {
  background: #eee;
  padding: 20px;
  margin-bottom: 20px;
}

.formulare-standard .form-sektion p {
  font-size: 15px;
}

.formulare-standard .efz-button {
  width: 250px !important;
}

.formulare-standard .button-red, .button-red {
  background: #d11f00 !important;
  border-color: #851602 !important;
  color: #fff !important;
}

.formulare-standard .button-red-invert, .button-red-invert {
  background: #fff !important;
  border-color: #851602 !important;
  color: #d11f00 !important;
}

.fk-person-row {
  border-top: 2px solid #fff;
  padding-top: 10px;
}

.color-gold {
  color: #ffd700 !important;
}

.color-bronze {
  color: #8C7853 !important;
}

.color-silber {
  color: #C0C0C0 !important;
}

.font-bold {
  font-weight: bold !important;
}

.button-yellow {
  background: #eeee50 !important;
  color: #b1b136 !important;
  border-color: #b1b136 !important;
}

.button-grey {
  background: #eeeeee !important;
  color: #888 !important;
  border-color: #888 !important;
}

.button-darkgreen {
  border-color:  #d7f1c7 !important;
  background-color: #1c9954 !important;
  border-radius: 10px !important;
  color: #d7f1c7 !important;
}

.button-center {
  margin-left: auto;
  margin-right: auto;
}

.button-min-bottom {
  margin-bottom: 5px !important;
}

.button-round {
  width: auto !important;
  border-radius: 50%;
  margin-right: 20px;
}

.formulare-standard button.image-upload-button {
    background: #fff;
    border-radius: 10px;
    border: 2px solid rgb(28, 153, 84) !important;
    color: rgb(28, 153, 84) !important;
}

.formulare-standard #formular-ja-ma-adresseja {
  width: 250px !important;
}

.formulare-standard #fk-berufselect {
  width: 250px !important;
}

#formular-fk #fk-zertifikat-container label {
  width: 220px;
}

.formulare-standard .requiredError {
  border: 2px solid #d11f00 !important;
}

.formulare-standard .countryDropdown {
  margin-right: 15px;
}

.formulare-standard .legals-container label {
  width: 90% !important;
}
.formulare-standard .legals-container p {
  margin-bottom: 5px !important;
  margin-top: 15px !important;
}

.is-child {
    margin-left: 40px;
}

#info-box {
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow: auto; /* Scrollen nur innerhalb des Overlays */
}

#info-box-text {
    max-width: 500px;
    line-height: 1.2em;
}

#info-box-close {
    margin-top: 30px;
    width: 150px;
    padding: 10px;
}

#confirm-dialog {
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow: auto; /* Scrollen nur innerhalb des Overlays */
}

#confirm-dialog-text {
    max-width: 500px;
    line-height: 1.2em;
}

#confirm-dialog-cancel {
    display: inline-block;
    margin-top: 30px;
    margin-right: 20px;
    width: 150px;
    padding: 10px;
}

#confirm-dialog-confirm {
  display: inline-block;
  margin-top: 30px;
  width: 150px;
  padding: 10px;
}

.text-small {
    font-size: 14px !important;
}

#progress-container {
    width: 100%;
    background-color: #fafafa;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 25px;
    display: flex;
    overflow-x: auto; /* Aktiviert horizontales Scrollen auf Mobile */
    scrollbar-width: none; /* Versteckt Scrollbalken Firefox */
    -webkit-overflow-scrolling: touch;
}

#progress-container::-webkit-scrollbar {
    display: none; /* Versteckt Scrollbalken Chrome/Safari */
}

.step-segment {
    flex: 1; /* Desktop: gleichmäßig verteilt */
    min-width: 100px; /* Mobile: Mindestbreite für Lesbarkeit */
    height: auto;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.step-icon-svg {
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
}

.step-label-text {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

.step-badge {
    font-size: 9px;
    opacity: 0.7;
    margin-bottom: 2px;
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  margin-top: 50px;
}
.upload-preview {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #f0f0f0;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}
.upload-input {
  display: none !important;
}
.upload-label {
  background-color: rgb(28, 153, 84);
  border-radius: 10px !important;
  color: white;
  padding: 10px 20px;
  border-radius: 0px;
  cursor: pointer;
  text-align: center;
}
.upload-label:hover {
  background-color: rgb(37, 129, 31);
}

.fk-image-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: flex-start; /* Links ausgerichtet */
  max-width: 220px;
}
.fk-image-wrapper {
  position: relative;
  height: 150px; /* Einheitliche Höhe für alle Bilder */
  border: none; /*1px solid #ccc;*/
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer;
  margin: 1px;
  flex: 0 0 auto; /* Verhindert, dass der Wrapper skaliert */
}
.fk-image-wrapper img {
  height: 100%; /* Füllt die Höhe des Wrappers */
  width: auto; /* Beibehaltung des Seitenverhältnisses */
  object-fit: cover;
}
.fk-image-delete-btn {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(209, 31, 0, 0.7) !important;
  color: white !important;
  border: none !important;
  border-radius: 50%;
  padding: 2px 5px !important;
  cursor: pointer;
  font-size: 14px !important;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
}
.fk-upload-section {
  margin-top: 20px;
}
.fk-image-div {
  padding-bottom: 20px;
}

.fk-zertifikate-sub {
  display: none;
  padding: 8px;
  padding-left: 20px;
  width: 340px;
  background:#ccc; 
}
#formular-fk .fk-zertifikate-sub label {
  width: 305px;
}

.ampel-container {
  display: flex !important;
  align-items: center;
  gap: 20px;
}

.ampel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: 80px;
  justify-content: center;
  align-items: center;
  float: left;
  margin-left: 100px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #555;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.green {
  background-color: rgb(28, 153, 84);
}

.yellow {
  background-color: #eeee50;
}

.orange {
  background-color: orange;
}

.red {
  background-color:  #d11f00;
}

.grey {
  background-color: rgb(150, 150, 150);
}

.circle.selected {
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
  border-color: white;
}

.labels {
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: flex-start;
  float: left;
  margin-left: 50px;
}

.label {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

/* .fk-liste-ampel entfaellt - die Statusanzeige der Listenzeile uebernehmen
   jetzt die farbige Statuskante links und die Ampelleiste rechts
   (siehe Block "LISTENZEILEN"). */

#plz-map-fk, #plz-map-ja {
  width: 100%;
  height: 300px;
}


.fk-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;

  padding: 0 !important;

  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  user-select: none;
}

.fk-delete-btn:hover {
  filter: brightness(1.1);
}

.fk-delete-btn:active {
  transform: scale(0.95);
}

.fk-delete-btn:focus {
  outline: 2px solid rgba(0,0,0,.3);
  outline-offset: 2px;
}


select.fkImageDropdown {
  width: 250px !important;
  margin-bottom: 15px;
}

.einhalb {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

#fk-filterBlock {
  display: none;
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.filter-block {
  border: 1px solid #ccc;
  padding: 10px;
}

.filter-toggle {
  cursor: pointer;
  color: #777;
  padding: 10px;
  border: 1px solid #777;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 250px;
}

.filter-toggle:hover {
  color: #005fa3;
}

.kriterium-label > span {
    position: relative;
    padding-left: 1.2rem; /* Platz für Symbol */
    cursor: pointer;
}

/* Standard: zugeklappt */
.kriterium-label > input + span::before {
    content: "▸";    /* oder "✓", "☐", was du magst */
    position: absolute;
    left: 0;
    top: -0.15em;
    font-size: 1.2em;
}

/* Wenn Checkbox gecheckt: aufgeklappt / aktiv */
.kriterium-label > input:checked + span::before {
    content: "▾";    /* oder "☑", "✔", "✓" */
    font-weight: bold;
}

/* SEARCH Shortcode */
/* Grundlayout */
.bvsearch-wrapper {
    display: flex;
    height: 100%;
    min-height: 600px;
    gap: 20px;
}

/* Filterbereich links */
.bvsearch-filter {
    width: 25%;
    min-width: 250px;
    background: #f8f9fa;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bvsearch-filter h3 {
    margin-top: 0;
}

/* Eingabefelder */
.bvsearch-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bvsearch-field input,
.bvsearch-field select {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Checkbox-Gruppe */
.bvsearch-checkbox-group {
    gap: 8px;
}

.bvsearch-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Button */
.bvsearch-button {
    margin-top: auto;
    padding: 10px;
    background: #2c7be5;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.bvsearch-button:hover {
    background: #1a68d1;
}

/* Kartenbereich rechts */
.bvsearch-map-container {
    flex: 1;
    position: relative;
}

#bvsearch-map-bv {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border-radius: 8px;
    overflow: hidden;
}

/* =========================================
   STATISTIKBEREICH (Search Shortcode)
   ========================================= */

/* Container für die rechte Spalte */
.bvsearch-stats-container {
    width: 25%;
    min-width: 250px;
    background: #f8f9fa; /* Passend zum Filter-Hintergrund */
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Einheitlicher Abstand wie im Filter */
    position: relative; 
    overflow: hidden; /* Damit der Overlay die runden Ecken nicht überragt */
}

.bvsearch-stats-container h3 {
    margin-top: 0;
    color: #1c9954; /* Deine Primärfarbe */
}

/* Einzelne Info-Kacheln in der Statistik */
.stat-box {
    background: #ffffff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.stat-title {
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #1c9954; 
}

/* Listen für Top 3 Rankings */
.stat-list {
    list-style: none !important; /* Überschreibt dein globales ul styling */
    padding: 0 !important;
    margin: 0 !important;
}

.stat-list li {
    font-size: 13px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 6px;
}

.stat-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.stat-list li span {
    display: flex;
    align-items: flex-start; /* Hält das Icon oben, wenn der Text umbricht */
    line-height: 1.4em;      /* Macht mehrzeiligen Text etwas luftiger */
}

.stat-icon {
    color: #1c9954;
    width: 16px;
    flex-shrink: 0;          /* Icon behält zwingend seine Breite */
    margin-right: 8px;
    text-align: center;
    margin-top: 2px;         /* Kleine optische Korrektur zur ersten Textzeile */
}

/* Das halbtransparente Overlay für die Box */
#stats-spinner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(248, 249, 250, 0.85); /* Entspricht der Hintergrundfarbe der Statistikbox */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* Nutzt die bestehende Spinner-Animation[cite: 3] */
.stats-spinner-circle {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(28, 153, 84, 0.2);
    border-top: 4px solid #1c9954;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Ergänzung für den bestehenden Mobile-Breakpoint */
@media (max-width: 900px) {
    .bvsearch-stats-container {
        width: 100%;
        margin-top: 10px;
    }
}


/* ---------- Trägerbereich ---------- */
.traeger-tab-content {
  padding-top: 30px;
  padding-bottom: 30px;
}


/* ══════════════════════════════════════════════════════════════════════════
   AMPEL
   --------------------------------------------------------------------------
   Aufbau der Komponente (Markup: JuHi-DB-shortcode.php):

     .traffic-light-component[data-mode][data-locked]
        .light-container      rote/grüne Leuchte, Radiobuttons unsichtbar
        .status-text          Text kommt komplett aus CSS (::before / ::after)
        .ampel-info-button    "i", nur an gesperrten Ampeln, JS blendet ein
        .lock-control         Schloss, immer sichtbar, nur Träger bedient es

   Zwei Zustände steuern die Darstellung:
     data-mode   = "user" (Fachkraft) | "traeger"
     data-locked = "true" | "false"   -> Freigabe durch den Träger

   ZUR SCHREIBWEISE: Klassennamen wie .status-text, .lock-control oder
   .light-container sind sehr allgemein und kollidieren mit Theme- und
   Plugin-Regeln, die nach dieser Datei geladen werden. Alle Regeln sind
   deshalb unter .traffic-light-component verschachtelt, und die für das
   Layout entscheidenden Eigenschaften tragen !important. Ohne das wurde
   z.B. die Positionierung des Schlosses von außen überschrieben.
   ══════════════════════════════════════════════════════════════════════════ */

.traffic-light-component {
    position: relative !important;    /* Bezugspunkt für das Schloss */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 280px !important;
    box-sizing: border-box !important;
    margin-bottom: 40px;
    /* rechts Platz für das absolut gesetzte Schloss freihalten */
    padding: 8px 52px 8px 15px !important;
    /* Transparenter Rahmen im Normalzustand: Die gesperrte Ampel bekommt einen
       sichtbaren Rahmen - ohne diesen Platzhalter würde sie um 2px springen. */
    border: 1px solid transparent;
    border-radius: 25px;
    background: #333;
    color: white;
    font-family: sans-serif;
}

/* ── Leuchten ─────────────────────────────────────────────────────────── */

.traffic-light-component .light-container {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #1a1a1a;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.traffic-light-component .light-container input {
    display: none !important;
}

/* !important schützt die Kreisform vor globalen Formular-Regeln des Themes. */
.traffic-light-component .light,
.formulare-standard .traffic-light-component .light {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    cursor: pointer;
    opacity: 0.3;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.traffic-light-component .light.red   { background: #ff4d4d; }
.traffic-light-component .light.green { background: #44ff44; }

/* Der jeweils gewählte Radiobutton bringt das direkt folgende Label zum Leuchten. */
.traffic-light-component input[value="0"]:checked + .light.red {
    opacity: 1;
    box-shadow: 0 0 10px #ff4d4d;
}

.traffic-light-component input[value="1"]:checked + .light.green {
    opacity: 1;
    box-shadow: 0 0 10px #44ff44;
}

/* ── Statustext (Inhalt kommt ausschließlich aus CSS) ─────────────────── */

.traffic-light-component .status-text {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.traffic-light-component .status-text::before {
    content: "nicht verfügbar";
    color: #ff4d4d;
}

.traffic-light-component:has(input[value="1"]:checked) .status-text::before {
    content: "verfügbar";
    color: #44ff44;
}

/* ── Info-Button an gesperrten Ampeln ─────────────────────────────────── */
/* Sichtbar wird er ausschließlich per JS (setAmpelInfoSichtbar in constants.js).
   Die !important-Angaben sind nötig, weil ".formulare-standard button" dem
   Element sonst Schriftgröße, Rahmen und im Mobil-Layout volle Breite aufzwingt.
   Bei "display" bewusst KEIN !important - dort muss das Inline-Style des
   JavaScripts gewinnen. */

.traffic-light-component .ampel-info-button {
    display: none;
    position: relative !important;    /* zusammen mit z-index: liegt immer oben */
    z-index: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.traffic-light-component .ampel-info-button:hover,
.traffic-light-component .ampel-info-button:focus {
    background: #ffffff !important;
    color: #333333 !important;
    outline: none;
}

/* ── Schloss ──────────────────────────────────────────────────────────── */
/* In BEIDEN Ansichten sichtbar und immer an derselben Stelle. Die Fachkraft
   sieht daran den Freigabestand, bedienen darf es nur der Träger.

   Absolut positioniert statt als Flex-Element: die Position hängt damit an
   nichts als am rechten Innenrand der Ampel - nicht an der Textlänge, nicht
   an der Verteilung des Freiraums, nicht am Info-Button. Den nötigen Platz
   reserviert das padding-right der .traffic-light-component. */

.traffic-light-component .lock-control {
    position: absolute !important;
    top: 8px !important;
    right: 15px !important;
    bottom: 8px !important;
    left: auto !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    border: 0 !important;
    border-left: 1px solid #555 !important;
    background: transparent !important;
}

.traffic-light-component .lock-checkbox {
    display: none !important;
}

.traffic-light-component .lock-label {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 1.2rem !important;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.traffic-light-component .lock-label::before {
    content: "🔓";
}

.traffic-light-component .lock-checkbox:checked + .lock-label::before {
    content: "🔒";
}

.traffic-light-component .lock-checkbox:checked + .lock-label {
    filter: grayscale(0%);
    opacity: 1;
}

/* Nur der Träger darf das Schloss bedienen. Zusätzlich setzt das JavaScript
   (TrafficLight._updateState) die Checkbox außerhalb des Trägermodus auf
   disabled - das hier ist die optische Entsprechung. */
.traffic-light-component[data-mode="user"] .lock-label {
    cursor: default;
    pointer-events: none;
}

/* Der Träger schaltet die Ampel nicht, er gibt sie nur frei. */
.traffic-light-component[data-mode="traeger"] .light-container {
    pointer-events: none;
    opacity: 0.8;
}

/* ── Gesperrt: identische Optik in FK- und Trägeransicht ──────────────── */
/* Muss NACH den Modus-Regeln stehen, damit die Abdunklung gewinnt. */

.traffic-light-component[data-locked="true"] {
    border-color: #555;
    background: #2a2a2a;
}

.traffic-light-component[data-locked="true"] .light-container {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(50%);
}

/* Statustext leeren statt ihn zu verstecken. Die frühere Lösung
   (font-size: 0 auf .status-text) ließ das Padding des ::before stehen -
   und weil "verfügbar" ein anderes Padding hatte als "nicht verfügbar",
   saß "Gesperrt" je nach Ampelzustand an einer anderen Stelle.

   WICHTIG - beide Selektoren sind nötig: Die Regel für "verfügbar" oben
   enthält :has(input[value="1"]:checked) und ist dadurch spezifischer als
   eine einfache [data-locked="true"]-Regel. Ohne die zweite Zeile bliebe bei
   einer gesperrten Ampel auf Grün das Wort "verfügbar" stehen. */
.traffic-light-component[data-locked="true"] .status-text::before,
.traffic-light-component[data-locked="true"]:has(input[value="1"]:checked) .status-text::before {
    content: "";
    padding: 0;
    margin: 0;
}

/* Der Sperrtext trägt KEIN Schloss-Symbol: das steht bereits rechts in der
   .lock-control und wäre sonst doppelt zu sehen. Gilt für beide Ansichten. */
.traffic-light-component[data-locked="true"] .status-text::after {
    content: "Gesperrt";
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
}

/* ---------- MOBIL ---------- */

@media (max-width: 900px) {

    .bvsearch-wrapper {
        flex-direction: column;
    }

    .bvsearch-filter {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .bvsearch-field {
        width: 90%;
    }

    .bvsearch-checkbox-group {
        width: 100%;
        flex-direction: row;
        gap: 16px;
    }

    .bvsearch-button {
        width: 100%;
        margin-top: 10px;
    }

    #bvsearch-map-bv {
        min-height: 400px;
    }
}
/* Ende Search Shortcode */

/* Amtsgerichte */
details label {
  width: 80% !important;
}

details div {
  padding-left: 20px;
}

textarea {
  width: 100%;
  display: block;
}

.checkbox-container + div {
  display: none;
}
.checkbox-container-kriterien + span + div {
  display: none;
}
.checkbox-container-flex ~ div {
  display: none;
}
/* Das div standardmäßig ausblenden */
.checkbox-container + label + br + div {
  display: none;
}

/* Das div einblenden, wenn die Checkbox gecheckt ist */
.checkbox-container:checked + label + br + div {
  display: block;
}
/* Container einblenden, wenn die Checkbox gecheckt ist */
.checkbox-container:checked + div {
  display: block;
}
.checkbox-container-kriterien:checked + span +div {
  display: block;
}
/* Container einblenden, wenn die Checkbox gecheckt ist */
.checkbox-container-flex:checked ~ div {
  display: block;
}

/* Standard: nur die radio-child-Divs ausblenden */
input[type="radio"] + label + .radio-child {
    display: none;
}

/* Wenn der Radiobutton gewählt ist → radio-child einblenden */
input[type="radio"]:checked + label + .radio-child {
    display: block;
}

#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul {
  list-style-type: disc;
  padding: 0 0 0px 1em !important;
  line-height: 26px;
}

#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column; /* Richtet die Elemente vertikal aus */
  justify-content: center;
  align-items: center;
  z-index: 999999;
  display: none; /* Versteckt beim Start */
}

/* Animierter Lade-Kreis */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Buttons deaktiviert-Stil */
.disabled {
  pointer-events: none; /* Blockiert alle Klicks und Interaktionen */
  opacity: 0.5; /* Optional: Visuelles Feedback, dass es deaktiviert ist */
}

/* Anpassungen für lange Zeilen auf kleinen Bildschirmen */
/* =========================================
   ALLGEMEINES LAYOUT DER PERSONENZEILEN
   ========================================= */
.fk-person-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Label kompakt halten */
.fk-person-row label {
  white-space: nowrap;
  margin: 0;
  font-size: 0.95em;
}

/* Eingabefelder und Selects */
.fk-person-row input[type="text"],
.fk-person-row input[type="date"],
.fk-person-row select {
  flex: 0 1 auto;
  min-width: 100px;
  max-width: 150px;
  padding: 4px 6px;
  font-size: 0.95em;
  box-sizing: border-box;
}

/* Datepicker in einer Zeile halten */
.fk-person-row input[type="date"] {
  margin-right: 10px;
}

/* =========================================
   RADIOBUTTONS (eFz)
   ========================================= */

/* Label "Aktuelles eFz vorhanden:" direkt vor Gruppe */
.fk-person-row label[for^="fk-mitbewohner-efz-ja"] {
  margin-right: 4px;
}

/* Gemeinsame visuelle Gruppe */
.fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-ja"],
.fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-nein"],
.fk-person-row label[for^="fk-mitbewohner-efz-ja"],
.fk-person-row label[for^="fk-mitbewohner-efz-nein"] {
  display: inline-block;
  vertical-align: middle;
}

/* Radiobuttons und Text enger setzen */
.fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-ja"],
.fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-nein"] {
  margin: 0 3px 0 3px;
  position: relative;
  top: 0; /* auf gleicher Höhe */
}

/* Textlabels Ja/Nein kompakt und gleich ausgerichtet */
.fk-person-row label[for^="fk-mitbewohner-efz-ja"],
.fk-person-row label[for^="fk-mitbewohner-efz-nein"] {
  margin-right: 6px;
  line-height: 1.1;
}

/* Engere horizontale Gruppe */
.fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-ja"] + label[for^="fk-mitbewohner-efz-ja"],
.fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-nein"] + label[for^="fk-mitbewohner-efz-nein"] {
  display: inline-flex;
  align-items: center;
}

/* =========================================
   BUTTONS UND BILDER
   ========================================= */
.fk-person-row .fk-image-div,
.fk-person-row .image-upload-button {
  margin-left: 10px;
}

.btn-with-badge {
    position: relative;            /* Referenz für den Badge */
}

.btn-badge {
    position: absolute;
    top: -6px;                     /* ggf. anpassen */
    right: -6px;                   /* ggf. anpassen */
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;          /* schöner Kreis/Oval */
    background: red;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;    /* kleiner weißer Rand wie bei Android-Badges */
    pointer-events: none;          /* Klick geht weiter auf den Button */
}

.btn-badge-text {
  position: absolute;
  bottom: -30px;      /* Schiebt den Text unter den Button-Rand */
  left: 50%;
  transform: translateX(-50%); /* Präzise Zentrierung */
  white-space: nowrap;
  font-size: 12px;
  color: #aaa;
}

/* Erklaerung des Profilbalkens in der Legende - FK-Liste */
.jl-legende-profil {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}
.jl-legende-balken {
    flex: 0 0 var(--jl-ampelleiste);
    height: 4px;
    border-radius: 2px;
    background: var(--jl-spur);
    overflow: hidden;
}
.jl-legende-balken > span {
    display: block;
    width: 70%;
    height: 100%;
    border-radius: 2px;
    background: var(--jl-gelb);
}

/* ── RangeSlider Component Styles ──────────────────────── */
:root {
    --track-bg:  #ddd9d3;
    --track-fill:#c84b2f;
    --thumb-size:20px;
    --track-h:   6px;
    --radius:    3px;
  }
 

  .rs-wrapper {
    --rs-accent:    var(--accent);
    --rs-track-bg:  var(--track-bg);
    --rs-track-h:   var(--track-h);
    --rs-thumb:     var(--thumb-size);
 
    position: relative;
    padding-top: .35rem;
    user-select: none;
  }
 
  /* Labels above thumbs */
  .rs-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: .6rem;
    font-family: 'DM Mono', monospace;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
    position: relative;
    height: 1.2em;
  }
  .rs-label {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: left .05s;
    background: var(--rs-accent);
    color: #fff;
    padding: .1rem .4rem;
    border-radius: 4px;
    font-size: .72rem;
  }
  .rs-label::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 50%;
    transform: translateX(-50%);
    border: 3px solid transparent;
    border-top-color: var(--rs-accent);
  }
 
  /* Track */
  .rs-track-wrap {
    position: relative;
    height: var(--rs-thumb);
    display: flex;
    align-items: center;
  }
 
  .rs-track {
    width: 100%;
    height: var(--rs-track-h);
    background: var(--rs-track-bg);
    border-radius: var(--radius);
    position: relative;
  }
 
  .rs-fill {
    position: absolute;
    top: 0; height: 100%;
    background: var(--rs-accent);
    border-radius: var(--radius);
    pointer-events: none;
  }
 
  /* Thumbs */
  .rs-thumb {
    position: absolute;
    width:  var(--rs-thumb);
    height: var(--rs-thumb);
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--rs-accent);
    top: 50%; transform: translate(-50%, -50%);
    cursor: grab;
    transition: box-shadow .15s, transform .1s;
    touch-action: none;
    z-index: 2;
  }
  .rs-thumb:hover, .rs-thumb.active {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--rs-accent) 18%, transparent);
  }
  .rs-thumb.active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.12); z-index: 3; }
 
  /* Min/max edge labels */
  .rs-edge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
  }

/* =========================================
   MOBILE DARSTELLUNG
   ========================================= */
@media (max-width: 768px) {
  .fk-person-row {
    display: grid;
    grid-template-columns: 35% 65%;
    column-gap: 4px;
    row-gap: 6px;
    margin-left: 0;
    padding-left: 0;
  }

  .fk-person-row label {
    grid-column: 1;
    text-align: right;
    padding-right: 4px;
    font-size: 0.95em;
  }

  .fk-person-row input,
  .fk-person-row select {
    grid-column: 2;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Infotexte */
  .fk-person-row p/*[id^="fk-unterstuetzende-einladung-infotext"] */{
    grid-column: 1 / span 2;
    margin-left: 0;
    margin-bottom: 10px;
  }

  /* Buttons */
  .fk-person-row button {
    grid-column: 1 / span 2;
    margin-left: auto;
    margin-top: 15px;
    width: 100% !important;
  }


  /* ---- Radiogruppe mobil ---- */
  /* Label über Gruppe */
/*  .fk-person-row label:has(+ input[type="radio"][id^="fk-mitbewohner-efz-ja"]) {
    grid-column: 1;
    text-align: right;
    margin-left: 0;
    margin-bottom: 2px;
    width: 160px !important;
  }*/

  /* Radiobuttons & Labels */
  .fk-person-row input[type="radio"][id*="-efz-ja"],
  .fk-person-row input[type="radio"][id*="-efz-nein"] {
    margin-left: 25px;
    margin-right: 0;
    vertical-align: middle;
    display: inline-block;
    width: auto !important;
  }

  .fk-person-row label[for*="-efz-ja"],
  .fk-person-row label[for*="-efz-nein"] {
    margin-left: 5px;
    margin-right: 0;
    vertical-align: middle;
    display: inline-block;
    width: auto !important;
    text-align: left;
  }

}

/* =========================================
   EXTRA SCHMAL (z. B. iPhone SE)
   ========================================= */
@media (max-width: 400px) {
  .fk-person-row {
    grid-template-columns: 45% 55%;
  }

  /* Radiobuttons minimal nach links rücken */
  .fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-ja"],
  .fk-person-row input[type="radio"][id^="fk-mitbewohner-efz-nein"],
  .fk-person-row label[for^="fk-mitbewohner-efz-ja"],
  .fk-person-row label[for^="fk-mitbewohner-efz-nein"] {
    margin-left: 14px;
  }
}

@media only screen and (max-width: 768px) {
  .ampel {
    margin-left: 0px;
  }

  .ampel-container {
    margin-top: 30px;
  }
}

/* =========================================
   MOBILE: Formulare Standard (z.B. JA-MA)
   ========================================= */
@media (max-width: 768px) {

  .einhalb {
    width: 100%;
  }

  /* Buttons oben: volle Breite, sauber untereinander */
  #formular-ja-ma button,
  .formulare-standard button {
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
  }

  /* Labels nicht mehr neben Inputs, sondern als Block über dem Feld */
  #formular-ja-ma label,
  .formulare-standard label {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 4px 0;
  }

  /* Textfelder/Selects: volle Breite */
  #formular-ja-ma input[type="text"],
  #formular-ja-ma input[type="password"],
  #formular-ja-ma input[type="date"],
  #formular-ja-ma select,
  .formulare-standard input[type="text"],
  .formulare-standard input[type="password"],
  .formulare-standard input[type="date"],
  .formulare-standard select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-right: 0 !important;
  }

  /* Einrückungen (is-child) auf Mobile rausnehmen */
  .is-child {
    margin-left: 0 !important;
  }

  /* ====== Radiogruppe "Anrede" ======
     Radio + Label inline lassen, aber wrap-fähig und ohne feste 50px-Labelbreite */
  #formular-ja-ma input[type="radio"] {
    width: auto !important;
    display: inline-block;
    margin: 0 8px 0 0;
    vertical-align: middle;
  }

  #formular-ja-ma input[type="radio"] + label {
    width: auto !important;
    display: inline-block !important;
    margin: 0 16px 8px 0;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* "Andere" Textfeld: auf Mobile immer in die nächste Zeile und volle Breite */
  #formular-ja-ma-ansprache {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  /* Optional: readonly Adresse-Info darf umbrechen statt rauslaufen */
  #formular-ja-ma-adresse-readonly-info {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
  }

  /* Text in Eingabefeldern zentrieren */
  #formular-ja-ma input[type="text"],
  #formular-ja-ma input[type="password"],
  #formular-ja-ma input[type="date"],
  #formular-ja-ma select,
  .formulare-standard input[type="text"],
  .formulare-standard input[type="password"],
  .formulare-standard input[type="date"],
  .formulare-standard select {
    text-align: center;
  }

  /* Placeholder ebenfalls zentrieren (sonst wirkt es inkonsistent) */
  #formular-ja-ma input::placeholder,
  .formulare-standard input::placeholder {
    text-align: center;
  }
}

/* EXTRA schmal (z.B. sehr kleine Phones) */
@media (max-width: 420px) {
  #formular-ja-ma input[type="radio"] + label {
    margin-right: 10px;
  }
}

/* PRINT */
@media print {
  /* Diese Elemente werden beim Drucken komplett ignoriert */
  header, 
  nav, 
  footer, 
  .sidebar, 
  .cookie-banner,
  .download-button,
  .main_title,
  #version-container,
  #fk-btn-printview-close
   {
    display: none !important;
  }

  #headline-print {
    display: block !important;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  /* Optional: Den Inhaltsbereich für den Druck auf volle Breite ziehen */
  .content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* =========================================================================
   CHECKBOX-LABELS

   Problem: Die allgemeinen Label-Regeln gelten fuer JEDES Label im Formular.
   Fuer ein Label neben einem Textfeld sind sie richtig, fuer ein Label neben
   einer Checkbox erzeugen sie genau den beobachteten Umbruch:

   - Desktop (Zeile "display: inline-block; width: 220px"):
     Ein inline-block mit fester Breite ist ein UNTEILBARER Kasten. Sind rechts
     der Checkbox weniger als 220px frei, springt der ganze Kasten in die
     naechste Zeile - obwohl der Text dort haette umbrechen koennen.
   - Mobil (Zeile "display: block !important; width: 100% !important"):
     Das Label wird zum Block und landet damit grundsaetzlich unter der
     Checkbox.

   Loesung: nur Labels, die DIREKT auf eine Checkbox folgen, bekommen eine
   flexible Breite. Der Text bricht dann innerhalb des Labels um und bleibt
   neben der Checkbox stehen.

   Bewusst eng gefasst, um Nebenwirkungen auszuschliessen:
   - Der Selektor greift ausschliesslich bei "input[type=checkbox] + label".
     Labels vor Textfeldern, Labels ohne vorangehendes input und alle
     Radio-Labels (dort steht die feste Breite von 50px mit Absicht) bleiben
     unveraendert.
   - vertical-align wird NICHT gesetzt, damit die bestehenden Regeln fuer
     ".sublevel" weiter greifen.
   - Der Block steht am Dateiende und hat hoehere Spezifitaet als die
     allgemeinen Label-Regeln - deshalb wirkt er, ohne dass an den
     bestehenden Regeln etwas geaendert werden muss.

   ANPASSEN: --juhi-checkbox-platz ist der Platz, den Checkbox plus ihr
   rechter Abstand einnehmen (13px Kaestchen + 12px margin-right + Reserve).
   ========================================================================= */

:root {
    --juhi-checkbox-platz: 34px;
}

.formulare-standard input[type="checkbox"] + label,
#formular-jm       input[type="checkbox"] + label,
#formular-fk       input[type="checkbox"] + label,
#formular-ja-ma    input[type="checkbox"] + label,
#login-ja-ma       input[type="checkbox"] + label,
#signin-ja-ma      input[type="checkbox"] + label,
#login-fk          input[type="checkbox"] + label {
    display: inline-block !important;
    width: auto !important;
    /* Nicht breiter als die Restzeile - sonst laeuft langer Text raus. */
    max-width: calc(100% - var(--juhi-checkbox-platz)) !important;
}

/* Geprueft gegen JuHi-DB-shortcode.php: alle 45 Stellen mit dem Muster
   "Checkbox, direkt danach Label" liegen in einem der Container oben
   (u.a. FK-Filter in #liste-fk, JAMA-Suchfilter in #jama-suche-fk).
   Eine generische Regel ohne Container ist deshalb nicht noetig. */

/* Auf Mobile setzt die allgemeine Regel zusaetzlich einen Aussenabstand
   (margin: 10px 0 4px 0), der ein Label ueber einem Feld sauber absetzt.
   Neben einer Checkbox verschiebt er das Label nur nach unten. */
@media (max-width: 768px) {
    .formulare-standard input[type="checkbox"] + label,
    #formular-ja-ma    input[type="checkbox"] + label {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}