body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
}

/* ========= Branding / Header-Konfiguration ========= */
/* Hier drehst du später alles, ohne den Rest zu suchen */
:root {
  /* Farben */
  --topbar-bg: #0e7490;
  --topbar-color: #ffffff;

  /* History-Tabellenfarben */
  --history-row-even:  #f9fafb; /* Zebra-Streifen */
  --history-row-hover: #f5f5f5; /* Hover-Farbe – hier kannst du später spielen */

  /* Horizontaler Abstand zum Rand */
  --topbar-padding-x: 16px;

  /* Höhe des blauen Balkens je Gerät */
  --topbar-height-desktop: 64px;
  --topbar-height-tablet: 56px;
  --topbar-height-mobile: 52px;

  /* Logo-Höhe je Gerät */
  --logo-height-desktop: 120px;
  --logo-height-tablet: 100px;
  --logo-height-mobile: 80px;

  /* Abstand zwischen Logo und "Auditor" */
  --logo-brand-gap: 0px;

  /* Schriftgröße "Auditor" je Gerät */
  --title-size-desktop: 20px;
  --title-size-tablet: 20px;
  --title-size-mobile: 18px;
}

 .link-btn {
  background: transparent;
  color: #ffffff;
  border: none;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover {
  opacity: 0.9;

}

/* Profil-Icon Button in der Topbar */
.profile-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-decoration: none;
}

.profile-icon-btn .profile-icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* Hinweiszeile über der Checkliste (z.B. "Finalisiertes Audit geöffnet") */
#auditMsg {
  margin-top: 4px;
  font-size: 13px;      /* kleiner als Standardtext */
  color: #6b7280;       /* dezentes Grau */
}


/* Profilbutton deaktiviert, wenn Profilansicht offen */
#profileBtn.is-disabled,
.ec-profile-open #profileBtn {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}


/* ========== Top-Bar ========== */

/* blauer Balken über die ganze Breite */
header.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-color);
}

/* Inhalt des Headers – immer volle Breite,
   Logo links, Userinfo rechts, vertikal mittig */
.topbar-inner {
  width: 100%;
  padding: 0 var(--topbar-padding-x);
  height: var(--topbar-height-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Links: Logo + "Auditor" */
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--logo-brand-gap);
}

/* Logo – bleibt schwarz, skaliert nur über Höhe */
.header-logo {
  height: var(--logo-height-desktop);
  width: auto;
  display: block;
}

/* "Auditor"-Text */
.header-subtitle {
  font-weight: 600;
  font-size: var(--title-size-desktop);
  color: var(--topbar-color);
}

/* Rechts: Whoami + Logout */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ========== Responsive Anpassungen ========== */

/* Tablet */
@media (max-width: 1024px) {
  .topbar-inner {
    height: var(--topbar-height-tablet);
  }
  .header-logo {
    height: var(--logo-height-tablet);
  }
  .header-subtitle {
    font-size: var(--title-size-tablet);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .topbar-inner {
    height: var(--topbar-height-mobile);
  }
  .header-logo {
    height: var(--logo-height-mobile);
  }
  .header-subtitle {
    font-size: var(--title-size-mobile);
  }
}

    main { max-width:1100px; margin:0 auto; padding:16px; padding-bottom: 90px; /* Platz für Sticky-Bar */ }
    .card { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin:12px 0 }

/* Passwort-Reset-Ansicht mittig zentrieren */
body.ec-pwreset main {
  min-height: calc(100vh - var(--topbar-height-desktop));
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ec-pwreset #pwResetCard {
  width: 100%;
  max-width: 480px;
  margin: 0;
}

/* Normaler App-/Login-Modus: Standard-Layout */
body:not(.ec-pwreset) main {
  display: block;
}


    /* ========= Profilbereich ========= */

#profileCard {
  max-width: 1200px;
  margin: 12px auto 4px;
}

#profileCard h3 {
  font-size: 20px;
  margin: 0 0 4px;
  font-weight: 600;
  color: #111827;
}

#profileCard .profile-subline {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.profile-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 4px;
}

.profile-field input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  color: #111827;
  box-sizing: border-box;
}

.profile-section-title {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* Benachrichtigungen als Karten */

.profile-notify-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.profile-notify-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;
}

