/* Kommentar: Kabelarbeit FTTH/HK – Master UI (an Aufmass-App angelehnt)
   Ziel: weniger "grauer Tag", mehr Glass/Contrast, Navbar passend zur Theme, Modal stabil zentriert. */

/* =========================
   THEME VARIABLES
   ========================= */

:root{
  --app-version: "v1.0.26";
  --radius: 18px;
  --radius-sm: 14px;

  /* Kommentar: Light Theme – heller, "Papier/Glass" statt mattgrau */
  --bg: #cfd2d6;                 /* wie Aufmass-App Grundstimmung */
  --text: #212529;
  --muted: #495057;
  --border: rgba(0,0,0,0.14);

  /* Kommentar: Karten/Flächen (Glass) */
  --card: rgba(255,255,255,0.78);
  --card-2: rgba(255,255,255,0.92);
  --shadow: 0 10px 26px rgba(0,0,0,0.10);

  /* Kommentar: Inputs */
  --input-bg: rgba(241,243,245,0.96);
  --input-text: #212529;
  --input-border: rgba(0,0,0,0.20);

  /* Kommentar: Accent = dunkelgrün (kein blau) */
  --accent: #2f4f4f;
  --accent-rgb: 47, 79, 79;
  --accent-hover: #3d6363;

  --danger: #dc3545;

  /* Kommentar: Navbar (Light) – weiß, hoher Kontrast */
  --nav-bg: rgba(255,255,255,0.86);
  --navText: #111;
  --pill: rgba(0,0,0,0.06);

  --overlay: rgba(0,0,0,0.55);

  --glass-blur: blur(12px);
}

:root[data-theme="dark"]{
  --bg: #1a1d20;
  --text: #e9ecef;
  --muted: #adb5bd;
  --border: rgba(255,255,255,0.10);

  --card: rgba(33,37,41,0.86);
  --card-2: rgba(43,48,53,0.92);
  --shadow: 0 12px 30px rgba(0,0,0,0.35);

  --input-bg: rgba(43,48,53,0.92);
  --input-text: #e9ecef;
  --input-border: rgba(255,255,255,0.14);

  --accent: #3e5c50;
  --accent-rgb: 62, 92, 80;
  --accent-hover: #4d7061;

  --danger: #ff6b6b;

  --nav-bg: rgba(33,37,41,0.88);
  --navText: #e9ecef;
  --pill: rgba(255,255,255,0.10);

  --overlay: rgba(0,0,0,0.65);

  --glass-blur: blur(10px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg: #1a1d20;
    --text: #e9ecef;
    --muted: #adb5bd;
    --border: rgba(255,255,255,0.10);

    --card: rgba(33,37,41,0.86);
    --card-2: rgba(43,48,53,0.92);
    --shadow: 0 12px 30px rgba(0,0,0,0.35);

    --input-bg: rgba(43,48,53,0.92);
    --input-text: #e9ecef;
    --input-border: rgba(255,255,255,0.14);

    --accent: #3e5c50;
    --accent-rgb: 62, 92, 80;
    --accent-hover: #4d7061;

    --danger: #ff6b6b;

    --nav-bg: rgba(33,37,41,0.88);
    --navText: #e9ecef;
    --pill: rgba(255,255,255,0.10);

    --overlay: rgba(0,0,0,0.65);

    --glass-blur: blur(10px);
  }
}

/* =========================
   GLOBAL BASE
   ========================= */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a{ color: inherit; text-decoration: none; }
.hidden{ display:none !important; }
.no-scroll{ overflow:hidden; }
.muted{ color: var(--muted); }

/* =========================
   NAVBAR (App Screens)
   ========================= */

.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;

  background: var(--nav-bg);
  color: var(--navText);

  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-bottom: 1px solid var(--border);
}

/* Kommentar: Keine "fremde" Fläche – Button ist transparent, Feedback nur bei Hover/Active */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;

  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  background: var(--nav-bg);
  color: var(--navText);

  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-bottom: 1px solid var(--border);
}

/* Kommentar: Burger-Button ohne eigene Fläche */
.nav-btn{
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  cursor: pointer;
}

.nav-btn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

.nav-btn:active{
  transform: translateY(1px);
  background: rgba(255,255,255,0.10);
}

