/* ===========================================================
   Self-Storage Kunden-Demo — gemeinsames Stylesheet
   Platzquartier · erstellt von nexcraft-labs.com
   =========================================================== */
.ssx { --acc:#1e83a0; --navy:#131b3f; --bg:#faf9f6; --soft:#e8f3f7;
       --border:#e3e1dc; --muted:#6b6b6b; --ok:#1e9e6a; --warn:#c9772a; --bad:#c0392b;
       background:var(--bg); color:#1a1a1a;
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       line-height:1.55; padding-bottom:60px; }
.ssx *{box-sizing:border-box;}
.ssx .wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.ssx a{color:var(--acc);}

.ssx-banner{background:#fff4e2;border-bottom:1px solid #f0d9b0;color:#8a5a18;
  font-size:13px;text-align:center;padding:8px 16px;}
.ssx-banner b{font-weight:700;}

.ssx-hero{background:var(--navy);color:#fff;padding:44px 20px 50px;}
.ssx-hero .wrap{display:flex;flex-direction:column;gap:10px;}
.ssx-hero .eyebrow{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#7fc4d6;font-weight:700;}
.ssx-hero h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.5px;}
.ssx-hero p{margin:0;font-size:17px;opacity:.9;max-width:680px;}

.ssx-sec{margin-top:34px;}
.ssx-sec h2{font-size:22px;color:var(--navy);margin:0 0 4px;}
.ssx-sec .lead{color:var(--muted);margin:0 0 18px;}
.ssx-stage{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.5px;
  background:var(--acc);color:#fff;padding:4px 12px;border-radius:20px;margin-bottom:10px;}

.ssx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ssx-tiles.two{grid-template-columns:repeat(2,1fr);}
.ssx-tile{display:block;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:22px;text-decoration:none;color:inherit;transition:.14s;}
.ssx-tile:hover{border-color:var(--acc);box-shadow:0 6px 22px rgba(19,27,63,.10);transform:translateY(-2px);}
.ssx-tile .ico{font-size:30px;}
.ssx-tile .role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--acc);margin:10px 0 2px;}
.ssx-tile h3{margin:0 0 6px;font-size:18px;color:var(--navy);}
.ssx-tile p{margin:0;font-size:13.5px;color:var(--muted);}
.ssx-tile .go{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--acc);}

.ssx-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:18px;}
.ssx-card h3{margin:0 0 14px;font-size:17px;color:var(--navy);}

.ssx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px;}
.ssx-kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.ssx-kpi .v{font-size:27px;font-weight:800;color:var(--navy);line-height:1.1;}
.ssx-kpi .l{font-size:12.5px;color:var(--muted);margin-top:3px;}
.ssx-kpi .bar{height:6px;border-radius:4px;background:var(--soft);margin-top:9px;overflow:hidden;}
.ssx-kpi .bar > span{display:block;height:100%;background:var(--acc);}

.ssx-table{width:100%;border-collapse:collapse;font-size:14px;}
.ssx-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);border-bottom:2px solid var(--border);padding:9px 10px;}
.ssx-table td{padding:10px;border-bottom:1px solid var(--border);}
.ssx-table tr:last-child td{border-bottom:0;}
.ssx-table code{background:var(--soft);padding:1px 6px;border-radius:4px;font-size:13px;}

.ssx-badge{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12px;font-weight:600;color:#fff;}
.b-ok{background:var(--ok);} .b-warn{background:var(--warn);} .b-bad{background:var(--bad);}
.b-muted{background:#6b6b6b;} .b-acc{background:var(--acc);}

.ssx-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:7px;
  font-weight:700;font-size:14px;border:0;cursor:pointer;text-decoration:none;font-family:inherit;}
.ssx-btn.prim{background:var(--acc);color:#fff;}
.ssx-btn.prim:hover{background:var(--navy);}
.ssx-btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--border);}
.ssx-btn.ghost:hover{background:var(--soft);}

.ssx-alert{border-radius:10px;padding:14px 18px;font-size:14px;margin-bottom:18px;}
.ssx-alert.bad{background:#fdecea;border:1px solid #e7b7b2;color:#8c2c22;}
.ssx-alert.ok{background:#e9f7f0;border:1px solid #b4e0cd;color:#1a6647;}
.ssx-alert.info{background:var(--soft);border:1px solid #bcdde6;color:#15596b;}

.ssx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ssx-dl{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid var(--border);}
.ssx-dl:last-child{border-bottom:0;}
.ssx-dl .k{color:var(--muted);}
.ssx-codebox{background:var(--soft);border:1px dashed var(--acc);border-radius:10px;padding:16px;text-align:center;}
.ssx-codebox .lbl{font-size:12px;color:var(--muted);}
.ssx-codebox .code{font-size:30px;font-weight:800;letter-spacing:6px;color:var(--navy);}

.ssx-pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.ssx-pick a{font-size:13px;padding:7px 13px;border-radius:20px;background:#fff;border:1px solid var(--border);
  text-decoration:none;color:var(--navy);}
.ssx-pick a.on{background:var(--acc);color:#fff;border-color:var(--acc);}

.ssx-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px;}
.ssx-flow .step{background:var(--soft);border-radius:9px;padding:14px;font-size:13px;}
.ssx-flow .step b{color:var(--navy);}

@media(max-width:820px){
  .ssx-tiles,.ssx-tiles.two,.ssx-kpis,.ssx-grid2,.ssx-flow{grid-template-columns:1fr;}
}