.profile-notify-item input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.profile-notify-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-notify-label .title {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

.profile-notify-label .desc {
  font-size: 11px;
  color: #6b7280;
}

/* Footer-Aktion */

.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Responsive: einspaltig auf kleineren Screens */

@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 0;
  }

  #profileCard {
    margin-top: 8px;
  }

  .profile-actions {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

    .row { display:flex; gap:10px; flex-wrap:wrap }
    label { display:block; font-size:13px; color:#374151; margin-bottom:6px }
    input, select { width:100%; padding:8px; border:1px solid #d1d5db; border-radius:8px; height: 40px; line-height: 40px; box-sizing: border-box; }
    /* NEU: Buttons auch für <a class="btn"> stylen */
button, a.btn {
  background:#0ea5e9; color:#fff; border:0; padding:8px 12px; border-radius:8px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
}
button.secondary, a.btn.secondary { background:#64748b }
button.danger,   a.btn.danger   { background:#ef4444 }

a.btn:visited { color:#fff; }
.small { padding:6px 10px !important; font-size:14px; border-radius:8px; }
    .badge { font-size:12px; background:#e0f2fe; color:#075985; border-radius:999px; padding:2px 8px }
    .sticky { position:sticky; top:0; background:white; padding:10px 0; z-index:2 }
    table { width:100%; border-collapse:collapse }
    th, td { padding:6px; border-bottom:1px solid #e5e7eb; text-align:left; font-size:14px }
    .muted { color:#6b7280; font-size:12px }

    /* Login: Passwortfeld mit Auge-Icon */
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrap input {
  width: 100%;
  padding-right: 36px; /* Platz für das Auge */
  box-sizing: border-box;
}

.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pw-toggle:hover .pw-icon {
  opacity: 0.85;
}

.pw-icon {
  width: 16px;
  height: 16px;
  stroke: #4b5563;
  fill: none;
}

/* offenes Auge */
.pw-icon-show path {
  stroke: #4b5563;
}
.pw-icon-show circle {
  fill: #4b5563;
}

/* durchgestrichenes Auge (initial versteckt) */
.pw-icon-hide {
  display: none;
  stroke: #4b5563;
  stroke-width: 1.6;
}

/* wenn is-active → offenes Auge weg, durchgestrichenes Auge anzeigen */
.pw-toggle.is-active .pw-icon-show {
  display: none;
}
.pw-toggle.is-active .pw-icon-hide {
  display: block;
}

/* Captcha-Abstand */
.captcha-wrap {
  margin-top: 8px;
}




    /* === Prüflisten-Layout (REPLACE) === */
.item{
  display:grid;
  grid-template-columns: 1fr 56px 56px 56px;
  gap:8px;
  align-items:start;      /* wichtig: Notiz bündig unter Titel */
  padding:6px 4px;
}
.cell-center{ display:flex; justify-content:center; align-items:center; padding:8px 0; }
.section-head > div { text-align:center; }
.section-head > div:first-child { text-align:left; }

/* === Pflicht-Notiz (REPLACE) === */
.note-wrap{
  grid-column: 1 / -1;    /* über alle 4 Spalten */
  margin:6px 0 2px 0;
  display:none;
}
.note-wrap.active{ display:block; }
.note-wrap label{
  display:block; font-size:12px; color:#374151; margin:0 0 4px 2px;
}
.note-wrap textarea{
  width:100%; min-height:64px; resize:vertical;
  font-size:14px; padding:8px 10px;
  border:1px solid #cbd5e1; border-radius:8px; box-sizing:border-box;
}

/* schreibgeschütztes Notizfeld (finalisierte Audits) */
.note-wrap textarea.readonly{
  background:#f3f4f6;
  color:#374151;
  border-color:#e5e7eb;
  cursor:not-allowed;
}


    /* Collapsible Sections (details/summary) im Card-Look */
    details.section.card { padding:0; }
    details.section.card > summary {
      list-style:none; cursor:pointer; padding:12px 14px;
      display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap: wrap; row-gap: 6px;
    }
    details.section.card > summary::-webkit-details-marker { display:none; }
    .summary-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
    .summary-title .chev { opacity: .8; }
    .summary-right { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #111827; margin-left: auto; }
    .section-body { padding: 0 14px 12px 14px; }
    .chev { transition: transform .2s ease; }
    details[open] .chev { transform: rotate(90deg); }

    * { -webkit-tap-highlight-color: transparent; }

    /* ====== Responsive Optimierungen ====== */
    input, select, button { font-size: 16px; min-height: 44px; } /* Touch-Ziele */
    input[type="radio"] { width: 20px; height: 20px; }
    @media (pointer: coarse) { input[type="radio"] { width: 22px; height: 22px; } }

    @media (max-width: 700px) { .summary-right { width: 100%; text-align: right; } }
    @media (max-width: 840px) { .row { flex-direction: column; align-items: stretch; } }
    @media (max-width: 1024px) { .item { grid-template-columns: 1fr 56px 56px 56px; } table { font-size: 15px; } }
    @media (max-width: 840px) { .item { grid-template-columns: 1fr 52px 52px 52px; } }
    @media (max-width: 640px) { .item { grid-template-columns: 1fr 48px 48px 48px; } .summary-right { font-size: 14px; } }

    /* Kompakte Bottom-Bar */
    #bottomBar.card.compact { padding: 8px 12px; }
    #bottomBar .bar { align-items: center; justify-content: space-between; gap: 12px; }
    #bottomBar .stats { font-size: 14px; }
    #bottomBar .actions { display: flex; gap: 8px; }
    #bottomBar button { padding: 6px 10px; font-size: 14px; border-radius: 8px; }
    @media (max-width: 700px) {
      #bottomBar .bar { flex-direction: column; align-items: stretch; gap: 8px; }
      #bottomBar .actions { justify-content: space-between; }
    }

    /* iPad-Fix: Date-Input gleich hoch & nicht zu breit */
    @media (max-width: 1024px) {
      #auditDate {
        max-width: 220px; height: 44px; line-height: 44px; padding: 0 10px; box-sizing: border-box; font-size: 16px;
        -webkit-appearance: none; appearance: none;
      }
      #auditDate::-webkit-date-and-time-value { min-height: 0; }
      #auditDate::-webkit-datetime-edit-fields-wrapper { padding: 0; }
      #auditDate::-webkit-calendar-picker-indicator { margin: 0; }
      #koFlag { min-width: 120px; height: 44px; line-height: 44px; }
    }
    @media (min-width: 1025px) {
      button { padding: 6px 10px; font-size: 14px; border-radius: 8px; }
      #auditDate { max-width: 210px; height: 40px; line-height: 40px; padding: 0 10px; font-size: 14px; -webkit-appearance: none; appearance: none; }
      #koFlag { height: 40px; line-height: 40px; min-width: 120px; }
    }

    /* === Betriebsübersicht (responsive) === */
    #overviewCard .ov-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px 24px;
    }
    #overviewCard .ov-label { font-size: 12px; color: #6b7280; }
    #overviewCard .ov-value { font-size: 18px; font-weight: 600; }
    #overviewCard .ov-row-full { grid-column: 1 / -1; }
    #overviewCard .ov-bottom {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px 24px;
      margin-top: 6px;
    }

    /* Audit-Badges bündig zum Datum + mehr Abstand */
#overviewCard .ov-value--audit{
  display:flex;
  align-items:center;   /* Datum, Punkte-Pill & Stufe auf eine Höhe */
  flex-wrap:wrap;
  gap:8px;              /* Grundabstand zwischen Boxen */
}
#overviewCard .ov-value--audit .sep{
  margin:0 12px;        /* mehr Luft um die • Punkte */
  opacity:.5;
}

    /* Badges/Pills */
    .pill {
      display: inline-flex;
      align-items: center;
      height: 28px;
      line-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 13px;
      border: 1px solid #e5e7eb;
      background: #f9fafb;
      vertical-align: middle;
    }
    .pill.score { font-weight: 700; }
    .pill.tier  { font-weight: 600; }
    .pill.tier.excellence { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
    .pill.tier.certified  { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
    .pill.tier.entry      { background:#fffbeb; color:#92400e; border-color:#fde68a; }
    .pill.tier.fail       { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
    .pill.running { background:#fff7ed; color:#92400e; border-color:#fed7aa; }

    .save-status {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 600; color: #065f46;
      background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px;
      padding: 2px 10px 2px 6px;
    }
    .save-status .ic { width: 16px; height: 16px; }
    .save-status .circ { fill: none; stroke: #10b981; stroke-width: 2; }
    .save-status .chk  { fill: none; stroke: #10b981; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


    /* === Fortschrittsbalken (nur bei aktivem Audit sichtbar) === */
#progressWrap{
  display:none;                 /* per JS sichtbar schalten */
  align-items:center;
  gap:8px;
}
#progressBar{
  width:180px; height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}
#progressFill{
  display:block;          /* << das fehlt – macht width/height wirksam */
  height:100%;
  width:0%;
  background:#0ea5e9;
  transition: width .25s ease;
}
#progressBar{ position:relative; }
#progressFill{ border-radius:999px; }  /* runde Kanten auch für die Füllung */
#progressPct{
  font-size:12px; color:#374151;
  min-width:36px; text-align:right;
}
@media (max-width:700px){
  #progressBar{ width:140px; }
}


    /* === Einfache, native Farb-Logik für Radios ========================= */
    /* Farben NUR während laufendem Audit (Klasse .audit-active am #appView) */
    #appView.audit-active #checklist input.rad-e:checked  { accent-color:#86efac; } /* grün */
    #appView.audit-active #checklist input.rad-n:checked  { accent-color:#fca5a5; } /* rot  */
    #appView.audit-active #checklist input.rad-na:checked { accent-color:#9ca3af; } /* grau */

    /* Finalisierte Audits: neutral & nicht klickbar */
    #appView.read-only:not(.audit-active) #checklist input[type="radio"]{
      pointer-events: none;
      accent-color: #6b7280;
      opacity: 1;
    }

/* === Laufendes-Audit Hinweis (kompakt unter "Kriterien") === */
#runningAuditNotice{
  display:flex; align-items:center; gap:10px;
  margin-top:10px;
  padding:8px 12px;                 /* deutlich schmaler */
  border:1px solid #fde68a;
  background:#fffbeb; color:#92400e;
  border-radius:10px;
}
#runningAuditNotice .txt{ font-size:14px; line-height:1.2; }
#runningAuditNotice .actions{
  margin-left:auto; display:flex; align-items:center; gap:8px;
}
#runningAuditNotice .open{
  width:28px; height:28px; border-radius:9999px;
  border:1px solid #e5e7eb; background:#64748b; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
#runningAuditNotice .close{
  background:transparent; border:0; padding:0;
  font-size:18px; line-height:1; color:#92400e; cursor:pointer; /* X ohne Box, rechtsbündig */
}
#runningAuditNotice .open:hover{ filter:brightness(1.05); }

/* === KO-Hinweis (kompakt & Pills) === */
/* === KO-Hinweis – Pill größer, Pfeil passt rein ====================== */
#koNotice { margin-top: 10px; }
#koNotice .title { font-weight: 600; color:#991b1b; margin-bottom: 6px; }
#koNotice .list { display:flex; flex-direction:column; gap:8px; }

/* Die rote Pill/Box – etwas höher & breiter, damit der Pfeil drin ist */
#koNotice .chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* Höhe/Typo */
  font-size: 14px;              /* Text etwas größer */
  line-height: 24px;            /* natürliche Pill-Höhe */

  /* Innenabstände (rechts Platz für Pfeil lassen) */
  padding: 4px 36px 4px 12px;   /* ← rechts + Platz für Pfeil */
  border-radius: 9999px;

  /* Farben */
  color: #b91c1c;
  background: #fff;
  border: 1px solid #fca5a5;
}

/* Nummer + Text (optional) */
#koNotice .chip .num { font-weight:700; }
#koNotice .chip .txt { white-space: nowrap; }

/* Der kleine Pfeil – fixierte Mini-Größe und sauber im Chip rechts */
#koNotice .jump{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;
  min-height: 0;                /* überschreibt globale 44px */
  padding: 0;

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

  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #64748b;
  color: #fff;
  font-size: 12px;              /* kleines Pfeil-Glyph */
  line-height: 20px;
  cursor: pointer;
}
#koNotice .jump:hover { filter: brightness(1.05); }



/* Optional: falls du den Close-Style noch irgendwo hattest, wird er ignoriert */
#koNotice .close{ display:none !important; }

/* === Hinweis: fehlende Notizen (blau) === */
#noteNotice{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px;
  margin-top:8px; padding:8px 12px;
  border:1px solid #bfdbfe; background:#eff6ff; color:#1e40af; border-radius:10px;
}
#noteNotice .title{ font-weight:600; }
#noteNotice .list{ display:flex; flex-direction:column; gap:6px; width:100%; }
#noteNotice .chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #bfdbfe; background:#dbeafe; border-radius:9999px;
  padding:2px 10px; font-size:13px;
}
#noteNotice .jump{
  width:18px; height:18px; border-radius:9999px; border:0;
  background:#64748b; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}



