* {
    padding: 0;
    box-sizing: border-box;
}

a:link { color:#FF0000; text-decoration:underline }
a:visited { color:#FF0000; text-decoration:underline }
a:hover { color:#006F00;}
a:active { color:#FF0000; text-decoration:underline }
a:focus { color:#FF0000;}

html, body {
    margin: 0;
    height: 100%;
    font-family: Arial;
    font-size: 12pt;
    /*background-color: #FFFF66; */
    background-color: #eaeaea; /* Light Grey */
    color: #000000;
}

td.logo {font-family: Arial; background-color: #FFFF66; color: rgb(0, 0, 0);}
body.print {font-family: Arial; font-size: 12pt; color: rgb(0, 0, 0);}
td.banner {font-family: Arial; background-color: #FFFF66; color: rgb(0, 0, 0);}
td.links {font-family: Arial; font-size: 12pt; background-color: #FFFF66; color: rgb(0, 0, 0);}
td.kopf {font-family: Arial; background-color: #FFFF66; color: rgb(0, 0, 0);}
td.std {font-family: Arial; font-size: 12pt; background-color: #FFFF66; color: rgb(0, 0, 0);}
td.rechts {font-family: Arial; font-size: 10pt; background-color: #FFFF66; color: rgb(0, 0, 0);}
td.fuss {font-family: Arial; font-size: 10pt; background-color: #FFFF66; color: rgb(0, 0, 0);}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-rows: 130px 1fr 75px;      /* Header, Hauptbereich, Footer */
    grid-template-columns: 165px 1fr;        /* Sidebar, Inhalt */
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    height: 100vh;
}

/* Bereiche */
header {
    grid-area: header;
    display: flex;
    align-items:normal;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-direction: column;
}

/* Sidebar nach unten erweitern */
.sidebar {
    grid-area: sidebar;
    background: #111;
    padding: 20px 0 0 0;
    overflow: hidden;
    position: sticky;
    top: 120px;
    height: calc(100vh - 205px);
    display: flex;              /* Flexbox aktivieren */
    flex-direction: column;     /* Links untereinander */
}

/* Admin-Links ganz unten */
.sidebar .admin-links {
    margin-top: auto;           /* schiebt den Block nach unten */
    padding-top: 20px;
}

.sidebar .admin-links hr {
    border: 0;
    border-top: 1px solid #444;
    margin: 10px 0;
}

/* The navigation menu links */
.sidebar a{
  padding: 6px 8px 6px 12px;
  /*padding: 6px 8px 6px 12px;*/
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar p, center{
  padding: 6px 8px 6px 12px;
  /*padding: 6px 8px 6px 12px;*/
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
}

.content-area {
    grid-area: content;
    padding: 0px 10px;
    overflow: auto;
}

footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background-color: #111; /* Black */
    color: #818181;
}

/* Responsives Grid */
@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: 130px auto 1fr 75px;
        grid-template-areas:
            "header"
            "sidebar"
            "content"
            "footer";
    }

    .sidebar {
        position: relative;
        top: 0;
        height: auto;
    }
}

/* Toggle Container Styles */
        .toggle-container {
            margin: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 5px;
            width: 99%;
        }

        .toggle-header {
            cursor: pointer;
            font-weight: bold;
            -webkit-user-select: none;
            user-select: none;
        }

        .toggle-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, opacity 0.5s ease;
            opacity: 0;
        }

        .toggle-content.open {
            max-height: 600px; /* muss größer als max. Inhaltshöhe sein */
            opacity: 1;
        }

/* Scrollable Table Styles */
   .scrollable-table-container {
  overflow-y: auto;
  border: 1px solid #000;
}
.scrollable-table-container table th {
  position: sticky;
  top: 0;
  background-color: #343434;
  color: #FFFFFF;
  z-index: 10;
  padding: 6px 8px;
  border-bottom: 1px solid #000000;
  text-align: center;
}
.scrollable-table-container table td {
  padding: 4px 6px;
  text-align: center;
  /* font-size: 11pt; */
}

    /* Knopf für Dateidownload */
.custom-button:link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #006F00;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.custom-button:visited {
    display: inline-block;
    padding: 10px 20px;
    background-color: #006F00;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #00ff00;
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

.orange-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #a23604;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Knopf für neue Adresse */
.newadress-button:link {
    display: inline-block;
    padding: 2px 50px 2px 50px;
    background-color: #006F00;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.newadress-button:visited {
    display: inline-block;
    padding: 2px 50px 2px 50px;
    background-color: #006F00;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.newadress-button:hover {
    background-color: #00ff00;
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

.editform {
    font-family: Arial, sans-serif;
    font-size: 14pt;    
}

.editform tr{
    background-color: #CCCCCC;    
}

#submitRow {
    background-color: #FFFFFF;
}

/* Einheitlicher Look für Formularelemente innerhalb der editform */
.editform input,
.editform select,
.editform textarea,
.editform button {
    font-family: Arial, sans-serif;
    font-size: 14pt;           /* gleiche Schriftgröße wie Text */
    padding: 8px 10px;         /* angenehme Innenabstände */
    border: 1px solid #999;    /* dezente Rahmenfarbe */
    border-radius: 8px;        /* gleiche Rundung wie Buttons */
    box-sizing: border-box;
}

/* Einheitliche Farben für Texteingaben und Auswahlfelder */
.editform input[type="text"],
.editform select,
.editform textarea {
    background-color: #FFFFFF;
    color: #000000;
}

/* Einheitlicher Button-Style */
.editform input[type="submit"],
.submit-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #006F00;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 16px;           /* leicht größer für Buttons */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hover-Effekt für Buttons */
.editform input[type="submit"]:hover,
.submit-button:hover, .orange-button:hover {
    background-color: #00ff00;
    color: #000000;
    text-decoration: underline;
}

.section-title {
  font-weight: bold;
  text-decoration: underline;
  padding-block: 0.83em;
  line-height: 1.2;
}

.section-title > div:first-child {
  font-size: 1.5em;   /* wie h2 */
  margin: 0;
}

.section-title .sub {
  font-size: 1.17em;  /* wie h3 */
  margin: 0;
}

/* Zwei Spalten nebeneinander für Filter + Suche */
.two-col {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 99%;
}

.two-col > .two-col-col {
    flex: 1 1 0;
}

/* ==========================================
   Responsive Anpassung für kleinere Displays
   ========================================== */
@media screen and (max-width: 1700px) {
    .two-col > .two-col-col:first-child {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .two-col > .two-col-col:last-child {
        flex: 0 0 59%;
        max-width: 59%;
    }
}

/* Toggle-Box im 2-Spalten-Layout soll volle Spaltenbreite nutzen */
.two-col .toggle-container {
    width: 100%;   /* überschreibt die bestehende Breite */
    min-height: 38px; /* Einheitliche Höhe für .toggle-container und  .search-container */
}

/* Rechte Suchbox so stylen wie die linke Klappbox (geschlossen) */
/* Rechte Suchbox so stylen wie die linke Klappbox (geschlossen) */
.two-col .search-container {
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0px 5px 0px 5px;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 38px;
}

/* Formular in der rechten Box ohne Extra-Ränder */
.search-container form {
    display: block;
    width: 100%;
    margin: 0;
}

/* Innere Hülle ohne Einfluss auf die Höhe */
.search-box {
    width: 100%;
}

/* Sichtbare Zeile */
.search-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* Plus + Text wie links */
.search-toggle-title {
    cursor: pointer;
    font-weight: bold;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    line-height: normal;
    flex: 0 0 auto;
}

/* Plus nicht speziell aufblasen */
#searchToggleIndicator {
    display: inline;
}

/* Feld wieder ohne feste CSS-Breite */
.search-container input[type="text"] {
    font-family: Arial, sans-serif;
    font-size: 14pt;
    padding: 2px 5px;
    margin: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
}

/* Button wie früher */
.search-container .submit-button {
    padding: 4px 20px;
    font-size: 16px;
    margin: 0;
    flex: 0 0 auto;
}

.search-options {
    padding-top: 10px;
}

.search-options label {
    display: inline-block;
    margin-bottom: 4px;
}

.sort-header-nowrap {
    white-space: nowrap;
    display: inline-block;
}

/* Jeder Linkblock unteilbar, Umbrüche nur zwischen den Blöcken */
.filterlink {
    white-space: nowrap;
    display: inline-block;   /* sorgt für „alles oder nichts“ in einer Zeile */
    margin-right: 6px;       /* Abstand wie dein bisheriges   */
}

/* ==========================================
   PDF-Druck-Hinweisbox
   ========================================== */
.print-hint {
  margin-top: 20px;
  padding: 15px 20px;
  border: 2px solid #004080;
  background-color: #e8f0ff;
  color: #002850;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  max-width: 700px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.print-hint h3 {
  margin-top: 0;
  color: #004080;
  font-size: 1.2em;
}

.print-hint ol {
  margin: 8px 0 0 20px;
}

.print-hint li {
  margin-bottom: 5px;
}

.print-hint ul {
  margin: 5px 0 0 15px;
  list-style-type: disc;
}

.print-hint strong {
  color: #002850;
}

.print-hint small {
  display: block;
  margin-top: 10px;
  color: #444;
  font-size: 0.9em;
}

.print-hint.warning {
  background-color: #fff8cc;
  border-color: #cc9900;
  color: #4a3b00;
}

/* ==========================================
   Schnellhilfe-Box
   ========================================== */
.editform-fast-help {
  margin: 20px auto;   /* oben/unten 20px, links/rechts auto */
  text-align: left;
  max-width: 75%;
  padding: 15px 20px;
  border: 2px solid #004080;
  background-color: #e8f0ff;
  color: #002850;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.editform-fast-help h3 {
  margin-top: 0;
  color: #004080;
  font-size: 1.2em;
}

/* ===================================
   Druckansicht (Spalten ausblenden)
   =================================== */
@media print {
    /* Alles mit dieser Klasse wird beim Drucken ausgeblendet */
    .no-print {
        display: none !important;
    }
}

.zoom-control {
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-weight: normal;
    color: #FFFFFF;
}

.zoom-control .zoom-link:link,
.zoom-control .zoom-link:visited,
.zoom-control .zoom-link:active,
.zoom-control .zoom-link:focus {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16pt;
    line-height: 1;
    text-decoration: underline;
    -webkit-text-decoration-color: #FF0000;
    text-decoration-color: #FF0000;
}

.zoom-control .zoom-link:hover {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16pt;
    line-height: 1;
    text-decoration: underline;
    -webkit-text-decoration-color: #006F00;
    text-decoration-color: #006F00;
}

.zoom-control .zoom-disabled {
    color: #888888;                  /* Symbol grau */
    font-weight: bold;
    font-size: 16pt;
    line-height: 1;
    text-decoration: none;
    cursor: default;
}

/* ==========================================
   Laufschrift modern (ohne marquee)
   ========================================== */
/* Wrapper sorgt für vertikale Zentrierung */
.lauftext-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    min-width: 0;
}

/* Abstand außen */
.lauftext-outer {
    padding: 6px;
    width: 100%;
    min-width: 0;

}

/* Kasten */
.lauftext-container {
    width: 100%;
    height: 44px;
    overflow: hidden;
    background-color: #343434;
    border: 2px solid #006F00;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 18px;
}

/* Text */
.lauftext-content {
    white-space: nowrap;
    display: inline-block;
    padding-left: calc(100% - 20px);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 28px;
    font-weight: bold;
    color: #006F00;
    line-height: 1.2;
    animation: lauftext-scroll 38s linear infinite;
}

/* Animation */
@keyframes lauftext-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ==========================================
   KRAUS-App – Kopfbereich und CDR-Importer
   ========================================== */
.app-header-table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

.app-header-logo {
    width: 250px;
    padding: 8px 20px 8px 0;
    vertical-align: middle;
}

.app-header-logo img {
    display: block;
    max-width: 230px;
    max-height: 105px;
    width: auto;
    height: auto;
}

.app-header-title {
    width: 330px;
    vertical-align: middle;
}

.app-header-title h1 {
    margin: 0;
    font-size: 28px;
}

.app-header-title p {
    margin: 8px 0 0 0;
    font-size: 18px;
}

.app-header-news {
    vertical-align: middle;
}

.dev-system-banner {
    background: #ff0000;
    color: #ffffff;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

.cdr-import-message {
    width: min(900px, 100%);
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #777777;
    border-radius: 8px;
}

.cdr-import-success {
    background: #e5f4e5;
    border-color: #006f00;
}

.cdr-import-error {
    background: #f9e4e4;
    border-color: #a00000;
}

.cdr-import-result {
    width: min(600px, 100%);
    background: #000000;
    margin: 12px 0;
}

.cdr-import-result th,
.cdr-import-result td {
    padding: 6px 10px;
    background: #cccccc;
}

.cdr-import-result th {
    width: 70%;
    text-align: right;
}

.cdr-import-result td {
    width: 30%;
    text-align: left;
}

.cdr-import-hints {
    width: min(900px, 100%);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #ffffff;
    border: 1px solid #999999;
    padding: 10px;
}

.cdr-import-form {
    margin-top: 18px;
}

/* submit-button auch für echte <button>-Elemente vollständig definieren */
button.submit-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #006f00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button.submit-button:hover {
    background-color: #00ff00;
    color: #000000;
    text-decoration: underline;
}

@media screen and (max-width: 900px) {
    .app-header-logo {
        width: 190px;
    }
    .app-header-logo img {
        max-width: 170px;
    }
    .app-header-title {
        width: 260px;
    }
}

/* ==========================================
   KRAUS-App – vorläufiges Firmendesign 2026-07
   Firmenrotbraun: #7C2D25
   Creme-Hintergrund: #FDF8F0
   ========================================== */

:root {
    --kraus-brown: #7C2D25;
    --kraus-cream: #FDF8F0;
}

header,
.content-area {
    background-color: var(--kraus-cream);
}

header {
    padding: 0;
}

.app-header {
    display: flex;
    width: 100%;
    height: 100%;
    color: var(--kraus-brown);
}

.app-header-left,
.app-header-right {
    width: 50%;
    min-width: 0;
    display: flex;
    align-items: center;
}

.app-header-left {
    padding: 8px 18px;
    gap: 0;
    white-space: nowrap;
}

.app-header-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 195px;
    max-height: 105px;
    flex: 0 0 auto;
}

.app-header-description {
    /* Startet ungefähr dort, wo zuvor das erste „p“ von „-App“ stand. */
    margin-left: 38px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: bold;

    /* Optische statt rein mathematische Zentrierung zum Schriftzug
       KRAUS / BESTATTUNGEN innerhalb des Logos. */
    transform: translateY(5px);
}

.app-header-right {
    justify-content: center;
    padding: 8px 10px 8px 18px;
    box-sizing: border-box;
}

.dev-system-banner {
    width: 100%;
    box-sizing: border-box;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0000;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    font-weight: bold;
    text-align: center;
    padding: 8px 12px;
}

.cdr-import-source-list {
    margin: 8px 0 16px 22px;
    padding: 0;
}

.cdr-import-source-list li {
    margin: 5px 0;
}

.cdr-import-source-result {
    width: min(1050px, 100%);
}

.cdr-import-source-result thead th,
.cdr-import-source-result tbody td {
    text-align: left;
    width: auto;
}

.cdr-import-source-result thead th {
    background-color: #343434;
    color: #ffffff;
}

@media screen and (max-width: 1100px) {
    .app-header-logo {
        max-width: 165px;
    }

    .app-header-description {
        margin-left: 30px;
        font-size: 20px;
        transform: translateY(4px);
    }

    .dev-system-banner {
        min-height: 54px;
        font-size: 24px;
    }
}

/* CDR-Import-Agent */
.transferagent-table {
    width: 75%;
    max-width: 850px;
    border-collapse: collapse;
    margin-bottom: 18px;
}
.transferagent-table th,
.transferagent-table td {
    border: 1px solid #999999;
    padding: 8px 10px;
    text-align: left;
}
.transferagent-table th {
    width: 220px;
    background-color: #D0D0D0;
    text-align: right;
}
.transferagent-status {
    display: inline-block;
    min-width: 150px;
    padding: 7px 12px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.transferagent-running {
    color: #075C12;
    background-color: #DFF3DF;
    border: 1px solid #23943A;
}
.transferagent-not-running {
    color: #8A1010;
    background-color: #F7DDDD;
    border: 1px solid #C94141;
}
.transferagent-message {
    width: 75%;
    max-width: 850px;
    box-sizing: border-box;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 6px;
    font-weight: bold;
}
.transferagent-success {
    color: #075C12;
    background-color: #DFF3DF;
    border: 1px solid #23943A;
}
.transferagent-error {
    color: #8A1010;
    background-color: #F7DDDD;
    border: 1px solid #C94141;
}
.transferagent-form {
    margin: 16px 0 22px 0;
}
.transferagent-log {
    width: 75%;
    max-width: 850px;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #999999;
    background-color: #EFEFEF;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ==========================================
   KRAUS-App – Anrufliste
   Schlichte erste Funktionsversion
   ========================================== */

.anrufliste-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    font-size: 15px;
}

.anrufliste-table th {
    padding: 8px 10px;
    border-top: 1px solid #b8b8b8;
    border-bottom: 1px solid #b8b8b8;
    background-color: #f3f3f3;
    color: #444444;
    text-align: left;
    white-space: nowrap;
}

.anrufliste-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e3e3e3;
    vertical-align: middle;
}

.anrufliste-table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

.anrufliste-table tbody tr:hover {
    background-color: #eef4fb;
}

.anrufliste-icon-column {
    width: 28px;
    padding-left: 6px !important;
    padding-right: 4px !important;
    text-align: center !important;
}

.anrufliste-icon {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
}

.anrufliste-date,
.anrufliste-duration {
    white-space: nowrap;
}

.anrufliste-number {
    color: #666666;
}

.anrufliste-info {
    margin-top: 10px;
    color: #666666;
    font-size: 13px;
}


.agent-global-error {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px 0;
    padding: 14px 18px;
    background: #b00020;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}


/* ==========================================
   KRAUS-App – Anrufliste Schritt 8
   Filter, Pagination und fixierte Tabellenüberschrift
   ========================================== */

.anrufliste-module {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anrufliste-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 0 2px 0;
}

.anrufliste-filters,
.anrufliste-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.anrufliste-filter-button:link,
.anrufliste-filter-button:visited,
.anrufliste-page-button:link,
.anrufliste-page-button:visited,
.anrufliste-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--kraus-brown);
    border-radius: 9px 9px 0 0;
    background-color: var(--kraus-brown);
    color: var(--kraus-cream);
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

.anrufliste-filter-icon {
    width: 17px;
    height: 17px;
    margin-right: 7px;
    flex: 0 0 auto;
}

.anrufliste-filter-button:hover,
.anrufliste-page-button:hover {
    background-color: #63221c;
    color: var(--kraus-cream);
}

.anrufliste-filter-button.is-active:link,
.anrufliste-filter-button.is-active:visited,
.anrufliste-filter-button.is-active {
    background-color: var(--kraus-cream);
    color: var(--kraus-brown);
    border-color: var(--kraus-brown);
}

.anrufliste-page-button {
    border-radius: 6px;
}

.anrufliste-page-button.is-disabled {
    border-color: #b7b1a8;
    background-color: #e4dfd7;
    color: #99938a;
    cursor: default;
}

.anrufliste-scroll-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    border-top: 1px solid #b8b8b8;
    border-bottom: 1px solid #b8b8b8;
    background-color: #ffffff;
}

.anrufliste-scroll-container .anrufliste-table {
    margin: 0;
}

.anrufliste-scroll-container .anrufliste-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    border-top: 0;
    box-shadow: 0 1px 0 #b8b8b8;
}

.anrufliste-table tr.anrufliste-forwarding-row > td {
    vertical-align: middle;
}

.anrufliste-table tr.anrufliste-forwarding-row > td:nth-child(5) {
    line-height: 1.4;
}

.anrufliste-empty {
    margin: 12px 0;
}

@media screen and (max-width: 1100px) {
    .anrufliste-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.content-area:has(.anrufliste-module) { overflow: hidden; min-height: 0; }

/* Standortverwaltung */
.location-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px 0}.location-toolbar h2{margin:0}.location-list{width:100%;border-collapse:collapse;background:#fff}.location-list th{background:#343434;color:#fff;padding:7px;border:1px solid #222}.location-list td{padding:7px;border:1px solid #d0d0d0;vertical-align:middle}.location-list tbody tr:nth-child(even){background:#f3f3f3}.location-list img{border:0;vertical-align:middle}.location-inactive{opacity:.62}.location-status{display:inline-block;padding:3px 9px;border-radius:12px;font-weight:bold}.location-status.active{background:#dff0d8;color:#1d641d;border:1px solid #6ca96c}.location-status.inactive{background:#eee;color:#666;border:1px solid #aaa}.location-error-text{color:#9b1717;font-weight:bold}.location-footnote{font-size:10pt;color:#555}.location-message{padding:12px 14px;margin:0 0 16px;border-radius:5px;font-weight:bold}.location-success{background:#e5f5e3;border:1px solid #4d9545;color:#245f20}.location-error{background:#fbe4e4;border:1px solid #c33;color:#971616}.location-edit-form{width:min(950px,100%)}.location-form-table{width:100%;border-collapse:collapse;background:#fff}.location-form-table th{width:28%;text-align:right;background:#eee;padding:9px;border:1px solid #ccc}.location-form-table td{padding:9px;border:1px solid #ccc}.location-form-table input[type=text],.location-form-table input[type=email],.location-form-table input[type=password],.location-form-table input[type=number],.location-form-table select{width:min(620px,95%);padding:6px}.location-form-table small{display:block;color:#666;margin-top:4px}.location-form-actions{margin-top:16px;display:flex;gap:12px;align-items:center}.location-cancel-button{display:inline-block;padding:8px 16px;border:1px solid #7f2b25;background:#fff8ed;color:#7f2b25!important;text-decoration:none!important;border-radius:5px;font-weight:bold}.location-source-fields{margin-top:20px}.location-delete-box{max-width:800px;padding:18px;background:#fff;border:1px solid #aaa}.location-warning{padding:10px;background:#fff2cc;border:1px solid #d6b656}.transferagent-hint{padding:10px;background:#f2eee6;border:1px solid #c9b99e;max-width:850px}


/* Schritt 8: kosmetische Vereinheitlichung Standortverwaltung */
.location-toolbar{min-height:38px}.location-toolbar h2{font-size:22px;line-height:28px}
.location-list th{white-space:nowrap}.location-list td{text-align:left}
.location-edit-form{width:min(980px,100%);margin-top:0}
.kraus-panel{border:1px solid #7f2b25;background:#fff;margin:0 0 18px 0;box-sizing:border-box}
.kraus-panel-title{min-height:20px;line-height:20px;padding:4px 8px;background:#7f2b25;color:#fff8ed;font-size:16px;font-weight:bold;box-sizing:content-box}
.kraus-panel-title img{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
.kraus-panel-title-danger{background:#ff1010;color:#fff}
.kraus-panel-body{padding:18px;background:#fff}
.kraus-stop-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-7px 7px -7px 0;background:#e00000;color:#fff;border:3px solid #fff;border-radius:50%;font-size:9px;line-height:1;font-weight:900;box-shadow:0 0 0 2px #b40000;vertical-align:middle}
.location-form-table{font-size:16px}
.location-form-table th,.location-form-table td{padding:10px}
.location-form-table input[type=text],.location-form-table input[type=email],.location-form-table input[type=password],.location-form-table input[type=number],.location-form-table select{font-size:16px;line-height:22px;padding:8px}
.location-source-fields{margin-top:24px;padding-top:0}
.location-source-heading{text-align:center;font-size:17px;font-weight:bold;background:#eee;border:1px solid #ccc;border-bottom:0;padding:8px}
.location-source-fields .location-form-table{margin-top:0}
.location-form-actions{margin-top:18px;width:100%}
.location-actions-between{justify-content:space-between}
.location-default-action{box-shadow:0 0 0 2px rgba(127,43,37,.08)}
.location-delete-first,.location-delete-final{display:inline-block;padding:9px 18px;border-radius:5px;font-weight:bold;text-decoration:none!important}
.location-delete-first{background:#a93200;border:1px solid #8f2a00;color:#fff!important}
.location-delete-final{background:#f3eeee;border:1px solid #c99393;color:#9b1717;cursor:pointer}
.location-delete-final:hover,.location-delete-final:focus{background:#d00000;border-color:#a00000;color:#fff}
.location-message{font-size:15px}

/* Schritt 8: kräftigere Retro-Titelleisten und Fehlerbox im neuen Design */
.kraus-panel-title{
    min-height:36px;
    height:36px;
    line-height:36px;
    padding:0 12px;
    display:flex;
    align-items:center;
    box-sizing:border-box;
}
.kraus-panel-title img{
    width:20px;
    height:20px;
    margin:0 8px 0 0;
    vertical-align:middle;
    flex:0 0 auto;
}
.kraus-stop-icon{
    width:26px;
    height:26px;
    margin:0 9px 0 0;
    border-width:2px;
    font-size:8px;
    flex:0 0 auto;
}
.kraus-panel-error{
    border-color:#e00000;
}
.kraus-panel-error .kraus-panel-body{
    background:#ffe3e3;
    color:#a40000;
    border-top:1px solid #e00000;
}
.kraus-panel-error .kraus-panel-body strong{
    color:#8d0000;
}

/* Schritt 8: Sicherheitsabfragen LOG-Rotation und Archiv-Reimport */
.kraus-panel-question{border-color:#7f2b25}
.kraus-panel-danger{border-color:#e00000}
.kraus-panel-danger .kraus-panel-body{background:#fff0f0;color:#8f0000;border-top:1px solid #e00000}
.kraus-title-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:9px;border:2px solid #fff8ed;border-radius:50%;font-weight:bold;line-height:1;color:#fff8ed}
.kraus-action-row{display:flex;align-items:center;gap:14px;margin-top:20px}
.kraus-actions-between{justify-content:space-between}
.kraus-actions-three{justify-content:space-between}
.kraus-action-row form{margin:0}
.logrotate-confirm-box,.cdr-archive-box{width:min(900px,100%)}
.cdr-import-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.cdr-import-actions .cdr-import-form{margin:0}
@media screen and (max-width:700px){.kraus-actions-between,.kraus-actions-three{align-items:stretch;flex-direction:column}.kraus-action-row form,.kraus-action-row a{width:100%;box-sizing:border-box}.kraus-action-row button{width:100%}}

/* Schritt 8: verbindliches KRAUS-Raster – Inhalt oben bündig zur Navigation */
.content-area {
    padding-top: 0;
}

/* Das erste sichtbare Modulelement beginnt ohne Browser-Standardabstand
   direkt an der Oberkante des Inhaltsbereichs. */
.content-area > h1:first-child,
.content-area > h2:first-child,
.content-area > h3:first-child,
.content-area > p:first-child,
.content-area > table:first-child,
.content-area > form:first-child,
.content-area > .location-toolbar:first-child,
.content-area > .kraus-panel:first-child,
.content-area > .anrufliste-module:first-child,
.content-area > .transferagent-table:first-child {
    margin-top: 0 !important;
}

.location-toolbar,
.kraus-panel:first-child,
.anrufliste-module,
.transferagent-table:first-child,
.logrotate-confirm-box {
    margin-top: 0;
}

/* Keine künstliche vertikale Verschiebung der einzelnen Module. */
.content-area:has(.anrufliste-module) {
    padding-bottom: 0;
}

/* Größere, gut lesbare Eingabefelder im Stil der bisherigen Verwaltungsprogramme. */
.location-form-table input[type="text"],
.location-form-table input[type="email"],
.location-form-table input[type="password"],
.location-form-table input[type="number"],
.location-form-table select {
    min-height: 46px;
    font-size: 20px;
    line-height: 28px;
    padding: 7px 10px;
}

.location-form-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 6px;
}

/* LOG-Rotationsdialog ohne zusätzliche Seitenüberschrift; die Box ist selbst der Titel. */
.logrotate-confirm-box {
    margin-top: 0;
}


/* Schritt 8: Archivdialog-Feinschliff */
.location-cancel-button:hover,
.location-cancel-button:focus {
    background:#7f2b25;
    color:#fff8ed !important;
    border-color:#7f2b25;
    text-decoration:none !important;
}
.kraus-actions-order-left {
    justify-content:flex-start;
    gap:18px;
}

/* Sortierbare Tabellenüberschriften der Anrufliste */
.anrufliste-sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    color: #7f2d24;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.anrufliste-sort-link:visited,
.anrufliste-sort-link:hover,
.anrufliste-sort-link:focus-visible {
    color: #7f2d24;
    text-decoration: none;
}

.anrufliste-sort-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    color: currentColor;
    text-decoration: none;
}

.anrufliste-sort-arrows {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 11px;
    line-height: 1;
}

.anrufliste-sort-arrow {
    display: block;
    height: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 7px;
    font-weight: normal;
    color: currentColor;
}

.anrufliste-sort-arrow-up {
    margin-bottom: 3px;
}

.anrufliste-sort-arrow-down {
    margin-top: 0;
}

.anrufliste-sort-link:not(.is-active) .anrufliste-sort-arrows {
    opacity: 0.62;
}

.anrufliste-sort-link.is-active .anrufliste-sort-arrows {
    opacity: 0.90;
}


/* Schritt 8: Sortierüberschriften – in jedem Linkzustand identische Darstellung */
.anrufliste-table thead th a.anrufliste-sort-link,
.anrufliste-table thead th a.anrufliste-sort-link:link,
.anrufliste-table thead th a.anrufliste-sort-link:visited,
.anrufliste-table thead th a.anrufliste-sort-link:hover,
.anrufliste-table thead th a.anrufliste-sort-link:active,
.anrufliste-table thead th a.anrufliste-sort-link:focus,
.anrufliste-table thead th a.anrufliste-sort-link:focus-visible,
.anrufliste-table thead th a.anrufliste-sort-link.is-active,
.anrufliste-table thead th a.anrufliste-sort-link.is-active:hover,
.anrufliste-table thead th a.anrufliste-sort-link.is-active:active,
.anrufliste-table thead th a.anrufliste-sort-link.is-active:focus {
    color: #7f2b25 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-decoration-color: transparent !important;
    background: transparent !important;
    outline-color: transparent;
}

.anrufliste-table thead th a.anrufliste-sort-link > span {
    color: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}

.anrufliste-table thead th .anrufliste-sort-arrows,
.anrufliste-table thead th .anrufliste-sort-link:not(.is-active) .anrufliste-sort-arrows,
.anrufliste-table thead th .anrufliste-sort-link.is-active .anrufliste-sort-arrows {
    opacity: 1 !important;
    color: #7f2b25 !important;
}

.anrufliste-table thead th .anrufliste-sort-arrow {
    width: 12px;
    height: 8px;
    font-family: "DejaVu Sans", "Segoe UI Symbol", Arial, sans-serif;
    font-size: 10px;
    line-height: 8px;
    font-weight: 400;
    text-align: center;
    color: #7f2b25 !important;
    text-decoration: none !important;
    transform: none !important;
}

.anrufliste-table thead th .anrufliste-sort-arrow-up {
    margin-bottom: 3px;
}

/* Schritt 8: geometrisch identische Sortierdreiecke ohne Schriftglyphen */
.anrufliste-table thead th a.anrufliste-sort-link,
.anrufliste-table thead th a.anrufliste-sort-link:link,
.anrufliste-table thead th a.anrufliste-sort-link:visited,
.anrufliste-table thead th a.anrufliste-sort-link:hover,
.anrufliste-table thead th a.anrufliste-sort-link:active,
.anrufliste-table thead th a.anrufliste-sort-link:focus,
.anrufliste-table thead th a.anrufliste-sort-link:focus-visible,
.anrufliste-table thead th a.anrufliste-sort-link.is-active {
    color: #7f2b25 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
}

.anrufliste-table thead th .anrufliste-sort-indicator {
    width: 12px;
    min-width: 12px;
    height: 15px;
    margin-left: 4px;
}

.anrufliste-table thead th .anrufliste-sort-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 15px;
    gap: 3px;
    opacity: 1 !important;
    color: #7f2b25 !important;
}

.anrufliste-table thead th .anrufliste-sort-arrow {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 5px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    transform: none !important;
}

/* Kontur: kräftige 1,5-px-Linie, gleiche Außenmaße wie die gefüllte Variante */
.anrufliste-table thead th .anrufliste-sort-arrow::before,
.anrufliste-table thead th .anrufliste-sort-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
}

.anrufliste-table thead th .anrufliste-sort-arrow-up::before {
    bottom: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #7f2b25;
}
.anrufliste-table thead th .anrufliste-sort-arrow-up::after {
    bottom: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 3.5px solid #f2f2f2;
}

.anrufliste-table thead th .anrufliste-sort-arrow-down::before {
    top: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #7f2b25;
}
.anrufliste-table thead th .anrufliste-sort-arrow-down::after {
    top: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 3.5px solid #f2f2f2;
}

/* Aktive Richtung: Innenausschnitt ausblenden, dadurch exakt gleich großes volles Dreieck */
.anrufliste-table thead th .anrufliste-sort-arrow.is-filled::after {
    display: none;
}

/* Standortkontext im Kopfbereich */
.app-header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.app-header-location {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
}
.app-header-location form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.app-header-location label {
    color: #832f27;
    font-weight: bold;
}
.app-header-location select {
    min-width: 180px;
    height: 36px;
    padding: 4px 30px 4px 10px;
    border: 1px solid #832f27;
    background: #fffaf0;
    color: #832f27;
    font-size: 16px;
    font-weight: bold;
}

/* Zwei Bereiche im Kopf: App-Titel links, DEV-Hinweis rechts.
   Die vorläufig nicht verwendete Standortauswahl reserviert keinen Platz. */
.app-header-left,
.app-header-right {
    width: 50%;
    flex: 0 0 50%;
}
.app-header-location {
    display: none !important;
    width: 0;
    min-width: 0;
    flex: 0 0 0;
}
@media (max-width: 1100px) {
    .app-header-left,
    .app-header-right {
        width: 50%;
        flex-basis: 50%;
    }
}

/* Schritt 8: Standortwechsel über den Standortnamen im Kopfbereich */
.app-header-location-button,
.app-header-location-button:hover,
.app-header-location-button:focus,
.app-header-location-button:active {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.location-switch-overlay[hidden] {
    display: none !important;
}

.location-switch-overlay {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.52);
    box-sizing: border-box;
}

body.location-switch-open {
    overflow: hidden;
}

.location-switch-dialog {
    width: min(620px, calc(100vw - 48px));
    margin: 0;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.34);
}

.location-switch-title {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
}

.location-switch-globe {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 9px;
    border: 2px solid #fff8ed;
    border-radius: 50%;
    box-sizing: border-box;
    flex: 0 0 20px;
}

.location-switch-globe::before,
.location-switch-globe::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.location-switch-globe::before {
    top: 3px;
    bottom: 3px;
    left: 5px;
    right: 5px;
    border-left: 1.5px solid #fff8ed;
    border-right: 1.5px solid #fff8ed;
    border-radius: 50%;
}

.location-switch-globe::after {
    top: 8px;
    left: 1px;
    right: 1px;
    border-top: 2px solid #fff8ed;
}

.location-switch-body {
    padding: 24px;
}

.location-switch-body form {
    margin: 0;
}

.location-switch-body label {
    display: block;
    margin: 0 0 8px 0;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
}

.location-switch-body select {
    width: 100%;
    min-height: 46px;
    padding: 7px 42px 7px 12px;
    border: 1px solid #777;
    background: #fff;
    color: #111;
    font-size: 20px;
    box-sizing: border-box;
}

.location-switch-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .location-switch-overlay {
        padding: 12px;
    }
    .location-switch-dialog {
        width: calc(100vw - 24px);
    }
    .location-switch-actions {
        flex-wrap: wrap;
    }
}

/* Schritt 8: Feinschliff Standortwechsel-Dialog */
.location-switch-explanation {
    margin: 0 0 18px 0;
    color: #1a1a1a;
    font-size: 17px;
    line-height: 1.45;
}

.location-switch-actions .location-switch-submit,
.location-switch-actions .location-switch-cancel {
    min-height: 42px;
    padding: 9px 18px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    border-radius: 7px;
    box-sizing: border-box;
    cursor: pointer;
}

.location-switch-actions .location-switch-submit {
    display: inline-block;
    background-color: #006f00;
    color: #ffffff;
    border: 0;
}

.location-switch-actions .location-switch-submit:hover,
.location-switch-actions .location-switch-submit:focus {
    background-color: #00ff00;
    color: #000000;
    text-decoration: underline;
}

.location-switch-actions .location-switch-cancel,
.location-switch-actions .location-switch-cancel:visited {
    display: inline-block;
    background: #fff8ed;
    color: #7f2b25 !important;
    border: 1px solid #7f2b25;
    text-decoration: none !important;
}

.location-switch-actions .location-switch-cancel:hover,
.location-switch-actions .location-switch-cancel:focus,
.location-switch-actions .location-switch-cancel:active {
    background: #7f2b25;
    color: #fff8ed !important;
    border-color: #7f2b25;
    text-decoration: none !important;
}

/* ==========================================
   KRAUS-App – Eigene Rufnummern
   ========================================== */
.own-number-form {
    width: min(980px, 100%);
}

.own-number-form-table th {
    width: 250px;
}

.own-number-form-table input,
.own-number-form-table select {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 20px;
}

.own-number-toolbar .submit-button:link,
.own-number-toolbar .submit-button:visited {
    color: #ffffff;
    text-decoration: none;
}

.own-number-toolbar .submit-button:hover,
.own-number-toolbar .submit-button:focus {
    color: #ffffff;
    text-decoration: none;
}

.own-number-list th:nth-child(1) { width: 28%; }
.own-number-list th:nth-child(2) { width: 20%; }
.own-number-list th:nth-child(3) { width: auto; }
.own-number-list th:nth-child(4),
.own-number-list th:nth-child(5) { width: 54px; }

.own-number-action-cell {
    text-align: center;
    white-space: nowrap;
}

.own-number-action-cell img {
    display: inline-block;
    width: 16px;
    height: 16px;
}

/* ==========================================
   KRAUS-App – Telefonbuchverwaltung
   ========================================== */
.phonebook-form {
    width: min(1180px, 100%);
}

.phonebook-toolbar .submit-button:link,
.phonebook-toolbar .submit-button:visited,
.phonebook-toolbar .submit-button:hover,
.phonebook-toolbar .submit-button:focus {
    color: #ffffff;
    text-decoration: none;
}

.phonebook-list-wrap {
    width: 100%;
    overflow-x: auto;
}

.phonebook-list {
    min-width: 980px;
}

.phonebook-list thead th {
    text-align: left;
    vertical-align: middle;
}

.phonebook-list thead th:first-child {
    min-width: 210px;
}

.phonebook-contact-number-row td,
.phonebook-contact-label-row td {
    vertical-align: middle;
}

.phonebook-contact-number-row td {
    border-bottom: 0;
    padding-bottom: 5px;
}

.phonebook-contact-label-row td {
    padding-top: 3px;
    border-top: 0;
    border-bottom: 2px solid #b9b9b9;
}

.phonebook-list .phonebook-contact-name,
.phonebook-list .phonebook-action-cell {
    border-bottom: 2px solid #b9b9b9 !important;
}

.phonebook-label-value {
    color: #666;
    font-size: 14px;
    font-style: italic;
}

.phonebook-action-cell {
    width: 58px;
    text-align: center;
    white-space: nowrap;
}

.phonebook-action-cell img {
    width: 16px;
    height: 16px;
}

.phonebook-name-row {
    display: grid;
    grid-template-columns: 230px minmax(280px, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.phonebook-name-row label,
.phonebook-field label,
.phonebook-custom-label-wrap label {
    display: block;
    margin-bottom: 6px;
    color: #111;
    font-size: 18px;
    font-weight: bold;
}

.phonebook-name-row input,
.phonebook-number-row input,
.phonebook-number-row select {
    width: 100%;
    min-height: 46px;
    padding: 7px 10px;
    border: 1px solid #777;
    background: #fff;
    color: #111;
    font-size: 20px;
    box-sizing: border-box;
}

.phonebook-number-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.phonebook-number-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(190px, .85fr) auto minmax(190px, .85fr);
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d0c4b7;
    background: #fffdf9;
}

.phonebook-custom-label-toggle,
.phonebook-add-row {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid #7f2b25;
    border-radius: 6px;
    background: #fff8ed;
    color: #7f2b25;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.phonebook-custom-label-toggle:hover,
.phonebook-custom-label-toggle:focus,
.phonebook-add-row:hover,
.phonebook-add-row:focus {
    background: #7f2b25;
    color: #fff8ed;
}

.phonebook-custom-label-wrap {
    display: none;
}

.phonebook-custom-label-wrap.is-visible {
    display: block;
}

.phonebook-add-row {
    display: block;
    width: 48px;
    height: 44px;
    margin: 14px 0 22px 0;
    padding: 0;
    font-size: 28px;
    line-height: 40px;
}

@media (max-width: 1050px) {
    .phonebook-number-row {
        grid-template-columns: 1fr 1fr;
    }
    .phonebook-custom-label-toggle {
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .phonebook-name-row,
    .phonebook-number-row {
        grid-template-columns: 1fr;
    }
}


/* Schritt 8 – Telefonbuch/Anrufliste Feinschliff */
.phonebook-contact-number-row td {
    border-bottom: 2px solid #b9b9b9 !important;
    padding-bottom: 7px;
}


/* Schritt 8 – Telefonbuch: Karteikarten und Labelverwaltung */
.phonebook-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 10px 0;
}

.phonebook-topbar .phonebook-tabs {
    align-self: flex-end;
}

.phonebook-topbar > .submit-button:link,
.phonebook-topbar > .submit-button:visited,
.phonebook-topbar > .submit-button:hover,
.phonebook-topbar > .submit-button:focus {
    color: #fff;
    text-decoration: none;
}

.phonebook-label-list {
    width: 100%;
    min-width: 620px;
}

.phonebook-topbar.phonebook-topbar-labels,
.phonebook-label-list-wrap {
    width: min(900px, 100%);
}

.phonebook-label-list-wrap {
    overflow-x: auto;
}

.phonebook-label-list th:first-child {
    width: auto;
}

.phonebook-label-list .phonebook-action-cell {
    width: 86px;
}

.phonebook-delete-disabled img {
    filter: grayscale(1);
    opacity: .38;
}

.phonebook-delete-disabled:hover img,
.phonebook-delete-disabled:focus img {
    opacity: .55;
}

.phonebook-label-form {
    width: min(900px, 100%);
}

.phonebook-label-name-row {
    grid-template-columns: 250px minmax(280px, 1fr);
    margin-bottom: 10px;
}

.phonebook-error-text {
    color: #a31616;
    font-weight: bold;
}

@media (max-width: 720px) {
    .phonebook-topbar {
        align-items: stretch;
        flex-direction: column;
    }
    .phonebook-label-name-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Schritt 8 – Schnellübernahme ins Telefonbuch
   und Rufnummern zwischen Kontakten bewegen
   ========================================== */
.anrufliste-phonebook-add,
.anrufliste-phonebook-add:link,
.anrufliste-phonebook-add:visited,
.anrufliste-phonebook-add:hover,
.anrufliste-phonebook-add:focus,
.anrufliste-phonebook-add:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 16px;
    margin-left: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none !important;
    vertical-align: -3px;
    box-sizing: border-box;
}

.anrufliste-phonebook-add img {
    display: block;
    width: 32px;
    height: 16px;
    border: 0;
    opacity: .78;
}

.anrufliste-phonebook-add:hover img,
.anrufliste-phonebook-add:focus img {
    opacity: 1;
}

.phonebook-quick-add-form {
    width: min(980px, 100%);
}

.phonebook-quick-name-row {
    align-items: start;
}

.phonebook-autocomplete {
    position: relative;
    width: 100%;
}

.phonebook-autocomplete input {
    width: 100%;
}

.phonebook-autocomplete-results {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #7f2b25;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

.phonebook-autocomplete-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #e0d8d0;
    background: #ffffff;
    color: #111111;
    font-size: 17px;
    text-align: left;
    cursor: pointer;
}

.phonebook-autocomplete-item:last-child {
    border-bottom: 0;
}

.phonebook-autocomplete-item:hover,
.phonebook-autocomplete-item:focus {
    background: #f4e7dc;
    color: #7f2b25;
    outline: 0;
}

.phonebook-quick-number-row {
    grid-template-columns: minmax(260px, 1.15fr) minmax(190px, .85fr) auto minmax(190px, .85fr);
}

.phonebook-row-special-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: end;
    flex-wrap: wrap;
}

.phonebook-move-toggle {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid #7f2b25;
    border-radius: 6px;
    background: #fff8ed;
    color: #7f2b25;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.phonebook-move-toggle:hover,
.phonebook-move-toggle:focus {
    background: #7f2b25;
    color: #fff8ed;
}

.phonebook-move-wrap {
    display: none;
}

.phonebook-move-wrap.is-visible {
    display: block;
}

.phonebook-move-wrap label {
    display: block;
    margin-bottom: 6px;
    color: #111;
    font-size: 18px;
    font-weight: bold;
}

.phonebook-move-wrap select {
    width: 100%;
    min-height: 46px;
    padding: 7px 10px;
    border: 1px solid #777;
    background: #fff;
    color: #111;
    font-size: 20px;
    box-sizing: border-box;
}

.phonebook-custom-label-toggle.is-hidden,
.phonebook-move-toggle.is-hidden {
    display: none !important;
}

@media (max-width: 1050px) {
    .phonebook-quick-number-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .phonebook-quick-number-row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================
   KRAUS-App – User-Levels / Sichtbarkeit
   ========================================== */
.user-level-toolbar,
.user-level-list-wrap,
.user-level-form {
    width: 50%;
    max-width: 100%;
}

.user-level-list-wrap {
    overflow-x: auto;
}

.user-level-list th:nth-child(1) { width: 90px; }
.user-level-list th:nth-child(2) { width: auto; }
.user-level-list th:nth-child(3) { width: 110px; }

.user-level-action-cell {
    text-align: center;
    white-space: nowrap;
}

.user-level-action-cell img {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.user-level-form-table th {
    width: 250px;
}

.user-level-form-table input[type="text"] {
    width: 100%;
    max-width: 520px;
    min-height: 46px;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 20px;
}

/* Eigene Rufnummern: zusätzliche Sichtbarkeitsspalte */
.own-number-list th:nth-child(1) { width: 23%; }
.own-number-list th:nth-child(2) { width: 15%; }
.own-number-list th:nth-child(3) { width: auto; }
.own-number-list th:nth-child(4) { width: 22%; }
.own-number-list th:nth-child(5),
.own-number-list th:nth-child(6) { width: 54px; }


/* ==========================================
   KRAUS-App – zentrale Berechtigungszuordnung
   ========================================== */
.access-permission-toolbar,
.access-permission-wrap {
    width: 50%;
    max-width: 100%;
}

.access-permission-wrap {
    overflow-x: auto;
}

.access-permission-list th:nth-child(1) { width: auto; }
.access-permission-list th:nth-child(2) { width: 46%; }

.access-permission-list select {
    width: 100%;
    min-height: 32px;
    box-sizing: border-box;
    font-size: 15px;
}

.access-permission-group-row th {
    background: #111 !important;
    color: #fff8ed !important;
    text-align: center;
    font-weight: bold;
}

.access-permission-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
}


/* ==========================================
   KRAUS-App – automatischer DEV-Updater
   ========================================== */
.dev-update-page {
    min-height: 100vh;
    background: #fff8ed;
    padding: 28px;
}
.dev-update-wrap {
    width: min(1050px, 100%);
    margin: 0 auto;
}
.dev-update-title {
    margin: 0 0 18px 0;
    color: #7f2b25;
}
.dev-update-log {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.dev-update-log th,
.dev-update-log td {
    border: 1px solid #c8c8c8;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.dev-update-log th {
    background: #343434;
    color: #fff;
}
.dev-update-log tr:nth-child(even) td {
    background: #f3f3f3;
}
.dev-update-ok {
    color: #176b17;
    font-weight: bold;
    white-space: nowrap;
}
.dev-update-error {
    color: #a00000;
    font-weight: bold;
    white-space: nowrap;
}
.dev-update-actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/* ==========================================
   Schritt 9 – Einstellungen im KRAUS-Panel-Design
   ========================================== */
.settings-form {
    width: min(980px, 100%);
}

.settings-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    color: #fff8ed;
    font-size: 21px;
    line-height: 1;
    flex: 0 0 auto;
}

.settings-form-table th {
    width: 250px;
}

.settings-form-table select {
    width: 100%;
    box-sizing: border-box;
}

.settings-section-row td {
    padding: 9px 10px;
    background: #eeeeee;
    border: 1px solid #cccccc;
    text-align: center;
    font-weight: bold;
}

.settings-radio-cell label {
    display: inline-block;
    margin-right: 22px;
    white-space: nowrap;
}

.settings-radio-cell input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 5px 0 0;
    vertical-align: -3px;
}

/* ==========================================
   Schritt 9 – Formular-Feinschliff / einheitliche Panel-Abstände
   ========================================== */
/*
 * Eingabe- und Sicherheitsdialoge verwenden überall dieselbe Aktionszeile.
 * Bei Panels, deren Inhalt mit einer solchen Zeile endet, wird der bisher
 * doppelt wirkende untere Leerraum reduziert. Seitliche und obere Abstände
 * bleiben unverändert.
 */
.kraus-panel-body:has(.location-form-actions:last-child),
.kraus-panel-body:has(> form > .location-form-actions:last-child) {
    padding-bottom: 18px;
}

/* Die Aktionszeile selbst bleibt kompakt und frei von zusätzlichen
   Browser-/Elementabständen. */
.location-form-actions {
    margin-bottom: 0;
    padding-bottom: 0;
}

.kraus-panel-body > form {
    margin-bottom: 0;
}

/* Rechteverwaltung nutzt eine eigene Aktionsklasse; auch dort unten
   denselben kompakten Abschluss herstellen. */
.access-permission-actions {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ==========================================
   Schritt 9 – Benutzer-Matrix
   ========================================== */
.user-admin-toolbar,
.user-admin-list-wrap { width: 100%; }
.user-admin-form { width: min(1180px, 100%); }
.user-admin-list-wrap { overflow-x: auto; }
.user-admin-list th:nth-child(1) { width: 12%; }
.user-admin-list th:nth-child(2) { width: 15%; }
.user-admin-list th:nth-child(3) { width: 19%; }
.user-admin-list th:nth-child(4) { width: 12%; }
.user-admin-list th:nth-child(5) { width: 16%; }
.user-admin-list th:nth-child(6) { width: auto; }
.user-admin-list th:nth-child(7),
.user-admin-list th:nth-child(8) { width: 82px; text-align:center; }
.user-admin-action-cell { text-align:center; white-space:nowrap; }
.user-admin-action-cell img { width:16px; height:16px; vertical-align:middle; }
.user-admin-form-table th { width: 270px; }
.user-admin-form-table input[type="text"],
.user-admin-form-table input[type="email"],
.user-admin-form-table input[type="password"],
.user-admin-form-table select { width: min(620px, 100%); min-height: 42px; font-size: 17px; }
.user-password-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.user-password-row input { flex:0 1 620px; width:min(620px, 100%); }
.user-random-password-button { cursor:pointer; }
.user-force-change-label { display:flex; align-items:center; gap:8px; }
.user-force-change-label input { width:18px; height:18px; }
.user-admin-readonly-note { color:#555; }
.user-password-overlay[hidden] { display:none; }
.user-password-overlay { position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.58); display:flex; align-items:center; justify-content:center; padding:24px; }
.user-password-overlay-card { width:min(720px, 100%); background:#fff8ed; border:1px solid #7f2b25; box-shadow:0 8px 32px rgba(0,0,0,.35); }
.user-password-overlay-body { padding:18px; }
.user-password-overlay-body input { width:100%; min-height:46px; padding:8px 10px; font-size:20px; font-family:monospace; box-sizing:border-box; }

/* ==========================================
   Schritt 9 – adaptive Navbar mit Rubriken
   ========================================== */
.nav-accordion-layout { display:flex; flex-direction:column; height:100%; min-height:0; }
.nav-accordion-top, .nav-accordion-bottom { flex:0 0 auto; }
.nav-accordion-spacer { flex:1 1 auto; min-height:18px; }
.nav-section { margin:0 7px 8px 7px; border:1px solid #3e3e3e; background:#111; }
.sidebar .nav-section-title { padding:7px 9px; background:#343434; color:#d7d7d7; font-weight:bold; text-decoration:none; border-bottom:0; }
.sidebar .nav-section-title:hover { color:#fff; background:#454545; }
.nav-section-open { border-color:#7f2b25; }
.sidebar .nav-section-open > .nav-section-title { background:#8b2f28; color:#fff8ed; }
.nav-section-content { padding:3px 0 5px; }
.sidebar .nav-sub-link { padding:5px 8px 5px 16px; font-size:15px; color:#9d9d9d; }
.sidebar .nav-sub-link::before { content:'› '; color:#8b2f28; font-weight:bold; }
.sidebar .nav-sub-link.nav-current { color:#fff8ed; font-weight:bold; }
.sidebar .nav-current { color:#fff8ed; font-weight:bold; }

/* ==========================================================
   Schritt 9 – einheitliche Aktionsbuttons und neue Navigation
   ========================================================== */

/* Neues Rubrikenlayout bei wieder kompakter Sidebar-Breite. */
.grid-container {
    grid-template-columns: 165px 1fr;
}

.sidebar {
    /* Oberer Abstand entspricht nun dem linken/rechten Rand der Menüblöcke. */
    padding-top: 7px;
}

.nav-accordion-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
}

.nav-section {
    flex: 0 0 auto;
    margin: 0 7px 8px 7px;
}

/* Keine alte Oben/Unten-Aufteilung mehr. */
.nav-accordion-top,
.nav-accordion-bottom,
.nav-accordion-spacer {
    display: contents;
}

.sidebar .nav-section-title {
    position: relative;
    padding: 7px 26px 7px 9px;
    font-size: 16px;
    line-height: 1.15;
}

.sidebar .nav-sub-link {
    padding: 5px 7px 5px 8px;
    font-size: 15px;
    line-height: 1.15;
    overflow-wrap: normal;
    word-break: normal;
}

/* Während Datenzugriff bleibt die Navigation sichtbar, ist aber bewusst inaktiv. */
.nav-is-locked .nav-section-title,
.nav-is-locked .nav-sub-link {
    cursor: not-allowed;
}

.nav-is-locked .nav-section-title:hover,
.nav-is-locked .nav-sub-link:hover {
    color: #fff8ed;
}

.nav-is-locked .nav-section-title::after {
    content: '🔒';
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    opacity: .8;
}

.navigation-lock-overlay[hidden] {
    display: none;
}

.navigation-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.58);
}

.navigation-lock-card {
    width: min(650px, 100%);
    background: #fff8ed;
    border: 1px solid #7f2b25;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.navigation-lock-body {
    padding: 18px;
    font-size: 17px;
    line-height: 1.4;
}

.navigation-lock-body p:first-child {
    margin-top: 0;
}

.navigation-lock-actions {
    justify-content: center;
}
.navigation-lock-ok {
    min-width: 110px;
}

/* Einheitlicher grüner Aktionsbutton:
   dunkelgrün/weiß -> hellgrün/schwarz; immer fett, nie unterstrichen. */
.submit-button,
a.submit-button:link,
a.submit-button:visited,
button.submit-button,
input.submit-button,
.editform input[type="submit"],
.custom-button:link,
.custom-button:visited,
.newadress-button:link,
.newadress-button:visited,
.location-switch-actions .location-switch-submit {
    background-color: #006f00 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.submit-button:hover,
.submit-button:focus,
a.submit-button:hover,
a.submit-button:focus,
button.submit-button:hover,
button.submit-button:focus,
input.submit-button:hover,
input.submit-button:focus,
.editform input[type="submit"]:hover,
.editform input[type="submit"]:focus,
.custom-button:hover,
.custom-button:focus,
.newadress-button:hover,
.newadress-button:focus,
.location-switch-actions .location-switch-submit:hover,
.location-switch-actions .location-switch-submit:focus,
.own-number-toolbar .submit-button:hover,
.own-number-toolbar .submit-button:focus,
.phonebook-toolbar .submit-button:hover,
.phonebook-toolbar .submit-button:focus,
.phonebook-topbar > .submit-button:hover,
.phonebook-topbar > .submit-button:focus {
    background-color: #00ff00 !important;
    color: #000000 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Schritt 9 – vollständige Navigationssperre auch im Kopfbereich */
.navigation-locked-header-control,
.navigation-locked-header-control:hover,
.navigation-locked-header-control:focus {
    cursor: not-allowed !important;
}


/* ==========================================================
   Schritt 9 – Admin-Landingpage / Berechtigungsansicht / 165px-Navigation
   ========================================================== */
.admin-home-panel {
    width: 100%;
    max-width: 100%;
}

.admin-home-body p {
    margin: 0 0 12px 0;
    line-height: 1.45;
}

.admin-home-body p:last-child {
    margin-bottom: 0;
}

.access-permission-actions > .submit-button:only-child {
    margin-right: auto;
}


/* Usercenter am unteren Rand der Navigation. */
.nav-usercenter-wrap {
    margin-top: auto;
    padding-bottom: 0;
}
.nav-usercenter {
    margin: 0 7px;
    border: 1px solid #7f2b25;
    background: #111;
    color: #d7d7d7;
    text-align: left;
}
.nav-usercenter-title {
    padding: 6px 8px;
    background: #8b2f28;
    color: #fff8ed;
    font-weight: bold;
    text-align: left;
    line-height: 1.15;
}
.nav-usercenter-body {
    padding: 7px 8px 0;
}
.nav-usercenter-label {
    margin-bottom: 4px;
    color: #9d9d9d;
    font-size: 13px;
    line-height: 1.15;
}
.nav-usercenter-userrow {
    position: relative;
    min-height: 34px;
    padding-right: 24px;
    display: flex;
    align-items: center;
}
.nav-usercenter-current {
    color: #fff8ed;
    font-size: 15px;
    line-height: 1.15;
    font-weight: bold;
    text-align: left;
}
.sidebar .nav-usercenter-edit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.nav-usercenter-edit img {
    display: block;
    width: 16px;
    height: 16px;
    margin: 2px;
}
.nav-usercenter-edit:hover,
.nav-usercenter-edit:focus {
    background: transparent;
    outline: none;
}
.nav-usercenter-divider {
    height: 1px;
    margin-top: 5px;
    background: #8b2f28;
}
.nav-usercenter-logout {
    display: block;
    margin: 8px auto 9px;
    padding: 4px 12px;
    border: 1px solid #7f2b25;
    background: #fff8ed;
    color: #7f2b25;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.nav-usercenter-logout:hover,
.nav-usercenter-logout:focus {
    background: #7f2b25;
    color: #fff8ed;
    text-decoration: none;
}

.development-notice-overlay[hidden] { display: none; }
.development-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 6100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.58);
}
.development-notice-card {
    width: min(520px, 100%);
    background: #fff8ed;
    border: 1px solid #7f2b25;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.development-notice-body { padding: 18px; font-size: 17px; line-height: 1.4; }
.development-notice-body p { margin: 0; }
.development-notice-actions { justify-content: center; }
.development-notice-ok { min-width: 110px; }

/* Schritt 9: Benutzerprofil – vorhandenes Admin-Formularlayout wiederverwenden. */
.nav-usercenter-edit { text-decoration:none; }


/* Zentrale Versionsanzeige links im Footer, bündig zur Navigation. */
.footer-version {
    position: absolute;
    left: 0;
    top: 50%;
    width: 165px;
    transform: translateY(-50%);
    text-align: center;
}

/* v0.9.39 – Logout im Usercenter */
.nav-usercenter-logout-form { margin: 0; padding: 0; }


/* v0.9.41 – Login / Rechtehinweis / Feinschliff */
.orange-button:hover,
.orange-button:focus,
.orange-button:active { text-decoration: none !important; }
.nav-usercenter-login-form { margin: 0; padding: 0 0 8px 0; }
.nav-usercenter-login-input { display:block; width:100%; margin:0 0 6px 0; padding:5px 6px; border:1px solid #7f2b25; background:#fff8ed; color:#111; font-size:13px; box-sizing:border-box; }
.nav-usercenter-login { display:block; margin:7px auto 0; padding:4px 12px; border:1px solid #7f2b25; background:#fff8ed; color:#7f2b25; font-weight:bold; cursor:pointer; }
.nav-usercenter-login:hover,.nav-usercenter-login:focus { background:#7f2b25; color:#fff8ed; text-decoration:none; }
.login-required-panel,.access-level-required-panel { width:50%; max-width:50%; }
.login-form-table { width:100%; }
.login-lock-icon { display:inline-block; margin-right:7px; font-size:15px; vertical-align:0; }
.danger-action-button,.danger-action-button:link,.danger-action-button:visited { display:inline-block; padding:10px 20px; background:#a23604; color:#fff !important; border:none; border-radius:8px; font-size:16px; font-weight:bold; text-decoration:none !important; }
.danger-action-button:hover,.danger-action-button:focus { background:#00ff00; color:#000 !important; text-decoration:none !important; }
@media screen and (max-width:900px){.login-required-panel,.access-level-required-panel{width:100%;max-width:100%;}}

/* ==========================================
   v0.9.51 – zweistufiger Benutzerschutz
   ========================================== */
.user-admin-protected-panel .kraus-panel-body { background:#fff1ee; }
.user-admin-protected-panel .location-form-table td { background:#fff8f5; }
.user-admin-protected-panel .location-form-table th { background:#f4e2df; }
.user-admin-password-mask { font-family:monospace; letter-spacing:1px; }
.user-protection-checkbox-label { display:flex; align-items:center; gap:8px; font-weight:bold; }
.user-protection-checkbox-label input { width:18px; height:18px; flex:0 0 auto; }
.user-admin-list td small { display:block; margin-top:3px; color:#7f2b25; font-size:12px; }
.user-admin-protected-row td { background:#fff8f5; }


/* v0.9.61 – Standortname ohne Filialauswahl-Recht ist reine Textanzeige. */
.app-header-location-static {
    color: inherit;
    font: inherit;
    font-weight: inherit;
}

/* v0.9.81 – angemeldete Browsergeräte in der Benutzerverwaltung */
.user-admin-device-entry + .user-admin-device-entry { margin-top: 6px; }
.user-admin-devices-cell small { color: #666; }

/* v0.9.92 – Hilfe/Datenschutz oben bündig wie die übrigen Module */
.content-area > table:first-child > tbody > tr:first-child > td > h1:first-of-type {
    margin-top: 0 !important;
}

/* v0.9.92 – komplette Kopfzeile "Anrufliste <Filiale>" als Standortschalter */
.app-header-title-button,
.app-header-title-button:hover,
.app-header-title-button:focus,
.app-header-title-button:active {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* v0.9.92 – exakte Gesprächsdauer als kleines Hover-Feld */
.anrufliste-duration-value {
    position: relative;
    display: inline-block;
    cursor: help;
}
.anrufliste-duration-value::after {
    content: attr(data-exact-duration);
    position: absolute;
    z-index: 5000;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%);
    display: none;
    padding: 5px 8px;
    border: 1px solid #7f2b25;
    background: #fff8ed;
    color: #111;
    font-size: 12px;
    line-height: 1.2;
    font-weight: normal;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,.22);
    pointer-events: none;
}
.anrufliste-duration-value::before {
    content: '';
    position: absolute;
    z-index: 5001;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    display: none;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #7f2b25;
    pointer-events: none;
}
.anrufliste-duration-value:hover::after,
.anrufliste-duration-value:hover::before {
    display: block;
}

/* v0.9.92 – öffentliche Begrüßungsseite */
.welcome-home-panel {
    width: 100%;
    max-width: 100%;
}
.welcome-home-body p {
    margin: 0 0 12px 0;
    line-height: 1.45;
}
.welcome-home-body p:last-child {
    margin-bottom: 0;
}



/* v0.9.93a – sofortige KRAUS-Hoverfelder mit Viewport-Erkennung
   Die eigentliche Positionierung erfolgt per JavaScript relativ zur Maus. */
.kraus-instant-tooltip {
    position: relative;
}
.anrufliste-icon-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kraus-floating-tooltip {
    position: fixed;
    z-index: 20000;
    display: none;
    max-width: min(360px, calc(100vw - 12px));
    padding: 5px 8px;
    border: 1px solid #7f2b25;
    background: #fff8ed;
    color: #111;
    font-size: 12px;
    line-height: 1.2;
    font-weight: normal;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,.22);
    pointer-events: none;
}

/* Das alte optische Bild-Hover bleibt für den Telefonbuch-Button bewusst neutral;
   die Rückmeldung erfolgt jetzt über das sofortige KRAUS-Hoverfeld. */
.anrufliste-phonebook-add:hover img,
.anrufliste-phonebook-add:focus img {
    opacity: .78;
}


/* v0.9.104 – gerätebezogene Auswahl Desktop/Mobil in Einstellungen */
.settings-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 22px;
    font-weight: normal;
    white-space: nowrap;
}
.settings-radio-option input[type="radio"] {
    margin: 0;
}

/* v0.9.211 – Administration der mobilen Info-Meldung. */
.info-message-admin-view,
.info-message-edit-form {
    width: 50%;
    max-width: 100%;
}

/* Gleiche Formularspalten wie in den übrigen Administrationsmasken:
   feste Beschriftungsspalte, flexibler Eingabebereich. */
.info-message-edit-form .location-form-table th {
    width: 270px;
}

.info-message-view-actions {
    margin-top: 16px;
}

.info-message-preview {
    box-sizing: border-box;
    width: 100%;
    min-height: 90px;
    padding: 14px;
    border: 1px solid #ccc;
    background: #fff8ed;
    line-height: 1.45;
}

.info-message-version {
    margin-bottom: 0;
}

.info-message-edit-form .location-form-table textarea {
    box-sizing: border-box;
    width: min(620px, 100%);
    min-height: 260px;
    padding: 10px;
    font: inherit;
    resize: vertical;
}