/* Grundfarben */
      :root {
        --sidebar-bg: #1e1e2f; /* Dunkles Grau mit leichtem Blaustich */
        --sidebar-text: #cfd8dc;
        --sidebar-active: #0d6efd; /* Bootstrap-Blau als Akzent */
        --main-bg: #f8f9fa; /* Hellgrau für den Inhalt */
        --loginbody-bg: #f5f6f8;
        
        
      }

      body {
        background-color: var(--main-bg);
      }

      /* Sidebar-Styling */
      .sidebar {
        background-color: var(--sidebar-bg);
        color: var(--sidebar-text);
      }

      .sidebar .nav-link {
        color: var(--sidebar-text);
        border-radius: 8px;
        margin: 4px 0;
        padding: 8px 12px;
        transition: background-color 0.2s, color 0.2s;
      }

      .sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .sidebar .nav-link.active {
        background-color: var(--sidebar-active);
        color: #fff;
      }

      /* Card Anpassung */
      .card {
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      /* Responsive Text */
      h1, p {
        color: #212529;
      }

      /* Formularabstände */
      form {
        max-width: 600px;
      }
      
      .bg-warehouse {
        background-image: url('deinbild.jpg');  /* dein Pfad */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;  /* optional, kannst du bei mobilen Geräten weglassen */
        min-height: 100vh;  /* füllt immer den ganzen Bildschirm */
      }

      /* CARDLOOK für alle 4 Dashboard-Boxen */
        #kundenDashboard,
        #serviceDashboard,
        #rechnungenDashboard,
        #mitarbeiterDashboard{
          border-radius: 20px;                           /* runde Ecken */
          padding: 18px;                                  /* Innenabstand */
          min-height: 150px;                              /* gleiche Höhe */
          border: 1px solid rgba(255,255,255,0.65);       /* leichter Rand */
          box-shadow: 0 18px 45px rgba(15,23,42,0.10);     /* weicher Shadow */
          background-clip: padding-box;                   /* sauberer Rand */
          transition: transform .18s ease, box-shadow .18s ease;
        }

        /* Hover = “floating” */
        #kundenDashboard:hover,
        #serviceDashboard:hover,
        #rechnungenDashboard:hover,
        #mitarbeiterDashboard:hover{
          transform: translateY(-5px);
          box-shadow: 0 24px 60px rgba(15,23,42,0.14);
        }
        #kundenDashboard,
        #serviceDashboard,
        #rechnungenDashboard,
        #mitarbeiterDashboard {
          backdrop-filter: blur(14px) saturate(160%);
          -webkit-backdrop-filter: blur(14px) saturate(160%);
        }
        #kundenDashboard,
        #serviceDashboard,
        #rechnungenDashboard,
        #mitarbeiterDashboard {
          border: 1px solid rgba(255, 255, 255, 0.55);
        }
        #kundenDashboard,
        #serviceDashboard,
        #rechnungenDashboard,
        #mitarbeiterDashboard {
          box-shadow:
            0 20px 50px rgba(15, 23, 42, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

      

      #kundenDashboard{
          background: linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.25),
            rgba(255, 255, 255, 0.65)
          );
        }

        #serviceDashboard{
          background: linear-gradient(
            180deg,
            rgba(34, 197, 94, 0.25),
            rgba(255, 255, 255, 0.65)
          );
        }

        #rechnungenDashboard{
          background: linear-gradient(
            180deg,
            rgba(245, 158, 11, 0.25),
            rgba(255, 255, 255, 0.65)
          );
        }

        #mitarbeiterDashboard{
          background: linear-gradient(
            180deg,
            rgba(168, 85, 247, 0.25),
            rgba(255, 255, 255, 0.65)
          );
        }
      .table-responsive {
        overflow-x: auto;
        width: 100%;
      }
      .table-responsive table {
        width: 100%;
        margin-bottom: 0;
      }

      #arbeitszeitenTabelle {
        width: 100%;
        table-layout: fixed;
      }

      #arbeitszeitenTabelle .arbeitszeiten-mitarbeiter-col {
        width: 160px;
      }

      #arbeitszeitenTabelle .arbeitszeiten-datum-col {
        width: 145px;
      }

      #arbeitszeitenTabelle .arbeitszeiten-zeit-col {
        width: 155px;
        white-space: nowrap;
      }

      #arbeitszeitenTabelle .arbeitszeiten-zeit-value {
        display: inline;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }

      #arbeitszeitenTabelle .arbeitszeiten-kunde-col {
        width: 320px;
        white-space: normal;
      }

      #arbeitszeitenTabelle .arbeitszeiten-taetigkeit-col {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      #arbeitszeitenTabelle .arbeitszeiten-actions-col {
        width: 120px;
        white-space: nowrap;
      }

      #settingsRoleTable {
        border: 2px solid #adb5bd;
      }

      #settingsRoleTable th,
      #settingsRoleTable td {
        border-width: 2px !important;
        border-color: #b5bcc4 !important;
      }

      #settingsRoleTable thead th {
        border-bottom-width: 2px !important;
        border-bottom-color: #9aa3ad !important;
      }

      .settings-scroll-table {
        max-height: 520px;
        overflow-y: auto;
      }

      .settings-scroll-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8f9fa;
      }

      .settings-switch {
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        cursor: pointer;
        user-select: none;
      }

      .settings-switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .settings-switch-slider {
        position: relative;
        width: 56px;
        height: 32px;
        border-radius: 999px;
        background: #cfd4da;
        transition: background-color 0.2s ease;
        flex-shrink: 0;
      }

      .settings-switch-slider::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        transition: transform 0.2s ease;
      }

      .settings-switch input:checked + .settings-switch-slider {
        background: #0d6efd;
      }

      .settings-switch input:checked + .settings-switch-slider::after {
        transform: translateX(24px);
      }

      .settings-switch-label {
        font-weight: 600;
        color: #495057;
      }

      .tabelle-scroll{
        max-height: 350px;
        overflow-y: auto;
      }
      .tabelle-scroll thead th {
        position: sticky;
        top: 0;        
        z-index: 2;
      }     

      /* Home: sensible Umsatzdaten erst bei Hover/Fokus sichtbar */
      .home-privacy-row .privacy-blur-card {
        position: relative;
        overflow: hidden;
      }

