:root{
      --bg:#f2f2f2;
      --panel:#ffffff;
      --text:#1d1d1f;
      --muted:#6b7280;
      --brand:#cfa448; /* goldgelb wie im Screenshot */
      --brand-2:#e3be63;
      --accent:#3b82f6;
      --line:#d6d6d6;
      --concrete-1:#ececec;
      --concrete-2:#e7e7e7;
      --concrete-3:#f6f6f6;
    }

    /* dezente Beton-Optik */
    body{
      margin:0; color:var(--text); background:
        linear-gradient(180deg,var(--concrete-3),var(--concrete-2)) fixed;
      font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    .app{ display:grid; grid-template-rows:auto 1fr; height:100dvh; }

    /* Kopfzeile */
    header{
      position:sticky; top:0; z-index:10;
      background:linear-gradient(180deg,#fafafa,#f0f0f0);
      border-bottom:1px solid var(--line);
      padding:14px 16px; display:flex; gap:12px; align-items:center;
    }
    .greet{ font-weight:600; margin-right:4px; }
    .search-wrap{ flex:1; position:relative; }
    .search-input{
      width:20%; height:42px; padding:0 44px 0 44px; border-radius:10px; border:1px solid #cfcfcf; outline:none;
      background:#fff; box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(0,0,0,.03);
      font-size:15px;
    }
    .search-icon{ position:absolute; left:12px; top:50%; translate:0 -50%; opacity:.55 }
    .user-icon{ position:absolute; right:12px; top:50%; translate:0 -50%; opacity:.55 }

    .top-actions{ display:flex; gap:8px; }
    .chip-btn{
      border:1px solid #b9b9b9; background:#fff; padding:10px 14px; border-radius:10px; cursor:pointer;
      transition:.15s; font-weight:600;
    }
    .chip-btn:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06) }

    /* Layout */
    .layout{ display:grid; grid-template-columns:120px 1fr 40%; gap:14px; padding:14px; height:100%; }
    @media (max-width: 1100px){ .layout{ grid-template-columns:110px 1fr; } .aside{ display:none } }

    /* linke Spalte: Logos */
    .logos{
      background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:auto;
      display:flex; flex-direction:column; gap:12px; padding:12px;
    }
    .logos h4{ margin:0 0 6px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
    .logo-list{ display:flex; flex-direction:column; gap:8px; }
    .logo-btn{
      display:grid; place-items:center; height:56px; border-radius:10px; border:1px solid #ddd; background:
        linear-gradient(180deg,#fff,#f7f7f7);
      cursor:pointer; transition:.16s; position:relative; overflow:hidden;
    }
    .logo-btn:hover{ box-shadow:0 2px 10px rgba(0,0,0,.08) }
    .logo-btn.active{ outline:2px solid var(--brand); box-shadow:0 2px 10px rgba(207,164,72,.3) }
    .logo-text{ font-weight:800; font-size:12px; text-align:center; color:#2b2b2b }
    .logo-bar{ position:absolute; left:18px; width:64%; height:18px; border-radius:4px; background:var(--brand); opacity:.4 }

    /* mittlere Spalte: Ergebnisse */
    .results{
      display:flex; flex-direction:column; gap:12px; min-width:0;
    }
    .hint{ color:var(--muted); background:var(--panel); border:1px dashed #d5d5d5; border-radius:12px; padding:14px }

    .company-card{
      background:var(--panel); border-radius:14px; overflow:hidden; border:1px solid var(--line);
    }
    .card-bar{ height:22px; background:linear-gradient(180deg,var(--brand-2),var(--brand)); display:flex; align-items:center; justify-content:space-between; padding:0 10px; color:#3a2a06; font-weight:600; }
    .card-body{ display:grid; grid-template-columns: 1fr 360px; gap:16px; padding:16px; }
    @media (max-width: 900px){ .card-body{ grid-template-columns:1fr } }

    .logo-big{
      display:flex; align-items:center; gap:18px; padding:18px; border:1px solid #eee; border-radius:12px; background:
        linear-gradient(180deg,#fff,#fafafa);
    }
    .logo-stamp{ width:140px; height:100px; border-radius:8px; background:linear-gradient(180deg,#fff,#f6f6f6); border:1px solid #e2e2e2; position:relative; display:grid; place-items:center; }
    .logo-stamp::before{ content:""; position:absolute; left:16px; width:70%; height:40px; background:var(--brand); border-radius:6px; opacity:.9 }
    .logo-title{ font-weight:800; font-size:28px; letter-spacing:.02em }
    .logo-sub{ color:#444; font-weight:700; font-size:12px; letter-spacing:.25em }

    .contact{
      border:1px solid #eee; border-radius:12px; padding:16px; background:#fff; display:flex; flex-direction:column; gap:4px;
    }
    .field{ color:#333 }
    .muted{ color:var(--muted) }

    .emp-wrap{ padding:0 16px 16px; }
    .emp-title{ margin:0 0 8px; font-size:14px; color:#333 }
    .emp-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
    .emp{
      border:1px solid #e7e7e7; background:#fff; padding:10px 12px; border-radius:10px;
    }
    .emp strong{ display:block }
    .badge{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #e1e1e1; border-radius:999px; padding:6px 10px; font-size:12px; }
    .badges{ display:flex; gap:8px; padding:10px 16px; }

    /* rechte Spalte: Platzhalter Bild */
    .aside{
      border:1px solid var(--line); border-radius:12px; background:var(--panel);
      display:grid; place-items:center; color:var(--muted);
      position:relative; overflow:hidden;
    }
    .aside::after{
      content:""; position:absolute; inset:-20% -40% auto -40%; height:80%; transform:rotate(-5deg);
      background:radial-gradient(closest-side,rgba(207,164,72,.13),transparent 60%);
    }
    .aside .placeholder{ text-align:center; padding:24px }

    /* kleine Helfer */
    .row{ display:flex; align-items:center; gap:8px }
    .spacer{ flex:1 }
    a{ color:#0b57d0; text-decoration:none }
    a:hover{ text-decoration:underline }