:root{
    --ink:#101114;
    --ink-soft:#2A2C31;
    --paper:#F7F6F4;
    --panel:#FFFFFF;
    --wire:#C42838;
    --teal:#3E6FBF;
    --gold:#C42838;
    --lightblue:#EAF1FD;
    --lightblue-deep:#B2CEFF;
    --muted:#6B7078;
    --line:#E2E1DD;
    --positive:#1E7A4C;
    --negative:#C42838;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--lightblue);
    color:var(--ink);
    font-family:'Archivo',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--wire);color:#fff;}

  /* ---------- Masthead ---------- */
  .masthead{
    background:var(--ink);
    color:var(--paper);
    padding:24px 28px;
  }
  .masthead-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-logo{width:34px; height:34px; flex-shrink:0;}
  .brand-mark{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:26px;
    letter-spacing:-0.3px;
  }
  .brand-sub{
    font-family:'Archivo',sans-serif;
    font-weight:400;
    font-size:26px;
    letter-spacing:-0.3px;
    color:#C7C9CE;
  }
  .datestamp{
    font-family:'Archivo',sans-serif;
    font-size:15px;
    color:var(--ink-soft);
  }

  /* ---------- Editor pencil + modal ---------- */
  .pencil-btn{
    display:flex;
    align-items:center;
    gap:9px;
    background:transparent;
    border:none;
    color:#D5D7DC;
    padding:6px 2px;
    cursor:pointer;
    font-family:'Archivo',sans-serif;
    font-size:15px;
    font-weight:500;
  }
  .pencil-btn svg{width:20px; height:20px;}
  .pencil-btn:hover{color:#fff;}
  .pencil-btn.unlocked{color:#fff;}
  .pencil-btn.unlocked svg{color:var(--wire);}

  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(16,17,20,0.55);
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:#fff;
    width:100%;
    max-width:340px;
    padding:24px;
    border-top:4px solid var(--wire);
  }
  .modal-box h3{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:18px;
    margin:0 0 4px;
  }
  .modal-sub{
    font-size:12.5px;
    color:var(--muted);
    margin:0 0 16px;
    font-family:'Archivo',sans-serif;
  }
  .modal-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
  }
  .btn-primary{
    background:var(--wire);
    color:#fff;
    border:none;
    padding:9px 16px;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    flex:1;
  }
  .btn-primary:hover{background:#A81F2D;}
  .btn-secondary{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    padding:9px 16px;
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
  }
  .btn-secondary:hover{border-color:var(--ink);}

  /* ---------- Eingabe-Workflow ---------- */
  .rhythmus-group{margin-bottom:2px;}
  .rhythmus-head{
    background:var(--lightblue);
    padding:9px 18px;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--ink-soft);
    border-bottom:1px solid var(--lightblue-deep);
    border-top:1px solid var(--line);
  }
  .rhythmus-group:first-child .rhythmus-head{border-top:none;}
  .entry-row{
    padding:12px 18px;
    border-bottom:1px solid var(--line);
  }
  .entry-row-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .entry-row-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .entry-label{font-size:13.5px; font-weight:600;}
  .method-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:2px 7px;
    border-radius:0;
  }
  .method-tag.formular{background:var(--lightblue); color:var(--teal); border:1px solid var(--lightblue-deep);}
  .method-tag.upload{background:var(--ink); color:#fff;}
  .status-pill{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
  }
  .status-pill.late{color:var(--negative); font-weight:600;}
  .status-pill.done{color:var(--positive);}
  .status-pill.open{color:var(--muted);}
  .entry-action{
    font-family:'Archivo',sans-serif;
    font-size:12px;
    font-weight:600;
    background:transparent;
    border:1px solid var(--ink);
    color:var(--ink);
    padding:5px 11px;
    cursor:pointer;
    border-radius:0;
  }
  .entry-action:hover{background:var(--ink); color:#fff;}
  .entry-expand{
    display:none;
    margin-top:12px;
    padding:14px;
    background:var(--lightblue);
    border:1px solid var(--lightblue-deep);
  }
  .entry-expand.open{display:block; animation:fade-in .2s ease;}
  .entry-expand .form-grid{padding:0; grid-template-columns:1fr 1fr;}
  .entry-expand .upload-drop{padding:16px; font-size:12.5px;}

  /* ---------- Filter bar ---------- */
  /* ---------- Tabs + Filter-Dropdowns in einer Zeile ---------- */
  .tabbar{
    background:var(--panel);
    border-bottom:1px solid var(--line);
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:2px;
    overflow-x:auto;
  }
  .tabbar button{
    background:none;
    border:none;
    padding:15px 16px 13px;
    font-family:'Archivo',sans-serif;
    font-size:15px;
    font-weight:500;
    color:var(--muted);
    cursor:pointer;
    border-bottom:3px solid transparent;
    white-space:nowrap;
  }
  .tabbar button.active{
    color:var(--ink);
    font-weight:600;
    border-bottom-color:var(--ink);
  }
  .tabbar button:hover{color:var(--ink);}
  .tabbar-filters{
    margin-left:auto;
    display:flex;
    gap:10px;
    flex-shrink:0;
    padding:10px 0;
    position:relative;
  }
  .dropdown{position:relative;}
  .dropdown-btn{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:0;
    padding:9px 14px;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .dropdown-btn:hover{border-color:var(--ink);}
  .dropdown-btn svg{width:11px; height:11px;}
  .dropdown-menu{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:0;
    box-shadow:0 8px 24px rgba(16,17,20,0.12);
    min-width:170px;
    z-index:20;
    overflow:hidden;
  }
  .dropdown-menu.open{display:block;}
  .dropdown-menu button{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:10px 14px;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    font-weight:500;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .dropdown-menu button:hover{background:var(--lightblue);}
  .dropdown-menu button.active{color:var(--wire); font-weight:700;}
  .tabbar button:focus-visible, .dropdown-btn:focus-visible, .kpi-card:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:2px;
  }

  /* ---------- Main layout ---------- */
  main{
    max-width:1180px;
    margin:0 auto;
    padding:28px;
  }
  .view{display:none;}
  .view.active{display:block; animation:fade-in .25s ease;}
  @keyframes fade-in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  .cockpit-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:12px;
  }
  h2.section-title{
    font-family:'Archivo',sans-serif;
    font-size:34px;
    font-weight:800;
    letter-spacing:-0.5px;
    margin:0 0 4px;
  }
  p.section-sub{
    font-family:'Archivo',sans-serif;
    font-size:15px;
    color:var(--muted);
    margin:0 0 28px;
    max-width:620px;
    line-height:1.5;
  }

  /* KPI cards */
  .kpi-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:16px;
    margin-bottom:26px;
  }
  .kpi-card{
    background:var(--panel);
    border:none;
    border-radius:0;
    padding:20px 20px 18px;
    cursor:pointer;
    box-shadow:0 1px 3px rgba(16,17,20,0.06);
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .kpi-card:hover{
    box-shadow:0 8px 20px rgba(16,17,20,0.10);
    transform:translateY(-1px);
  }
  .kpi-card.primary{
    grid-column:span 2;
  }
  .kpi-label{
    font-family:'Archivo',sans-serif;
    font-weight:500;
    font-size:14px;
    color:var(--muted);
    display:block;
    margin-bottom:10px;
  }
  .kpi-value-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .kpi-value{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:34px;
    letter-spacing:-0.5px;
    line-height:1;
    color:var(--ink);
  }
  .kpi-card.primary .kpi-value{font-size:40px;}
  .kpi-delta{
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    font-weight:700;
    padding:4px 10px;
    border-radius:0;
  }
  .kpi-delta.up{color:#1E7A4C; background:#E4F3EA;}
  .kpi-delta.down{color:var(--wire); background:#FAE1E4;}
  .kpi-hint{
    margin-top:10px;
    font-size:12.5px;
    color:var(--muted);
    font-family:'Archivo',sans-serif;
  }

  /* drill down */
  .drill{
    display:none;
    grid-column:1/-1;
    background:var(--lightblue);
    border-radius:0;
    padding:14px 16px;
    margin-top:14px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
  }
  .drill.open{display:block; animation:fade-in .2s ease;}
  .drill-row{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--lightblue-deep);}
  .drill-row:last-child{border-bottom:none;}
  .drill-title{font-family:'Archivo',sans-serif; font-weight:600; margin-bottom:8px; color:var(--ink-soft);}

  /* Panels / tables */
  .panel{
    background:var(--panel);
    border:none;
    border-radius:0;
    box-shadow:0 1px 3px rgba(16,17,20,0.06);
    margin-bottom:20px;
    overflow:hidden;
  }
  .panel-head{
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .panel-head h3{
    font-family:'Archivo',sans-serif;
    font-size:16px;
    font-weight:700;
    margin:0;
  }
  .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:3px 8px;
    border-radius:0;
    background:var(--lightblue);
    color:var(--muted);
  }
  table{width:100%; border-collapse:collapse;}
  thead th{
    text-align:left;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--ink-soft);
    padding:10px 18px;
    background:var(--lightblue);
    border-bottom:1px solid var(--lightblue-deep);
    font-weight:500;
  }
  tbody td{
    padding:11px 18px;
    border-bottom:1px solid var(--line);
    font-size:13.5px;
  }
  tbody tr:last-child td{border-bottom:none;}
  td.num{font-family:'IBM Plex Mono',monospace; text-align:right;}
  td.pos{color:var(--positive);}
  td.neg{color:var(--negative);}

  /* Campaign cards */
  .campaign-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:14px;
  }
  .campaign-card{
    background:var(--panel);
    border:none;
    border-radius:0;
    box-shadow:0 1px 3px rgba(16,17,20,0.06);
    padding:18px;
  }
  .campaign-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:10px;
  }
  .campaign-name{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:15px;
  }
  .status-dot{
    display:inline-block;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--positive);
    margin-right:6px;
  }
  .status-dot.paused{background:var(--gold);}
  .status-dot.ended{background:var(--muted);}
  .campaign-meta{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--muted);
    margin-bottom:12px;
  }
  .funnel{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .funnel-step{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .funnel-bar-bg{
    flex:1;
    background:var(--lightblue);
    height:16px;
    position:relative;
  }
  .funnel-bar{
    height:100%;
    background:var(--teal);
  }
  .funnel-bar.final{background:var(--wire);}
  .funnel-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    width:150px;
    color:var(--ink-soft);
    flex-shrink:0;
  }
  .funnel-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    width:56px;
    text-align:right;
    flex-shrink:0;
  }

  /* Social cards */
  .social-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
    gap:12px;
  }
  .social-card{
    background:var(--panel);
    border:none;
    border-radius:0;
    box-shadow:0 1px 3px rgba(16,17,20,0.06);
    padding:16px;
    text-align:left;
  }
  .social-name{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    margin-bottom:10px;
  }
  .social-val{
    font-family:'IBM Plex Mono',monospace;
    font-size:22px;
    font-weight:600;
  }

  /* Editor area */
  .banner{
    background:var(--ink);
    color:var(--paper);
    padding:14px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    font-family:'Archivo',sans-serif;
    font-size:13px;
  }
  .banner strong{font-family:'IBM Plex Mono',monospace; color:var(--gold);}
  .missing-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:11px 18px;
    border-bottom:1px solid var(--line);
    font-size:13px;
  }
  .missing-row:last-child{border-bottom:none;}
  .missing-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    color:var(--negative);
    background:#F8DEE2;
    padding:3px 8px;
    border-radius:0;
    text-transform:uppercase;
    letter-spacing:0.5px;
  }
  .remind-btn{
    font-family:'Archivo',sans-serif;
    font-size:12px;
    font-weight:500;
    background:var(--teal);
    color:#fff;
    border:none;
    padding:6px 12px;
    cursor:pointer;
    border-radius:0;
  }
  .remind-btn:hover{background:#254556;}
  .remind-btn.sent{background:var(--positive); cursor:default;}

  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:18px;
  }
  .form-field{display:flex; flex-direction:column; gap:5px;}
  .form-field label{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
  }
  .form-field input, .form-field select{
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    padding:8px 10px;
    border:1px solid var(--line);
    background:#FCFBF8;
  }
  .upload-drop{
    grid-column:1/-1;
    border:1px dashed var(--line);
    padding:22px;
    text-align:center;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    color:var(--muted);
  }
  .save-btn{
    grid-column:1/-1;
    justify-self:start;
    background:var(--wire);
    color:#fff;
    border:none;
    padding:10px 20px;
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
  }
  .save-btn:hover{background:#96302A;}

  .note{
    font-size:12px;
    color:var(--muted);
    font-style:italic;
    margin-top:4px;
  }

  @media (max-width:640px){
    .form-grid{grid-template-columns:1fr;}
    .kpi-card.primary{grid-column:span 1;}
    .masthead{padding:18px 16px 14px;}
    main{padding:18px;}
    .tabbar{padding:0 16px; flex-wrap:wrap;}
    .tabbar-filters{margin-left:0; width:100%; padding:8px 0 10px;}
  }