/*
========================================
Transpera HUB Styles - PART 1/4
Version: 8.0 | Stand: 2025-10-25 (BEREINIGT)
Inhalt: Global, Header, Navigation, Buttons, Footer
========================================
*/

/* ==========================
   CSS VARIABLES
========================== */
:root {
  --tp-primary: #005a76;
  --tp-primary-hover: #007c9d;
  --twilio: #F22F46;
  --twilio-hover: #D41F36;
  --comdesk: #0B66B2;
  --comdesk-hover: #084F8A;
}

/* ==========================
   ANIMATIONS
========================== */
@keyframes tp-spin { 
  to { transform: rotate(360deg); } 
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 10px rgba(0, 209, 255, 0.4), 0 0 20px rgba(0, 209, 255, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 209, 255, 0.6), 0 0 40px rgba(0, 209, 255, 0.4); }
  100% { box-shadow: 0 0 10px rgba(0, 209, 255, 0.4), 0 0 20px rgba(0, 209, 255, 0.2); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ==========================
   GLOBAL
========================== */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('/images/Transpera_background-image_login_2.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  flex-grow: 1;
  padding: 2rem;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.92);
  width: 100%;
  min-height: calc(100vh - 150px - 60px);
  padding-bottom: 150px;
  box-sizing: border-box;
}

/* ==========================
   HEADER
========================== */
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 150px;
  position: relative;
  color: white;
  background: transparent;
  backdrop-filter: blur(25px) saturate(180%);
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: box-shadow 0.3s ease;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 45, 59, 0.75) 0%, rgba(0, 45, 59, 0.85) 100%);
  z-index: 1;
}

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 209, 255, 0.5) 50%, transparent 100%);
  z-index: 3;
}

header .logo {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

header .logo:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 20px rgba(0, 209, 255, 0.6));
}

header .logo img {
  height: 50px;
  filter: drop-shadow(0 2px 8px rgba(0, 209, 255, 0.3));
  transition: filter 0.3s ease;
}

header .logo:hover img {
  filter: drop-shadow(0 4px 16px rgba(0, 209, 255, 0.7));
}

header .menu {
  display: flex;
  gap: 12px;
  justify-content: center;
  z-index: 2;
}

/* ==========================
   MAIN NAVIGATION TABS
========================== */
header .menu a button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

header .menu a button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 209, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: 0;
}

header .menu a button:hover::before {
  width: 200%;
  height: 200%;
}

header .menu a button:hover {
  background: rgba(0, 209, 255, 0.25);
  border-color: rgba(0, 209, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 209, 255, 0.4), 0 0 20px rgba(0, 209, 255, 0.2);
  transform: translateY(-2px);
}

header .menu a button i,
header .menu a button span {
  position: relative;
  z-index: 1;
}

header .menu a button.active {
  background: linear-gradient(135deg, rgba(0, 90, 118, 0.95) 0%, rgba(0, 124, 157, 0.95) 100%);
  border-color: rgba(0, 209, 255, 0.6);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 90, 118, 0.5), 0 0 30px rgba(0, 209, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
  animation: pulse-glow 3s infinite;
}

header .menu a button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d1ff, transparent);
  border-radius: 2px;
}

/* ==========================
   BURGER MENU – Pure CSS
========================== */
:root{
  --hub-menu-w: min(92vw, 360px);
  --hub-menu-pad: 14px;
}

/* Button bleibt wie gehabt sichtbar/versteckt */
.burger{
  display:none;
  font-size:26px;
  color:#fff;
  cursor:pointer;
  position:absolute;
  top:20px;
  right:20px;
  z-index:10001;

  /* größere Hit-Area + dezente Fläche */
  inline-size:44px; 
  block-size:44px;
  place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,0.06);
  -webkit-tap-highlight-color: transparent;
}

/* ==========================
   BURGER MENU – Mobile only
========================== */
@media (max-width: 768px){
  /* Burger-Button nur mobil */
  .burger{
    display:grid;
    place-items:center;
    position:absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index:10001;
    font-size:26px;
    color:#fff;
    cursor:pointer;
    inline-size:48px; block-size:48px;     /* große Tap-Ziele */
    border-radius:12px;
    background: rgba(255,255,255,0.08);
    -webkit-tap-highlight-color: transparent;
  }
  .burger:focus-visible{ outline:2px solid #fff; outline-offset:2px }

  /* Menü-Panel (geschlossen) */
  header .menu{
    display:none;                          /* bleibt zu, bis .show gesetzt ist */
    flex-direction:column; gap:10px;

    position:fixed;
    /* Passe die Headerhöhe ggf. an: Standard ~84px */
    top: calc(var(--header-h, 84px) + env(safe-area-inset-top));
    left:12px; right:12px;                 /* schöner Rand */
    width:auto;
    max-height: calc(100dvh - var(--header-h, 84px) - 24px);
    overflow:auto;                         /* scrollt bei langen Menüs */

    padding:14px;
    background:#002d3b;                    /* kontrastreich & robust ohne Blur */
    border-radius:14px;
    box-shadow:0 14px 36px rgba(0,0,0,.45);
    z-index:9999;

    /* sanftes Ein-/Ausblenden */
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s .14s;
  }

  /* Wenn Blur unterstützt wird → weicher, glasiger Look */
  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
    header .menu{
      background: rgba(0,45,59,0.86);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,.08);
    }
  }

  /* geöffnet: dein bestehendes Toggle setzt .show */
  header .menu.show{
    display:flex;
    opacity:1; visibility:visible; transform:translateY(0);
    transition: opacity .14s ease, transform .14s ease;
  }

  /* Link-Flächen fingerfreundlich */
  header .menu a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
  }
  header .menu a + a{ margin-top:6px }
  header .menu a:focus-visible{
    outline:2px solid #fff; outline-offset:2px;
  }

  /* sehr kleine Geräte: volle Breite */
  @media (max-width: 420px){
    header .menu{ left:0; right:0; width:100vw; border-radius:0 }
  }

  /* weniger Motion auf Touch/Reduce-Motion */
  @media (pointer: coarse){ header .menu{ transition-duration:.12s } }
  @media (prefers-reduced-motion: reduce){ header .menu{ transition:none } }
}



/* ==========================
   HEADER ACTIONS (Install & Logout)
========================== */
header .header-actions {
  position: absolute;
  bottom: 28px;
  top: auto;
  right: 32px;
  transform: none;
  display: flex;
  gap: 10px;
  z-index: 10;
}

header .header-actions .btn-install {
  position: static;
}

header .btn-install,
header .btn-logout {
  background: linear-gradient(135deg, rgba(0, 90, 118, 0.9) 0%, rgba(0, 124, 157, 0.9) 100%);
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(0, 209, 255, 0.3);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

header .btn-install::before,
header .btn-logout::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

header .btn-install:hover::before,
header .btn-logout:hover::before {
  width: 200%;
  height: 200%;
}

header .btn-install:hover,
header .btn-logout:hover {
  background: linear-gradient(135deg, rgba(0, 124, 157, 1) 0%, rgba(0, 149, 195, 1) 100%);
  border-color: rgba(0, 209, 255, 0.6);
  box-shadow: 0 6px 20px rgba(0, 90, 118, 0.4), 0 0 20px rgba(0, 209, 255, 0.3);
  transform: translateY(-2px);
}

header .btn-logout i,
header .btn-install i {
  font-size: 14px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

header .btn-install span,
header .btn-logout span {
  position: relative;
  z-index: 1;
}

/* ==========================
   UNIFIED BUTTON SYSTEM
========================== */
.subtab-btn,
.btn,
.btn-back,
.btn-small,
a.subtab-btn,
a.btn,
a.btn-back,
a.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--tp-primary);
  color: #fff !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-sizing: border-box;
  line-height: 1;
}

.subtab-btn:hover,
.btn:hover,
.btn-back:hover,
.btn-small:hover,
a.subtab-btn:hover,
a.btn:hover,
a.btn-back:hover,
a.btn-small:hover {
  background: var(--tp-primary-hover);
  box-shadow: 0 0 8px rgba(0, 90, 118, 0.6);
}

.subtab-btn.active {
  background: var(--tp-primary-hover);
  box-shadow: 0 0 12px rgba(0, 90, 118, 0.8);
}

.subtab-btn:focus-visible,
.btn:focus-visible,
.btn-back:focus-visible,
.btn-small:focus-visible {
  outline: 2px solid rgba(0, 90, 118, 0.5);
  outline-offset: 2px;
}

.subtab-btn[disabled],
.btn[disabled],
.btn-back[disabled],
.btn-small[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Compact Button Variant */
.btn--sm {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  gap: 6px;
  border-radius: 6px;
}

.btn--sm i {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* Icon Alignment in Buttons */
.btn i,
.new-btn i,
.save-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  transform: none !important;
}

/* ==========================
   BUTTON VARIANTS
========================== */
.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #761c00;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn:hover {
  background: #a92800;
  box-shadow: 0 0 8px rgba(118, 28, 0, 0.5);
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: all !important;
}

.new-btn {
  background-color: #007657;
  color: #fff;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.new-btn:hover {
  background-color: #00906a;
  box-shadow: 0 0 8px rgba(0, 118, 28, 0.5);
}

/* Button Saving State */
.btn-saving {
  position: relative;
  padding-left: 36px !important;
}

.btn-saving::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(0, 90, 118, 0.25);
  border-top-color: var(--tp-primary);
  border-radius: 50%;
  animation: tp-spin 0.8s linear infinite;
}

/* Form Buttons */
.form-buttons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.form-buttons .btn-cancel {
  background: #e6e6e6;
  color: #333;
}

.form-buttons .btn-cancel:hover {
  background: #ccc;
}

/* ==========================
   ACTION ICON BUTTONS
========================== */
.icon-btn,
.reset-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  border: none;
  margin: 0 4px;
  cursor: pointer;
  background: var(--tp-primary);
  transition: background 0.3s ease, transform 0.2s ease;
}

.icon-btn:hover,
.reset-btn:hover {
  background: var(--tp-primary-hover);
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 90, 118, 0.3);
}

.icon-btn:disabled,
.reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-btn.blinking {
  animation: blink 1s infinite;
  border: 2px solid #00d1ff;
}

.icon-btn.hangup {
  background-color: #761c00;
}

.icon-btn.hangup:hover {
  background-color: #a92800;
}

.icon-btn i {
  color: #fff !important;
}

.icon-btn.delete-btn {
  background: #761c00 !important;
  color: #fff;
}

.icon-btn.delete-btn:hover {
  background: #5a1500;
}

/* ==========================
   FOOTER
========================== */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  font-size: 14px;
  color: white;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 45, 59, 0.95) 0%, rgba(0, 35, 46, 0.98) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  height: 70px;
  box-sizing: border-box;
  gap: 24px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 9999;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 209, 255, 0.6) 50%, transparent 100%);
}

.footer-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.footer-left {
  text-align: left;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.85;
}