/* sanftes Aufblitzen der Zielzeile beim Sprung */
.item.flash{ outline:2px solid #fca5a5; border-radius:8px; animation:koPulse 1.2s ease; }
@keyframes koPulse{ 0%{background:#fff;} 25%{background:#fee2e2;} 100%{background:#fff;} }


/* Aktionen unten rechts in der Betriebsübersicht */
#overviewCard .ov-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
  gap:12px;               /* NEU: Abstand zwischen QR und Bearbeiten */
}

/* === Pflicht-Notizen =============================================== */
.note-wrap{ margin:6px 0 2px 0; display:none; }
.note-wrap.active{ display:block; }
.note-wrap label{
  display:block; font-size:12px; color:#374151; margin:0 0 4px 2px;
}
.note-wrap textarea{
  width:100%; min-height:64px; resize:vertical;
  font-size:14px; padding:8px 10px;
  border:1px solid #cbd5e1; border-radius:8px; box-sizing:border-box;
}

/* === Blauer Hinweis (fehlende Pflicht-Notizen) ===================== */
#noteNotice{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px;
  margin-top:10px; padding:10px 12px;
  border:1px solid #bfdbfe; background:#eff6ff; color:#1e40af; border-radius:10px;
}
#noteNotice .title{ font-weight:600; }
#noteNotice .list{ display:flex; flex-direction:column; gap:8px; width:100%; }

#noteNotice .chip{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; line-height:24px;
  padding:4px 36px 4px 12px; border-radius:9999px;
  color:#1e40af; background:#fff; border:1px solid #bfdbfe;
}
#noteNotice .chip .num{ font-weight:700; }
#noteNotice .jump{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; min-height:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; border:1px solid #cbd5e1;
  background:#64748b; color:#fff; font-size:12px; line-height:20px; cursor:pointer;
}
#noteNotice .jump:hover{ filter:brightness(1.05); }

 /* === Fotos je Prüfpunkt ============================================ */