.map-address-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.map-address-link:hover {
  opacity: 0.85;
}

      .home-privacy-row .privacy-blur-card::after {
        content: "Zum Anzeigen mit Maus darüberfahren";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(248, 249, 250, 0.72);
        color: #495057;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-align: center;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }

      .home-privacy-row .privacy-blur-target {
        filter: blur(8px);
        transition: filter 0.2s ease;
        pointer-events: none;
        user-select: none;
      }

      .home-privacy-row .privacy-blur-card:hover .privacy-blur-target,
      .home-privacy-row .privacy-blur-card:focus-within .privacy-blur-target,
      .home-privacy-row .privacy-blur-card:focus .privacy-blur-target {
        filter: blur(0);
        pointer-events: auto;
        user-select: auto;
      }
      .home-privacy-row:hover .privacy-blur-target {
        filter: blur(0);
        pointer-events: auto;
        user-select: auto;
      }

      .home-privacy-row .privacy-blur-card:hover::after,
      .home-privacy-row .privacy-blur-card:focus-within::after,
      .home-privacy-row .privacy-blur-card:focus::after {
        opacity: 0;
      }
      .home-privacy-row:hover .privacy-blur-card::after {
        opacity: 0;
      }

      /* Stundenkonto */
      .stunden-table {
        min-width: 1000px;
      }

      .stunden-table tbody .stunden-week-col,
      .stunden-table tfoot .stunden-week-col {
        min-width: 145px;
        white-space: nowrap;
        background: #f8f9fa;
      }

      .stunden-table thead .stunden-week-col {
        min-width: 145px;
        white-space: nowrap;
        background: #212529;
        color: #fff;
      }

      .stunden-table thead th:not(.stunden-week-col) {
        min-width: 110px;
        vertical-align: middle;
      }

      .stunden-employee-head {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
        min-height: 2.6em;
      }

      .stunden-employee-head-first,
      .stunden-employee-head-last {
        display: block;
        white-space: nowrap;
      }

      .stunden-year-btn,
      .kassa-year-btn {
        min-width: 44px;
        font-weight: 700;
      }

      .stunden-year-controls,
      .kassa-year-controls {
        min-width: 280px;
      }

      .stunden-table .stunden-cell-wrapper {
        min-width: 120px;
      }

      .stunden-table .stunden-cell-input {
        min-height: 34px;
        text-align: center;
        border: 1px solid #dcdfe3;
        font-weight: 500;
      }

      .stunden-table .stunden-cell-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.12);
      }

      .stunden-table .stunden-cell-input.stunden-cell-pos {
        background: rgba(25, 135, 84, 0.12);
        color: #0f5132;
      }

      .stunden-table .stunden-cell-input.stunden-cell-neg {
        background: rgba(220, 53, 69, 0.12);
        color: #842029;
      }

      .stunden-table .stunden-cell-input.stunden-cell-urlaub {
        background: rgba(13, 110, 253, 0.1);
        color: #084298;
      }

      .stunden-table .stunden-cell-input.stunden-cell-krank {
        background: rgba(255, 193, 7, 0.16);
        color: #664d03;
      }

      .stunden-table .stunden-cell-input.stunden-cell-stempeln,
      .stunden-table .stunden-cell-input.stunden-cell-text {
        background: rgba(108, 117, 125, 0.12);
        color: #41464b;
      }

      .stunden-legend {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 2px 10px;
        border: 1px solid transparent;
      }

      .stunden-legend-pos {
        background: rgba(25, 135, 84, 0.12);
        color: #0f5132;
        border-color: rgba(25, 135, 84, 0.3);
      }

      .stunden-legend-neg {
        background: rgba(220, 53, 69, 0.12);
        color: #842029;
        border-color: rgba(220, 53, 69, 0.3);
      }

      .stunden-legend-text {
        background: rgba(108, 117, 125, 0.12);
        color: #41464b;
        border-color: rgba(108, 117, 125, 0.3);
      }

      /* Kassabuch */
      .kassa-year-btn {
        min-width: 44px;
      }

      .kassa-table {
        min-width: 980px;
      }

      .kassa-table td,
      .kassa-table th {
        vertical-align: middle;
      }

      .kassa-table .kassa-text-cell {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25;
      }

      @media print {
        @page {
          size: A4 portrait;
          margin: 8mm;
        }

        html,
        body {
          background: #fff !important;
        }

        body.container-fluid {
          margin: 0 !important;
          padding: 0 !important;
        }

        .sidebar,
        .toast-container,
        .mobile-topbar,
        .sidebar-backdrop,
        .modal,
        .modal-backdrop {
          display: none !important;
        }

        body.kassa-print-active .row {
          display: block !important;
          margin: 0 !important;
        }

        body.kassa-print-active main {
          width: 100% !important;
          max-width: none !important;
          flex: none !important;
          padding: 0 !important;
          background: #fff !important;
        }

        body.kassa-print-active main > .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-3,
        body.kassa-print-active #kassaNoAccess,
        body.kassa-print-active #kassaContent > :not(#kassaPrintSection) {
          display: none !important;
        }

        body.kassa-print-active #kassaPrintSection {
          border: 0 !important;
          box-shadow: none !important;
          margin: 0 !important;
        }

        body.kassa-print-active #kassaPrintSection .card-header {
          border: 0 !important;
          border-bottom: 1px solid #111 !important;
          background: #fff !important;
          color: #000 !important;
          padding: 0 0 8px 0 !important;
          margin-bottom: 8px !important;
        }

        body.kassa-print-active #kassaHeaderTitle {
          font-size: 22px !important;
          font-weight: 700 !important;
          letter-spacing: 0.2px;
        }

        body.kassa-print-active #kassaHeaderSheet {
          font-size: 12px !important;
          color: #333 !important;
        }

        body.kassa-print-active #kassaPrintSection .card-body {
          padding: 0 !important;
        }

        body.kassa-print-active #kassaTable {
          width: 100% !important;
          min-width: 0 !important;
          font-size: 11pt !important;
        }

        body.kassa-print-active #kassaTable th,
        body.kassa-print-active #kassaTable td {
          border-color: #666 !important;
          padding: 7px 8px !important;
          vertical-align: middle !important;
        }

        body.kassa-print-active #kassaTable thead th {
          background: #f5f5f5 !important;
          color: #000 !important;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }

        body.kassa-print-active #kassaTable thead {
          display: table-header-group;
        }

        body.kassa-print-active #kassaTable tr {
          page-break-inside: avoid;
        }

        body.kassa-print-active #kassaTable .kassa-action-cell {
          display: none !important;
        }

        body.kassa-print-active #kassaTable .kassa-text-cell {
          white-space: normal !important;
          overflow-wrap: anywhere !important;
          word-break: break-word !important;
        }
      }

      /* --------------------------------------
         Responsive shell for phone + tablet
         Desktop layout stays unchanged
         -------------------------------------- */
      .mobile-topbar,
      .sidebar-backdrop {
        display: none;
      }

      @media (max-width: 1024px) {
        body.app-shell {
          overflow-x: hidden;
        }

        body.app-shell .row {
          display: block;
          margin: 0;
        }

        body.app-shell .mobile-topbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: sticky;
          top: 0;
          z-index: 1040;
          height: 56px;
          padding: 0 12px;
          background: #ffffff;
          border-bottom: 1px solid #dee2e6;
        }

        body.app-shell .mobile-topbar-title {
          margin: 0;
          font-size: 1rem;
          font-weight: 700;
          color: #212529;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 70%;
        }

        body.app-shell .sidebar {
          position: fixed !important;
          top: 0;
          left: 0;
          bottom: 0;
          width: min(84vw, 320px) !important;
          max-width: 320px;
          transform: translateX(-100%);
          transition: transform 0.25s ease;
          z-index: 1050;
          overflow-y: auto;
          box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
        }

        body.app-shell.sidebar-open .sidebar {
          transform: translateX(0);
        }

        body.app-shell .sidebar-backdrop {
          display: block;
          position: fixed;
          inset: 0;
          z-index: 1045;
          background: rgba(0, 0, 0, 0.35);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.2s ease;
        }

        body.app-shell.sidebar-open .sidebar-backdrop {
          opacity: 1;
          pointer-events: auto;
        }

        body.app-shell.sidebar-open {
          overflow: hidden;
        }

        body.app-shell main {
          width: 100% !important;
          max-width: 100% !important;
          flex: 1 1 100% !important;
          padding: 1rem !important;
        }

        body.app-shell main > .d-flex {
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 0.75rem !important;
        }

        body.app-shell main > .d-flex form {
          width: 100%;
        }

        body.app-shell main > .d-flex form.d-flex {
          flex-wrap: wrap;
          gap: 0.5rem !important;
        }

        body.app-shell main > .d-flex form.d-flex > * {
          flex: 1 1 100%;
          margin: 0 !important;
          max-width: none !important;
          min-width: 0;
        }

        body.app-shell .p-4 {
          padding: 1rem !important;
        }

        body.app-shell .table {
          font-size: 0.92rem;
        }

        body.app-shell .btn {
          white-space: normal;
        }

        body.app-shell .modal-dialog {
          margin: 0.5rem;
        }

        body.app-shell .modal-dialog.modal-dialog-centered {
          min-height: calc(100% - 1rem);
        }
      }