.footer-center {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-right {
  text-align: right;
  display: flex;
  align-items: center;
}

.footer-right .refresh-btn {
  margin-left: auto;
}

/* ==========================
   FOOTER BADGE
========================== */
.footer-badge {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.footer-badge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 209, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.footer-badge:hover::before {
  width: 300%;
  height: 300%;
}

.footer-badge i {
  font-size: 16px;
  color: #00d1ff !important;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.footer-badge:hover i {
  transform: rotate(360deg) scale(1.1);
}

.footer-badge:hover {
  background: rgba(0, 209, 255, 0.25);
  border-color: rgba(0, 209, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 209, 255, 0.4), 0 0 20px rgba(0, 209, 255, 0.2);
  transform: translateY(-2px);
}

.footer-badge span,
.footer-badge a {
  position: relative;
  z-index: 1;
}


/* ==========================
   REFRESH BUTTON
========================== */
.refresh-btn {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.refresh-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 209, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.refresh-btn:hover::before {
  width: 300%;
  height: 300%;
}

.refresh-btn:hover {
  background: rgba(0, 209, 255, 0.25);
  border-color: rgba(0, 209, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 209, 255, 0.4), 0 0 20px rgba(0, 209, 255, 0.2);
  transform: translateY(-2px);
}

.refresh-btn:hover i {
  animation: tp-spin 0.6s ease-in-out;
}

.refresh-btn i,
.refresh-btn span {
  position: relative;
  z-index: 1;
}



/* ==========================
   POPOVER
========================== */
.tp-popover {
  border: 0;
  padding: 0;
  border-radius: 16px;
  width: min(90vw, 720px);
  max-width: 720px;
  background: #fff;
  color: #222;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.tp-popover::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.tp-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--tp-primary);
  color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.tp-popover-close {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  cursor: pointer;
}

.tp-popover-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.tp-popover-body {
  padding: 16px;
  max-height: 60vh;
  overflow: auto;
}

.tp-popover-body pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

/*
========================================
Transpera HUB Styles - PART 2/4
Version: 5.6 | Stand: 2025-01-09 (BEREINIGT)
Inhalt: Tables, Forms, Status Badges, Filters, Tabs
========================================
*/

/* ==========================
   SUBTABS (für Unterseiten)
========================== */
.subtabs-container.main-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.subtabs-container.main-tabs .subtabs {
  display: flex;
  gap: 10px;
}

.subtabs-container.detail-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 0px;
  padding-left: 0;
  margin-bottom: 15px;
}

.subtabs-container.detail-tabs .subtabs {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.subtab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.subtab-content.show,
.subtab-content.fade-in.show {
  display: block;
  opacity: 1;
}

/* Vendor Aware Subtabs */
.subtabs-container.main-tabs .subtabs .subtab-btn {
  background: #fff;
  color: var(--tp-primary) !important;
  border: 1px solid var(--tp-primary);
  border-radius: 999px;
  height: 36px;
  min-height: 36px;
  line-height: 1;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.08s, box-shadow 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}

.subtabs-container.main-tabs .subtabs .subtab-btn:hover,
.subtabs-container.main-tabs .subtabs .subtab-btn.active {
  background: var(--tp-primary-hover);
  color: #fff !important;
  border-color: var(--tp-primary-hover);
  box-shadow: 0 0 8px rgba(0, 90, 118, 0.4);
  transform: translateY(-1px);
}

.subtab--twilio {
  color: var(--twilio) !important;
  border-color: var(--twilio);
}

.subtab--twilio:hover,
.subtab--twilio.active {
  background: var(--twilio);
  color: #fff !important;
  border-color: var(--twilio);
  box-shadow: 0 0 8px rgba(242, 47, 70, 0.35);
}

.subtab--comdesk {
  color: var(--comdesk) !important;
  border-color: var(--comdesk);
}

.subtab--comdesk:hover,
.subtab--comdesk.active {
  background: var(--comdesk);
  color: #fff !important;
  border-color: var(--comdesk);
  box-shadow: 0 0 8px rgba(11, 102, 178, 0.35);
}

.subtab-btn .vendor-badge {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  filter: none;
}

@media (max-width: 768px) {
  .subtabs-container.detail-tabs {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .subtabs-container.detail-tabs .save-btn {
    align-self: flex-end;
    width: 100%;
    text-align: center;
  }
}

/* ==========================
   SEARCHBAR & FILTERS
========================== */
.search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#search-input,
.search-input {
  width: 320px;
  max-width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: all 0.3s ease;
}

#search-input:focus,
.search-input:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

.filter-select,
#status-filter,
#entries-per-page {
  height: 40px;
  min-width: 140px;
  padding: 0 12px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-select:hover,
.filter-select:focus,
#status-filter:hover,
#entries-per-page:hover,
#status-filter:focus,
#entries-per-page:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

.search-container,
.filter-bar,
.list-header {
  margin-bottom: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.filter-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

/* ==========================
   TABELLEN (Global Optimized)
========================== */
.call-table,
.recordings-table,
.traffic-table,
.styled-table {
  font-size: 13px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
  table-layout: auto;
  display: table;
}

/* === HEADER: Sticky + Gradient === */
.call-table th,
.recordings-table th,
.traffic-table th,
.styled-table th {
  background: linear-gradient(180deg, #006a85 0%, #005a76 100%);
  color: white;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid #004d5f;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease;
}

/* === ROWS: Hover + Animation === */
.call-table tbody tr,
.recordings-table tbody tr,
.traffic-table tbody tr,
.styled-table tbody tr {
  border-bottom: 1px solid #f1f5f7;
  transition: all 0.15s ease;
  cursor: pointer;
}

/* Abwechselnde Zeilen (subtil) */
.call-table tbody tr:nth-child(even),
.recordings-table tbody tr:nth-child(even),
.traffic-table tbody tr:nth-child(even),
.styled-table tbody tr:nth-child(even) {
  background: #fafcfd;
}

/* Hover mit linkem Rand + Slide */
.call-table tbody tr:hover,
.recordings-table tbody tr:hover,
.traffic-table tbody tr:hover,
.styled-table tbody tr:hover {
  background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%);
  box-shadow: inset 3px 0 0 var(--tp-primary), 0 2px 8px rgba(0, 90, 118, 0.08);
  transform: translateX(2px);
}

/* === CELLS === */
.call-table td,
.recordings-table td,
.traffic-table td,
.styled-table td {
  padding: 10px 14px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f7;
}

/* === LINKS in Tabellen === */
.styled-table a {
  color: var(--tp-primary);
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.styled-table a:hover {
  color: #007c9d;
  text-decoration: underline !important;
}

/* === Spezielle Tabellen === */
.recordings-table audio {
  height: 28px;
  width: 140px;
}

.region-divider td {
  background: #f3f6f9;
  font-weight: bold;
  color: var(--tp-primary);
}

.styled-table thead {
  display: table-header-group;
}

.styled-table tbody {
  display: table-row-group;
}

.styled-table tr {
  display: table-row;
}

.styled-table td,
.styled-table th {
  display: table-cell;
}

/* === Status-Spalte zentrieren === */
.tbl-status-center thead th:nth-child(2),
.tbl-status-center tbody td:nth-child(2) {
  text-align: center;
}

.tbl-status-center tbody td:nth-child(2) .status-badge {
  margin: 0 auto;
}

.interviewer-detail .split-left .styled-table thead th:nth-child(2),
.interviewer-detail .split-left .styled-table tbody td:nth-child(2) {
  text-align: center;
}

/* === Active Row Highlight === */
#interviewer-detail-list tr.is-active {
  background: rgba(0, 90, 118, 0.08);
}

#interviewer-detail-list tr.is-active td {
  font-weight: 600;
}

/* === Status Filter in Table Header === */
.styled-table thead .col-status {
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.styled-table thead .col-status::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  opacity: 0.9;
  pointer-events: none;
  background: no-repeat center / 10px 10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.styled-table thead .col-status .th-filter-native {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.001;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  z-index: 2;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
}

.styled-table thead .col-status .th-filter-native option {
  color: #333;
  background: #fff;
}

/* === Table Loading === */
#assigned-interviewers-table tbody .loading-row td {
  padding: 16px;
  text-align: center;
  color: #23343c;
  background: #f8fbfd;
  border-bottom: 1px solid #eaf2f6;
}

/* ==========================
   INTERVIEWER-TABELLE: Spezifische Optimierungen
========================== */

/* Name prominent */
.styled-table#interviewer-table .interviewer-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.styled-table#interviewer-table .interviewer-link:hover {
  color: #007c9d;
  text-decoration: underline;
}

/* Status zentriert */
.styled-table#interviewer-table td:nth-child(2) {
  text-align: center;
}

/* Level zentriert */
.styled-table#interviewer-table td:nth-child(3) {
  text-align: center;
}

/* Score zentriert + prominent */
.styled-table#interviewer-table td:nth-child(4) {
  text-align: center;
}

.styled-table#interviewer-table .score-chip {
  font-size: 13px;
  padding: 5px 11px;
  font-weight: 700;
}

/* Aufnahmedatum: rechtsbündig + Monospace */
.styled-table#interviewer-table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

/* Vertragstyp */
.styled-table#interviewer-table td:nth-child(7) {
  color: #475569;
}

/* Checkboxen (RV/GS) mit farbigem Icon */
.styled-table#interviewer-table td:nth-child(8),
.styled-table#interviewer-table td:nth-child(9) {
  text-align: center;
  font-size: 18px;
  color: #10b981;
}

.styled-table#interviewer-table td:nth-child(8) span,
.styled-table#interviewer-table td:nth-child(9) span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.styled-table#interviewer-table tr:hover td:nth-child(8) span,
.styled-table#interviewer-table tr:hover td:nth-child(9) span {
  transform: scale(1.15);
}

/* Email-Button */
.styled-table#interviewer-table td:nth-child(9) {
  text-align: center;
}

.styled-table#interviewer-table .icon-btn.mail-btn {
  width: 38px;
  height: 38px;
  font-size: 16px;
  transition: all 0.2s ease;
}

.styled-table#interviewer-table .icon-btn.mail-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 90, 118, 0.3);
}


/* Status-Badge kompakter */
.styled-table#interviewer-table .status-badge {
  font-size: 11px;
  padding: 4px 10px;
  font-weight: 600;
}

.styled-table#interviewer-table td.cell-popover:hover {
  color: var(--tp-primary);
  text-decoration: underline;
  background: rgba(0, 90, 118, 0.03);
}

/* ==========================
   PROJEKT-TABELLE: Spezifische Optimierungen
========================== */

/* Projekt-Name prominent */
.styled-table.proj-table .project-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.styled-table.proj-table .project-link:hover {
  color: #007c9d;
  text-decoration: underline;
}

/* Typ */
.styled-table.proj-table td:nth-child(2) {
  color: #475569;
  font-size: 12px;
}

/* Status zentriert */
.styled-table.proj-table td:nth-child(3) {
  text-align: center;
}

/* Aufgaben-Icons größer */
.styled-table.proj-table .task-icon {
  width: 24px;
  height: 24px;
  font-size: 13px;
  margin-right: 6px;
  transition: transform 0.2s ease;
}

.styled-table.proj-table tr:hover .task-icon {
  transform: scale(1.1);
}

/* Interview-Zahl hervorheben */
.styled-table.proj-table td:nth-child(5) {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--tp-primary);
}

/* Datums-Spalten-Header auch rechtsbündig */
.styled-table.proj-table thead th:nth-child(6),
.styled-table.proj-table thead th:nth-child(7),
.styled-table.proj-table thead th:nth-child(8) {
  text-align: right;
}

/* Datumsfelder: rechtsbündig + Monospace */
.styled-table.proj-table td:nth-child(6),
.styled-table.proj-table td:nth-child(7),
.styled-table.proj-table td:nth-child(8) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

/* Status-Badge in Projekt-Tabelle */
.styled-table.proj-table .status-badge {
  font-size: 11px;
  padding: 4px 10px;
  font-weight: 600;
}

/* ==========================
   PAGINATION
========================== */
.table-pagination,
.pagination,
#pagination {
  margin-top: 15px;
  margin-bottom: 25px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.table-pagination button,
.pagination button,
#pagination button,
.table-pagination a,
.pagination a,
#pagination a {
  margin: 0 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f8f9fa;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
}

.table-pagination button:hover,
.pagination button:hover,
#pagination button:hover,
.table-pagination a:hover,
.pagination a:hover,
#pagination a:hover {
  background: #e2e6ea;
}

.table-pagination .active,
.pagination .active,
#pagination .active,
.table-pagination a[aria-current="page"],
.pagination a[aria-current="page"],
#pagination a[aria-current="page"] {
  background: var(--tp-primary);
  color: #fff;
  border-color: var(--tp-primary);
}

/* ==========================
   STATUS BADGES
========================== */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700; /* GEÄNDERT von bold */
}

.status-badge.aktiv {
  background-color: #007657;
}

.status-badge.bewerber {
  background-color: #76005a;
}

.status-badge.zurzeit-inaktiv {
  background-color: #424242;
  color: #fff;
}

.status-badge.inaktiv {
  background-color: #761c00;
}

.status-badge.geplant {
  background-color: #35474c;
}

.status-badge.laufend {
  background-color: #005a76;
}

.status-badge.pausiert {
  background-color: #76005a;
}

.status-badge.abgeschlossen {
  background-color: #007657;
}

.status-badge.unbekannt {
  background-color: #6c757d;
}

.status-badge.vorbereitend {
  background-color: #00a5d8;
}

/* ==========================
   FORM TABS
========================== */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab {
  background: #e6e6e6;
  color: #333;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.tab.active {
  background: var(--tp-primary);
  color: #fff;
}

.tab:hover {
  background: #007c9d;
  color: #fff;
}

.tab-content {
  display: none;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tab-content.active {
  display: block;
}

.tab-content label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 5px;
}

.tab-content input,
.tab-content select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.tab-content textarea {
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  resize: vertical;
}

/* Detail Tabs */
.detail-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tp-primary);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.detail-tabs .tab i {
  font-size: 14px;
}

.detail-tabs .tab:hover {
  background: #007c9d;
  box-shadow: 0 0 8px rgba(0, 90, 118, 0.5);
}

.detail-tabs .tab.active {
  background: #007c9d;
  box-shadow: 0 0 10px rgba(0, 90, 118, 0.7);
}

/* ==========================
   INFO-BAR
========================== */
.info-bar {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-weight: bold;
  color: var(--tp-primary);
  font-size: 15px;
  white-space: nowrap;
  min-height: 32px;
}

.info-title i,
.info-title img {
  flex: 0 0 20px;
  width: 20px;
}