.nav-brand{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:10px;
  min-width: 0;
}

/* Kommentar: Logo ohne eigene "Kachel" (keine abweichende Unterfläche) */
.nav-logo{
  height: 34px;
  width: auto;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

.nav-titles{ min-width:0; }
.nav-title{
  font-weight: 950;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.nav-sub{
  display:flex;
  flex-wrap:wrap;
  gap: 6px 10px;
  font-size: 12px;
  opacity: 0.92;
  min-width: 0;
}
.nav-sub span{
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kommentar: Kontext darf Navbar nicht sprengen */
#kxCtxKontext{
  display: inline-block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  vertical-align: bottom;
}

.nav-user{ display:flex; align-items:center; }

/* Kommentar: User ohne eigene farbige "Pille" – gleicher Navbar-Hintergrund */
.user-pill{
  padding: 8px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  font-weight: 900;
}
/* =========================
   PAGE LAYOUT (App Screens)
   ========================= */

.page{ padding: 14px 12px 24px; }

.page-inner{
  max-width: 760px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.page-title{
  font-weight: 950;
  font-size: 18px;
}

/* =========================
   TABLES
   ========================= */

.kx-table{
  width: 100%;
  border-collapse: collapse;
}

.kx-table th,
.kx-table td{
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* Kommentar: Länge-Spalte rechtsbündig */
.kx-table th:nth-child(2),
.kx-table td:nth-child(2){
  text-align: right;
}

/* =========================
   CARDS (App Screens)
   ========================= */

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;

  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.card-title{
  font-weight: 950;
  margin: 0 0 8px 0;
}

/* =========================
   DASHBOARD
   ========================= */

.dashboard-hero{
  background:
    radial-gradient(1200px 220px at 10% -10%, rgba(var(--accent-rgb), 0.20), transparent 45%),
    linear-gradient(140deg, var(--card-2), var(--card));
}

.dashboard-hero-kicker{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-hero-title{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

@media (max-width: 560px){
  .dashboard-hero-title{
    font-size: 17px;
  }
}

.dashboard-hero-sub{
  margin-top: 6px;
  color: var(--muted);
}

.dashboard-actions{
  display: grid;
  gap: 10px;
}

.dashboard-btn{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.dashboard-btn-main{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.dashboard-btn-sub{
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}

.dashboard-btn-compact{
  display: block;
}

.dashboard-work-btn{
  border-color: rgba(67, 96, 122, 0.45);
  background: linear-gradient(180deg, rgba(128, 156, 180, 0.20), rgba(88, 115, 140, 0.18));
  color: var(--text);
}

.dashboard-work-btn:hover{
  filter: none;
}

.dashboard-work-btn:active{
  transform: translateY(1px);
}

.dashboard-work-btn-a{
  border-color: rgba(59, 106, 148, 0.55);
  background: linear-gradient(180deg, rgba(139, 187, 227, 0.24), rgba(93, 139, 178, 0.22));
}

.dashboard-work-btn-a:hover{
  background: linear-gradient(180deg, rgba(139, 187, 227, 0.34), rgba(93, 139, 178, 0.30));
}

.dashboard-work-btn-a:active{
  background: linear-gradient(180deg, rgba(129, 177, 217, 0.40), rgba(83, 129, 168, 0.36));
}

.dashboard-work-btn-b{
  border-color: rgba(114, 95, 145, 0.55);
  background: linear-gradient(180deg, rgba(184, 164, 216, 0.24), rgba(137, 118, 170, 0.22));
}

.dashboard-work-btn-b:hover{
  background: linear-gradient(180deg, rgba(184, 164, 216, 0.34), rgba(137, 118, 170, 0.30));
}

.dashboard-work-btn-b:active{
  background: linear-gradient(180deg, rgba(174, 154, 206, 0.40), rgba(127, 108, 160, 0.36));
}

.dashboard-work-btn-c{
  border-color: rgba(131, 98, 74, 0.55);
  background: linear-gradient(180deg, rgba(216, 178, 146, 0.24), rgba(173, 133, 102, 0.22));
}

.dashboard-work-btn-c:hover{
  background: linear-gradient(180deg, rgba(216, 178, 146, 0.34), rgba(173, 133, 102, 0.30));
}

.dashboard-work-btn-c:active{
  background: linear-gradient(180deg, rgba(206, 168, 136, 0.40), rgba(163, 123, 92, 0.36));
}

/* =========================
   FORMS / INPUTS
   ========================= */

label{
  display:block;
  font-weight: 900;
  font-size: 13px;
  margin: 10px 0 6px;
}

input, select, textarea{
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  padding: 12px 12px;
  outline: none;
  font-size: 14px;
}

textarea{ min-height: 90px; resize: vertical; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

/* =========================
   BUTTONS
   ========================= */

/* Kommentar: Basis-Buttons sollen NICHT grau wirken -> grünliches "KX"-Design */
.kx-btn{
  border: 1px solid rgba(62,143,115,0.45);
  background: rgba(62,143,115,0.14);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  font-weight: 950;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  transition: filter 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.kx-btn:hover{
  filter: brightness(0.97);
}

.kx-btn:active{
  transform: translateY(1px);
  filter: brightness(0.92);
}

/* Kommentar: Fokus sichtbar (Tastatur) */
.kx-btn:focus-visible{
  outline: 2px solid rgba(62,143,115,0.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(62,143,115,0.12);
}

/* Kommentar: Mobile Touch Feedback */
@media (hover: none){
  .kx-btn:hover{ filter: none; }
  .kx-btn:active{
    transform: translateY(1px);
    filter: brightness(0.92);
  }
}

.kx-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Kommentar: Secondary = gleiche Familie, nur etwas "leichter" */
.kx-btn-secondary{
  background: rgba(62,143,115,0.10);
  border: 1px solid rgba(62,143,115,0.35);
}

/* Kommentar: Primary bleibt "voll" (stark, dunkelgrün) */
.kx-btn-primary{
  background: var(--accent);
  border: 1px solid rgba(0,0,0,0.10);
  color: #fff;
}
.kx-btn-primary:hover{ filter: brightness(0.98); }
.kx-btn-primary:active{ filter: brightness(0.92); }

/* Kommentar: Danger bleibt separat */
.kx-btn-danger{
  background: rgba(217,83,79,0.16);
  border: 1px solid rgba(217,83,79,0.45);
}

/* Kommentar: "Zurück" Buttons (optisch abgesetzt) */
.kx-btn-back{
  background: rgba(72, 98, 122, 0.28);
  border: 1px solid rgba(72, 98, 122, 0.65);
  color: var(--text);
}

.w100{ width: 100%; }

.btn-row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spacer{ height: 14px; }

/* =========================
   DRAWER SIDEBAR + OVERLAY (App Screens)
   ========================= */

.sidebar-drawer{
  position: fixed;
  top: 0;
  left: -290px;
  width: 280px;
  height: 100%;
  z-index: 60;

  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-right: 1px solid var(--border);
  box-shadow: 0 18px 36px rgba(0,0,0,0.25);
  transition: left 0.22s ease;
  display:flex;
  flex-direction: column;
}

.sidebar-drawer.active{ left: 0; }

.sidebar-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}

.sidebar-title{ font-weight: 950; }

.sidebar-content{
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Kommentar: Sidebar-Primaries wie "glassy" (nicht kräftig grün) */
.sidebar-content .kx-btn-primary{
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--text);
}
:root[data-theme="dark"] .sidebar-content .kx-btn-primary{
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  color: var(--text);
}

.sidebar-section-title{
  font-size: 12px;
  font-weight: 950;
  opacity: 0.85;
}

.sidebar-footer{
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--card-2);
}

.sidebar-meta{
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.overlay{
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--overlay);
}

/* =========================
   MODAL (KX) – stabil zentriert + größer + Mobile Buttons
   ========================= */

.kx-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.70);

  width: 100vw;
  height: 100vh;

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

  padding: 18px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.kx-modal{
  width: min(560px, 96vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  overflow: hidden;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.kx-modal-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}

.kx-modal-title{ font-weight: 950; }

.kx-icon-btn{
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
}

.kx-modal-body{
  padding: 14px;
  color: var(--muted);
  line-height: 1.35;
}

.kx-modal-actions{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display:flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Kommentar: Modal-Buttons fingerfreundlich */
.kx-modal-actions button{
  width: 100%;
  min-height: 54px;
  font-size: 16px;
  font-weight: 950;
  border-radius: 14px;
}

/* =========================
   AUTH PAGES (LOGIN / 2FA)
   ========================= */

.auth-body{
  min-height: 100vh;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--bg);
}

.auth-card{
  width: min(560px, 96vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;

  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.auth-title{
  font-size: 20px;
  font-weight: 950;
  margin-bottom: 6px;
}

.auth-sub{
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.25;
}

.auth-label{
  display:block;
  font-weight: 950;
  font-size: 13px;
  margin: 10px 0 6px;
}

.auth-input{
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  padding: 12px 12px;
  outline: none;
  font-size: 14px;
}

.auth-error{
  background: rgba(220,53,69,0.16);
  border: 1px solid rgba(220,53,69,0.45);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 0 12px;
  font-weight: 900;
}

.flash-ok{
  background: rgba(62,143,115,0.16);
  border: 1px solid rgba(62,143,115,0.45);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 0 12px;
  font-weight: 900;
}

.kx-link{
  color: var(--accent);
  font-weight: 950;
}

/* Kommentar: Abstand zwischen Input und Button (Fix "klebt") */
.auth-card .kx-btn{
  margin-top: 12px;
}

/* =========================
   SETUP SCREEN
   ========================= */

.setup-body{ background: var(--bg); }

.setup-wrap{
  min-height: 100vh;
  padding: 18px 12px 20px;
  display:flex;
  flex-direction: column;
  align-items: center;
}

.setup-logo-row{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 0 8px;
}

.setup-logo{
  height: 34px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

.setup-shell{ width: min(820px, 100%); }

.setup-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;

  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.setup-head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 12px;
}

.setup-bar{
  width: 4px;
  border-radius: 4px;
  background: var(--accent);
  margin-top: 4px;
  flex: 0 0 4px;
  height: 32px;
}

.setup-title{
  font-size: 22px;
  font-weight: 950;
  margin: 0 0 4px 0;
}

.setup-sub{ line-height: 1.25; }

.setup-step{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.step-label{
  font-weight: 950;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
}

.step-block{ margin-bottom: 12px; }

/* Kommentar: Projekt-Buttons einheitlich */
.seg-btn{
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  padding: 14px 12px;
  font-weight: 950;
  font-size: 16px;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.06s ease;
}
:root[data-theme="dark"] .seg-btn{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.seg-btn:hover{ filter: brightness(0.98); }
.seg-btn:active{ transform: translateY(1px); }

.seg-btn.active{
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.55);
}

.step-info{ margin-top: 8px; font-size: 13px; }
.step-cities{ margin-top: 4px; line-height: 1.35; }

.projekt-grid{
  display: grid;
  gap: 10px;
}

.projekt-option{
  margin-bottom: 0;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.projekt-btn{
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: #c9ced5 !important;
  border-color: #949ca6 !important;
  color: #121417 !important;
}

.projekt-btn:hover{
  background: #bec4cc !important;
}

.projekt-btn:active{
  background: #b2bac3 !important;
}

.projekt-btn.active{
  background: #bcc2ca !important;
  border-color: #878f99 !important;
}

.projekt-btn-title{
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.projekt-btn-meta{
  font-size: 12px;
  opacity: 0.9;
}

.region-grid{
  display: grid;
  gap: 10px;
}

.region-option{
  margin-bottom: 0;
}

.region-btn{
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(255,255,255,0.9);
}

:root[data-theme="dark"] .region-btn{
  background: rgba(255,255,255,0.06);
}

.region-icon{
  font-size: 30px;
  line-height: 1;
  width: 38px;
  display: inline-flex;
  justify-content: center;
}

.region-copy{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.region-title{
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-transform: capitalize;
}

.region-subtitle{
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.region-btn-enabled{
  border-color: rgba(47, 79, 79, 0.45);
}

.region-btn-disabled{
  border-color: rgba(0,0,0,0.18);
  opacity: 0.9;
}

.region-btn-disabled:hover{
  filter: none;
}

.ein-snr-pills{
  gap: 4px;
}

.ein-snr-pills.faser-pills--compact{
  flex-wrap: wrap;
  overflow-x: visible;
}

.ein-snr-pill{
  min-width: 40px;
  text-align: center;
  opacity: 0.45;
  transition: transform 0.06s ease, opacity 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  padding: 5px 6px;
  font-size: 11px;
}

.ein-snr-pill.selected{
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18), 0 0 0 5px rgba(255,255,255,0.25);
  filter: saturate(1.08);
}

.ein-snr-pill:active{
  transform: translateY(1px);
}

.setup-error{
  margin-top: 10px;
  background: rgba(220,53,69,0.16);
  border: 1px solid rgba(220,53,69,0.45);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-weight: 950;
}

.setup-footer{
  margin-top: 16px;
  font-size: 12px;
  text-align:center;
  opacity: 0.85;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (min-width: 900px){
  .page-inner{ max-width: 860px; }
}

/* =========================
   FTTH UI Helpers
   ========================= */

.form-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-col{
  flex: 1 1 220px;
  min-width: 220px;
}

.ga-block{
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.ga-title{
  font-weight: 950;
  margin-bottom: 6px;
}

.ga-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
}

.ga-actions{
  display:flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ga-actions .kx-btn{
  flex: 1 1 220px;
  min-height: 48px;
}

@media (max-width: 560px){
  .form-col{ min-width: 100%; }
  .ga-actions{ flex-direction: column; }
  .ga-actions .kx-btn{ width: 100%; }
}

/* Trommel + Faser */
.trommel-row{
  display:flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.trommel-row .trommel-col{
  flex: 1 1 260px;
  min-width: 240px;
}

.trommel-row .faser-col{
  flex: 0 0 auto;
  min-width: 240px;
}

.faser-pills{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.faser-pill{
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.75);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 950;
  cursor: pointer;
}

:root[data-theme="dark"] .faser-pill{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.faser-pill.active{
  background: var(--accent);
  color: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.20);
}

:root[data-theme="dark"] .faser-pill.active{
  border-color: rgba(255,255,255,0.18);
}

/* =========================
   MOBILE FIT (Buttons / Cards)
   ========================= */

/* Kommentar: iOS Safe Area */
.page{
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* Kommentar: Buttons auf Mobile kompakter */
@media (max-width: 520px){
  .card{
    padding: 12px;
  }

  .kx-btn{
    padding: 10px 12px;
    font-size: 14px;
    min-height: 44px;
  }

  /* Kommentar: Navigation-Buttons nebeneinander (2 Spalten) */
  .ga-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Kommentar: In der Navigation sollen Buttons nicht "w100" erzwingen */
  .ga-actions .w100{
    width: auto;
  }

  /* Kommentar: Wenn ein Button wirklich volle Breite sein soll */
  .ga-actions .fullrow{
    grid-column: 1 / -1;
    width: 100%;
  }

  .ga-actions .kx-btn{
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .ga-actions.ga-actions-protokoll{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ga-actions.ga-actions-protokoll .kx-btn{
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Kommentar: iOS Sticky-Navbar überlappt vereinzelt – oben mehr Platz auf Mobile */
@media (max-width: 520px){
  .page{ padding-top: 28px; }
}

/* Kommentar: iOS Zoom verhindern (Input-Font >=16px) */
@media (max-width: 520px){
  input, select, textarea{
    font-size: 16px;
  }
}

/* Kommentar: Navbar-Text auf Mobile stärker begrenzen */
@media (max-width: 520px){
  #kxCtxKontext{ max-width: 100%; }
}

/* Kommentar: Modal auf Mobile etwas höher */
@media (max-width: 520px){
  .kx-modal{ top: 38%; }
}
/* =========================
   FORM GRID HELPERS
   ========================= */

/* Kommentar: Standard-Row für Formularfelder */
.form-row{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-col{
  flex: 1 1 0;
  min-width: 0;
}

/* Kommentar: Kleine Felder sollen NICHT wachsen */
.form-col--house{
  flex: 0 0 120px;
}

.form-col--letter{
  flex: 0 0 90px;
}

/* Kommentar: Mobile: etwas kleiner, aber weiterhin eine Zeile */
@media (max-width: 520px){
  .form-col--house{ flex-basis: 110px; }
  .form-col--letter{ flex-basis: 80px; }
}
/* =========================
   FTTH: Adresse + Faser in einer Zeile
   ========================= */

.form-col--faser{
  flex: 1 1 240px;
  min-width: 0;
}

.faser-pills--compact{
  display:flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.faser-pills--compact .faser-pill{
  padding: 8px 10px;
  min-height: 40px;
  font-size: 14px;
  white-space: nowrap;
}

/* =========================
   CAMERA BUTTON + BADGE
   ========================= */

.cam-wrap{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}

.cam-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.cam-badge{
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;

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

  font-size: 12px;
  font-weight: 950;

  background: var(--accent);
  color: #fff;

  border: 2px solid var(--card);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.cam-hint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}
/* Kommentar: FTTH – Faser-Pills auf Desktop nach rechts ausrichten (Mobile bleibt wie bisher) */
@media (min-width: 900px){

  /* Kommentar: Faser-Spalte nimmt Platz und sitzt rechts */
  .form-col--faser{
    margin-left: auto;
    align-items: flex-end;
  }

  /* Kommentar: Label rechts halten, damit es optisch passt */
  .form-col--faser > label{
    align-self: flex-end;
    text-align: right;
  }

  /* Kommentar: Pills-Container nach rechts schieben */
  .form-col--faser .faser-pills{
    justify-content: flex-end;
  }
}
/* Kommentar: Buttons – besseres Hover/Active Feedback + sichtbarer Focus */
.kx-btn{
  transition: filter 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.kx-btn:hover{
  filter: brightness(0.96);
}

.kx-btn:active{
  transform: translateY(1px);
  filter: brightness(0.92);
}

.kx-btn:focus-visible{
  outline: 2px solid rgba(62,143,115,0.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(62,143,115,0.12);
}

/* Kommentar: Mobile Touch – gleiches Feedback wie Hover */
@media (hover: none){
  .kx-btn:hover{ filter: none; }
  .kx-btn:active{
    transform: translateY(1px);
    filter: brightness(0.92);
  }
}

/* Kommentar: FTTH – "Weiter zu Fehlerstelle" soll als CTA sichtbar sein */
#btn_go_error{
  background: rgba(62,143,115,0.14);
  border: 1px solid rgba(62,143,115,0.45);
  font-weight: 950;
}

#btn_go_error:hover{
  filter: brightness(0.96);
}

#btn_go_error:active{
  filter: brightness(0.92);
}
/* Kommentar: Setup-Logo größer und klarer */
.setup-logo{
  height: 48px;
  width: auto;
}

/* Kommentar: Auf Desktop noch etwas größer */
@media (min-width: 900px){
  .setup-logo{
    height: 56px;
  }
}

/* Kommentar: Auth-Logo (Login/2FA) */
.auth-logo-row{
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}

.auth-logo{
  height: 44px;
  width: auto;
}

/* Kommentar: Modal Firma-Auswahl - ruhige Farben ohne starkes Grün */
.firma-modal-btn{
  color: #121417 !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.firma-modal-btn-kx{
  background: #bcb3a7 !important;
  border-color: #847769 !important;
}

.firma-modal-btn-kx:hover{
  background: #afa598 !important;
}

.firma-modal-btn-kx:active{
  background: #a29789 !important;
}

.firma-modal-btn-evb{
  background: #aeb5be !important;
  border-color: #79818c !important;
}

.firma-modal-btn-evb:hover{
  background: #a0a8b2 !important;
}

.firma-modal-btn-evb:active{
  background: #929ba6 !important;
}

/* Kommentar: Dashboard-Kabelarbeit Buttons - klare Vollfarben (übersteuert Basis .kx-btn) */
.dashboard-actions .dashboard-work-btn{
  color: #f6f8fa !important;
  border-width: 1px !important;
  filter: none !important;
}

.dashboard-actions .dashboard-work-btn-a{
  background: #3f7ea9 !important;
  border-color: #346c92 !important;
}

.dashboard-actions .dashboard-work-btn-a:hover{
  background: #376f95 !important;
}

.dashboard-actions .dashboard-work-btn-a:active{
  background: #315f80 !important;
}

.dashboard-actions .dashboard-work-btn-b{
  background: #c03aa8 !important;
  border-color: #a93193 !important;
}

.dashboard-actions .dashboard-work-btn-b:hover{
  background: #ad3398 !important;
}

.dashboard-actions .dashboard-work-btn-b:active{
  background: #952b83 !important;
}

.dashboard-actions .dashboard-work-btn-c{
  background: #a06f46 !important;
  border-color: #8a5f3a !important;
}

.dashboard-actions .dashboard-work-btn-c:hover{
  background: #8d613d !important;
}

.dashboard-actions .dashboard-work-btn-c:active{
  background: #7a5232 !important;
}

.dashboard-actions .dashboard-work-btn-d{
  background: #6f7b88 !important;
  border-color: #5e6975 !important;
}

.dashboard-actions .dashboard-work-btn-d:hover{
  background: #636f7b !important;
}

.dashboard-actions .dashboard-work-btn-d:active{
  background: #56616c !important;
}

/* Kommentar: Globale Button-Palette (ruhiger, weniger grün-lastig) */
.kx-btn{
  border: 1px solid rgba(128, 141, 156, 0.38);
  background: rgba(160, 172, 186, 0.22);
  color: #111111;
}

.kx-btn:hover{
  filter: brightness(0.99);
}

.kx-btn:active{
  filter: brightness(0.95);
}

.kx-btn:focus-visible{
  outline: 2px solid rgba(118, 131, 146, 0.50);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(118, 131, 146, 0.14);
}

.kx-btn-secondary{
  background: rgba(176, 185, 196, 0.24);
  border: 1px solid rgba(136, 147, 160, 0.38);
}

.kx-btn-primary{
  background: #8a95a2;
  border: 1px solid #74808c;
  color: #111111;
}

.kx-btn-primary:hover{
  filter: brightness(1.02);
}

.kx-btn-primary:active{
  filter: brightness(0.94);
}

#btn_go_error{
  background: rgba(160, 172, 186, 0.22);
  border: 1px solid rgba(128, 141, 156, 0.38);
}

:root[data-theme="dark"] .kx-btn{
  color: var(--text);
}

:root[data-theme="dark"] .kx-btn-primary{
  color: #ffffff;
}

/* Kommentar: Finale Mobile-Overrides für Protokoll-Actions (am Dateiende, um Cascade-Probleme zu vermeiden) */
@media (max-width: 520px){
  .ga-actions.ga-actions-protokoll{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ga-actions.ga-actions-protokoll .kx-btn{
    width: 100%;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  #ein_create_download,
  #ein_finish,
  #btn_ftth_create_download,
  #btn_hk_create_download{
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}

/* Kommentar: Einziehen - Kabelschacht Auswahl (Modal 6x8) */
.ein-schacht-wrap{
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: 20px auto;
  gap: 4px;
}

.ein-schacht-corner{
  grid-column: 1;
  grid-row: 1;
}

.ein-schacht-cols{
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.ein-schacht-col{
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.ein-schacht-rows{
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
}

.ein-schacht-rowlab{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  min-height: 26px;
}

.ein-schacht-grid{
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
}

.ein-schacht-cell{
  width: 100%;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(110, 124, 140, 0.55);
  background: rgba(160, 172, 186, 0.18);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.ein-schacht-cell:hover{
  background: rgba(160, 172, 186, 0.30);
}

.ein-schacht-cell:active{
  transform: scale(0.98);
}

.ein-schacht-cell.active{
  background: #8a95a2;
  border-color: #74808c;
  box-shadow: 0 0 0 2px rgba(118, 131, 146, 0.20);
}

@media (max-width: 520px){
  .ein-schacht-wrap{
    grid-template-columns: 18px 1fr;
    grid-template-rows: 18px auto;
    gap: 3px;
  }

  .ein-schacht-cols,
  .ein-schacht-rows,
  .ein-schacht-grid{
    gap: 3px;
  }

  .ein-schacht-col,
  .ein-schacht-rowlab{
    font-size: 10px;
  }

  .ein-schacht-rowlab{
    min-height: 22px;
  }

  .ein-schacht-cell{
    min-height: 22px;
  }
}