:root{
    --ink:#1d1d1f;        /* Haupttext */
    --ink2:#6e6e73;       /* Sekundärtext */
    --ink3:#86868b;       /* Hilfstext */
    --line:#d2d2d7;       /* Haarlinie */
    --line2:#e8e8ed;
    --bg:#ffffff;
    --bg2:#f5f5f7;        /* Flächen */
    --blue:#0071e3;
    --blue-d:#0077ed;
    --red:#e8442f;
    --amber:#c77700;
    --green:#00875a;
    --radius:18px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg2);color:var(--ink);
    font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    letter-spacing:-.01em;
  }
  a{cursor:pointer;text-decoration:none;color:var(--blue)}
  a:hover{text-decoration:underline}
  button{font:inherit}

  /* ================= Kopfleiste ================= */
  .nav{
    position:sticky;top:0;z-index:40;height:52px;
    background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .navin{max-width:1120px;margin:0 auto;height:100%;padding:0 22px;display:flex;align-items:center;gap:26px}
  .brand{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
  .brand:hover{text-decoration:none}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.16)}
  .navlinks{display:flex;gap:24px;flex:1;min-width:0;overflow:auto;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{font-size:13px;color:var(--ink2);white-space:nowrap;padding:2px 0;border-bottom:1.5px solid transparent}
  .navlinks a:hover{color:var(--ink);text-decoration:none}
  .navlinks a.active{color:var(--ink);border-bottom-color:var(--ink)}

  /* ================= Seitenrahmen ================= */
  .wrap{max-width:1120px;margin:0 auto;padding:34px 22px 90px}
  .head{margin-bottom:26px}
  .head h1{font-size:38px;line-height:1.1;letter-spacing:-.025em;font-weight:600;margin:0 0 6px}
  .head p{margin:0;color:var(--ink2);font-size:17px;letter-spacing:-.01em}
  .view.hidden{display:none}

  /* ================= Website-Umschalter ================= */
  .switch{display:inline-flex;background:#e9e9ed;border-radius:980px;padding:3px;margin-bottom:26px;flex-wrap:wrap;gap:2px}
  .switch button{
    border:0;background:transparent;color:var(--ink2);font-size:13px;font-weight:500;
    padding:7px 16px;border-radius:980px;cursor:pointer;letter-spacing:-.01em;transition:.15s;
  }
  .switch button:hover{color:var(--ink)}
  .switch button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09);font-weight:600}

  /* ================= Karten ================= */
  .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .card h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 3px}
  .cap{color:var(--ink3);font-size:13px;margin-bottom:18px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
  .stat{background:#fff;border-radius:var(--radius);padding:20px 22px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .stat b{display:block;font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
  .stat span{font-size:12px;color:var(--ink3);letter-spacing:-.005em}
  .stat i{font-style:normal;font-size:12px;color:var(--ink3)}
  @media(max-width:860px){
    .stats{grid-template-columns:1fr 1fr}.grid2,.grid3{grid-template-columns:1fr}
    .head h1{font-size:30px}.wrap{padding:24px 18px 70px}
  }

  /* ================= Tabelle ================= */
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
  input,select,textarea{
    background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:11px;
    padding:9px 13px;font:inherit;font-size:14px;outline:none;letter-spacing:-.01em;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.15)}
  input::placeholder{color:var(--ink3)}
  .tablewrap{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  table{width:100%;border-collapse:collapse}
  th{
    text-align:left;font-size:12px;font-weight:600;color:var(--ink2);padding:14px 18px;
    border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;letter-spacing:-.005em;
  }
  th:hover{color:var(--ink)}
  th .ar{color:var(--blue);font-size:10px}
  td{padding:14px 18px;border-bottom:1px solid var(--line2);vertical-align:middle;font-size:14px}
  tr:last-child td{border-bottom:0}
  tbody tr{cursor:pointer;transition:background .12s}
  tbody tr:hover{background:#fafafc}
  .empty{padding:56px 20px;text-align:center;color:var(--ink3);font-size:14px}

  .score{
    display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;
    font-weight:600;font-size:15px;letter-spacing:-.02em;
  }
  .s-hot{background:#ffeeeb;color:var(--red)}
  .s-warm{background:#fff4e0;color:var(--amber)}
  .s-cold{background:#f0f0f3;color:var(--ink2)}
  .cname{font-weight:500;letter-spacing:-.01em}
  .cdom{font-size:12px;color:var(--ink3);margin-top:1px}
  .muted{color:var(--ink3);font-size:13px}
  .tag{display:inline-block;padding:4px 11px;border-radius:980px;font-size:12px;font-weight:500}
  .t-neu{background:#eef4ff;color:#0059c1}
  .t-beobachten{background:#f2eeff;color:#5b34d6}
  .t-kontaktiert{background:#e6f6ef;color:var(--green)}
  .t-kein{background:#f0f0f3;color:var(--ink2)}
  .sitepill{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--bg2);color:var(--ink2);font-size:11.5px;font-weight:500}

  .btn{
    background:var(--blue);color:#fff;border:0;border-radius:980px;padding:9px 19px;
    font-size:14px;font-weight:500;cursor:pointer;letter-spacing:-.01em;transition:.15s;
  }
  .btn:hover{background:var(--blue-d)}
  .btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
  .btn.ghost:hover{background:var(--bg2)}
  .btn.danger{background:#fff;color:var(--red);border:1px solid #f2c8c1}
  .btn.danger:hover{background:#fff5f3}
  .btn.small{padding:6px 14px;font-size:13px}

  /* ================= Listen ================= */
  .row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line2)}
  .row:last-child{border-bottom:0}
  .row .grow{flex:1;min-width:0}
  .row .t{font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .s{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .clickable{cursor:pointer;border-radius:10px;transition:background .12s;padding-left:8px;padding-right:8px;margin:0 -8px}
  .clickable:hover{background:#fafafc}

  /* ================= Demo-Website ================= */
  .browser{border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.10);background:#fff;border:1px solid var(--line)}
  .chrome{background:#f6f6f8;border-bottom:1px solid var(--line);padding:11px 15px;display:flex;align-items:center;gap:10px}
  .lights{display:flex;gap:6px}
  .lights i{width:11px;height:11px;border-radius:50%;display:block}
  .urlbar{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-size:12.5px;color:var(--ink2);text-align:center}
  .page{padding:30px 32px 34px}
  .pagenav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line2);padding-bottom:12px;margin-bottom:20px}
  .pagenav a{padding:6px 13px;border-radius:980px;font-size:13px;color:var(--ink2)}
  .pagenav a:hover{background:var(--bg2);text-decoration:none;color:var(--ink)}
  .pagenav a.active{background:var(--ink);color:#fff}
  .pagebody h3{margin:0 0 8px;font-size:26px;font-weight:600;letter-spacing:-.02em}
  .pagebody p{margin:0;color:var(--ink2);font-size:15px;max-width:60ch}
  .visitor{margin-top:24px;padding:15px 17px;border-radius:13px;background:var(--bg2);font-size:13.5px;color:var(--ink2)}
  .visitor b{color:var(--ink);font-weight:600}

  /* ================= Detail ================= */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:60;overflow:auto;padding:36px 20px}
  .overlay.open{display:block}
  .panel{max-width:720px;margin:0 auto;background:#fff;border-radius:22px;padding:32px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
  .kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px}
  .kv:last-child{border-bottom:0}
  .kv span{color:var(--ink2)}
  .kv b{font-weight:500;text-align:right}
  .bar{height:6px;border-radius:980px;background:#ececed;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:980px}
  .scroller{max-height:260px;overflow:auto;border:1px solid var(--line2);border-radius:13px}
  .tl{display:flex;justify-content:space-between;gap:14px;padding:11px 15px;border-bottom:1px solid var(--line2);font-size:13.5px}
  .tl:last-child{border-bottom:0}
  .tl span{color:var(--ink3);white-space:nowrap;font-size:12.5px}
  .sub-h{font-size:13px;font-weight:600;color:var(--ink2);margin:26px 0 8px;letter-spacing:-.005em}

  .toast{
    position:fixed;right:24px;bottom:24px;background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:15px 18px;max-width:330px;
    box-shadow:0 12px 40px rgba(0,0,0,.16);z-index:70;
    opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s;
  }
  .toast.show{opacity:1;transform:none}
  .toast b{display:block;font-size:14px;font-weight:600;margin-bottom:3px;letter-spacing:-.01em}
  .toast span{font-size:13px;color:var(--ink2)}

  .note{background:#eef4ff;border-radius:14px;padding:16px 19px;font-size:14px;color:#1c3d6e;margin-bottom:22px;line-height:1.55}
  .note b{font-weight:600}
  pre{background:var(--bg2);border-radius:12px;padding:15px 17px;overflow:auto;font-size:13px;
      font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--ink);margin:12px 0}
  .prose p{color:var(--ink2);font-size:15px;line-height:1.6;max-width:66ch}
  .prose b{color:var(--ink);font-weight:600}

  /* ================= Anmeldung ================= */
  .login{max-width:380px;margin:14vh auto 0;padding:0 22px}
  .login .card{padding:30px 32px}
  .login h1{font-size:28px;font-weight:600;letter-spacing:-.025em;margin:0 0 4px}
  .login p.sub{margin:0 0 22px;color:var(--ink2);font-size:14.5px}
  .login input{width:100%;margin-bottom:14px}
  .login .btn{width:100%}
  .fehler{background:#ffeceb;color:#8a1f12;border-radius:11px;padding:11px 14px;font-size:13.5px;margin-bottom:16px}

  /* ================= Ergänzungen Livebetrieb ================= */
  .navright{margin-left:auto;display:flex;align-items:center;gap:16px;white-space:nowrap}
  .navright a{font-size:13px;color:var(--ink2)}
  .live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
  .live i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
  .live.test i{background:var(--amber)}
  .fuss{margin-top:34px;color:var(--ink3);font-size:12.5px;text-align:center}