.info-title i {
  color: var(--tp-primary);
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.info-title img {
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

.info-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.info-bar .info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 160px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.05s ease;
}

.info-bar .info-item img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.info-bar .info-item strong {
  margin-left: auto;
  color: var(--tp-primary);
  font-weight: 700;
}

.info-bar .info-item i {
  color: var(--tp-primary);
  font-size: 14px;
}

.info-bar .info-item:hover {
  background: rgba(0, 90, 118, 0.08);
  box-shadow: 0 2px 6px rgba(0, 90, 118, 0.15);
}

.info-bar .info-item.active,
.info-bar .info-item[aria-pressed="true"] {
  background: var(--tp-primary);
  color: #fff;
  border-color: var(--tp-primary);
  box-shadow: 0 2px 6px rgba(0, 90, 118, 0.25);
}

.info-bar .info-item.active i,
.info-bar .info-item[aria-pressed="true"] i {
  color: #fff;
}

.info-bar .info-item.active strong,
.info-bar .info-item[aria-pressed="true"] strong {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 0 6px;
}

.info-bar .info-item:focus-visible {
  outline: 2px solid var(--tp-primary);
  outline-offset: 2px;
}

.info-bar .info-item.active:hover,
.info-bar .info-item[aria-pressed="true"]:hover {
  background: #006a86;
}

@media (max-width: 768px) {
  .info-bar {
    grid-template-columns: 1fr;
    gap: 8px 12px;
  }

  .info-title {
    width: 100%;
    white-space: normal;
  }

  .info-items {
    gap: 8px;
  }
}

/* ==========================
   KPI CARDS
========================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.kpi-grid.first-row {
  margin-bottom: 25px;
}

.kpi-grid.second-row {
  margin-top: 10px;
}

.kpi-card {
  border-radius: 12px;
  padding: 14px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

.kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.kpi-card h3 {
  font-size: 1.6rem;
  margin: 0 0 8px 0;
}

.kpi-card p {
  font-size: 13px;
  margin: 0;
  color: inherit;
}

/* KPI Color Variants */
.kpi-b2b { background-color: #007b8f; }
.kpi-b2bplus { background-color: #009688; }
.kpi-automotive { background-color: #8e44ad; }
.kpi-healthcare { background-color: #16a085; }
.kpi-b2c { background-color: #f39c12; }
.kpi-low-performer { background-color: #e74c3c; }
.kpi-status-bewerber { background-color: #ffc107; color: #333; }
.kpi-status-inaktiv { background-color: #6c757d; }

.lang-card:nth-child(1) { background-color: #007bff; }
.lang-card:nth-child(2) { background-color: #fd7e14; }
.lang-card:nth-child(3) { background-color: #dc3545; }
.lang-card:nth-child(4) { background-color: #28a745; }
.lang-card:nth-child(5) { background-color: #17a2b8; }

/* ==========================
   BADGES & CHIPS
========================== */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 16px;
  background: #eef2f7;
  color: #334155;
  white-space: nowrap;
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  font-size: 12px;
}

/* ===== Globaler NEU-Badge (für Projektliste etc.) ===== */
.badge-new {
  background: #0ea5e9;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  display: inline-block;
}

/* dezente Positionierung im Projekttitel */
.project-table .col-title .badge-new {
  margin-left: 8px;
  vertical-align: middle;
  transform: translateY(-1px); /* optische Ausrichtung zur Schrift */
}

/* Optionaler Puls nur wenn Klasse .pulse gesetzt ist */
.badge-new.pulse {
  animation: fsPulse 1.6s ease-in-out infinite;
}

/* Deine bestehende Animation kann weiterverwendet werden */
@keyframes fsPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Bestehende Regel bleibt – Spotlight-Badge pulsiert immer */
.feature-spotlight .badge-new {
  background: #0ea5e9;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  animation: fsPulse 1.6s ease-in-out infinite;
}


/* ==========================
   LANGUAGE FLAGS
========================== */
.col-lang {
  width: 140px;
}

.lang-flags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center; /* HINZUGEFÃœGT für Zentrierung */
}

.lang-flags .flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e5edf3;
}

.flag-img {
  width: 20px;
  height: auto;
  display: block;
  border-radius: 2px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.lang-flags .flag-more {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef3f6;
  border: 1px solid #dde7ee;
  line-height: 1.3;
}

.muted {
  color: #6b7280;
}

/* ==========================
   A-Z NAVIGATION
========================== */
.alpha-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  line-height: 1.4;
  padding: 5px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-right: 5px;
  max-height: 80vh;
  overflow-y: auto;
}

.alpha-nav span {
  cursor: pointer;
  padding: 2px;
  user-select: none;
}

.alpha-nav span:hover {
  color: var(--tp-primary);
  font-weight: bold;
}

/* ==========================
   TOOLTIPS
========================== */
[data-tip] {
  position: relative;
}

[data-tip]::after,
[data-tip]::before {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 8px);              /* war: -8px */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-tip]::after {
  content: attr(data-tip);
  top: 100%;                                    /* war: bottom: 100% */
  display: block;
  writing-mode: horizontal-tb;
  width: max-content;
  max-width: 560px;
  padding: 10px 12px;
  background: rgba(18, 32, 44, 0.95);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-line;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  overflow-wrap: break-word;
  word-break: normal;
}

[data-tip]::before {
  content: "";
  top: calc(100% - 8px);                         /* war: bottom: calc(100% - 8px) */
  border: 8px solid transparent;
  border-bottom-color: rgba(18, 32, 44, 0.95);   /* war: border-top-color */
  z-index: 1001;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 12px);             /* war: -12px */
}

.tip-wide[data-tip]::after {
  max-width: 680px;
}

.tip-btn {
  margin-left: 8px;
  border: 0;
  background: transparent;
  color: #00202a;
  cursor: help;
  padding: 0 2px;
  line-height: 1;
}

.tip-btn i { font-size: 14px; }
.tip-btn:hover { color: #0ea5e9; }

.badge-score[data-tip] { cursor: help; }

/* Stack-Fix: tr statt td anheben, damit nichts überdeckt wird */
#interviewer-table tbody tr { position: relative; }
#interviewer-table tbody tr:hover { z-index: 10002; }
#interviewer-table td[data-tip]:hover { z-index: 10003 !important; } /* feiner Vorrang für die Zelle */


/*
========================================
Transpera HUB Styles - PART 3A/5
Version: 5.6 | Stand: 2025-01-09 (BEREINIGT)
Inhalt: Interviewer-DB (Split Views, Forms, Fieldsets)
========================================
*/

/* ==========================
   SPLIT CONTAINER (Detail Views)
========================== */
.split-container {
  display: flex;
  gap: 20px;
  min-height: 0;
  overflow: visible;
}

.split-left {
  flex: 1;
  max-width: 400px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 150px - 70px - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.split-right {
  flex: 1.2;
  max-width: calc(100% - 520px);
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  gap: 15px;
  overflow: visible;
}

.split-right .tabs-container {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.split-right .tabs {
  display: flex;
  gap: 10px;
}

.split-right .tab {
  background: #e6e6e6;
  color: #333;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.split-right .tab.active {
  background: var(--tp-primary);
  color: #fff;
}

.split-right .tab:hover {
  background: #007c9d;
  color: #fff;
}

.split-right .subtab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.split-right .subtab-content.show {
  display: block;
  opacity: 1;
}

@media (max-width: 1200px) {
  .split-container {
    flex-direction: column;
  }

  .split-left {
    max-height: none;
    overflow: visible;
  }

  .split-right {
    max-width: 100%;
  }
}

/* ==========================
   INTERVIEWER DETAIL - FORM GRID
========================== */
.content-wrapper.interviewer-detail .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.content-wrapper.interviewer-detail .form-grid label {
  grid-column: auto;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  display: block;
}

.content-wrapper.interviewer-detail .form-grid input,
.content-wrapper.interviewer-detail .form-grid select,
.content-wrapper.interviewer-detail .form-grid textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #fff;
  transition: all 0.3s ease;
}

.content-wrapper.interviewer-detail .form-grid input:focus,
.content-wrapper.interviewer-detail .form-grid select:focus,
.content-wrapper.interviewer-detail .form-grid textarea:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

.form-grid textarea {
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: all 0.3s ease;
  background-color: #fff;
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
}

.form-grid .right-column {
  grid-column: 3;
  grid-row: 1 / span 99;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-grid .right-column textarea {
  min-height: 200px;
}

.phone-wrapper,
.password-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  width: 100%;
}

.phone-wrapper input,
.password-wrapper input {
  flex: 1;
}

.phone-wrapper .icon-btn,
.password-wrapper .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tp-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

.phone-wrapper .icon-btn:hover,
.password-wrapper .icon-btn:hover {
  background: #007c9d;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 90, 118, 0.3);
}

/* Responsive Form Adjustments */
@media (max-width: 1600px) {
  .form-grid {
    grid-template-columns: 140px 280px 1fr;
  }
}

@media (max-width: 1200px) {
  .form-grid {
    grid-template-columns: 135px 1fr;
    gap: 14px 18px;
  }

  .form-grid .right-column {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .form-grid .right-column textarea {
    min-height: 220px;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .content-wrapper.interviewer-detail .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    gap: 12px 14px;
  }
}

/* ==========================
   INTERVIEWER DETAIL - FIELDSETS
========================== */
.section-title {
  font-weight: 700;
  color: #557e8d;
  font-size: 12px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 6px;
}

.section-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6aa5ba;
}

.fieldset {
  border: 1px solid #e5edf3;
  border-radius: 8px;
  padding: 12px 14px 14px;
  background: #fafcfd;
}

.fieldset legend {
  padding: 0 8px;
  font-weight: 700;
  color: var(--tp-primary);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fieldset.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.fieldset.twocol > .col-left,
.fieldset.twocol > .col-right {
  min-width: 0;
}

.fieldset.twocol label {
  display: block;
  font-size: 12px;
  color: #445b66;
  margin: 10px 0 6px;
  font-weight: 400;
}

.fieldset.twocol input[type="text"],
.fieldset.twocol input[type="email"],
.fieldset.twocol select,
.fieldset.twocol textarea {
  width: 100%;
}

#box-contact .full-span {
  grid-column: 1 / -1;
}

#box-skilllang .subhead {
  all: unset;
  display: block;
  font-size: 12px;
  color: #445b66;
  margin: 10px 0 6px;
  font-weight: 400;
}

#box-skilllang .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  align-items: start;
}

#box-skilllang .grid2 .controls,
#box-skilllang .grid2 .chips {
  min-width: 0;
}

#box-skilllang .chips .tag-container {
  min-height: 36px;
}

#box-skilllang .form-inline {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

#box-skilllang .subsection {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

#box-skilllang .tag-container {
  margin-bottom: 8px;
}

@media (max-width: 980px) {
  .fieldset.twocol {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #box-skilllang .grid2 {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #box-skilllang .form-inline {
    flex-wrap: wrap;
  }
}

@media (max-width: 1800px) {
  .content-wrapper.interviewer-detail #form-stammdaten > .col-left:has(#box-address),
  .content-wrapper.interviewer-detail #form-stammdaten > .col-right:has(#box-skilllang) {
    grid-column: 1 / -1;
  }
}

/* Container Queries for Skills Split */
.content-wrapper.interviewer-detail .split-right {
  container: detail / inline-size;
}

.content-wrapper.interviewer-detail .skills-split {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.content-wrapper.interviewer-detail .skills-split > * {
  min-width: 0;
}

@container detail (max-width: 1600px) {
  .content-wrapper.interviewer-detail .skills-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1700px) {
  .content-wrapper.interviewer-detail .skills-split {
    grid-template-columns: 1fr;
  }
}

/* ==========================
   SKILLS & LANGUAGES CARDS
========================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.detail-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.detail-card h4 {
  margin-bottom: 15px;
  font-size: 18px;
  color: var(--tp-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.tag-container .badge {
  background: var(--tp-primary);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tag-container .badge .remove-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.form-inline {
  display: flex;
  gap: 8px;
}

.form-inline select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* ==========================
   LOCKED FIELDS
========================== */
.lock-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: #761c00;
  box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px rgba(118, 28, 0, 0.25);
  vertical-align: middle;
}

.interviewer-detail .password-wrapper.locked input[disabled],
.interviewer-detail .password-wrapper.locked input[readonly] {
  cursor: not-allowed;
  background: #f9fafb;
}

.interviewer-detail .password-wrapper.locked input[disabled]:hover,
.interviewer-detail .password-wrapper.locked input[readonly]:hover {
  box-shadow: inset 0 0 0 2px rgba(118, 28, 0, 0.25);
  border-color: #d8b0a8;
}

.interviewer-detail .password-wrapper.locked input[disabled]:focus,
.interviewer-detail .password-wrapper.locked input[readonly]:focus {
  outline: 2px solid rgba(118, 28, 0, 0.35);
  outline-offset: 2px;
}

.content-wrapper.interviewer-detail input:disabled,
.content-wrapper.interviewer-detail select:disabled,
.content-wrapper.interviewer-detail textarea:disabled {
  background: #f9fafb;
  color: #777;
  cursor: not-allowed;
}

/* ==========================
   SEGMENTED BOOLEAN
========================== */
.seg-boolean {
  display: inline-flex;
  border: 1px solid #d7dde1;
  border-radius: 10px;
  overflow: hidden;
}

.seg-boolean button {
  padding: 6px 14px;
  border: 0;
  background: #f5f7f9;
  font: inherit;
  cursor: pointer;
}

.seg-boolean button.active {
  background: var(--tp-primary);
  color: #fff;
}

.seg-boolean button + button {
  border-left: 1px solid #d7dde1;
}

/* ==========================
   CHRONIK & NOTIZEN
========================== */
.form-grid .note-block {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.form-grid .note-block > label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.form-grid .note-block textarea {
  min-height: 12rem;
  width: 100%;
  resize: vertical;
}

.form-grid .note-block:focus-within {
  border-color: #cbd5e1;
  background: #f9fbff;
}

/* ==========================
   BEWERTUNG TAB - FINALE VERSION
========================== */
/* Bewertungs-Tab: Grid deaktivieren, eigenes Layout */
.content-wrapper.interviewer-detail #form-bewertung.form-grid {
  display: block !important;
  grid-template-columns: unset !important;
}

/* Basis Score Card Styling */
.interviewer-detail .score-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin: 8px 0;
}

/* Score Row: Sterne IMMER rechtsbündig */
.interviewer-detail .score-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 6px 0 !important;
}

.interviewer-detail .score-row label {
  font-weight: 600;
  flex: 1;
}

/* Sterne Container */
.interviewer-detail .stars {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Sterne Buttons */
.interviewer-detail .stars button {
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  color: #d1d5db;
  transition: all 0.15s ease;
}

.interviewer-detail .stars button[aria-checked="true"] {
  color: #f59e0b;
}

.interviewer-detail .stars button.active {
  color: #f59e0b;
  transform: scale(1.05);
}

.interviewer-detail .stars button:hover {
  color: #fbbf24;
}

.interviewer-detail .stars button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Badge Score */
.interviewer-detail .badge-score {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Hint Text */
.interviewer-detail .hint {
  color: #6b7280;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

/* Buttons */
.interviewer-detail .btn-ghost {
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.interviewer-detail .btn-ghost:hover {
  background: #f9fafb;
}

/* Score Chips in Table */
td.cell-status > .status-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: #0ea5e9;
  line-height: 1;
  cursor: help;
  gap: 0;
}

.score-chip.s5 { background: #00761c; }
.score-chip.s4 { background: #007657; }
.score-chip.s3 { background: #0094c3; }
.score-chip.s2 { background: #76005a; }
.score-chip.s1 { background: #761c00; }
.score-chip.s0 { background: #eef2f7; }

/* Score Vollständigkeits-Dots */
.score-chip .dots {
  display: flex;
  gap: 2px;
  margin-left: 6px;
}

.score-chip .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.score-chip .dot.filled {
  background: rgba(255, 255, 255, 0.9);
}

/* ==========================
   QUALITY SCORE BADGE (Overall)
========================== */
.interviewer-detail #tab-bewertung .badge-score#score-overall-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  min-width: 56px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: #0ea5e9;
  cursor: help;
}

.interviewer-detail #tab-bewertung #score-overall-badge.s5 { background: #007657; }
.interviewer-detail #tab-bewertung #score-overall-badge.s4 { background: #007657; }
.interviewer-detail #tab-bewertung #score-overall-badge.s3 { background: #0094c3; }
.interviewer-detail #tab-bewertung #score-overall-badge.s2 { background: #76005a; }
.interviewer-detail #tab-bewertung #score-overall-badge.s1 { background: #761c00; }
.interviewer-detail #tab-bewertung #score-overall-badge.s0 { background: #eef2f7; }

/* ==========================
   PERFORMANCE SCORE BADGE
========================== */
.interviewer-detail #tab-bewertung .badge-score#performance-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  min-width: 56px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: #0ea5e9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.interviewer-detail #tab-bewertung #performance-score-badge.s5 { background: #00761c; }
.interviewer-detail #tab-bewertung #performance-score-badge.s4 { background: #007657; }
.interviewer-detail #tab-bewertung #performance-score-badge.s3 { background: #0094c3; }
.interviewer-detail #tab-bewertung #performance-score-badge.s2 { background: #76005a; }
.interviewer-detail #tab-bewertung #performance-score-badge.s1 { background: #761c00; }
.interviewer-detail #tab-bewertung #performance-score-badge.s0 { background: #eef2f7; }

.interviewer-detail #tab-bewertung #performance-score-badge:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Performance Stars Popup */
.interviewer-detail #tab-bewertung .performance-stars-popup {
  position: absolute;
  background: white;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 100;
  margin-top: 4px;
}

/* ==========================
   TEXTFELDER
========================== */
.interviewer-detail #tab-bewertung textarea {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.interviewer-detail #tab-bewertung textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ==========================
   QUALITY SCORE BADGE (Overall)
========================== */
.interviewer-detail #tab-bewertung .badge-score#score-overall-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  min-width: 56px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: #0ea5e9;
  cursor: help;
}

.interviewer-detail #tab-bewertung #score-overall-badge.s5 { background: #007657; }
.interviewer-detail #tab-bewertung #score-overall-badge.s4 { background: #007657; }
.interviewer-detail #tab-bewertung #score-overall-badge.s3 { background: #0094c3; }
.interviewer-detail #tab-bewertung #score-overall-badge.s2 { background: #76005a; }
.interviewer-detail #tab-bewertung #score-overall-badge.s1 { background: #761c00; }
.interviewer-detail #tab-bewertung #score-overall-badge.s0 { background: #eef2f7; }

/* ==========================
   PERFORMANCE SCORE BADGE
   ⭐ WICHTIG: Gleiche Größe wie Overall Badge!
========================== */
.interviewer-detail #tab-bewertung .badge-score#performance-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  min-width: 56px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: #0ea5e9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.interviewer-detail #tab-bewertung #performance-score-badge.s5 { background: #00761c; }
.interviewer-detail #tab-bewertung #performance-score-badge.s4 { background: #007657; }
.interviewer-detail #tab-bewertung #performance-score-badge.s3 { background: #0094c3; }
.interviewer-detail #tab-bewertung #performance-score-badge.s2 { background: #76005a; }
.interviewer-detail #tab-bewertung #performance-score-badge.s1 { background: #761c00; }
.interviewer-detail #tab-bewertung #performance-score-badge.s0 { background: #eef2f7; }

.interviewer-detail #tab-bewertung #performance-score-badge:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Performance Stars Popup */
.interviewer-detail #tab-bewertung .performance-stars-popup {
  position: absolute;
  background: white;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 100;
  margin-top: 4px;
}

/* ==========================
   FIX: Textfelder nicht zu groß
========================== */
.interviewer-detail #tab-bewertung textarea {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.interviewer-detail #tab-bewertung textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ==========================
   DESKTOP SCHUTZ - HÖCHSTE PRIORITÄT
   Schützt Desktop-Layout vor Mobile-CSS
========================== */
@media (min-width: 769px) {
  /* Score Badges: Desktop-Größen erzwingen */
  .interviewer-detail #tab-bewertung #score-overall-badge,
  .interviewer-detail #tab-bewertung #performance-score-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    min-width: 56px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #fff !important;
  }
  
  /* Grid-Layout beibehalten */
  .interviewer-detail #tab-bewertung .score-card {
    display: block !important;
  }
  
  .interviewer-detail #tab-bewertung .col-left,
  .interviewer-detail #tab-bewertung .col-right {
    display: block !important;
  }
  
  /* Score-Rows: Flex-Layout mit korrekter Ausrichtung */
  .interviewer-detail #tab-bewertung .score-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 6px 0 !important;
    flex-direction: row !important;
  }
  
  /* Inline-Styles im ersten Score-Card respektieren */
  .interviewer-detail #tab-bewertung .score-card:first-child > div[style*="display:flex"] {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
}

/* ==========================
   ALTE Positioning Rules - DEAKTIVIERT
   (Nicht mehr benötigt mit Grid-Layout)
========================== */
/* DEAKTIVIERT: Grid-Layout verwendet kein absolutes Positioning mehr
.interviewer-detail #tab-bewertung .score-card:first-child {
  position: relative;
  padding-right: 96px;
}

.interviewer-detail #tab-bewertung #score-overall-badge {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
*/

/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 768px) {
  .interviewer-detail #tab-bewertung .score-card:first-child {
    padding-right: 14px;
  }
  
  .interviewer-detail #tab-bewertung #score-overall-badge {
    position: static;
    transform: none;
    margin-top: 8px;
  }
}

/* ==========================
   SEARCH & SELECTORS
========================== */
#search-interviewer {
  width: 500px;
  max-width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: all 0.3s ease;
}