.rechnung-vorschau-tools {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 0.75rem;
  background: #f6f8fb;
}

.rechnung-vorschau-form {
  border: 1px solid #cfd6df;
  border-radius: 12px;
  padding: 0.9rem;
  background: #f8fafc;
}

.rechnung-vorschau-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.rechnung-vorschau-section-title {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4b5563;
  margin-bottom: 0.45rem;
}

.rechnung-vorschau-form .form-label {
  font-weight: 600;
  color: #27313c;
}

.vorschau-action-row .btn {
  min-width: 150px;
}

.rechnung-vorschau-form .form-control,
.rechnung-vorschau-form .form-select {
  background: #fff;
}

@media (max-width: 992px) {
  .vorschau-action-row .btn {
    min-width: auto;
    flex: 1 1 100%;
  }
}

.rechnung-print-preview-wrap {
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid #d8dce1;
  border-radius: 10px;
  background: #eef1f4;
}

.rechnung-print-preview-page {
  width: 210mm;
  min-height: 297mm;
  max-width: 100%;
  margin: 0 auto;
  padding: 16mm 14mm 14mm 14mm;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  font-family: "Times New Roman", Times, serif;
  font-size: 11pt;
  line-height: 1.28;
}

.rechnung-print-header {
  border-bottom: 1px solid #2b2b2b;
  padding-bottom: 7mm;
  margin-bottom: 8mm;
  font-size: 10.5pt;
}

