:root{
  --navy:#173b63; --navy-2:#21456f; --blue:#70a6d1; --page:#eef4f8; --card:#ffffff; --card-2:#f8fbfd; --border:#dce6ef; --text:#15355c; --muted:#6a8098; --green:#238b45; --amber:#d99100; --red:#c62828; --shadow:0 12px 30px rgba(23,59,99,.10); --radius:18px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
.sticky-shell{position:sticky;top:0;z-index:1000}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top left, rgba(112,166,209,.18), transparent 22%), linear-gradient(180deg,#f4f8fb 0%, var(--page) 100%)}
.topbar{display:flex;gap:18px;align-items:center;padding:18px 24px;background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%);color:#fff;box-shadow:0 6px 18px rgba(23,59,99,.18)}
.brand-logo{width:150px;height:auto;display:block;flex:0 0 auto}
.title{font-size:28px;font-weight:800;letter-spacing:-.02em}
.subtitle{font-size:14px;color:rgba(255,255,255,.82);margin-top:4px}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.current-user{color:rgba(255,255,255,.82);font-size:13px;font-weight:700}
.logout-link{display:inline-flex;align-items:center;padding:10px 14px;border-radius:12px;text-decoration:none;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-weight:800}
.toolbar{padding:20px 24px 16px;background:rgba(244,248,251,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.compare{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:14px;font-size:14px;font-weight:700}
.filters-form{display:grid;grid-template-columns:repeat(3,minmax(180px,260px));gap:14px;align-items:end}
.field-group{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.modern-field,.modern-input{appearance:none;width:100%;height:50px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,252,.98));color:var(--text);padding:0 16px;font-size:15px;font-weight:600;box-shadow:var(--shadow);outline:none}
.modern-field:focus,.modern-input:focus,.notes-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(112,166,209,.18), var(--shadow)}
.wrap{padding:20px 24px 28px}
h2{margin:22px 0 14px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.grid,.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.tile.critical{border:2px solid rgba(198,40,40,.75)} .tile.warning{border:2px solid rgba(217,145,0,.75)}
.drill-card{appearance:none;text-align:left;cursor:pointer;transition:transform .16s ease, box-shadow .16s ease}
.drill-card:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(23,59,99,.14)}
.t1{font-weight:800;font-size:17px;letter-spacing:-.01em} .t2{color:var(--muted);font-size:14px;min-height:36px;margin-top:4px}
.val{font-size:48px;font-weight:800;text-align:right;letter-spacing:-.03em;margin:14px 0 10px}
.bar{height:10px;background:#e3ebf2;border-radius:999px;overflow:hidden} .fill{height:100%;border-radius:999px}
.status-green{color:var(--green)} .fill.status-green{background:var(--green)} .status-amber{color:var(--amber)} .fill.status-amber{background:var(--amber)} .status-red{color:var(--red)} .fill.status-red{background:var(--red)}
.meta{font-size:13px;color:var(--muted);margin-top:8px}
.trend{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;font-size:13px;font-weight:700}
.trend.up{background:rgba(35,139,69,.12);color:var(--green)} .trend.down{background:rgba(198,40,40,.12);color:var(--red)} .trend.flat{background:rgba(23,59,99,.10);color:var(--navy)}
.drill-hint{margin-top:10px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.summary-card{appearance:none;text-align:left;cursor:pointer;background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%);color:#fff;border:none;border-radius:22px;padding:18px;box-shadow:0 18px 40px rgba(23,59,99,.18)}
.summary-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.82)} .summary-value{font-size:40px;font-weight:800;letter-spacing:-.03em;margin-top:10px} .summary-meta{color:rgba(255,255,255,.76);font-size:13px;margin-top:6px}
.summary-trend{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;font-size:13px;font-weight:700}
.summary-trend.up{background:rgba(35,139,69,.18);color:#c9f3d6} .summary-trend.down{background:rgba(198,40,40,.18);color:#ffd5d5} .summary-trend.flat{background:rgba(255,255,255,.12);color:#fff}
.notes-shell,.editor-shell{background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);padding:18px;margin-bottom:24px}
.notes-toolbar,.editor-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.notes-title{font-size:18px;font-weight:800;letter-spacing:-.02em} .notes-subtitle{color:var(--muted);font-size:13px;margin-top:4px}
.save-btn{appearance:none;border:none;border-radius:14px;background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%);color:#fff;padding:13px 18px;font-size:14px;font-weight:800;box-shadow:var(--shadow);cursor:pointer}
.notes-textarea{width:100%;resize:vertical;min-height:180px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.96);padding:16px;font:inherit;color:var(--text);line-height:1.5;outline:none}
.editor-grid,.comment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.editor-card,.comment-card{border:1px solid var(--border);border-radius:18px;background:#fff;padding:14px;box-shadow:var(--shadow)}
.editor-card-title{font-size:15px;font-weight:800;margin-bottom:10px;color:var(--navy)}
.editor-card-fields{display:grid;grid-template-columns:1fr;gap:8px}
.comment-textarea{min-height:120px}
.modal.hidden{display:none} .modal{position:fixed;inset:0;z-index:1000} .modal-backdrop{position:absolute;inset:0;background:rgba(8,22,39,.45);backdrop-filter:blur(4px)}
.modal-dialog{position:relative;max-width:980px;width:min(980px,calc(100vw - 32px));margin:56px auto;background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:24px;box-shadow:0 24px 60px rgba(8,22,39,.30);overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-title{font-size:20px;font-weight:800;letter-spacing:-.02em} .modal-subtitle{color:var(--muted);font-size:13px;margin-top:4px}
.modal-close{appearance:none;border:none;background:#edf3f8;color:var(--navy);width:40px;height:40px;border-radius:12px;font-size:28px;line-height:1;cursor:pointer}
.modal-body{padding:20px;max-height:70vh;overflow:auto}
.modal-loading,.empty-state{padding:26px;text-align:center;color:var(--muted);font-weight:700}
.table-shell{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff}
.detail-table{width:100%;border-collapse:collapse;font-size:14px}
.detail-table th,.detail-table td{padding:12px 14px;border-bottom:1px solid #edf2f6;text-align:left;vertical-align:top}
.detail-table th{background:#f5f8fb;color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.detail-table tr:last-child td{border-bottom:none}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%)}
.login-shell{width:min(100%, 440px);padding:24px}
.login-card{background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:0 24px 60px rgba(8,22,39,.35);padding:26px}
.login-logo{width:150px;height:auto;display:block}
.login-title{margin-top:18px;font-size:24px;font-weight:800;color:var(--navy)} .login-subtitle{margin-top:6px;color:var(--muted);font-size:14px}
.login-form{margin-top:18px;display:grid;gap:10px} .login-btn{margin-top:8px;width:100%;justify-content:center}
.login-alert{margin-top:14px;background:rgba(198,40,40,.10);color:var(--red);border:1px solid rgba(198,40,40,.18);border-radius:14px;padding:12px 14px;font-size:14px;font-weight:700}
@media (max-width:900px){.filters-form{grid-template-columns:1fr}.brand-logo{width:120px}.title{font-size:24px}.notes-toolbar,.editor-toolbar{flex-direction:column;align-items:stretch}}


.tile,.summary-card{position:relative}

.drill-icon{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  background:rgba(23,59,99,.08);
  color:var(--navy);
  transition:all .15s ease;
  cursor:pointer;
  opacity:.7;
}
.drill-card:hover .drill-icon{
  background:var(--navy);
  color:#fff;
  transform:scale(1.08);
  opacity:1;
}
.drill-icon::after{
  content:attr(data-tooltip);
  position:absolute;
  top:-36px;
  right:0;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(5px);
  transition:all .15s ease;
  pointer-events:none;
}
.drill-icon:hover::after{
  opacity:1;
  transform:translateY(0);
}
.insight-box{
  background:rgba(23,59,99,.08);
  border-left:4px solid var(--navy);
  padding:14px;
  border-radius:12px;
  margin-bottom:16px;
  font-weight:600;
  line-height:1.45;
}
.action-box{
  background:rgba(35,139,69,.08);
  border-left:4px solid var(--green);
  padding:14px;
  border-radius:12px;
  margin-bottom:16px;
}
.action-list{
  margin:10px 0 0 18px;
  padding:0;
}
.action-list li{
  margin:6px 0;
}


.action-track-intro{
  margin:0 0 14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(23,59,99,.08);
  color:var(--navy);
  font-weight:600;
}
.modal-action-form{
  margin:0 0 18px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
.modal-action-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.modal-input{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:0 12px;
  background:#fff;
  font:inherit;
}
.modal-input-title{min-width:240px;}
.modal-action-buttons{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.role-shell{margin-bottom:20px;}
.inline-role-form{display:flex;gap:10px;align-items:center;}
.role-select{height:42px;min-width:160px;}
.role-save{padding:10px 14px;}
@media (max-width:900px){
  .modal-action-row{grid-template-columns:1fr;}
  .inline-role-form{flex-direction:column;align-items:stretch;}
}


.toolbar-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.toolbar-top-no-compare{
  margin-bottom:14px;
}
.view-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.view-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--navy);
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  font-weight:800;
}
.view-pill.active{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
}
.tile-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.tile-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
}
.tile-badge.neutral{
  background:rgba(23,59,99,.10);
  color:var(--navy);
}
.tile-badge.overdue{
  background:rgba(198,40,40,.14);
  color:var(--red);
}
.roadmap-summary-pills{
  display:flex;
  gap:10px;
}
.summary-chip{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  font-weight:800;
  color:var(--navy);
}
.summary-chip.done{
  background:rgba(35,139,69,.10);
  color:var(--green);
}
.roadmap-actions-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
.roadmap-shell{
  overflow:auto;
}
.roadmap-table{
  min-width:1700px;
}
.roadmap-input{
  width:100%;
  min-width:90px;
  height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  padding:0 10px;
  background:#fff;
  font:inherit;
  color:var(--text);
}
.roadmap-input-wide{
  min-width:220px;
}
.deviation-field{
  font-weight:800;
}
.roadmap-filter-form{
  grid-template-columns:minmax(180px,260px);
}
@media (max-width:900px){
  .toolbar-top,.roadmap-actions-bar{
    flex-direction:column;
    align-items:stretch;
  }
}


.editable-box{
  padding:18px;
}
.editable-label{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.drill-textarea{
  width:100%;
  min-height:96px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:12px 14px;
  background:#fff;
  font:inherit;
  color:var(--text);
  resize:vertical;
}
.drill-textarea:focus,
.table-head-input:focus,
.table-cell-input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(112,166,209,.18);
}
.editable-table-shell{
  margin-top:18px;
}
.table-head-input{
  width:100%;
  min-width:110px;
  height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  padding:0 10px;
  background:#fff;
  font:inherit;
  font-weight:700;
}
.table-cell-input{
  width:100%;
  min-width:110px;
  height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  padding:0 10px;
  background:#fff;
  font:inherit;
}
.editable-detail-table th,
.editable-detail-table td{
  padding:8px;
}
.drilldown-edit-form{
  display:block;
}


.roadmap-advanced-filter-form{
  display:grid;
  grid-template-columns:repeat(5,minmax(160px,1fr));
  gap:14px;
  align-items:end;
}
.roadmap-filter-button-group .save-btn{
  width:100%;
}
.owner-card{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%);
}
.owner-title{
  font-size:20px;
  margin-bottom:10px;
}
.owner-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:10px;
}
.owner-metric{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
}
.owner-metric span{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.78);
  margin-bottom:4px;
}
.owner-metric strong{
  font-size:22px;
  color:#fff;
}
@media (max-width:1100px){
  .roadmap-advanced-filter-form{
    grid-template-columns:repeat(2,minmax(180px,1fr));
  }
}

.alerts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:18px}.alert-card{border-radius:20px;padding:18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);box-shadow:var(--shadow)}.alert-card.critical{border-left:6px solid var(--red)}.alert-card.warning{border-left:6px solid var(--amber)}.alert-card.good{border-left:6px solid var(--green)}.alert-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.alert-title{font-size:18px;font-weight:800}.alert-severity{font-size:11px;font-weight:800;border-radius:999px;padding:6px 10px}.alert-severity.critical{background:rgba(198,40,40,.12);color:var(--red)}.alert-severity.warning{background:rgba(217,145,0,.12);color:var(--amber)}.alert-severity.good{background:rgba(35,139,69,.12);color:var(--green)}.alert-message{line-height:1.5;margin-bottom:10px}.alert-action{font-size:14px;color:var(--text)}.pattern-box{border-radius:12px;padding:14px;margin-bottom:16px;border-left:4px solid var(--navy);background:rgba(23,59,99,.08)}.pattern-box.matched{border-left-color:var(--red);background:rgba(198,40,40,.08)}.pattern-box.watch{border-left-color:var(--green);background:rgba(35,139,69,.08)}.pattern-list{margin:10px 0 0 18px;padding:0}.pattern-list li{margin:6px 0}