#search-interviewer:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

#selected-interviewer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 500px;
  min-height: 40px;
  height: 40px !important;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: normal;
  background: #fff;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ==========================
   EDIT CONTROLS
========================== */
.edit-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

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

/* ==========================
   END OF PART 3A/5
========================== */

/*
========================================
Transpera HUB Styles - PART 3B/5
Version: 5.6 | Stand: 2025-01-09 (BEREINIGT)
Inhalt: Projekt-DB (Forms, Multi-Select, Tasks, Interviewer-Tab)
========================================
*/

/* ==========================
   PROJEKT-DB BASE
========================== */
.content-wrapper.projekt-db .box-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.content-wrapper.projekt-db .fieldset {
  border: 1px solid #e5edf3;
  border-radius: 8px;
  padding: 12px 14px 14px;
  background: #fafcfd;
}

.content-wrapper.projekt-db .fieldset legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--tp-primary);
  justify-content: flex-start;
  width: auto;
}

.content-wrapper.projekt-db .fs-grid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.content-wrapper.projekt-db .fs-grid .row:last-child {
  margin-bottom: 0;
}

.content-wrapper.projekt-db .form-grid label {
  display: block;
  font-size: 12px;
  color: #445b66;
  margin: 10px 0 6px;
  font-weight: 400;
  text-align: left;
}

.content-wrapper.projekt-db .form-grid input,
.content-wrapper.projekt-db .form-grid select,
.content-wrapper.projekt-db .form-grid textarea {
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;
}

.content-wrapper.projekt-db .fs-grid input,
.content-wrapper.projekt-db .fs-grid select,
.content-wrapper.projekt-db .fs-grid textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.content-wrapper.projekt-db .inline-field {
  display: flex;
  gap: 8px;
  align-items: center;
}

.content-wrapper.projekt-db .inline-field .input,
.content-wrapper.projekt-db .inline-field select {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
}

.content-wrapper.projekt-db .btn-icon,
.content-wrapper.projekt-db .btn.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.content-wrapper.projekt-db #box-desc textarea,
.content-wrapper.projekt-db #box-notes textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 180px;
  resize: vertical;
}

.content-wrapper.projekt-db input:disabled,
.content-wrapper.projekt-db select:disabled,
.content-wrapper.projekt-db textarea:disabled {
  background: #f9fafb;
  color: #777;
  cursor: not-allowed;
}

.content-wrapper.projekt-db .selected-box {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  font-weight: 400;
  width: 500px;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.content-wrapper.projekt-db .dates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.content-wrapper.projekt-db .stack-gap {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .content-wrapper.projekt-db .box-grid-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .content-wrapper.projekt-db .fs-grid .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================
   PROJEKT TABLE OVERVIEW
========================== */
.styled-table.proj-table th,
.styled-table.proj-table td {
  text-align: center;
}

.styled-table.proj-table th:first-child,
.styled-table.proj-table td:first-child {
  text-align: left;
}

/* ==========================
   OFFER FIELD (PDF Buttons)
========================== */
.content-wrapper.projekt-db .offer-field {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.content-wrapper.projekt-db .offer-actions {
  display: flex;
  gap: 8px;
}

.content-wrapper.projekt-db .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--tp-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.content-wrapper.projekt-db .btn-icon:hover {
  background: #007c9d;
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.35);
}

.content-wrapper.projekt-db .btn-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================
   INPUT ICONS (Budget/Date)
========================== */
.content-wrapper.projekt-db .input-icon {
  position: relative;
}

.content-wrapper.projekt-db .input-icon .input,
.content-wrapper.projekt-db .input-icon input {
  padding-right: 42px;
}

.content-wrapper.projekt-db .icon-in-input {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--tp-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.content-wrapper.projekt-db .icon-in-input:hover {
  background: #007c9d;
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

.content-wrapper.projekt-db .input-icon.double-icons input {
  padding-right: 84px;
}

.content-wrapper.projekt-db .icon-in-input.second {
  right: 44px;
}

.content-wrapper.projekt-db .project-tasks {
  height: auto;
  min-height: unset;
}

/* ==========================
   SEARCHBAR LEFT (Projekt-DB)
========================== */
.content-wrapper.projekt-db .list-header .search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: all 0.3s ease;
}

.content-wrapper.projekt-db .list-header .search-input:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
}

/* ==========================
   MULTI-SELECT (Sprachen/Tasks)
========================== */
.content-wrapper.projekt-db :is(#lang-ms, #task-ms) {
  display: block;
  width: 100%;
  max-width: 100% !important;
  position: relative;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms):focus-within .ms-trigger {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-trigger.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-trigger .summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  z-index: 50;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  display: flex;
  flex-direction: column;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-panel[hidden] {
  display: none !important;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-toolbar .search-input {
  flex: 1;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-list {
  overflow: auto;
  max-height: 260px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.35;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-item:hover {
  background: #f9fafb;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-item[aria-selected="true"] {
  background: #f3f4f6;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-item[aria-selected="true"]::after {
  content: "\2713";
  margin-left: auto;
  opacity: 0.75;
  font-size: 12px;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-item .ms-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-wrapper.projekt-db :is(#lang-ms, #task-ms) .ms-empty {
  padding: 10px;
  color: #666;
}

/* ==========================
   TASK CHIPS
========================== */
.content-wrapper.projekt-db .task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.content-wrapper.projekt-db .task-chips .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #f8fafb;
  color: #23343c;
  border: 1px solid #e3edf2;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.02s ease;
}

.content-wrapper.projekt-db .task-chips .chip i {
  font-size: 13px;
  color: inherit;
  opacity: 0.9;
}

.content-wrapper.projekt-db .task-chips .chip:hover {
  background: #f1f6f8;
  border-color: #cddbe2;
  box-shadow: none;
}

.content-wrapper.projekt-db .task-chips .chip:active {
  transform: translateY(1px);
}

.content-wrapper.projekt-db .task-chips .chip:focus-visible {
  outline: 2px solid #c7dde7;
  outline-offset: 2px;
}

.content-wrapper.projekt-db .task-chips .chip.selected {
  background: #e9f4f8;
  border-color: #9fc5d3;
  color: #23343c;
  box-shadow: none;
}

.content-wrapper.projekt-db .task-chips .chip > span:last-child {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task Icons */
.task-dot {
  --c: var(--tp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--c);
  background: var(--c);
  box-shadow: inset 0 0 0 2px #fff;
  flex-shrink: 0;
}

.task-dot i,
.task-dot svg,
.task-chips .chip .task-dot i,
.task-chips .chip .task-dot svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: none !important;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.task-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: currentColor;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.task-icon i,
.task-icon svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: none !important;
}

.task-setup { color: #00761c; }
.task-fieldwork { color: #005a76; }
.task-post { color: #76005a; }
.task-external { color: #761c00; }

/* ==========================
   PROJEKT-DB: INTERVIEWER TAB
========================== */
.content-wrapper.projekt-db #tab-interviewer .interviewer-grid {
  display: grid;
  grid-template-columns: 1fr; /* vorher: 1fr 1fr → jetzt untereinander */
  gap: 16px;
}

.content-wrapper.projekt-db #tab-interviewer .card {
  padding: 14px;
}

.content-wrapper.projekt-db #tab-interviewer .picker {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content-wrapper.projekt-db #tab-interviewer .picker .toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.content-wrapper.projekt-db #tab-interviewer .picker .toolbar .search-input {
  flex: 1;
  min-width: 0;
}

.content-wrapper.projekt-db #tab-interviewer .picker .toolbar .toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12.5px;
  flex: none;
}

.content-wrapper.projekt-db #tab-interviewer .picker .toolbar .toggle input {
  margin: 0;
  transform: translateY(-1px);
}

.content-wrapper.projekt-db #tab-interviewer .picker-list {
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fafcfd;
  max-height: 420px;
  overflow: auto;
  padding: 6px;
}

.content-wrapper.projekt-db #tab-interviewer .picker-item {
  display: grid;
  grid-template-columns: 20px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.content-wrapper.projekt-db #tab-interviewer .picker-item:hover {
  background: #f3f8fa;
}

.content-wrapper.projekt-db #tab-interviewer .picker-item input[type="checkbox"] {
  margin: 0;
}

.content-wrapper.projekt-db #tab-interviewer .picker-item span {
  white-space: nowrap;
}

.content-wrapper.projekt-db #tab-interviewer .picker-item span:nth-of-type(1) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-wrapper.projekt-db #tab-interviewer .picker-item .hit {
  justify-self: end;
  opacity: 0.6;
  font-size: 12px;
}

.content-wrapper.projekt-db #tab-interviewer .actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.content-wrapper.projekt-db #tab-interviewer .table-compact {
  font-size: 13px;
}

.content-wrapper.projekt-db #tab-interviewer .table-compact thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tp-primary);
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid var(--tp-primary);
}

.content-wrapper.projekt-db #tab-interviewer .table-compact tbody td {
  height: auto;
  padding: 6px 10px;
  line-height: 1.2;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

.content-wrapper.projekt-db #tab-interviewer .table-compact .btn {
  height: 28px !important;
  min-height: 28px;
  padding: 0 10px;
  line-height: 1;
}

.content-wrapper.projekt-db #tab-interviewer .table-compact .btn.icon-only {
  width: 26px;
  height: 26px !important;
  min-height: 26px;
  padding: 0;
  border-radius: 6px;
}

.content-wrapper.projekt-db #tab-interviewer .table-compact .btn.icon-only i {
  font-size: 12px;
}

.content-wrapper.projekt-db #tab-interviewer .assigned-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.content-wrapper.projekt-db #tab-interviewer .assigned-scroll {
  max-height: 475px;
  overflow: auto;
  border-top: 1px solid #eef2f7;
}

.content-wrapper.projekt-db #tab-interviewer .muted {
  color: #6b7b86;
}

.content-wrapper.projekt-db #tab-interviewer .assigned-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  font-size: 12.5px;
  color: #6b7b86;
}

#assigned-interviewers-table.table-compact td,
#assigned-interviewers-table.table-compact th {
  padding: 6px 10px;
  font-size: 12px;
  text-align: left;
}

#assigned-interviewers-table td.flags {
  text-align: left;
}

#assigned-interviewers-table td.flags .lang-flags {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

#assigned-interviewers-table td.skills {
  display: none;
}

#assigned-interviewers-table td.skills .skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#assigned-interviewers-table.table-compact th:last-child,
#assigned-interviewers-table.table-compact td:last-child {
  text-align: center;
}


/* ==========================
   PICKER ROW & QUICK FILTERS
========================== */
.picker-row {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 70px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  min-height: 30px;
  line-height: 1.2;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}

.picker-row:hover {
  background: #f8fafc;
}

.picker-row.selected {
  background: #eef6ff;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) inset;
}

.picker-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.picker-row .col-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-row .name {
  font-weight: 500;
  color: #0f172a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.picker-row .col-flags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.picker-row .col-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  font-size: 12px;
}

.quick-filters.qf-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.quick-filters.qf-compact .qf {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 6px;
}

.quick-filters .qf.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

.search-input.under-filters {
  width: 100%;
  margin: 0 0 6px;
  flex: 1 0 100%;
  min-width: 100%;
  display: block;
}

.btn.sm,
.filter-select.sm {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
}

.btn.sm {
  min-height: 28px;
}

.filter-select.sm {
  min-height: 26px;
}

.assigned-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assigned-line .fi {
  margin-right: 8px;
}

/* ==========================
   OFFER TOOLBAR
========================== */
.offer-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 12px 8px;
}

.offer-toolbar .search-input {
  flex: 1;
  min-width: 0;
  width: auto !important;
}

@media (max-width: 1350px) {
  .content-wrapper.projekt-db #tab-interviewer .interviewer-grid {
    grid-template-columns: 1fr;
  }

  .content-wrapper.projekt-db #tab-interviewer .interviewer-grid > * {
    min-width: 0;
  }
}

/* ==========================
   END OF PART 3B/5
========================== */

/*
========================================
Transpera HUB Styles - PART 4/4 (FINAL)
Version: 5.6 | Stand: 2025-01-09 (BEREINIGT)
Inhalt: Cockpit, Frames, Traffic Monitor, Supervision, Utilities
========================================
*/

/* ==========================
   HUB FRAMES - Universal
========================== */
:is(.frame, .embed-card, .page-frame) {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin: 0 0 20px;
}

:is(.frame-toolbar, .embed-toolbar, .page-toolbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5edf1;
  background: #f8fbfc;
  position: relative;
}

:is(.frame-heading, .page-heading, .embed-toolbar .title) {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--tp-primary);
}

:is(.frame-heading i, .page-heading i, .embed-toolbar .title i) {
  color: var(--tp-primary);
}

:is(.frame-body, .page-body) {
  padding: 20px;
}