.rechnung-print-firma {
  font-size: 19pt;
  font-weight: 700;
}

.rechnung-print-top-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
  margin-bottom: 6mm;
}

.rechnung-print-kunde,
.rechnung-print-meta {
  border: 1px solid #d7d7d7;
  padding: 8px 10px;
  min-height: 86px;
}

.rechnung-print-edit-section {
  margin-bottom: 4mm;
}

.rechnung-rich-editor {
  min-height: 88px;
  border: 1px dashed #8f8f8f;
  border-radius: 4px;
  background: #fff;
  padding: 6px 8px;
  line-height: 1.3;
  font-size: 11pt;
  overflow: auto;
  font-family: "Times New Roman", Times, serif;
  white-space: pre-wrap;
}

.rechnung-rich-editor-title {
  min-height: 48px;
}

.rechnung-rich-editor:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.12rem rgba(13, 110, 253, 0.2);
  outline: 0;
}

.rechnung-rich-editor.is-active {
  border-color: #0d6efd;
}

.rechnung-vorschau-info-box {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  background: #fff;
  height: 100%;
}

.rechnung-print-table th,
.rechnung-print-table td {
  font-family: "Times New Roman", Times, serif;
  font-size: 10.7pt;
  vertical-align: top;
}

.rechnung-print-summen {
  width: 295px;
  border: 1px solid #d4d4d4;
  padding: 8px 10px;
  font-size: 11pt;
}

.rechnung-print-summen > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 3px;
}

.rechnung-print-summen > div:last-child {
  margin-bottom: 0;
  margin-top: 4px;
  border-top: 1px solid #999;
  padding-top: 4px;
}

.rechnung-print-footer-note {
  margin-top: 14mm;
  font-size: 10.5pt;
  text-align: center;
}

tr.rechnung-row-mahnung-1 > td {
  background-color: #fff3cd !important;
}

tr.rechnung-row-mahnung-2 > td {
  background-color: #f8d7da !important;
}