.view-toggle{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}
.toggle-pill{
  padding:8px 14px;
  border-radius:999px;
  background:#173b63;
  color:white;
  text-decoration:none;
  font-weight:600;
}
.class-A{background:#e8f5e9;}
.class-B{background:#fff8e1;}
.class-C{background:#ffe0b2;}
.class-D{background:#ffebee;}

.fillability-class{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  font-weight:800;
}
.fillability-A{background:rgba(35,139,69,.14);color:var(--green)}
.fillability-B{background:rgba(217,145,0,.12);color:var(--amber)}
.fillability-C{background:rgba(255,140,0,.14);color:#c96a00}
.fillability-D{background:rgba(198,40,40,.14);color:var(--red)}
.reason-list{
  font-size:12px;
  line-height:1.4;
  min-width:220px;
}
/* Navigation sauber oben */
.view-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.view-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: #e9eef5;
  font-size: 13px;
  text-decoration: none;
  color: #2c3e50;
}

.view-pill.active {
  background: #2c3e50;
  color: white;
}

/* KPI Grid sauber */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Highlight Tile */
.kpi-highlight {
  background: linear-gradient(135deg, #2c3e50, #1f2f44);
  color: white;
}

/* Abstand fix */
.wrap {
  padding-top: 10px;
}

.view-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.view-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:#e8edf5;
  color:#1f3558;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  transition:all .18s ease;
}

.view-pill:hover{
  background:#dbe4f0;
}

.view-pill.active{
  background:#1f406d;
  color:#fff;
  box-shadow:0 8px 20px rgba(31,64,109,.18);
}

.owner-alerts-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:10px 0 24px;
}

.owner-alert-card{
  background:#ffffff;
  border:1px solid #d9e2ef;
  border-radius:20px;
  padding:20px 22px;
  box-shadow:0 8px 24px rgba(25,50,90,.06);
}

.owner-alert-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.owner-alert-name{
  font-size:28px;
  font-weight:800;
  color:#18375f;
  line-height:1.1;
}

.owner-alert-subline{
  margin-top:6px;
  font-size:14px;
  color:#5b6f8f;
}

.owner-alert-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.owner-alert-badge{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  border:1px solid transparent;
}

.owner-alert-badge.critical{
  background:#fdecec;
  color:#b42318;
  border-color:#f3c7c7;
}

.owner-alert-badge.warn{
  background:#fff4e5;
  color:#b35a00;
  border-color:#f2d3a2;
}

.owner-alert-badge.ok{
  background:#eaf7ee;
  color:#1f7a3d;
  border-color:#b8e0c2;
}


/* --- Mobile hardening / responsive fixes --- */
.mobile-scroll-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-shell,
.detail-table,
.roadmap-table{
  width:100%;
}

@media (max-width: 768px) {
  .wrap{
    padding:14px;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .topbar-actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }

  .toolbar-top,
  .toolbar-top-no-compare,
  .filters-form,
  .roadmap-advanced-filter-form{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .field-group,
  .roadmap-filter-button-group{
    width:100%;
  }

  .modern-field,
  .modern-input,
  .roadmap-input,
  button,
  .save-btn{
    width:100%;
    min-height:44px;
    box-sizing:border-box;
  }

  .summary-grid,
  .grid,
  .alerts-grid,
  .steering-metrics,
  .owner-alerts-shell{
    grid-template-columns:1fr !important;
  }

  .summary-card,
  .tile,
  .owner-alert-card,
  .steering-card{
    padding:16px;
  }

  .summary-value,
  .val,
  .steering-value{
    font-size:24px !important;
    line-height:1.1;
  }

  .steering-title,
  .owner-alert-name,
  .title{
    font-size:20px !important;
    line-height:1.2;
  }

  .view-pills,
  .period-toggle,
  .owner-alert-badges,
  .steering-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .view-pill,
  .toggle-pill,
  .owner-alert-badge,
  .steering-badge{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }

  .detail-table,
  .roadmap-table{
    min-width:720px;
  }

  .login-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}


/* =========================
   Mobile-first hardening
   ========================= */

.mobile-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-table-wrap .detail-table,
.mobile-table-wrap .roadmap-table{
  min-width:760px;
}

@media (max-width: 980px){
  .wrap{
    padding:16px !important;
  }

  .sticky-shell{
    position:static !important;
  }

  .topbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:14px !important;
  }

  .head,
  .topbar-actions{
    width:100% !important;
  }

  .topbar-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    align-items:center !important;
  }

  .brand-logo{
    max-width:180px !important;
    height:auto !important;
  }

  .title{
    font-size:22px !important;
    line-height:1.2 !important;
  }

  .subtitle,
  .current-user{
    font-size:13px !important;
    line-height:1.4 !important;
  }

  .toolbar{
    padding:12px 14px !important;
  }

  .toolbar-top,
  .toolbar-top-no-compare,
  .filters-form,
  .roadmap-advanced-filter-form{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .field-group,
  .roadmap-filter-button-group{
    width:100% !important;
  }

  .field-label{
    margin-bottom:6px !important;
  }

  .modern-field,
  .modern-input,
  .roadmap-input,
  .save-btn,
  button,
  select,
  input,
  textarea{
    width:100% !important;
    min-height:46px !important;
    box-sizing:border-box !important;
  }

  .view-pills,
  .period-toggle{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100% !important;
  }

  .view-pill,
  .toggle-pill,
  .logout-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:10px 14px !important;
  }

  .summary-grid,
  .grid,
  .alerts-grid,
  .steering-metrics,
  .owner-alerts-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .summary-card,
  .tile,
  .alert-card,
  .owner-alert-card,
  .steering-card{
    padding:16px !important;
    border-radius:16px !important;
  }

  .summary-title,
  .t1,
  .alert-title,
  .steering-label{
    font-size:14px !important;
    line-height:1.4 !important;
  }

  .summary-value,
  .val,
  .steering-value{
    font-size:24px !important;
    line-height:1.1 !important;
    word-break:break-word !important;
  }

  .summary-meta,
  .meta,
  .t2,
  .alert-message,
  .alert-action,
  .owner-alert-subline,
  .steering-subtitle{
    font-size:13px !important;
    line-height:1.5 !important;
  }

  .tile-badges,
  .owner-alert-badges,
  .steering-badges{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .tile-badge,
  .owner-alert-badge,
  .steering-badge{
    display:inline-flex !important;
    align-items:center !important;
    min-height:34px !important;
    padding:8px 12px !important;
    line-height:1.2 !important;
  }

  .bar{
    height:10px !important;
  }

  .drill-icon{
    width:32px !important;
    height:32px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .modal{
    padding:0 !important;
  }

  .modal-dialog{
    width:100vw !important;
    max-width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  .modal-header{
    padding:14px !important;
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    background:#fff !important;
  }

  .modal-body{
    padding:14px !important;
    overflow:auto !important;
  }

  .modal-close{
    min-width:42px !important;
    min-height:42px !important;
  }

  .modal-input,
  .drill-textarea,
  .table-head-input,
  .table-cell-input{
    width:100% !important;
    min-height:42px !important;
    box-sizing:border-box !important;
  }

  .modal-action-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .editor-grid,
  .comment-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .editor-toolbar,
  .notes-toolbar,
  .roadmap-actions-bar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .login-shell{
    padding:12px !important;
  }

  .login-card{
    width:100% !important;
    max-width:100% !important;
    padding:20px 16px !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
  }

  .login-title{
    font-size:24px !important;
  }

  .login-subtitle{
    font-size:14px !important;
    line-height:1.5 !important;
  }
}

@media (max-width: 640px){
  .title{
    font-size:20px !important;
  }

  .summary-value,
  .val,
  .steering-value{
    font-size:22px !important;
  }

  .owner-alert-name,
  .steering-title{
    font-size:20px !important;
  }

  .compare{
    font-size:12px !important;
  }

  .notes-textarea,
  textarea{
    min-height:140px !important;
  }
}


/* =========================
   Mobile View v2
   ========================= */

html, body { overflow-x: hidden; }

body { max-width: 100%; }

.sticky-shell,
.wrap,
.toolbar,
.topbar,
.topbar-actions,
.view-pills,
.period-toggle,
.filters-form,
.toolbar-top,
.toolbar-top-no-compare {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .sticky-shell,
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px 14px 10px 14px !important;
    align-items: start !important;
  }

  .brand-logo {
    max-width: 130px !important;
    height: auto !important;
  }

  .head {
    width: 100% !important;
  }

  .title {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .subtitle {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
  }

  .topbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .current-user {
    display: none !important;
  }

  .logout-link {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  .toolbar {
    padding: 10px 14px 14px 14px !important;
  }

  .toolbar-top,
  .toolbar-top-no-compare {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .compare {
    font-size: 12px !important;
    line-height: 1.35 !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
  }

  .period-toggle,
  .view-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .view-pill,
  .toggle-pill {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
  }

  .filters-form,
  .roadmap-advanced-filter-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .field-group,
  .roadmap-filter-button-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  .field-label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .modern-field,
  .modern-input,
  .roadmap-input,
  select,
  input,
  textarea,
  .save-btn,
  button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .wrap {
    padding: 12px 14px 20px 14px !important;
  }

  h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 18px 0 10px 0 !important;
  }

  .summary-grid,
  .grid,
  .alerts-grid,
  .steering-metrics,
  .owner-alerts-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .summary-card,
  .tile,
  .alert-card,
  .owner-alert-card,
  .steering-card {
    padding: 14px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
  }

  .summary-title,
  .t1,
  .alert-title,
  .steering-label {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .summary-value,
  .val,
  .steering-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
    margin-top: 6px !important;
    word-break: break-word !important;
  }

  .summary-meta,
  .meta,
  .t2,
  .alert-message,
  .alert-action,
  .steering-subtitle,
  .owner-alert-subline {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .tile-badges,
  .owner-alert-badges,
  .steering-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .tile-badge,
  .owner-alert-badge,
  .steering-badge {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .mobile-table-wrap,
  .table-shell {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .detail-table,
  .roadmap-table {
    min-width: 680px !important;
  }

  .modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .modal-header {
    padding: 12px !important;
  }

  .modal-body {
    padding: 12px !important;
  }

  .login-shell {
    padding: 14px !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    max-width: 110px !important;
  }

  .title {
    font-size: 16px !important;
  }

  .subtitle {
    font-size: 11px !important;
  }

  .logout-link,
  .view-pill,
  .toggle-pill {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  .summary-value,
  .val,
  .steering-value {
    font-size: 20px !important;
  }
}


/* =========================
   Mobile View v3 (FINAL FIX)
   ========================= */

html, body { overflow-x: hidden; }

/* GLOBAL CONTAINER FIX */
.wrap,
.sticky-shell {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* FORCE CENTER CONTENT */
.wrap {
  margin: 0 auto !important;
}

/* -------------------------
   MOBILE BREAKPOINT
------------------------- */
@media (max-width: 768px) {

  /* HEADER RESET */
  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }

  /* LOGO + TITLE */
  .head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .brand-logo {
    max-width: 100px !important;
  }

  .title {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .subtitle {
    font-size: 11px !important;
  }

  /* ACTIONS (Audit / Logout) */
  .topbar-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .logout-link,
  .view-pill,
  .toggle-pill {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
  }

  /* REMOVE USER TEXT */
  .current-user {
    display: none !important;
  }

  /* NAVIGATION FIX */
  .view-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .view-pill {
    flex: 0 0 auto !important;
  }

  /* FILTERS */
  .filters-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* INPUTS */
  select,
  input,
  button {
    width: 100% !important;
    min-height: 42px !important;
  }

  /* CONTENT START EARLIER */
  .wrap {
    padding: 10px 14px !important;
  }

  h2 {
    margin-top: 12px !important;
    font-size: 15px !important;
  }

  /* KPI / ALERT CARDS */
  .summary-grid,
  .alerts-grid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .summary-card,
  .tile,
  .alert-card {
    padding: 12px !important;
  }

  .summary-value,
  .val {
    font-size: 20px !important;
  }

  /* FIX RIGHT OVERFLOW */
  * {
    max-width: 100% !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

}

/* EXTRA SMALL */
@media (max-width: 480px) {

  .brand-logo {
    max-width: 80px !important;
  }

  .title {
    font-size: 14px !important;
  }

  .summary-value,
  .val {
    font-size: 18px !important;
  }

}


/* =========================
   TRUE MOBILE LAYOUT FIX
   ========================= */

.mobile-full {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* DESKTOP LIMIT ENTFERNEN */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {

  .wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* HEADER */
  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 16px !important;
  }

  .head {
    width: 100% !important;
  }

  .title {
    font-size: 18px !important;
  }

  /* ACTIONS UNTER HEADER */
  .topbar-actions {
    width: 100% !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .current-user {
    display: none !important;
  }

  /* BODY FULL WIDTH */
  body {
    overflow-x: hidden !important;
  }

  * {
    max-width: 100% !important;
  }

  /* MAIN CONTENT */
  .toolbar,
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

}


/* =========================
   Mobile Navigation Level 2
   ========================= */

.mobile-nav-toggle{
  display:none;
}

@media (max-width: 768px){

  .mobile-nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    border:1px solid #d7e0ec !important;
    background:#fff !important;
    color:#18375f !important;
    font-size:12px !important;
    font-weight:700 !important;
    margin-bottom:8px !important;
    box-shadow:0 4px 12px rgba(25,50,90,.06) !important;
  }

  .mobile-primary-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100% !important;
  }

  .mobile-primary-nav .is-primary-mobile{
    display:inline-flex !important;
  }

  .mobile-primary-nav .is-secondary-mobile{
    display:none !important;
  }

  .mobile-primary-nav.mobile-secondary-open .is-secondary-mobile{
    display:inline-flex !important;
  }

  .mobile-primary-nav a{
    min-height:36px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .roadmap-summary-pills{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:6px !important;
  }

  .summary-chip{
    min-height:32px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:6px 10px !important;
    font-size:11px !important;
  }

  /* obere Toolbar enger */
  .toolbar-top,
  .toolbar-top-no-compare{
    gap:8px !important;
  }

  /* Hauptnavigation unter Header beruhigen */
  .view-pills + .view-pills,
  .mobile-primary-nav + .view-pills{
    margin-top:8px !important;
  }

  /* zweite Pill-Gruppe ebenfalls kompakter */
  .view-pill{
    min-height:36px !important;
    padding:8px 12px !important;
    font-size:12px !important;
  }
}


/* =========================
   Mobile Navigation FINAL FIX
   ========================= */

@media (max-width: 768px){

  /* Toggle Button sichtbar */
  .mobile-nav-toggle{
    display:inline-flex !important;
  }

  /* ALLE Pills erstmal sichtbar resetten */
  .view-pills a{
    display:none !important;
  }

  /* NUR DIE ERSTEN 3 ZEIGEN */
  .view-pills a:nth-child(-n+3){
    display:inline-flex !important;
  }

  /* WENN EXPANDED → ALLE ZEIGEN */
  .view-pills.mobile-open a{
    display:inline-flex !important;
  }

}


/* =========================
   Mobile Navigation FINAL (clean)
   ========================= */

.mobile-nav-toggle{
  display:none;
}

@media (max-width: 768px){

  .mobile-nav-toggle{
    display:inline-flex !important;
    margin-bottom:8px !important;
  }

  /* Default: nur Primary sichtbar */
  .mobile-nav .nav-secondary{
    display:none !important;
  }

  /* Expanded Zustand */
  .mobile-nav.open .nav-secondary{
    display:inline-flex !important;
  }

}


/* =========================
   Mobile Navigation REAL FIX
   ========================= */

.mobile-nav-toggle{
  display:none;
}

@media (max-width: 768px){

  .mobile-nav-toggle{
    display:inline-flex !important;
    margin-bottom:8px !important;
  }

  /* Default */
  .nav-secondary{
    display:none !important;
  }

  /* Expanded */
  .mobile-nav.open .nav-secondary{
    display:inline-flex !important;
  }

}


/* =========================
   Mobile Navigation Repair
   ========================= */
.mobile-nav-toggle{
  display:none;
}

@media (max-width: 768px){
  .mobile-nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:36px !important;
    padding:8px 12px !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
    border-radius:999px !important;
    border:1px solid #d7e0ec !important;
    background:#fff !important;
    color:#18375f !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .mobile-nav .nav-secondary-link{
    display:none !important;
  }

  .mobile-nav.open .nav-secondary-link{
    display:inline-flex !important;
  }

  .mobile-nav .nav-primary-link{
    display:inline-flex !important;
  }
}


/* =========================
   Mobile Navigation Stable
   ========================= */
.mobile-nav-toggle{
  display:none;
}

@media (max-width: 768px){
  .mobile-nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:36px !important;
    padding:8px 12px !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
    border-radius:999px !important;
    border:1px solid #d7e0ec !important;
    background:#fff !important;
    color:#18375f !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .mobile-nav .nav-secondary-link{
    display:none !important;
  }

  .mobile-nav.open .nav-secondary-link{
    display:inline-flex !important;
  }

  .mobile-nav .nav-primary-link{
    display:inline-flex !important;
  }
}


/* =========================
   Template Cleanup Mobile Nav
   ========================= */
.mobile-nav-toggle{
  display:none;
}

@media (max-width: 768px){
  .mobile-nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:8px 12px !important;
    margin:8px 0 !important;
    border-radius:999px !important;
    border:1px solid #d7e0ec !important;
    background:#fff !important;
    color:#18375f !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .mobile-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .mobile-nav .nav-secondary-link{
    display:none !important;
  }

  .mobile-nav.open .nav-secondary-link{
    display:inline-flex !important;
  }

  .mobile-nav .nav-primary-link{
    display:inline-flex !important;
  }

  .current-user{
    display:none !important;
  }
}


/* =========================
   Drilldown Mobile Hardening
   ========================= */
.drill-card{
  cursor:pointer;
  touch-action:manipulation;
}

.drill-icon{
  pointer-events:none;
}

body.modal-open{
  overflow:hidden;
}

.modal{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:9999 !important;
}

.modal.hidden{
  display:none !important;
}

.modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(12, 24, 44, 0.38) !important;
}

.modal-dialog{
  position:relative !important;
  z-index:10000 !important;
  margin:4vh auto !important;
  width:min(960px, calc(100vw - 24px)) !important;
  max-height:92vh !important;
  overflow:hidden !important;
}

.modal-body{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  max-height:calc(92vh - 72px) !important;
}

.modal-error{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.modal-error-title{
  font-size:18px;
  font-weight:800;
  color:#18375f;
}

.modal-error-text{
  font-size:14px;
  color:#5b6f8f;
  word-break:break-word;
}

.mobile-scroll-wrap,
.wrap,
.sticky-shell{
  pointer-events:auto;
}

.mobile-scroll-wrap{
  overflow-x:auto !important;
  overflow-y:visible !important;
}

@media (max-width: 768px){
  .modal{
    padding:0 !important;
  }

  .modal-dialog{
    margin:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }

  .modal-header{
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    background:#fff !important;
    padding:12px 14px !important;
  }

  .modal-body{
    max-height:calc(100dvh - 68px) !important;
    padding:12px 14px 18px 14px !important;
  }

  .modal-close{
    min-width:42px !important;
    min-height:42px !important;
  }
}


/* =========================
   iPhone scroll fix
   ========================= */
html{
  height:auto !important;
  min-height:100%;
  -webkit-text-size-adjust:100%;
}

body{
  height:auto !important;
  min-height:100%;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

.sticky-shell,
.wrap{
  overflow:visible !important;
}

@media (max-width: 768px){
  html, body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100%;
    -webkit-overflow-scrolling:touch;
  }

  body{
    position:static !important;
    width:100% !important;
  }

  .sticky-shell{
    position:relative !important;
    overflow:visible !important;
  }

  .wrap{
    overflow:visible !important;
    min-height:auto !important;
  }

  .toolbar,
  .topbar{
    overflow:visible !important;
  }

  .mobile-scroll-wrap{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
  }
}


/* =========================
   MOBILE UX FINAL POLISH
   ========================= */

@media (max-width: 768px){

  /* HEADER KOMPAKTER */
  .topbar{
    padding:10px 12px !important;
  }

  .brand-logo{
    height:28px !important;
  }

  .title{
    font-size:14px !important;
    line-height:1.2;
  }

  .subtitle{
    font-size:11px !important;
    opacity:0.7;
  }

  /* FILTER EINKLAPPBAR */
  .filters-form{
    display:none;
    margin-top:10px;
  }

  .filters-form.open{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .filters-toggle{
    display:block;
    margin:8px 0;
    font-size:12px;
    opacity:0.8;
    cursor:pointer;
  }

  /* KPI GRID TOUCH OPTIMIERT */
  .grid{
    gap:14px !important;
  }

  .tile,
  .summary-card{
    padding:16px !important;
    border-radius:14px !important;
  }

  .tile .t1{
    font-size:13px !important;
  }

  .tile .val{
    font-size:20px !important;
    margin-top:6px;
  }

  /* SCROLL WRAP sauber */
  .mobile-scroll-wrap{
    padding-bottom:10px;
  }

  /* SECONDARY NAV DE-EMPHASIS */
  .nav-secondary-link{
    opacity:0.5 !important;
    font-size:12px !important;
  }

  /* DRILLDOWN MODAL MOBILE */
  .modal-dialog{
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
  }

  .modal-body{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:16px !important;
  }

  .modal-header{
    position:sticky;
    top:0;
    background:#0f172a;
    z-index:10;
    padding:12px;
  }

}

/* Commercial Funnel Executive Cards */
.kpi-review-section {
  margin: 26px 20px 32px 20px;
}

.kpi-review-section h2 {
  font-size: 24px;
  font-weight: 800;
  color: #17345a;
  margin: 0 0 16px 0;
}

.kpi-review-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 14px 0 26px 0;
}

.kpi-review-card {
  background: #213f67;
  color: #ffffff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 30px rgba(25, 55, 95, 0.20);
  min-height: 118px;
}

.kpi-review-label {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.88;
  margin-bottom: 10px;
}

.kpi-review-value {
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  margin: 0 0 10px 0;
}

.kpi-review-target {
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.82;
}

.kpi-review-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-review-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(25, 55, 95, 0.28);
}

.commercial-subline {
  color: #4f6584;
  margin: -8px 0 18px 0;
  font-weight: 600;
}

.commercial-card {
  border: 0;
  text-align: left;
  font-family: inherit;
}

.commercial-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 28, 52, 0.42);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 24px 24px;
}

.commercial-modal-overlay[hidden] {
  display: none;
}

.commercial-modal {
  width: min(1120px, 94vw);
  max-height: 78vh;
  overflow: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(213, 224, 240, 0.9);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(8, 31, 61, 0.34);
  padding: 28px;
  color: #0f2a4b;
}

.commercial-modal h2 {
  margin: 0 42px 6px 0;
  font-size: 28px;
  font-weight: 900;
  color: #17345a;
}

.commercial-modal-subtitle {
  margin: 0 0 20px 0;
  color: #526985;
  font-weight: 700;
}

.commercial-modal-close {
  float: right;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #213f67;
  color: white;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.commercial-modal-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #d9e2ef;
}

.commercial-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.commercial-modal-table th {
  background: #213f67;
  color: #fff;
  text-align: left;
  padding: 12px;
  white-space: nowrap;
}

.commercial-modal-table td {
  padding: 12px;
  border-top: 1px solid #d9e2ef;
  vertical-align: top;
}

.commercial-modal-table tbody tr:nth-child(even) td {
  background: #f5f8fc;
}

body.modal-open {
  overflow: hidden;
}

.commercial-period-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 18px 0;
  padding: 12px 14px;
  background: #f5f8fc;
  border: 1px solid #d9e2ef;
  border-radius: 16px;
  width: fit-content;
}

.commercial-period-filter label {
  font-weight: 800;
  color: #17345a;
}

.commercial-period-filter select {
  border: 1px solid #cfd9e8;
  border-radius: 999px;
  padding: 8px 12px;
  background: #ffffff;
  color: #102b4e;
  font-weight: 700;
}

.core-kpi-section {
  margin-top: 22px;
}

.kpi-delta {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-block;
  background: rgba(255,255,255,0.14);
}

.kpi-delta.positive {
  color: #b8f7d2;
}

.kpi-delta.negative {
  color: #ffd2d2;
}

.kpi-delta.neutral {
  color: #e8edf5;
}