.embed-iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 260px);
  border: 0;
}

:is(.frame, .embed-card, .page-frame).compact :is(.frame-toolbar, .embed-toolbar, .page-toolbar) {
  padding: 8px 12px;
}

:is(.frame, .embed-card, .page-frame).compact :is(.frame-body, .page-body) {
  padding: 12px;
}

/* Frame Actions (Inverted Style) */
:is(.frame-actions, .page-actions, .embed-toolbar .actions) {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

:is(.frame-actions .btn, .page-actions .btn, .embed-toolbar .actions .btn) {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  font-size: 14px;
  gap: 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  background: #fff;
  color: var(--tp-primary) !important;
  border: 1px solid var(--tp-primary);
  font-weight: 600;
  transition: transform 0.08s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

:is(.frame-actions .btn i, .page-actions .btn i, .embed-toolbar .actions .btn i) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-size: 14px;
}

:is(.frame-actions .btn.icon-only, .page-actions .btn.icon-only, .embed-toolbar .actions .btn.icon-only) {
  width: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
}

:is(.frame-actions .btn, .page-actions .btn, .embed-toolbar .actions .btn):hover {
  background: var(--tp-primary-hover);
  color: #fff !important;
  border-color: var(--tp-primary-hover);
  box-shadow: 0 0 8px rgba(0, 90, 118, 0.4);
  transform: translateY(-1px);
}

:is(.frame-actions .btn, .page-actions .btn, .embed-toolbar .actions .btn):focus-visible {
  outline: 2px solid rgba(0, 90, 118, 0.45);
  outline-offset: 2px;
}

:is(.frame-actions .btn, .page-actions .btn, .embed-toolbar .actions .btn):active {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

:is(.frame-actions .btn, .page-actions .btn, .embed-toolbar .actions .btn)[disabled],
:is(.frame-actions .btn.disabled, .page-actions .btn.disabled, .embed-toolbar .actions .btn.disabled) {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f8f9fa;
  color: #9aa4ae !important;
  border-color: #d1d9df;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

:is(.frame-actions .btn.is-loading, .page-actions .btn.is-loading, .embed-toolbar .actions .btn.is-loading) {
  position: relative;
  pointer-events: none;
}

:is(.frame-actions .btn.is-loading, .page-actions .btn.is-loading, .embed-toolbar .actions .btn.is-loading)::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 90, 118, 0.25);
  border-top-color: var(--tp-primary);
  border-radius: 50%;
  animation: tp-spin 0.7s linear infinite;
}

@media (max-width: 768px) {
  :is(.frame-toolbar, .embed-toolbar, .page-toolbar) {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  :is(.frame-actions, .page-actions, .embed-toolbar .actions) {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ==========================
   TRAFFIC MONITOR TABS
========================== */
.frame-header,
.box-header {
  position: relative;
}

.tm-header-tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
  z-index: 5;
}

.tm-header-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tm-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d9e2e8;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  color: #23343c;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.08s ease;
}

.tm-tab img {
  height: 16px;
}

.tm-tab:hover {
  background: #f5f8fa;
  transform: translateY(-1px);
}

.tm-tab:focus-visible {
  outline: 2px solid rgba(0, 90, 118, 0.35);
  outline-offset: 2px;
}

.tm-tab.active {
  background: var(--tp-primary);
  color: #fff;
  border-color: var(--tp-primary);
}

.tm-tab[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.frame-toolbar .tm-header-tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.frame-toolbar .tm-header-right {
  position: static;
  margin-left: auto;
}

@media (max-width: 920px) {
  .tm-header-tabs {
    position: static;
    transform: none;
    margin: 6px auto 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  .frame-header,
  .box-header {
    display: block;
    text-align: center;
  }

  .tm-header-right {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ==========================
   SUPERVISION CARDS
========================== */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.sv-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  cursor: pointer;
  text-align: left;
  transition: transform 0.08s, box-shadow 0.12s, border-color 0.12s;
}

.sv-card i {
  font-size: 20px;
  opacity: 0.9;
}

.sv-card strong {
  font-size: 15px;
}

.sv-card span {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.35;
}

.sv-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #b7d1db;
}

.sv-groups {
  display: grid;
  gap: 20px;
  margin-top: 10px;
}

.sv-group {
  border: 1px solid #eef3f6;
  border-radius: 14px;
  background: #fafcfd;
}

.sv-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #e7eef4;
  font-weight: 600;
  font-size: 14px;
  color: #334155;
  background: #f1f5f9;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.vendor-icon {
  height: 26px;
  width: auto;
  opacity: 0.95;
  object-fit: contain;
}

.sv-group-header .vendor-icon {
  max-height: 28px;
  max-width: 120px;
}

.sv-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f9fafb;
}

.sv-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #e2e8f0;
}

/* ==========================
   COCKPIT
========================== */
.cockpit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.cockpit-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 16px;
}

.cockpit-card > .card-title,
.cockpit-card header.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 8px;
  font-size: 14px; /* GEÄNDERT von 15px */
  font-weight: 700;
  color: #23343c;
  background: #fff;
  border-bottom: 1px solid #eaf2f6;
  min-height: auto;
  line-height: 1.2;
  overflow: visible;
  box-shadow: none;
}

.cockpit-card > .card-title i,
.cockpit-card header.card-title i {
  font-size: 14px; /* Konsistent mit Text */
  color: var(--tp-primary);
}

.cockpit-card .card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cockpit-card .card-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cockpit-card .card-title .update-info {
  font-size: 12px; /* GEÄNDERT von 0.75rem */
  opacity: 0.75;
  font-weight: 400;
  white-space: nowrap;
}

.cockpit-card .two-col {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items: start;
}

.cockpit-card h4 {
  margin: 6px 0 8px;
  font-size: 14px;
  color: var(--tp-primary);
}

.cockpit-card h4.card-sub {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--tp-primary);
}

.cockpit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cockpit-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f8f9fa;
  font-size: 14px; /* HINZUGEFÃœGT */
}

.cockpit-meta {
  background: #f6fbfd;
  border: 1px solid #e2f0f4;
  border-radius: 10px;
  padding: 12px;
}

.cockpit-meta .label {
  font-size: 12px;
  color: #666;
}

.cockpit-meta .value {
  font-weight: 700;
  color: var(--tp-primary);
}

.cockpit-card .card-body .changelog-rotator,
.cockpit-card .card-body .human-resource-text {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.cockpit-grid + .cockpit-grid {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .cockpit-card .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1250px) {
  .cockpit-grid {
    grid-template-columns: 1fr;
  }

  .cockpit-grid .news-wrapper {
    order: initial;
    grid-column: auto;
  }
}


/* ==========================
   ZUSÄTZLICHE ANPASSUNGEN
========================== */

/* Status-Badge in Tabelle zentriert darstellen */
.project-table td.col-status .status-badge {
  display: inline-block;
  vertical-align: middle;
}

/* Flaggen-Container in Tabelle zentriert */
.project-table td.col-lang .lang-flags {
  display: inline-flex;
  justify-content: center;
}


/* ==========================
   WELCOME CARD
========================== */
.welcome-card {
  --c: var(--tp-primary, #005a76);
  background: var(--c);
  color: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-card__icon {
  font-size: 20px;
}

.welcome-card__headline {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}

.welcome-card__sub {
  opacity: 0.9;
}

/* ==========================
   PROJECT & PEOPLE LISTS
========================== */
.project-list,
.people-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.project-item,
.people-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px; /* GEÄNDERT von 13px */
  line-height: 1.35;
  transition: background 0.15s ease;
}

.project-item:hover,
.people-item:hover {
  background: #f6fafb;
}

.project-item__title,
.people-item__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-item__title i,
.people-item__main i {
  font-size: 14px; /* GEÄNDERT von 12px */
  color: var(--tp-primary);
}

.project-item__title i:only-child {
  display: none;
}

.project-item--head {
  padding: 2px 8px 4px;
  background: transparent;
  border-radius: 8px;
}

.project-item--head .project-col-head {
  font-size: 12px;
  font-weight: 600;
  color: #6b7b86;
}

.project-item--head .project-item__title {
  color: #6b7b86;
  font-weight: 600;
}

.project-item--head .project-item__meta {
  align-items: end;
}

.project-item__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  justify-items: end;
}

.project-item__meta > * {
  min-width: 0;
}

.project-item__meta > :empty,
.project-item__meta .is-empty {
  visibility: hidden;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.project-link,
.project-text,
.people-link,
.people-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  color: inherit;
  text-decoration: none;
}

.project-link:hover,
.people-link:hover {
  text-decoration: underline;
}

.people-time {
  font-size: 12px;
  color: #6b7b86;
  white-space: nowrap;
}

.project-chip {
  font-size: 12px; /* GEÄNDERT von 11px */
  padding: 3px 8px; /* GEÄNDERT von 2px 8px */
  border-radius: 999px;
  background: #eef6f9;
  border: 1px solid #e3edf2;
  color: #123;
}

.project-chip b {
  font-weight: 600;
  color: var(--tp-primary);
}

.project-chip--start {
  background: #e6f2ff;
  border-color: #b3d9ff;
  color: #003d66;
}

.project-chip--start b {
  color: var(--tp-primary);
}

.project-chip--end {
  background: #f2f2f2;
  border-color: #d9d9d9;
  color: #333;
}

.project-chip--end b {
  color: #555;
}

.project-chip--client i {
  margin-right: 6px;
}

@media (max-width: 720px) {
  .project-link,
  .project-text,
  .people-name {
    max-width: 60vw;
  }
}

/* ==========================
   PROJECT TABLE
========================== */
.project-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px; /* GEÄNDERT von 13px */
}

.project-table thead th {
  text-align: left; /* Standard */
  padding: 6px 8px;
  font-weight: 700;
  color: #6b7b86;
  border-bottom: 1px solid #eaf2f6;
  white-space: nowrap;
}

.project-table tbody td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f7;
}

.project-table tbody tr:hover {
  background: #f6fafb;
}

.project-table .col-title {
  width: 55%;
}

.project-table .col-status {
  width: 15%;
  text-align: center; /* HINZUGEFÃœGT */
}

.project-table .col-date {
  width: 15%;
}

/* NEU: Sprachen-Spalte ZENTRIERT */
.project-table .col-lang {
  width: 140px;
  text-align: center;
}

.project-table .col-title .project-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-table .col-title .project-link:hover {
  text-decoration: underline;
}

.project-table .col-status,
.project-table .col-date {
  white-space: nowrap;
}

.project-table .project-chip {
  display: inline-block;
  padding: 3px 8px;
  line-height: 1.2;
  border-radius: 999px;
  vertical-align: middle;
  font-size: 12px; /* HINZUGEFÃœGT für Konsistenz */
}

.project-table .project-chip--start {
  background: #e6f0fa;
  border: 1px solid #5b9bd5;
}

.project-table .project-chip--end {
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
}

.project-table tbody tr:nth-child(even) {
  background: #fcfdfe;
}

.project-table .col-title i {
  font-size: 14px; /* GEÄNDERT von 12px */
  color: var(--tp-primary);
  margin-right: 8px;
  vertical-align: -1px;
}

/* ==========================
   NEWS CARDS
========================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-card {
  background: #f6fbfd;
  border: 1px solid #e2f0f4;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.news-card h5 {
  margin: 0 0 2px 0;
  font-size: 14px; /* GEÄNDERT von 15px */
  line-height: 1.25;
  font-weight: 700;
  color: #23343c;
}

.news-card h5 a {
  color: var(--tp-primary);
  text-decoration: none;
}

.news-card h5 a:hover {
  text-decoration: underline;
}

.news-meta {
  font-size: 12px;
  color: #6b7b86;
}

.cockpit-card.news-card .card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cockpit-card.news-card .card-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cockpit-card.news-card .update-info {
  margin-left: auto;
  white-space: nowrap;
}

/* ==========================
   KPI - LAST COMPLETED
========================== */
.kpi-card.kpi-last-completed .kpi-lc-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.kpi-card.kpi-last-completed .kpi-lc-icon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9f6fa;
  border: 1px solid #d6eef5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kpi-card.kpi-last-completed .kpi-lc-icon i {
  font-size: 20px;
  color: var(--tp-primary);
}

.kpi-card.kpi-last-completed .kpi-lc-main {
  flex: 1;
  min-width: 0;
}

.kpi-card.kpi-last-completed .kpi-lc-title {
  font-weight: 700;
  color: #23343c;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px; /* HINZUGEFÃœGT */
}

.kpi-card.kpi-last-completed .kpi-lc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.kpi-card.kpi-last-completed .kpi-lc-quote {
  font-size: 14px; /* GEÄNDERT von 13px */
  color: #2e6b7c;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================
   CTA & BUILD NOTE
========================== */
.cta-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.build-note {
  margin-top: 16px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================
   ROTATOR DOTS
========================== */
.rotator-dots {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.rotator-dots span {
  transition: opacity 0.3s;
}

/* ==========================
   PROJEKTDATENBANK / TAB: INTERVIEWER / ANFRAGEN MODUL
========================== */

/* Modal-Karte */
.rq-card {
  background: #fff;
  width: min(920px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  overflow: hidden;
  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.rq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
}

.rq-title {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.rq-title i {
  color: #005a76;
  font-size: 18px;
}

/* Body: EIN-spaltig (Form oben, Vorschau darunter) */
.rq-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
}

/* Formular */
.rq-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rq-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rq-row > label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  letter-spacing: 0;
}

/* Sprache: Flaggen-Buttons */
#rq-lang {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.rq-lang-selector {
  display: flex;
  gap: 10px;
}

.rq-lang-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.rq-lang-btn .fi {
  font-size: 20px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.rq-lang-btn:hover {
  border-color: #b8c2d3;
  background: #f8fafc;
  transform: translateY(-1px);
}

.rq-lang-btn.active {
  border-color: #005a76;
  background: #f0f9ff;
  color: #005a76;
  box-shadow: 0 0 0 2px rgba(0, 90, 118, 0.1);
}

.rq-lang-btn.active .fi {
  transform: scale(1.05);
}

/* Input mit Icon */
.rq-input-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  transition: all 0.15s ease;
}

.rq-input-icon:focus-within {
  border-color: #005a76;
  box-shadow: 0 0 0 2px rgba(0, 90, 118, 0.1);
}

.rq-input-icon i {
  color: #999;
  font-size: 14px;
}

.rq-input-icon input {
  border: none;
  outline: none;
  height: 38px;
  width: 100%;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.rq-input-icon input::placeholder {
  color: #999;
}

/* Textbausteine als Chips */
.rq-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rq-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.rq-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rq-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #d8dee9;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  transition: all 0.15s ease;
}

.rq-chip span::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease;
}

.rq-chip:hover span {
  border-color: #b8c2d3;
  background: #f8fafc;
}

.rq-chip input:checked + span {
  border-color: #005a76;
  background: #f0f9ff;
  color: #005a76;
}

.rq-chip input:checked + span::before {
  opacity: 1;
  transform: scale(1);
}

/* Hinweis-Zeile */
.rq-hintline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 12px;
  line-height: 1.5;
}