.photo-wrap{
  display:none;
  grid-column:1 / -1;
  margin:2px 0 2px;   /* vorher 6px */
}

.photo-wrap.active{ display:block; }

.photo-toolbar{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.photo-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.thumb-wrap{ position:relative; width:84px; height:84px; }
.thumb{ width:100%; height:100%; object-fit:cover; border:1px solid #cbd5e1; border-radius:8px; cursor:pointer; background:#f8fafc; }
.thumb-del{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border:0; border-radius:9999px;
  background:rgba(0,0,0,.6); color:#fff; cursor:pointer; line-height:20px; text-align:center; font-size:12px;
}
#photoLightbox{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:9999; }
#photoLightbox.open{ display:flex; }
#photoLightbox img{ max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); }

/* Lightbox Bedienung */
#photoLightbox { cursor: zoom-out; }
#photoLightbox img { cursor: default; }
#photoLightbox.open { display: flex; }

#photoLightbox .closeBtn{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border:0; border-radius:9999px;
  background:rgba(0,0,0,.6); color:#fff; font-size:22px;
  line-height:36px; text-align:center; cursor:pointer;
}
/* Optional: größere Targets auf Touch */

/* ========== Audit-Historie ========== */

#historyCard {
  margin-top: 16px;
}

#historyCard h3 {
  margin-bottom: 8px;
}

