/* Neueinstellung #f3606f  */
/* Neueinstellung - Probezeit #f6f9f8 */
/* Offen #ffd7cb */
/* Laufend in der Beratung #ffeebe */
/* In Bearbeitung #ffffcb */
/* Laufend erledigt #caffca */
/* Laufend ohne bAV #c1fb8d */


.status-1 {
  background-color: #f71b31 !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: white !important;
}
.status-2 {
  background-color: #f71b31 !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: white !important;
}
.status-3 {
  background-color: #f71b31 !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: white !important;
}
.status-4 {
  background-color: yellow !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-5 {
  background-color: yellow !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-6 {
  background-color: #68f768 !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-7 {
  background-color: #68f768 !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-8 {
  background-color: yellow !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-9 {
  background-color: yellow !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-10 {
  background-color: yellow !important;
  border-color: #d6d9da !important;
  font-weight: 600 !important;
  color: black !important;
}
.status-11 {
    background-color: #f71b31 !important;
    border-color: #d6d9da !important;
    font-weight: 600 !important;
    color: white !important;
}
.status-12 {
    background-color: #68f768 !important;
    border-color: #d6d9da !important;
    font-weight: 600 !important;
    color: black !important;
}

.alert.alert-warning {
    color: #4f3100;
    background: #ffff00;  /* Yellow */
}


tr.selected {
    background: #057513 !important;
}

.btn-container {
    display: flex;
    flex-wrap: wrap; /* bricht auf neue Zeilen */
    gap: 0.5rem; /* Abstand zwischen Buttons */
}

.btn-container .btn {
    flex: 1 1 auto; /* wächst, aber nicht kleiner als Inhalt */
    white-space: nowrap; /* verhindert Zeilenumbruch im Button */
    text-align: center; /* optional: zentrierter Text */
}

/* Blinkender Button für Personalstelle */
.personal-button {
  color: white;
  animation: glowing 1300ms infinite;
}
@keyframes glowing {
  0% { background-color: #e7061d ; box-shadow: 0 0 3px #e7061d ; }
  50% { background-color: #f18a5a ; box-shadow: 0 0 15px #f18a5a ; }
  100% { background-color: #e7061d ; box-shadow: 0 0 3px #e7061d ; }
}

/* Blinkender Button für Personalstelle */
.blinking-warning {
  animation: blinkingText 1500ms infinite;
}
@keyframes blinkingText {
  0% { color: #e7061d}
  25% { color: rgb(255, 123, 0)}
  50% { color: rgb(230, 185, 61)}
  60% { color: #f18a5a}
  98% { color: red}
  100% { color: #e7061d}
}

/* Blinkender Button für Personalstelle */
.blinking-warning-dark {
  animation: blinkingTextDark 1500ms infinite;
}
@keyframes blinkingTextDark {
  0% { color: #94000f}
  25% { color: rgb(161, 80, 4)}
  50% { color: rgb(199, 150, 17)}
  60% { color: #f3763d}
  98% { color: rgb(228, 10, 10)}
  100% { color: #c20518}
}

.text-blinking-red {
    font-weight: bold;
    animation: blink-red 1500ms infinite;
}
@keyframes blink-red {
    0% { color: #e7061d; }
    33% { color: #f18a5a; }
    66% { color: #f0dca4; }
    100% { color: #e7061d; }
}
/* AJAX-Loader */
#ajaxoverlay
{
    opacity: 0.4;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    z-index: 9999;
    text-align: center;
}

/* #ajaxoverlay img {
    position:  absolute;
    top: 20%;
} */
#loaderText {
  position:  absolute;
  /* display: none; */
  top: 20%;
  margin-left: -15%;
}

#loaderText h4 {
  color: aqua;
}

ul.collapse-level-2 a.nav-link {
  font-size: small !important;
  word-break: break-all;
}

ul.collapse-level-3 a.nav-link {
  margin-left: 1em !important;
  font-size: smaller !important;
  word-break: break-all;
}

.self-invalid {
  border-color: #f95851 !important;
  color: #f83f37  !important;
}

.self-success {
  border-color: #23A538 !important;
  color: #23A538  !important;
}
span.self-success, span.self-invalid {
  font-size: 0.83rem;
}
input[readonly], input[disabled], select[disabled] {
  background-color: #eeeeef !important;
  /* border-color: #d6d9da !important; */
  color:#495057 !important;
}

.option-starttext {
  font-weight: bold;
}

.option-leer {
  font-size: 0.2em;
}

.bav-ueberschrift {
  margin-bottom: 9px;
  margin-top: 7px;
}

.option-trenner {
  font-size: 0.3pt;
  background-color: #6ed9e5;
}

hr.hr-secondary {
    height: 2px;
    background-color: #8d8989;
    filter: contrast(200%) blur(0.6px);
    margin: 25px 0px;
    /* border-top: 2px solid #9e9e9e; */
}

.btn-success-hover-outline {
    background-color: #28a745;
    color: #fff;
    border: 1px solid #198754;
    transition: all 0.2s ease;
}

.btn-success-hover-outline:hover,
.btn-success-hover-outline:focus {
    background-color: #fff;
    color: #198754;
    border-color: #198754;
}

.btn-danger-hover-outline {
  background-color: #ff2f26; /* Bootstrap Danger */
  color: #fff;
  border: 1px solid #dc3545;
  transition: all 0.2s ease;
}

.btn-danger-hover-outline:hover,
.btn-danger-hover-outline:focus {
  background-color: #fff;
  color: #dc3545;
  border-color: #dc3545;
}

@media (min-width: 1199px) {
  .dropdown-menu{
    margin-left: -7px;
  }
}

@media (max-width: 1199px) {
  .wartung-login {
    padding-top: 175px !important;
  }
}

@media (max-width: 525px) {
  .wartung-login {
    padding-top: 205px !important;
  }
}

@media (max-width: 1890px) {
  .colme {
    height: 2.9em;
  }
}

@media (max-width: 1559px) {
    .colme-1 {
        height: 2.9em;
    }
}

@media (max-width: 1351px) {
    .colme-2 {
        height: 2.9em;
    }
}

/* Der bestehende "Oberfläche"-Footer ist per Vendor-CSS (.hk-footer-wrap)
   absolut am unteren Rand von .hk-pg-wrapper positioniert. Sobald direkt danach
   ein zweiter, normal fließender Footer (.site-footer) folgt, muss dieser erste
   Footer wieder in den normalen Textfluss gesetzt werden - sonst würde der
   absolut positionierte Footer über dem neuen Footer "schweben".
   Nur hier per Zusatzklasse überschrieben, andere Layouts mit .hk-footer-wrap
   bleiben unverändert. */
.hk-footer-wrap.hk-footer-wrap--stack {
    position: static;
}

/* Der reservierte Bodenabstand von .hk-pg-wrapper war nur für den absolut
   positionierten "Oberfläche"-Footer nötig. Da dieser jetzt normal im
   Textfluss liegt und der neue Footer direkt danach folgt, würde dieser
   Abstand als leere Fläche unter dem neuen Footer stehen bleiben. */
.hk-pg-wrapper.hk-pg-wrapper--mit-rechtsfooter {
    padding-bottom: 0;
}

/* Ohne diese Regel richtet sich die Höhe der Seite nur nach dem Inhalt: ist
   der Inhalt kürzer als der Bildschirm, landet der neue Footer irgendwo in
   der Bildschirmmitte statt ganz unten. Als CSS-Grid mit zwei Zeilen umgesetzt:
   Zeile 1 (Inhalt) "minmax(0, 1fr)", Zeile 2 (Footer) "auto".

   Eigentlicher Übeltäter war aber JavaScript, nicht CSS: die Vorlage
   (public/assets/dist/js/init.js, Funktion setHeightWidth(), ausgelöst bei
   jedem Laden UND bei jedem resize-Event) setzt per jQuery einen Inline-Style
   `min-height` in Höhe von window.innerHeight direkt auf .hk-pg-wrapper -
   unabhängig vom Footer. Inline-Styles schlagen normale Stylesheet-Regeln,
   daher half reines "min-height: 0" ohne !important nichts: die Inhalts-Zeile
   wurde per JS auf die volle Fensterhöhe gezwungen UND der Footer kam per
   Grid/Flex noch obendrauf - man musste scrollen, um ihn zu sehen.
   !important ist hier nötig, um genau diesen (nicht per !important gesetzten)
   Inline-Style zu überschreiben. Nur für unsere Layouts mit Footer gescoped,
   die Vorlagen-Funktion selbst bleibt für alle anderen Fälle unangetastet. */
.hk-wrapper.hk-wrapper--mit-rechtsfooter {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 100vh;
}

.hk-wrapper.hk-wrapper--mit-rechtsfooter .hk-pg-wrapper {
    min-height: 0 !important;
    /* Grid-Kinder haben per Default auch min-width:auto (dieselbe Falle wie bei
       min-height): breiter Inhalt (z.B. eine breite Tabelle ohne eigenes
       Scroll-Wrapping, wie auf der "Summary"-Seite) hätte sonst die ganze
       Grid-Spalte und damit die Seite in die Breite gedrückt, statt innerhalb
       des Containers zu bleiben bzw. selbst zu scrollen. */
    min-width: 0;
}

/* ==========================================================================
   Seiten-Footer (rechtliche Links)
   Eigenständiger Footer unterhalb des bestehenden "Oberfläche"-Footers, volle
   Seitenbreite. Farbverlauf auf Basis des App-Primärtons (#6E91AD) mit einem
   farbigen Akzentstreifen, damit er sich von der (ebenfalls dunklen) Menüleiste
   abhebt und nicht zu trist wirkt.
   ========================================================================== */
.site-footer {
    position: relative;
    /* Startet links exakt in der Farbe der Menüleiste (#233c46), damit der Footer
       optisch daran anschließt, und geht nach rechts ins kräftigere Blau über. */
    background: linear-gradient(90deg, #233c46 0%, #334d66 45%, #365776 100%);
    width: 100%;
    overflow: hidden;
}

/* Auf den Nachfahren-Elementen selbst gesetzt (nicht nur vererbt): einzelne
   Elemente (z.B. Bootstrap-Klassen wie .row/.col-12) bringen teils ihre
   eigene font-family mit, die eine nur vererbte Angabe sonst überschreibt.
   !important stellt sicher, dass Aptos wirklich überall in Footer und
   Rechtsdokumenten greift, nicht nur dort, wo nichts anderes dazwischenfunkt. */
.site-footer,
.site-footer * {
    font-family: Aptos,
        inherit, Calibri, Arial, Helvetica, sans-serif !important;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f4a261 0%, #e7061d 35%, #6ea0d9 70%, #2fb897 100%);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    padding: 24px 32px;
}

/* Im Grundzustand bewusst ohne background-color: der Link soll als reiner
   Text im Footer wirken, nicht wie ein Button. padding/border-radius bleiben
   trotzdem gesetzt, damit bei Hover/Focus (siehe unten) exakt die Pill-Form
   des Buttons erscheint, ohne dass sich Text/Icon dabei verschieben. */
.site-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 999px;
    color: #dfeef6;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Erst bei Hover/Focus wird der Link zum "Button": Hintergrund erscheint,
   Text wird weiß, leichtes Anheben per translateY. */
.site-footer__link:hover,
.site-footer__link:focus {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.site-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

.site-footer__icon--terms {
    background-color: rgba(47, 184, 151, 0.3);
    color: #8ff2d9;
}

.site-footer__icon--privacy {
    background-color: rgba(244, 162, 97, 0.3);
    color: #ffcb9a;
}

.site-footer__icon svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
}

.site-footer__divider {
    width: 1px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
    .site-footer__inner {
        padding: 18px 20px;
    }

    .site-footer__divider {
        display: none;
    }

    .site-footer__link {
        white-space: normal;
        text-align: center;
    }
}

/* ==========================================================================
   Rechtsdokumente (Nutzungsbedingungen / Datenschutzerklärung)
   ========================================================================== */
.rechtsdokument-wrapper {
    max-width: 980px;
    padding-top: 10px;
    padding-bottom: 30px;
}

/* Auf den Nachfahren-Elementen selbst gesetzt (nicht nur vererbt) - einzelne
   Elemente bringen teils ihre eigene font-family mit (z.B. Bootstrap-Klassen),
   die eine nur vererbte Angabe sonst überschreibt. !important stellt sicher,
   dass Aptos wirklich in allen Überschriften/Absätzen/Listen greift. */
.rechtsdokument-wrapper,
.rechtsdokument-wrapper * {
    font-family: Aptos, inherit, Calibri, Arial, Helvetica, sans-serif !important;
}

.rechtsdokument-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.rechtsdokument-titel {
    margin-bottom: 2px;
}

.rechtsdokument-gueltig-ab {
    color: #6c757d;
}

/* Eigener Button statt Bootstrap btn-outline-primary: passt zur Pill-Optik
   des neuen Footers (Farbverlauf im App-Blau, weicher Schatten, Hover-Lift)
   statt der schlichten/leer wirkenden Outline-Variante. */
.rechtsdokument-druck-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: none;
    border-radius: 13px;
    background: linear-gradient(135deg, #6ea0d9 0%, #4d7396 100%);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(45, 74, 98, 0.3);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.rechtsdokument-druck-btn:hover,
.rechtsdokument-druck-btn:focus {
    background: linear-gradient(135deg, #7fb0e6 0%, #5a84a9 100%);
    box-shadow: 0 4px 10px rgba(45, 74, 98, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.rechtsdokument-druck-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(45, 74, 98, 0.35);
}

.rechtsdokument-druck-btn .feather-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

.rechtsdokument-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Zweitrangige Aktion neben "Drucken": gleiche Pill-Form, aber als dezenter
   Outline-Button (statt gefüllt), damit die Priorität zwischen beiden Buttons
   optisch klar bleibt. */
.rechtsdokument-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 1.5px solid #6ea0d9;
    border-radius: 13px;
    background: #ffffff;
    color: #4d7396;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rechtsdokument-download-btn:hover,
.rechtsdokument-download-btn:focus {
    background: #6ea0d9;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.rechtsdokument-download-btn:active {
    transform: translateY(0);
}

.rechtsdokument-download-btn .feather-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

.rechtsdokument-content {
    --policy-border: #dde3ea;
    --policy-heading: #1f2d3d;
    --policy-text: #4e5d6c;

    border: 1px solid var(--policy-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 24px;
}

.rechtsdokument-content .policy-h1 {
    margin: 0 0 18px;
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--policy-heading);
}

.rechtsdokument-content .policy-h2 {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--policy-heading);
}

/* "Funktionsübersicht" (Leistungsbeschreibung) ist ein Oberbegriff über mehrere Unterabschnitte -
   deshalb bewusst mit mehr Abstand nach oben und in derselben Schriftgröße wie der Deckblatt-Titel
   "Leistungsbeschreibung", statt der normalen policy-h2-Größe. */
.rechtsdokument-content .policy-h2--oberbegriff {
    margin-top: 20px;
    font-size: 1.6rem;
}

.rechtsdokument-content .policy-h3 {
    margin: 14px 0 8px;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--policy-heading);
}

.rechtsdokument-content .policy-p,
.rechtsdokument-content .policy-li {
    margin: 0 0 10px;
    word-break: break-word;
    color: var(--policy-text);
    font-size: 0.83rem;
    line-height: 1.55;
}

/* Nur in der Leistungsbeschreibung (nicht bei Nutzungsbedingungen/Datenschutzerklärung, die
   denselben .policy-li nutzen): engere Listenpunkte, da hier viele kurze Aufzählungen
   (Haupt-/Zusatzfunktionen) stehen, bei denen der normale Absatzabstand zu viel Leerraum erzeugt.
   Gilt bewusst für Anzeige UND Druck/PDF gleichermaßen (keine gesonderte @media print-Regel nötig,
   da print hier ohnehin keinen abweichenden margin-Wert setzt). */
.rechtsdokument-content .leistungsbeschreibung-inhalt .policy-li {
    margin: 0 0 1px;
}

.rechtsdokument-content .policy-ul {
    margin: 0 0 10px;
    padding-left: 25px;
}

.rechtsdokument-content .policy-ul--nested {
    margin: 4px 0 0;
}

/* Empfängerliste (Punkt 4 Datenschutzerklärung): einheitlich, ohne Icons/Farben
   pro Kategorie - nur die Art der Daten (Label) ist fett/dunkel hervorgehoben,
   der Anbieter selbst bleibt normal/gräulich. */
.rechtsdokument-content .policy-empfaenger-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 14px;
    padding-left: 20px;
}

.rechtsdokument-content .policy-empfaenger-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rechtsdokument-content .policy-empfaenger-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--policy-heading);
}

.rechtsdokument-content .policy-empfaenger-wert {
    font-weight: 400;
    color: #7a8791;
    font-size: 0.95rem;
}

.rechtsdokument-content .policy-hr {
    margin: 26px 0;
    border: 0;
    border-top: 1px solid var(--policy-border);
}

.rechtsdokument-content .policy-hr:last-child {
    display: none;
}

.rechtsdokument-content .policy-strong {
    font-weight: 700;
    color: var(--policy-heading);
}

.rechtsdokument-content a {
    color: #6E91AD;
}

/* Druckansicht: Navigation, Menü und Footer ausblenden, nur den Inhalt drucken */

/* Nur beim Drucken sichtbares Logo (siehe .rechtsdokument-print-logo unten) */
.rechtsdokument-print-logo {
    display: none;
}

@media print {
    .hk-navbar,
    .hk-nav,
    #hk_nav_backdrop,
    .hk-settings-panel,
    .hk-footer-wrap,
    .site-footer,
    .no-print {
        display: none !important;
    }

    .hk-pg-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* body/.hk-pg-wrapper haben im Bildschirm-Layout einen grauen Hintergrund
       (für den "Karten"-Look der Anwendung). Beim Drucken soll aber überall
       reines Weiß zu sehen sein, nicht dieser graue Rand um den Inhalt. */
    html,
    body,
    .hk-wrapper,
    .hk-pg-wrapper,
    .rechtsdokument-wrapper {
        background: #ffffff !important;
    }

    /* box-decoration-break: clone sorgt dafür, dass padding-top NICHT nur am
       Anfang des gesamten (mehrseitigen) Blocks erscheint, sondern auf JEDEM
       einzelnen Seiten-Fragment erneut - dadurch bekommt jede gedruckte Seite
       zuverlässig denselben reservierten Platz oben für das Logo. */
    .rechtsdokument-content {
        border: none;
        box-shadow: none;
        padding: 0;
        padding-top: 26mm;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* position:fixed wird von Browsern beim Drucken auf jeder Seite wiederholt.
       Feste maximale Höhe, damit das Logo (und der reservierte Platz oben)
       gleich bleibt, auch wenn das Bild später durch ein anderes mit anderem
       Seitenverhältnis ersetzt wird. */
    .rechtsdokument-print-logo {
        display: block !important;
        position: fixed;
        top: 6mm;
        right: 10mm;
        max-height: 18mm;
        width: auto;
    }

    /* Etwas engere Abstände im Druck, damit mehr Inhalt pro Seite passt und
       nicht nur ein kleiner Rest auf eine zusätzliche Seite rutscht. */
    .rechtsdokument-content .policy-h1 {
        margin-bottom: 12px;
    }

    .rechtsdokument-content .policy-h3 {
        margin: 10px 0 6px;
    }

    .rechtsdokument-content .policy-hr {
        margin: 20px 0;
    }

    /* Deckblatt der Leistungsbeschreibung: im Druck deutlich größere Abstände zwischen den
       Trennstrichen und größere Schrift, damit die erste Seite nicht nur bis zur Hälfte
       befüllt ist (auf dem Bildschirm reicht die normale/kompaktere Größe aus). */
    .leistungsbeschreibung-deckblatt .policy-hr {
        margin: 40px auto;
    }

    .leistungsbeschreibung-deckblatt-titel {
        font-size: 2.5rem;
    }

    .leistungsbeschreibung-deckblatt-plattform {
        font-size: 2.1rem;
    }

    .leistungsbeschreibung-deckblatt-label,
    .leistungsbeschreibung-deckblatt-feld {
        font-size: 1.2rem;
    }

    /* "Funktionsübersicht" - im Druck noch mehr Abstand nach oben (steht direkt nach einem
       erzwungenen Seitenumbruch am Seitenanfang) und in derselben Größe wie der Deckblatt-Titel
       im Druck. */
    .rechtsdokument-content .policy-h2--oberbegriff {
        margin-top: 60px;
        font-size: 2.3rem;
    }

    /* Gemeinsamer Plattform-Teil (partials/plattform-gemeinsam.blade.php, Betriebsmodell bis
       Onboarding-Prozesse): hier stehen viele policy-h2--oberbegriff-Überschriften dicht
       aufeinander - die große, dem Deckblatt-Titel angeglichene Größe von oben wäre hier zu
       wuchtig und würde unnötig Platz/Seiten kosten. Deutlich kleiner, näher an der normalen
       policy-h2-Größe. Nur hier per Wrapper-Klasse überschrieben, "Funktionsübersicht" & Co.
       bleiben groß. */
    .leistungsbeschreibung-plattform-abschnitt .policy-h2--oberbegriff {
        margin-top: 16px;
        font-size: 1.2rem;
    }

    /* Überschriften sollen sich im Druck klar vom (dunkelgrauen) Fließtext abheben - die
       normale, dunkelblaue policy-heading-Farbe reicht dafür beim Drucken nicht, echtes
       Schwarz erzeugt mehr Kontrast. Gilt bewusst nur im Druck, nicht am Bildschirm. */
    .rechtsdokument-content .policy-h1,
    .rechtsdokument-content .policy-h2,
    .rechtsdokument-content .policy-h3,
    .leistungsbeschreibung-deckblatt-titel,
    .leistungsbeschreibung-deckblatt-plattform {
        color: #000000;
    }

    /* Überschriften dürfen nicht allein am Seitenende stehen bleiben - sie
       bleiben immer mit der nachfolgenden Zeile zusammen. */
    .rechtsdokument-content .policy-h1,
    .rechtsdokument-content .policy-h2,
    .rechtsdokument-content .policy-h3 {
        break-after: avoid-page;
        break-inside: avoid;
    }

    /* Listen und Absätze möglichst nicht mittendrin umbrechen: sie wandern
       als Ganzes auf die nächste Seite, wenn sie nicht mehr passen, statt
       mitten in einem Punkt zu reißen. Bei Blöcken, die länger als eine
       Seite sind, muss der Browser trotzdem intern umbrechen. */
    .rechtsdokument-content .policy-ul,
    .rechtsdokument-content .policy-p,
    .rechtsdokument-content .policy-li {
        break-inside: avoid;
    }

    /* Ein Punkt ohne eigene Unterüberschriften (h3) - also nur eine Überschrift
       mit anschließenden Absätzen/Listenpunkten a), b), c) - wird als Ganzes
       zusammengehalten. Ohne diese Regel könnte z.B. Punkt 7 kurz vor Seitenende
       beginnen, nur ein winziges Stückchen Text zeigen und dann sofort wieder
       umbrechen - das sieht abgerissen aus. Passt der ganze Punkt nicht mehr auf
       den Rest der Seite, rutscht er komplett auf die nächste Seite.
       Punkte MIT h3-Unterüberschriften (z.B. Punkt 3 mit 3.1-3.3) sind davon
       ausgenommen: dort ist stattdessen jeder Unterpunkt (.policy-subsection)
       einzeln zusammengehalten, siehe unten - so darf z.B. 3.2 auf die nächste
       Seite rutschen, ohne dass Punkt 3 komplett verschoben werden muss. */
    .rechtsdokument-content .policy-section:not(:has(.policy-h3)) {
        break-inside: avoid;
    }

    .rechtsdokument-content .policy-subsection {
        break-inside: avoid;
    }

    /* Jede Empfänger-Karte (Punkt 4) bleibt beim Drucken als Ganzes zusammen. */
    .rechtsdokument-content .policy-empfaenger-item {
        break-inside: avoid;
    }
}

/* ==========================================================================
   Leistungsbeschreibungen (nutzt denselben rechtsdokument- und policy-Wrapper
   wie Nutzungsbedingungen/Datenschutzerklärung oben - hier nur die zusätzlichen
   Klassen für Deckblatt, Screenshots und Tabellen aus den Word-Vorlagen)
   ========================================================================== */
/* Deckblatt = Seite 1 der Leistungsbeschreibung in Druck/PDF - zentrierter Titelseiten-Look
   wie im Ursprungs-Word-Dokument, statt normaler linksbündiger Fließtext-Absätze. */
.leistungsbeschreibung-deckblatt {
    padding: 30px 20px;
    margin: 0 0 20px;
    text-align: center;
}

.leistungsbeschreibung-deckblatt-titel {
    margin: 0 0 43px;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--policy-heading, #1f2d3d);
}

.leistungsbeschreibung-deckblatt-plattform {
    margin: 0 0 43px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--policy-heading, #1f2d3d);
}

.leistungsbeschreibung-deckblatt-label,
.leistungsbeschreibung-deckblatt-feld {
    margin: 0 0 14px;
    color: var(--policy-text, #4e5d6c);
    font-size: 0.95rem;
    line-height: 1.5;
}

.leistungsbeschreibung-deckblatt-label {
    font-size: 1rem;
}

.leistungsbeschreibung-deckblatt .policy-hr {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* Statusampel (Bearbeitungsstatus je Arbeitnehmer) - im Original-Worddokument eine kleine
   Grafik mit vier farbigen Kästchen, hier als Tabelle mit vier gleich breiten, über die ganze
   Breite gehenden Zellen nachgebaut (bewusst eine <table>, kein Grid/Flexbox - mPDF setzt beides
   nicht zuverlässig um, eine Tabelle dagegen schon, siehe rechtliches/CLAUDE.md). Farben 1:1 aus
   der Bearbeitungsstatus-Spalte der VP-Suche übernommen (.status-1 / .status-4 / .status-6 in
   dieser Datei, Abschnitt ganz oben). */
.leistungsbeschreibung-statusampel {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 6px;
    margin: 8px 0 4px;
}

.leistungsbeschreibung-status {
    width: 25%;
    padding: 21px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.leistungsbeschreibung-status--gruen {
    background: #68f768;
    color: #000000;
}

.leistungsbeschreibung-status--gelb {
    background: yellow;
    color: #000000;
}

.leistungsbeschreibung-status--rot {
    background: #f71b31;
    color: #ffffff;
}

/* Responsiv: unter 576px werden aus den vier Tabellenzellen vier volle Zeilen
   (klassischer "Responsive Table"-Trick per display:block statt JS). */
@media (max-width: 576px) {
    .leistungsbeschreibung-statusampel,
    .leistungsbeschreibung-statusampel tbody,
    .leistungsbeschreibung-statusampel tr {
        display: block;
        width: 100%;
    }

    .leistungsbeschreibung-status {
        display: block;
        width: auto;
        margin-bottom: 6px;
    }
}

.leistungsbeschreibung-screenshot-block {
    margin: 10px 0 16px;
    text-align: center;
}

.leistungsbeschreibung-screenshot {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--policy-border, #dde3ea);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.leistungsbeschreibung-screenshot-caption {
    margin: 6px 0 0;
    color: #8a97a3;
    font-size: 0.8rem;
}

.leistungsbeschreibung-tabelle-wrap {
    overflow-x: auto;
    margin: 0 0 10px;
}

.leistungsbeschreibung-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.leistungsbeschreibung-tabelle th,
.leistungsbeschreibung-tabelle td {
    padding: 8px 12px;
    border: 1px solid var(--policy-border, #dde3ea);
    text-align: left;
    color: var(--policy-text, #4e5d6c);
}

.leistungsbeschreibung-tabelle th {
    background: #f8f9fb;
    color: var(--policy-heading, #1f2d3d);
    font-weight: 700;
}

@media print {
    /* Screenshots dürfen nicht mitten im Bild umbrechen, sonst reißt der
       Seitenumbruch quer durchs Bild statt davor oder danach. */
    .rechtsdokument-content .leistungsbeschreibung-screenshot-block {
        break-inside: avoid;
    }

    .leistungsbeschreibung-screenshot {
        max-height: 220mm;
        max-width: 100%;
    }

    /* 3 Screenshots (Pos. 7) sollen alle gleich breit sein (siehe leistungsbeschreibung-bav.blade.php).
       Bewusst feste width statt max-height: eine Höhenbegrenzung ließ Bilder mit anderem
       Seitenverhältnis (mehr Inhalt in der Höhe) schmaler wirken als die anderen. 90% statt 100%,
       weil die drei Bilder bei voller Breite zusammen ca. 263mm Höhe ergeben (nachgerechnet anhand
       der echten Bildmaße), die Seite aber nur ca. 252mm nutzbare Höhe hat - 1:1 in pdf.blade.php
       gepflegt. */
    .leistungsbeschreibung-screenshot--kompakt {
        width: 90%;
    }

    /* Pos. 14 (Störfallhistorie, screenshot-22) und Pos. 15 (Verzeichnis Urteile/Gesetze,
       screenshot-23) landen zusammen mit Pos. 13 auf einer Seite (kein page-break dazwischen).
       Bei normaler/kompakter Breite passen aber nicht mehr beide Bilder + der komplette Text auf
       diese eine Seite - das zweite Bild würde allein auf eine sonst fast leere Folgeseite
       rutschen. Exakt anhand der tatsächlichen mPDF-Y-Position nachgerechnet (Mpdf::$y nach
       jedem Abschnitt geprüft, siehe Konversationsverlauf): bei 65% Breite bleiben nach beiden
       Bildern noch ca. 15mm Puffer auf der Seite. 1:1 in pdf.blade.php gepflegt. */
    .leistungsbeschreibung-screenshot--sehr-kompakt {
        width: 65%;
    }

    /* Erzwingt einen Seitenumbruch VOR dem markierten Abschnitt (Deckblatt braucht das nicht,
       da es ohnehin das erste Element ist) - siehe rechtliches/CLAUDE.md. */
    .rechtsdokument-content .leistungsbeschreibung-page-break {
        break-before: page;
        page-break-before: always;
    }
}