.rq-hintline i {
  color: #f59e0b;
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Textarea */
.rq-textwrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rq-text {
  min-height: 180px;
  padding: 12px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: all 0.15s ease;
  font-family: inherit;
  color: #333;
}

.rq-text:focus {
  border-color: #005a76;
  box-shadow: 0 0 0 2px rgba(0, 90, 118, 0.1);
  outline: none;
}

.rq-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin: 0;
  font-size: 11px;
  color: #777;
}

.rq-hint code {
  display: inline-block;
  padding: 2px 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
  font-size: 11px;
  color: #555;
  font-weight: 500;
}

/* Toolbar mit Button */
.rq-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
}

.rq-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(180deg, #006d88 0%, #005a76 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 90, 118, 0.25);
}

.rq-toolbar .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 90, 118, 0.35);
}

.rq-toolbar .btn:active {
  transform: translateY(0);
}

.rq-toolbar .btn i {
  font-size: 14px;
}

.rq-spacer {
  flex: 1;
}

/* Vorschau: volle Breite unter dem Formular */
.rq-preview {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  height: auto;
  position: relative;
  top: auto;
  margin-top: 6px;
}

.rq-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  color: #555;
}

.rq-preview-head::before {
  content: '\f06e';
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  color: #777;
}

.rq-preview-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  max-height: 40vh;
  overflow-y: auto;
}

.rq-preview-body p {
  margin: 0 0 10px 0;
}

.rq-preview-body p:last-child {
  margin-bottom: 0;
}

.rq-preview-body strong,
.rq-preview-body #rq-prev-subject {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
  .rq-card {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .rq-body {
    padding: 14px;
  }
  
  .rq-lang-btn {
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    font-size: 12px;
  }
}



/* ===== KOSTEN-TAB ===== */
.kosten-facts-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kosten-fact-card {
  position: relative;
}

.kosten-fact-card .kosten-fact-body {
  padding: 12px;
  text-align: center;
}

.kosten-fact-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--tp-primary);
  line-height: 1;
  margin: 0;
}

.kosten-fact-value.kosten-auslastung {
  color: #76005a;
}

.kosten-fact-label {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.kosten-fact-sublabel {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
  color: #333;
}

.kosten-progress-bar {
  margin-top: 10px;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.kosten-progress-fill {
  height: 100%;
  background: var(--tp-primary);
  width: 0%;
  transition: width 0.5s ease, background 0.3s ease;
  border-radius: 4px;
}

.kosten-summe-field {
  background: #f9fafb !important;
  font-weight: 600 !important;
  color: var(--tp-primary) !important;
}

/* Farbklassen für dynamische Werte */
.kosten-fact-value.positive { color: #007657; }
.kosten-fact-value.negative { color: #761c00; }
.kosten-fact-value.warning { color: #f39c12; }

.kosten-progress-fill.success { background: #007657; }
.kosten-progress-fill.warning { background: #f39c12; }
.kosten-progress-fill.danger { background: #761c00; }

/* Status-Badge (Smiley oben rechts) */
.kosten-status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kosten-status-badge i {
  color: inherit !important;
}

.kosten-status-badge.status-excellent { color: #007657; }
.kosten-status-badge.status-good { color: #28a745; }
.kosten-status-badge.status-ok { color: #f39c12; }
.kosten-status-badge.status-warning { color: #d68910; }
.kosten-status-badge.status-bad { color: #761c00; }


/* Admin Panel - User Form */
.admin-user-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-user-form > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-user-form label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.admin-user-form input,
.admin-user-form select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #fff;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.admin-user-form input:focus,
.admin-user-form select:focus {
  border-color: var(--tp-primary);
  box-shadow: 0 0 6px rgba(0, 90, 118, 0.4);
  outline: none;
}

.admin-user-form .section-title {
  grid-column: 1 / -1;
  margin-top: 8px;
  margin-bottom: 0;
}

.admin-user-form .checkbox-grid {
  grid-column: 1 / -1;
}

.admin-user-form .form-buttons {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.admin-user-form .checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}

.admin-user-form .checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  margin: 0;
}

.admin-user-form .checkbox-grid input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
}

/* ==========================
   LOGIN PAGE
========================== */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.login-container .logo {
  display: block;
  margin-bottom: 30px;
  height: 50px;
  animation: logoSlideDown 0.8s ease-out;
  filter: drop-shadow(0 4px 12px rgba(0, 209, 255, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.login-container .logo:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 8px 20px rgba(0, 209, 255, 0.5));
}

@keyframes logoSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-box {
  width: 380px;
  padding: 45px 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  animation: boxSlideUp 0.8s ease-out 0.2s both;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

@keyframes boxSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-box h2 {
  text-align: center;
  color: var(--tp-primary);
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.login-box .input-group {
  margin-bottom: 20px;
  position: relative;
}

.login-box .input-group i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tp-primary);
  opacity: 0.6;
  font-size: 16px;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.login-box .input-group input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  font-size: 15px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  font-family: 'Roboto', sans-serif;
  transition: all 0.3s ease;
}

.login-box .input-group input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.login-box .input-group input:focus {
  outline: none;
  border-color: var(--tp-primary);
  box-shadow: 0 0 0 4px rgba(0, 90, 118, 0.1);
  background: #fafcfd;
}

.login-box .input-group input:focus + i {
  opacity: 1;
  color: var(--tp-primary);
}

.login-box .error-message {
  color: #991b1b;
  background: #fee2e2;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid #fecaca;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: shakeError 0.5s ease;
}

.login-box .error-message i {
  color: #dc2626;
  font-size: 18px;
  flex-shrink: 0;
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.login-box .btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--tp-primary) 0%, var(--tp-primary-hover) 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 90, 118, 0.3);
  position: relative;
  overflow: hidden;
}

.login-box .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.login-box .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 90, 118, 0.4);
}

.login-box .btn:hover::before {
  left: 100%;
}

.login-box .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 90, 118, 0.3);
}

.login-page footer {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-page .footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  border-radius: 50px;
  color: white;
  font-size: 14px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.login-page .footer-badge:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.login-page .footer-badge i {
  color: #00d1ff;
  font-size: 16px;
}

.login-page .footer-badge a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.login-page .footer-badge a:hover {
  color: #00d1ff;
  text-decoration: none;
}

/* ==========================
   END OF LOGIN PAGE
========================== */

/* ==========================
   COCKPIT: SWIPE CARDS (Mobile)
========================== */

/* Desktop Mittel: 2 Spalten (768px - 1199px) */
@media (min-width: 768px) {
  .cockpit-swipe-wrapper {
    display: block;
  }
  
  .cockpit-swipe-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 18px;
  }
  
  .swipe-dots {
    display: none !important;
  }
}

/* Desktop Groß: 3 Spalten (≥ 1200px) */
@media (min-width: 1200px) {
  .cockpit-swipe-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: Horizontal Scroll */
@media (max-width: 767px) {
  /* Begrüßungs-Card ausblenden */
  .welcome-card {
    display: none;
  }
  
  .cockpit-swipe-wrapper {
    position: relative;
    margin: 0 -2rem;
  }
  
  .cockpit-swipe-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 2rem;
    scrollbar-width: none;
  }
  
  .cockpit-swipe-container::-webkit-scrollbar {
    display: none;
  }
  
  .swipe-card {
    flex: 0 0 88%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  
  /* "Zuletzt abgeschlossen" auf Mobile verstecken */
  .swipe-card.desktop-only {
    display: none;
  }
  
  /* Compact Card Content für Mobile */
  .swipe-card .card-title {
    font-size: 14px;
  }
  
  .swipe-card .update-info {
    font-size: 11px;
  }
  
  .swipe-card .project-table {
    font-size: 12px;
  }
  
  .swipe-card .project-table .col-date,
  .swipe-card .project-table .col-lang {
    display: none;
  }
  
  /* Flaggen auf Mobile inline beim Namen */
  .swipe-card .lang-flags.mobile-inline {
    display: inline-flex !important;
    margin-left: 8px;
    gap: 4px;
    vertical-align: middle;
  }
  
  /* Changelog Mobile - nur Datum ausblenden */
  #changelog-list .chg-date {
    display: none;
  }
  
  /* Feature Spotlight - Schriftgrößen angleichen */
  .feature-spotlight .fs-headline {
    font-size: 14px;
  }
  
  .feature-spotlight .fs-sub {
    font-size: 13px;
  }
  
  .feature-spotlight .fs-bullets {
    font-size: 13px;
  }
  
  .feature-spotlight .fs-hero i {
    font-size: 20px;
  }
  
  /* Changelog - Schriftgrößen angleichen */
  #changelog-list .chg-title {
    font-size: 14px;
  }
  
  #changelog-list .chg-text {
    font-size: 13px;
  }
}

/* Desktop: mobile-inline verstecken */
@media (min-width: 768px) {
  .lang-flags.mobile-inline {
    display: none !important;
  }
  
  .swipe-card .lc-icon {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  
  .swipe-card .lc-icon i {
    font-size: 20px !important;
  }
  
  .swipe-card .kpi-lc-quote {
    font-size: 12px !important;
  }
  
  /* Pagination Dots */
  .swipe-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
    margin: 0 2rem;
  }
  
  .swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .swipe-dot.active {
    background: var(--tp-primary);
    width: 24px;
    border-radius: 4px;
  }
  
  /* Feature Spotlight Mobile */
  .feature-spotlight .fs-wrap {
    flex-direction: column;
  }
  
  .feature-spotlight .fs-right {
    display: none;
  }
}

/* Changelog Link (für alle Größen) */
.changelog-link {
  font-size: 13px;
  font-weight: 500;
  color: #005a76;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.changelog-link:hover {
  color: #007c9d;
  text-decoration: none;
}

.changelog-link i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.changelog-link:hover i {
  transform: translateX(3px);
}

/* Changelog Items */
#changelog-list .chg-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px dashed #e5e7eb;
}

#changelog-list .chg-item:last-child {
  border-bottom: 0;
}

#changelog-list .chg-date {
  white-space: nowrap;
  opacity: 0.8;
  font-size: 12px;
  min-width: 88px;
}

#changelog-list .chg-main {
  flex: 1;
  min-width: 0;
}

#changelog-list .chg-title {
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#changelog-list .chg-text {
  color: #333;
  line-height: 1.35;
}

/* Feature Spotlight (alle Größen) */
.feature-spotlight .badge-new {
  background: #0ea5e9;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  animation: fsPulse 1.6s ease-in-out infinite;
}