#historyCard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#historyCard thead {
  background: #f3f4f6;
}

#historyCard th,
#historyCard td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
}

/* Zebra-Streifen */
#historyCard tbody tr:nth-child(even) {
  background-color: var(--history-row-even);
}

/* Hover-Effekt (weicher, über Variable steuerbar) */
#historyCard tbody tr:hover {
  background-color: var(--history-row-hover);
}



/* KO / Status kompakt halten */
#historyCard td:nth-child(4),
#historyCard td:nth-child(5) {
  white-space: nowrap;
}

/* Aktionen rechtsbündig */
#historyCard td:last-child {
  text-align: right;
}


@media (pointer: coarse){
  #photoLightbox .closeBtn{ width:44px; height:44px; font-size:26px; line-height:44px; }
}

.profile-security {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-security-text {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}


/* ========== Globales Banner (Meldungen) ========== */

.ec-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 14px;
  min-width: 260px;
  max-width: 720px;

  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.20);
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;

  transition: opacity 0.18s ease, transform 0.18s ease;
}



/* Startzustand ausgeblendet */
.ec-banner--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
}

/* Sichtbar */
.ec-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Farbvarianten */
.ec-banner--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.ec-banner--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.ec-banner--success {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.ec-banner--info {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #111827;
}

.ec-banner__text {
  flex: 1;
  line-height: 1.4;
}

.ec-banner__close {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  color: inherit;
}

/* Overlay für Kunden-Weiterleitung zum Portal */
#portalRedirectBackdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.18);
}

#portalRedirectBox {
  position: relative;
  margin-top: 80px;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 20px 14px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  font-size: 14px;
  color: #111827;
}

#portalRedirectBox h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

#portalRedirectBox p {
  margin: 2px 0;
  line-height: 1.45;
}

#portalRedirectBox a {
  color: #0e7490;
  text-decoration: underline;
}

#portalRedirectBox .meta {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

#portalRedirectBox .portal-close:hover {
  background: #f3f4f6;
}

#portalRedirectBox .portal-cancel {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  color: #6b7280;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

#bottomBar .actions {
  display: flex;
  gap: 0.75rem;
}

#bottomBar .actions > div {
  display: flex;
  gap: 0.75rem;
}