@keyframes fsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.feature-spotlight .fs-wrap {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.feature-spotlight .fs-left {
  flex: 1;
  min-width: 0;
}

.feature-spotlight .fs-hero {
  background: linear-gradient(90deg, #e6f2f5, transparent);
  border: 1px solid #c4e0e6;
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 8px;
}

.feature-spotlight .fs-hero i {
  font-size: 28px;
  color: #005a76;
  margin-right: 8px;
  vertical-align: -2px;
}

.feature-spotlight .fs-headline {
  font-weight: 700;
  font-size: 16px;
  margin-top: 6px;
}

.feature-spotlight .fs-sub {
  color: #333;
  margin-top: 4px;
  line-height: 1.35;
}

.feature-spotlight .fs-bullets {
  margin: 10px 0 12px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.feature-spotlight .fs-bullets li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.feature-spotlight .fs-bullets i {
  color: #005a76;
  min-width: 16px;
  margin-top: 2px;
}

.feature-spotlight .fs-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feature-spotlight .fs-right {
  width: 200px;
  position: relative;
  border-left: 1px dashed #e5e7eb;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.feature-spotlight .fs-score-badge {
  width: 110px;
  height: 110px;
  border-radius: 20px;
  border: 1px solid #c4e0e6;
  background: #f7fbfc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
  margin-left: 0;
}

.feature-spotlight .fs-score {
  font-size: 42px;
  font-weight: 800;
  color: #005a76;
  line-height: 1;
}

.feature-spotlight .fs-label {
  font-size: 12px;
  color: #333;
  opacity: 0.85;
  margin-top: 4px;
}

.feature-spotlight .fs-burst {
  position: static;
  opacity: 0.28;
  font-size: 18px;
  color: #005a76;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  transform: none;
  margin-top: 6px;
}

@keyframes fsFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.feature-spotlight .fs-burst i {
  animation: fsFloat 3.2s ease-in-out infinite;
}

.feature-spotlight .fs-burst i:nth-child(2) {
  animation-delay: 0.3s;
}

.feature-spotlight .fs-burst i:nth-child(3) {
  animation-delay: 0.6s;
}

@media (max-width: 1100px) {
  .feature-spotlight .fs-wrap {
    flex-direction: column;
  }
  
  .feature-spotlight .fs-right {
    width: auto;
    border-left: 0;
    padding-left: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/*
========================================
MOBILE: Aktuelle Projekte (Card-Layout)
Version: 1.0 | Stand: 2025-10-19
========================================
*/

/* Desktop: Cards ausblenden */
.project-cards {
  display: none;
}

/* Mobile: ab 768px aufwärts */
@media (max-width: 768px) {
  
  /* === Tabelle ausblenden === */
  .styled-table.proj-table {
    display: none !important;
  }
  
  /* === Card-Container aktivieren === */
  .project-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  /* === Einzelne Projekt-Card === */
  .project-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .project-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  
  /* === Card Header === */
  .project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 10px;
  }
  
  .project-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--tp-primary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
  }
  
  .project-card-status {
    flex-shrink: 0;
  }
  
  /* === Card Meta Grid === */
  .project-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .meta-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  
  .meta-value {
    font-weight: 500;
    color: #333;
    line-height: 1.2;
  }
  
  .meta-value:empty::before {
    content: '—';
    color: #9ca3af;
  }
  
  /* === Aufgaben-Icons in Card === */
  .project-card-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  
  .project-card .task-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  
  /* === Monats-Ãœberschriften mobil === */
  .content-wrapper.projekt-db h3 {
    font-size: 16px;
    color: var(--tp-primary);
    margin: 20px 0 10px 0;
    padding-left: 4px;
    border-left: 3px solid var(--tp-primary);
  }
  
  /* === Status-Badge in Card === */
  .project-card .status-badge {
    font-size: 11px;
    padding: 4px 10px;
    white-space: nowrap;
  }
  
  /* === Suchfeld und Filter === */
  .frame-actions .actions-inline {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  
  .frame-actions .actions-inline .search-input,
  .frame-actions .actions-inline .filter-select {
    width: 100%;
    max-width: 100%;
  }
  
  /* === Frame Header Mobile === */
  .frame-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .frame-heading {
    justify-content: center;
  }
  
  /* === Kompakte Meta-Werte === */
  .meta-item.interviews .meta-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-primary);
  }
  
  /* === Task-Label für Screen Reader === */
  .project-card-tasks::before {
    content: 'Aufgaben:';
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 4px;
  }
}

/* === Sehr kleine Screens (< 400px) === */
@media (max-width: 400px) {
  .project-card {
    padding: 12px;
  }
  
  .project-card-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .project-card-title {
    font-size: 14px;
  }
  
  .project-card .task-icon {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}

/* === Landscape-Modus auf kleinen Screens === */
@media (max-width: 768px) and (orientation: landscape) {
  .project-card-meta {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  
  .project-card-tasks {
    margin-top: 8px;
  }
}

/*
========================================
MOBILE: Interviewer-Liste (Card-Layout)
Version: 1.6 | Stand: 2025-10-25 (DESKTOP-SAFE)
========================================
*/

/* ==========================
   DESKTOP: Mobile Elemente ausblenden
========================== */
@media (min-width: 769px) {
  .interviewer-cards,
  .interviewer-card,
  .search-result-card,
  #mobile-search-results,
  .mobile-search-container,
  .mobile-fab,
  .mobile-detail-view,
  .mobile-save-footer {
    display: none !important;
  }
}

/* ==========================
   MOBILE OPTIMIERUNG
========================== */
@media (max-width: 768px) {
  
  /* === Tabelle ausblenden === */
  .styled-table#interviewer-table {
    display: none !important;
  }
  
  /* === Card-Container aktivieren === */
  .interviewer-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  /* === Einzelne Interviewer-Card === */
  .interviewer-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
  }
  
  .interviewer-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  
  /* === Card Header (Name + Status) === */
  .interviewer-cards .interviewer-card-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 10px;
  }
  
  /* === Name + Flaggen Container === */
  .interviewer-cards .interviewer-card-name-row {
    flex: 1;
    min-width: 0;
  }
  
  /* === Name mit INLINE Flaggen === */
  .interviewer-cards .interviewer-card-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--tp-primary);
    line-height: 1.4;
    cursor: pointer;
    word-wrap: break-word;
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .interviewer-cards .interviewer-card-name:active {
    opacity: 0.7;
  }
  
  /* === Flaggen INLINE neben Name === */
  .interviewer-cards .interviewer-card-languages-inline {
    display: inline-flex !important;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .interviewer-cards .interviewer-card-languages-inline .flag-img {
    width: 20px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    vertical-align: middle;
  }
  
  /* === Status Badge === */
  .interviewer-cards .interviewer-card-status {
    flex-shrink: 0;
  }
  
  /* === Skills Badges === */
  .interviewer-cards .interviewer-card-skills {
    display: flex !important;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  
  .interviewer-cards .interviewer-card-skills .badge {
    background: var(--tp-primary);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
  }
  
  /* === SCORES NEBENEINANDER - NUR FÃœR CARDS === */
  .interviewer-cards .interviewer-card .interviewer-card-scores {
    display: block !important;
    margin-bottom: 12px !important;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-label {
    font-size: 10px !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 4px !important;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-chip {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 15px !important;
    padding: 6px 10px !important;
    height: auto !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
  }
  
  /* Verhindere vertikales Stacking */
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-chip + .score-chip {
    margin-top: 0 !important;
    margin-left: 0 !important;
  }
  
  /* === Alte Sprachen-Zeile ausblenden === */
  .interviewer-cards .interviewer-card-languages {
    display: none !important;
  }
  
  /* === Alte Flag-Zeile ausblenden === */
  .interviewer-cards .interviewer-card-flag {
    display: none !important;
  }
  
  /* === Meta Grid === */
  .interviewer-cards .interviewer-card-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 8px;
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .interviewer-cards .interviewer-meta-item {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
  }
  
  .interviewer-cards .interviewer-meta-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  
  .interviewer-cards .interviewer-meta-value {
    font-weight: 500;
    color: #333;
    line-height: 1.2;
  }
  
  .interviewer-cards .interviewer-meta-value:empty::before {
    content: '—';
    color: #9ca3af;
  }
  
  /* === Checkboxen (RV/GS) === */
  .interviewer-cards .interviewer-meta-value .check-icon {
    color: #10b981;
    font-size: 16px;
  }
  
  /* === Text-Felder (Notizen/Chronik) === */
  .interviewer-cards .interviewer-card-text {
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
    margin-top: 10px;
  }
  
  .interviewer-cards .interviewer-text-item {
    margin-bottom: 10px;
  }
  
  .interviewer-cards .interviewer-text-item:last-child {
    margin-bottom: 0;
  }
  
  .interviewer-cards .interviewer-text-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
  }
  
  .interviewer-cards .interviewer-text-content {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
    cursor: pointer;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.15s ease;
  }
  
  .interviewer-cards .interviewer-text-content:active {
    background: #f3f4f6;
    border-color: #d1d5db;
  }
  
  .interviewer-cards .interviewer-text-content:empty::before {
    content: 'Keine Einträge';
    color: #9ca3af;
    font-style: italic;
  }
  
  /* === Mail-Button === */
  .interviewer-cards .interviewer-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
  
  .interviewer-cards .interviewer-card-actions .icon-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .interviewer-cards .interviewer-card-actions .mail-btn {
    background: var(--tp-primary);
  }
  
  /* === Info-Bars kompakter === */
  .content-wrapper .info-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .content-wrapper .info-title {
    width: 100%;
    justify-content: center;
  }
  
  .content-wrapper .info-items {
    gap: 6px;
  }
  
  .content-wrapper .info-item {
    min-width: 0;
    flex: 1 1 calc(50% - 3px);
    font-size: 12px;
    padding: 6px 8px;
  }
  
  .content-wrapper .info-item strong {
    font-size: 14px;
  }
  
  /* === Filter-Leiste === */
  .frame-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .frame-actions .filter-select {
    width: 100%;
    max-width: 100%;
  }
  
  .frame-actions .btn--sm {
    width: 100%;
    justify-content: center;
  }
}  

/* ==========================
   SEHR KLEINE SCREENS
========================== */
@media (max-width: 400px) {
  .interviewer-cards .interviewer-card {
    padding: 12px;
  }
  
  .interviewer-cards .interviewer-card-meta {
    grid-template-columns: 1fr !important;
  }
  
  .interviewer-cards .interviewer-card-name {
    font-size: 15px;
    gap: 6px;
  }
  
  .content-wrapper .info-item {
    flex: 1 1 100%;
  }
  
  .interviewer-cards .interviewer-card-languages-inline .flag-img {
    width: 18px;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-row {
    gap: 8px !important;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-chip {
    font-size: 14px !important;
    padding: 5px 8px !important;
  }
}

/* ==========================
   LANDSCAPE-MODUS
========================== */
@media (max-width: 768px) and (orientation: landscape) {
  .interviewer-cards .interviewer-card-meta {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .interviewer-cards .interviewer-card .interviewer-card-scores .score-row {
    gap: 16px !important;
  }
}

/*
========================================
Transpera HUB - MOBILE DETAIL ANSICHT
Version: 1.1 | Stand: 2025-10-20
========================================
*/

/* ==========================
   MOBILE: SEARCH CONTAINER
========================== */
.mobile-search-container {
  display: none;
  padding: 20px 16px;
  min-height: 100vh;
  background: #f8f9fa;
}

.mobile-search-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.mobile-search-header {
  margin-bottom: 24px;
}

.mobile-search-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--tp-primary);
  margin: 0 0 8px 0;
}

.mobile-search-header p {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

#mobile-search {
  width: 100%;
  height: 56px;
  font-size: 16px;
  padding: 0 20px 0 48px;
  border-radius: 28px;
  border: 2px solid #e5e7eb;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  box-sizing: border-box;
  max-width: 100%;
}

#mobile-search:focus {
  outline: none;
  border-color: var(--tp-primary);
  box-shadow: 0 4px 12px rgba(0, 90, 118, 0.15);
}

.mobile-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 18px;
  pointer-events: none;
}

.mobile-search-input-wrapper {
  position: relative;
  margin-bottom: 20px;
}

#mobile-search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-search-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.mobile-search-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.mobile-search-empty p {
  font-size: 15px;
  margin: 0;
}

/* ==========================
   SEARCH RESULT CARDS
========================== */
.search-result-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.search-result-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.search-result-name {
  font-weight: 600;
  font-size: 16px;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1.3;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-result-id {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

.search-result-card .status-badge {
  font-size: 11px;
  padding: 3px 8px;
}

/* ==========================
   FAB (Floating Action Button)
========================== */
.mobile-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tp-primary);
  color: #fff;
  border: none;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 90, 118, 0.4);
  cursor: pointer;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-fab:active {
  transform: scale(0.92);
}

.mobile-fab i {
  line-height: 1;
}

/* ==========================
   DETAIL VIEW OVERLAY
========================== */
.mobile-detail-view {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 15000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-detail-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 15001;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.mobile-detail-back {
  background: transparent;
  border: none;
  color: var(--tp-primary);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-detail-back:active {
  opacity: 0.7;
}

.mobile-detail-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 12px;
}

.mobile-detail-actions {
  display: flex;
  gap: 8px;
}

.mobile-header-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: var(--tp-primary);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-header-btn:active {
  opacity: 0.8;
}

.mobile-detail-content {
  padding: 0 0 80px 0;
}

/* ==========================
   STICKY SAVE FOOTER
========================== */
.mobile-save-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 10;
  display: none;
}

.mobile-save-footer .btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ==========================
   MOBILE AKTIVIERUNG
========================== */
@media (max-width: 768px) {
  
  /* Mobile Search anpassen */
  .mobile-search-wrapper {
    max-width: 100%;
    padding: 0 12px;
  }
  
  #mobile-search {
    height: 48px;
    padding: 0 16px 0 44px;
    border-radius: 20px;
  }
  
  /* Desktop-Elemente ausblenden */
  .split-container,
  .alpha-nav,
  #search-interviewer,
  #sort-mode,
  .list-header {
    display: none !important;
  }
  
  /* Desktop-Tabs ausblenden */
  .split-right .subtabs-container.detail-tabs {
    display: none !important;
  }
  
  /* Mobile-Elemente einblenden */
  .mobile-search-container {
    display: block;
  }
  
  .mobile-fab {
    display: flex;
  }
  
  .mobile-save-footer {
    display: block;
  }
  
  /* Mobile-Tabs im Detail-Overlay */
  .mobile-detail-view .subtabs-container.detail-tabs {
    display: flex !important;
    flex-direction: column;
    position: sticky;
    top: 52px;
    background: #fff;
    z-index: 15001;
    margin-bottom: 0;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .mobile-detail-view .subtabs-container.detail-tabs .tabs {
    display: flex !important;
    justify-content: space-around;
    gap: 4px;
    width: 100%;
  }
  
  .mobile-detail-view .subtabs-container.detail-tabs .tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 13px;
    text-align: center;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #e6e6e6;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .mobile-detail-view .subtabs-container.detail-tabs .tab.active {
    background: var(--tp-primary);
    color: #fff;
  }
  
  .mobile-detail-view .subtabs-container.detail-tabs .tab:hover {
    background: #007c9d;
    color: #fff;
  }
  
  .mobile-detail-view .subtabs-container.detail-tabs .tab i {
    font-size: 16px;
  }
  
  /* Content-Wrapper Anpassungen */
  .content-wrapper.interviewer-detail {
    padding: 0;
  }
  
  .frame {
    border-radius: 0;
    margin: 0;
  }
  
  .frame-toolbar {
    display: none;
  }
  
  .frame-body {
    padding: 0;
  }
}

/* ==========================
   FORMULAR OPTIMIERUNG
========================== */
@media (max-width: 768px) {
  .content-wrapper.interviewer-detail .form-grid {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  
  .content-wrapper.interviewer-detail .form-grid .col-left,
  .content-wrapper.interviewer-detail .form-grid .col-right {
    grid-column: 1;
  }
  
  .fieldset.twocol {
    grid-template-columns: 1fr !important;
  }
  
  .fieldset.twocol .col-left,
  .fieldset.twocol .col-right {
    grid-column: 1;
  }
  
  /* Touch-Targets */
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }
  
  .icon-btn,
  .phone-wrapper .icon-btn,
  .password-wrapper .icon-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px;
  }
  
  /* Skills & Sprachen */
  .tag-container .badge {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .tag-container .badge .remove-btn {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }
  
  /* Note-Blocks */
  .note-block {
    padding: 16px;
  }
  
  .note-block textarea {
    min-height: 120px;
    font-size: 15px;
  }
}

/* ==========================
   BEWERTUNG OPTIMIERUNG
========================== */
@media (max-width: 768px) {
  .score-card {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .stars button {
    font-size: 32px !important;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .score-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .score-row label {
    font-size: 15px;
    line-height: 1.4;
  }
  
  .stars {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  
  #score-overall-badge {
    font-size: 20px;
    padding: 8px 16px;
    height: auto;
  }
}

/* ==========================
   LOADING SPINNER
========================== */
@media (max-width: 768px) {
  .loading-overlay,
  .fullscreen-loading-overlay {
    z-index: 10000;
  }
}

/* ==========================
   ANIMATIONS
========================== */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.mobile-detail-view.active {
  animation: slideInFromRight 0.3s ease-out;
}

/* ==========================
   LANDSCAPE OPTIMIERUNG
========================== */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-detail-header {
    padding: 8px 12px;
  }
  
  .mobile-save-footer {
    padding: 8px 12px;
  }
  
  .mobile-save-footer .btn {
    height: 44px;
  }
}

/* ==========================
   SEHR KLEINE DISPLAYS
========================== */
@media (max-width: 480px) {
  .subtabs-container.detail-tabs .tab span {
    display: none;
  }
  
  .subtabs-container.detail-tabs .tab i {
    font-size: 20px;
    margin: 0;
  }
  
  .mobile-detail-title {
    font-size: 14px;
  }
}

/*
========================================
MOBILE: Administration (Card-Layout)
Version: 1.0 | Stand: 2025-10-21
========================================
*/

/* === Desktop: Cards ausblenden === */
.admin-user-cards {
  display: none;
}

@media (max-width: 768px) {
  
  /* === Admin Content Wrapper === */
  .content-wrapper.administration {
    padding: 12px;
  }
  
  .content-wrapper.administration h1 {
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  /* === Subtabs kompakt === */
  .content-wrapper.administration .subtabs-container {
    margin-bottom: 16px;
  }
  
  .content-wrapper.administration .subtab-btn {
    font-size: 13px;
    padding: 8px 12px;
    height: auto;
  }
  
  /* === List Header === */
  .content-wrapper.administration .list-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  
  .content-wrapper.administration .list-header h2 {
    font-size: 18px;
    margin: 0;
  }
  
  .content-wrapper.administration .new-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 15px;
  }
  
  /* === TABELLE AUSBLENDEN === */
  .content-wrapper.administration #user-list .styled-table {
    display: none !important;
  }
  
  /* === CARD CONTAINER === */
  .admin-user-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* === EINZELNE USER CARD === */
  .admin-user-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
  }
  
  .admin-user-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  }
  
  /* === Card Header === */
  .admin-user-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 10px;
  }
  
  .admin-user-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--tp-primary);
    line-height: 1.3;
    flex: 1;
  }
  
  .admin-user-username {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
  }
  
  .admin-user-status {
    flex-shrink: 0;
  }
  
  .admin-user-card .status-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  
  /* === Card Meta Grid === */
  .admin-user-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .admin-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  
  .admin-meta-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  
  .admin-meta-value {
    font-weight: 500;
    color: #333;
    line-height: 1.2;
  }
  
  .admin-meta-value:empty::before {
    content: '—';
    color: #9ca3af;
  }
  
  /* === Gruppen als Chips === */
  .admin-user-groups {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
  }
  
  .admin-groups-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
  }
  
  .admin-groups-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .admin-group-chip {
    background: #f3f4f6;
    color: #374151;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
  }
  
  /* === Card Actions === */
  .admin-user-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
  }
  
  .admin-user-actions .icon-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px;
  }
  
  /* === MODAL FULLSCREEN === */
  .content-wrapper.administration #user-modal {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  
  .content-wrapper.administration .tp-popover-header {
    padding: 14px 16px;
    border-radius: 0;
  }
  
  .content-wrapper.administration .tp-popover-header h3 {
    font-size: 16px;
  }
  
  .content-wrapper.administration .tp-popover-close {
    padding: 8px 14px;
    font-size: 14px;
  }
  
  .content-wrapper.administration .tp-popover-body {
    padding: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  /* === FORMULAR OPTIMIEREN === */
  .content-wrapper.administration .admin-user-form > div {
    margin-bottom: 16px;
  }
  
  .content-wrapper.administration .admin-user-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
  }
  
  .content-wrapper.administration .admin-user-form input,
  .content-wrapper.administration .admin-user-form select {
    width: 100%;
    height: 48px;
    font-size: 16px;
    padding: 0 14px;
    border: 1px solid #d8dee9;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  
  .content-wrapper.administration .admin-user-form input:focus,
  .content-wrapper.administration .admin-user-form select:focus {
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(0, 90, 118, 0.1);
    outline: none;
  }
  
  /* === Section Title === */
  .content-wrapper.administration .section-title {
    font-size: 14px;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }
  
  /* === Checkbox Grid === */
  .content-wrapper.administration .checkbox-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .content-wrapper.administration .checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  
  .content-wrapper.administration .checkbox-grid label:active {
    background: #f1f5f9;
    transform: scale(0.98);
  }
  
  .content-wrapper.administration .checkbox-grid input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
  }
  
  /* === Form Buttons === */
  .content-wrapper.administration .form-buttons {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 24px;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 16px 0 0;
    border-top: 1px solid #e5e7eb;
  }
  
  .content-wrapper.administration .form-buttons .btn,
  .content-wrapper.administration .form-buttons .save-btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    border-radius: 10px;
  }
}

/* === Sehr kleine Screens === */
@media (max-width: 400px) {
  .admin-user-card {
    padding: 12px;
  }
  
  .admin-user-name {
    font-size: 15px;
  }
  
  .admin-user-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* === Landscape Modus === */
@media (max-width: 768px) and (orientation: landscape) {
  .content-wrapper.administration #user-modal .tp-popover-body {
    max-height: calc(100vh - 100px);
  }
  
  .content-wrapper.administration .checkbox-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .admin-user-meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================
   CONTROLLING MODULE
   Version: 1.4 | Stand: 2025-10-21
========================== */

/* KPI Cards */
.controlling .kpi-card {
    cursor: default;
}

.controlling .kpi-card:hover {
    transform: translateY(-3px);
}

/* Tabellen-Zeilen (Desktop) */
.controlling-table tbody tr[data-id] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.controlling-table tbody tr[data-id]:hover {
    background-color: #f0f9ff !important;
    box-shadow: inset 0 0 0 1px rgba(0, 90, 118, 0.1);
}

/* DB% Badges - Farbcodierung */
.db-excellent {
    background: #d1f4e0;
    color: #007657;
    font-weight: 700;
}

.db-good {
    background: #fff3cd;
    color: #856404;
    font-weight: 600;
}

.db-poor {
    background: #f8d7da;
    color: #721c24;
    font-weight: 600;
}

.db-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Mobile Cards Container */
.controlling-cards {
    display: none;
    margin-top: 20px;
}

/* Einzelne Cards */
.ctrl-card {
    background: #fff;
    border: 1px solid #e5edf3;
    border-radius: 16px;
    padding: 18px;
    margin: 12px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ctrl-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--tp-primary) 0%, #007c9d 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ctrl-card:hover {
    box-shadow: 0 8px 24px rgba(0, 90, 118, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    border-color: #b8d4dd;
    transform: translateY(-2px);
}

.ctrl-card:hover::before {
    opacity: 1;
}

.ctrl-card:active {
    transform: translateY(0) scale(0.99);
    transition-duration: 0.1s;
}

/* Card Header mit Badge oben rechts */
.ctrl-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.ctrl-card-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.ctrl-card-title {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #1a2332;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ctrl-card-client {
    color: #6b7b86;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctrl-card-client::before {
    content: '\f1ad';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: #9ca8b3;
}

/* Badge oben rechts */
.ctrl-card-badge {
    flex-shrink: 0;
    align-self: flex-start;
}

.ctrl-card-badge .db-badge {
    padding: 6px 14px;
    font-size: 14px;
    white-space: nowrap;
}

/* Kennzahlen Grid - jetzt 2x2 ohne DB */
.ctrl-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
    padding-top: 14px;
    border-top: 1px solid #f0f4f7;
}

.ctrl-card-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Labels */
.ctrl-card-grid > div > div:first-child {
    font-size: 11px;
    color: #6b7b86;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Werte */
.ctrl-card-grid > div > div:last-child {
    font-weight: 700;
    font-size: 15px;
    color: #1a2332;
    line-height: 1.2;
}

/* Summen-Karte */
.ctrl-card.summary {
    border: 2px solid var(--tp-primary, #005a76);
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f8fb 100%);
    box-shadow: 0 4px 16px rgba(0, 90, 118, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ctrl-card.summary::before {
    width: 5px;
    opacity: 1;
    background: linear-gradient(180deg, #007657 0%, var(--tp-primary) 50%, #76005a 100%);
}

.ctrl-card.summary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 90, 118, 0.18), 0 4px 8px rgba(0, 0, 0, 0.12);
}

.ctrl-card.summary .ctrl-card-title {
    font-size: 18px;
    color: var(--tp-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ctrl-card.summary .ctrl-card-title::before {
    content: '\f200';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
}

/* Empty State */
.card-empty {
    text-align: center;
    padding: 60px 24px;
    color: #9ca8b3;
    background: linear-gradient(135deg, #fafcfd 0%, #f5f8fa 100%);
    border-radius: 16px;
    border: 2px dashed #e5edf3;
    margin: 12px 0;
}

.card-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
    color: #b8c4cf;
}

.card-empty p {
    font-size: 15px;
    margin: 8px 0 0 0;
    font-weight: 500;
}

/* Loading State */
.controlling-cards-loading {
    text-align: center;
    padding: 60px 24px;
    color: #9ca8b3;
}

.controlling-cards-loading .spinner {
    margin: 0 auto 20px;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .kpi-card {
        min-height: 80px;
    }
    
    .frame:has(.controlling-table) {
        display: none !important;
    }
    
    .controlling-cards {
        display: block !important;
        padding: 0 12px;
    }
    
    .ctrl-card {
        margin: 10px 0;
        padding: 16px;
        border-radius: 14px;
    }
    
    .ctrl-card-title {
        font-size: 16px;
    }
    
    .ctrl-card-client {
        font-size: 13px;
    }
    
    .ctrl-card-grid {
        gap: 12px 8px;
        padding-top: 12px;
    }
    
    .ctrl-card-grid > div > div:first-child {
        font-size: 10px;
    }
    
    .ctrl-card-grid > div > div:last-child {
        font-size: 14px;
    }
    
    .ctrl-card.summary {
        margin: 16px 0;
        padding: 18px;
    }
    
    .ctrl-card.summary .ctrl-card-title {
        font-size: 17px;
    }
    
    .frame-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .filter-select {
        min-width: 140px;
        flex: 1 1 calc(50% - 4px);
    }
    
    #export-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .kpi-card h3 {
        font-size: 1.4rem;
    }
    
    .kpi-card p {
        font-size: 12px;
    }
    
    .ctrl-card {
        padding: 14px;
        border-radius: 12px;
    }
    
    .ctrl-card-title {
        font-size: 15px;
    }
    
    .ctrl-card-badge .db-badge {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    .ctrl-card-grid {
        gap: 10px 8px;
    }
    
    .filter-select {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/*
========================================
Transpera HUB - MOBILE PROJEKT-DB
Version: 1.0 | Stand: 2025-01-21
========================================
*/

/* MOBILE: PROJEKT SEARCH CONTAINER */
.mobile-project-search-container {
  display: none;
  padding: 20px 16px;
  min-height: 100vh;
  background: #f8f9fa;
}

.mobile-project-search-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.mobile-project-search-header {
  margin-bottom: 24px;
}

.mobile-project-search-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--tp-primary);
  margin: 0 0 8px 0;
}

.mobile-project-search-header p {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

#mobile-project-search {
  width: 100%;
  height: 56px;
  font-size: 16px;
  padding: 0 20px 0 48px;
  border-radius: 28px;
  border: 2px solid #e5e7eb;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

#mobile-project-search:focus {
  outline: none;
  border-color: var(--tp-primary);
  box-shadow: 0 4px 12px rgba(0, 90, 118, 0.15);
}

.mobile-project-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 18px;
  pointer-events: none;
}

.mobile-project-search-input-wrapper {
  position: relative;
  margin-bottom: 20px;
}

#mobile-project-search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-project-search-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.mobile-project-search-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* PROJEKT SEARCH RESULT CARDS (EXAKT wie Aktuelle Projekte) */
.project-search-result-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.project-search-result-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Card Header */
.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}

.project-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--tp-primary);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.project-card-status {
  flex-shrink: 0;
}

/* Card Meta Grid */
.project-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
  font-size: 13px;
  margin-bottom: 10px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.meta-value {
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}

.meta-value:empty::before {
  content: '—';
  color: #9ca3af;
}

.meta-item.interviews .meta-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-primary);
}

/* Aufgaben-Icons in Card */
.project-card-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.project-card-tasks::before {
  content: 'Aufgaben:';
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  width: 100%;
  margin-bottom: 4px;
}

.project-search-result-card .task-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: currentColor;
  color: #fff;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-search-result-card .task-icon i {
  color: #fff !important;
}

/* Status-Badge */
.project-card-status .status-badge {
  font-size: 11px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Sehr kleine Screens */
@media (max-width: 400px) {
  .project-search-result-card {
    padding: 12px;
  }
  
  .project-card-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .project-card-title {
    font-size: 14px;
  }
  
  .project-search-result-card .task-icon {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}

/* MOBILE PROJECT FAB */
.mobile-project-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tp-primary);
  color: #fff;
  border: none;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 90, 118, 0.4);
  z-index: 100;
  display: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-project-fab:active {
  transform: scale(0.92);
}

/* MOBILE PROJECT DETAIL VIEW */
.mobile-project-detail-view {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 15000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-project-detail-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 15001;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.mobile-project-detail-back {
  background: transparent;
  border: none;
  color: var(--tp-primary);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-project-detail-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 12px;
}

.mobile-project-detail-content {
  padding: 0 0 80px 0;
}

/* MOBILE PROJECT SAVE FOOTER */
.mobile-project-save-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 15002;
  display: none;
}

.mobile-project-save-footer .btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 12px;
}

/* MOBILE AKTIVIERUNG */
@media (max-width: 768px) {
  .content-wrapper.projekt-db .split-container,
  .content-wrapper.projekt-db .frame-toolbar {
    display: none !important;
  }
  
  .mobile-project-search-container,
  .mobile-project-fab,
  .mobile-project-save-footer {
    display: block;
  }
  
  .mobile-project-fab {
    display: flex;
  }
  
  /* Tabs im Overlay */
  .mobile-project-detail-view .subtabs-container.detail-tabs {
    display: flex !important;
    position: sticky;
    top: 52px;
    background: #fff;
    z-index: 15001;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .mobile-project-detail-view .subtabs-container.detail-tabs .tabs {
    display: flex !important;
    width: 100%;
    gap: 4px;
  }
  
  .mobile-project-detail-view .subtabs-container.detail-tabs .tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    min-width: 0;
  }
  
  /* Formular-Optimierungen */
  .content-wrapper.projekt-db .box-grid-2col {
    grid-template-columns: 1fr !important;
    padding: 16px;
  }
  
  .content-wrapper.projekt-db input,
  .content-wrapper.projekt-db select,
  .content-wrapper.projekt-db textarea {
    min-height: 44px;
    font-size: 16px;
  }
  
  /* Interviewer-Tab */
  .content-wrapper.projekt-db #tab-interviewer .interviewer-grid {
    grid-template-columns: 1fr !important;
    padding: 16px;
  }
  
  /* Kosten-Tab */
  .content-wrapper.projekt-db #tab-kosten .box-grid-2col {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================
   FIX: Score-Row-Grid Alignment
========================== */
.interviewer-detail #tab-bewertung .score-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Beide Score-Cards in erster Row: gleiche Struktur */
.interviewer-detail #tab-bewertung .score-row-grid:first-of-type .score-card {
  display: flex;
  flex-direction: column;
}

/* h3+Badge Container: gleiche Höhe */
.interviewer-detail #tab-bewertung .score-row-grid:first-of-type .score-card > div:first-child {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-height: 40px;
}

/* Hint: gleiche Mindesthöhe */
.interviewer-detail #tab-bewertung .score-row-grid:first-of-type .score-card .hint {
  min-height: 18px;
  margin-top: 6px;
}


/* ============================================ */
/* 1. CSS FÜR STYLE.CSS - Aktivitäts-Navigation */
/* ============================================ */

/* Aktivitäts-Navigation Footer */
.activity-pagination {
  text-align: center;
  padding: 15px 0 5px;
  border-top: 1px solid #e8e8e8;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.activity-pagination button {
  background: transparent;
  border: 1px solid #005a76;
  color: #005a76;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.activity-pagination button:hover:not(:disabled) {
  background: #005a76;
  color: white;
}

.activity-pagination button:disabled {
  border-color: #ccc;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.5;
}

.activity-pagination .page-info {
  font-size: 0.85rem;
  color: #666;
  min-width: 100px;
}

/* Aktivitäts-Items kompakter */
.activity-feed-item {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background 0.2s;
}

.activity-feed-item:hover {
  background: #f8f9fa;
}

.activity-feed-item:last-child {
  border-bottom: none;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

.activity-icon {
  font-size: 1rem;
  min-width: 20px;
  text-align: center;
}

.activity-title {
  flex: 1;
}

.activity-details {
  color: #666;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 4px;
  padding-left: 28px;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: #999;
  padding-left: 28px;
}

.activity-author {
  color: #005a76;
  font-weight: 500;
}

.activity-time {
  color: #999;
}

.activity-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.activity-empty i {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0.5;
  display: block;
}

.activity-loading {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}