/* Deutschlandmakler Cockpit — Design-System
   Tokens 1:1 aus deutschlandmakler-b2b-mockup-v6.html übernommen
   (Briefing v4, Abschnitt 7). Bewusst ohne CSS-Framework, kein Build-Schritt. */

:root{
  --dm-black:#0D0D0D;
  --dm-red:#C8102E;
  --dm-gold:#D4AF37;
  --dm-white:#FFFFFF;
  --dm-offwhite:#FAFAF8;
  --dm-grey:#6B6B6B;
  --dm-line:#E7E5E0;
  --max:1240px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',sans-serif;
  color:var(--dm-black);
  background:var(--dm-offwhite);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,.headline{
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.01em;
  line-height:1.02;
  text-transform:uppercase;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button,.btn{font-family:'Montserrat',sans-serif;cursor:pointer;border:none;}
:focus-visible{outline:3px solid var(--dm-gold);outline-offset:2px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--dm-red);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;font-weight:700;font-size:13px;letter-spacing:0.04em;
  text-transform:uppercase;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--dm-red);color:var(--dm-white);}
.btn-primary:hover{background:#a80d26;transform:translateY(-1px);}
.btn-dark{background:var(--dm-black);color:var(--dm-white);}
.btn-dark:hover{background:#000;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--dm-black);border:2px solid var(--dm-black);}
.btn-outline:hover{background:var(--dm-black);color:var(--dm-white);}
.btn-sm{padding:9px 16px;font-size:11.5px;}

/* ---------- Logo ---------- */
.dm-logo{display:flex;align-items:center;gap:12px;}
.dm-logo svg{height:34px;width:auto;display:block;}
.dm-logo .wordmark{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:0.06em;line-height:1;}
.dm-logo .wordmark .pro{color:var(--dm-red);}

/* ---------- App shell (Cockpit) ---------- */
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{
  width:240px;flex-shrink:0;background:var(--dm-white);
  border-right:1px solid var(--dm-line);padding:24px 20px;
}
.app-sidebar nav{margin-top:36px;display:flex;flex-direction:column;gap:2px;}
.app-sidebar nav a{
  padding:11px 12px;font-size:13px;font-weight:600;letter-spacing:0.02em;
  color:var(--dm-black);border-left:3px solid transparent;
}
.app-sidebar nav a:hover{background:var(--dm-offwhite);}
.app-sidebar nav a.active{border-left-color:var(--dm-red);background:var(--dm-offwhite);color:var(--dm-red);}
.app-main{flex:1;min-width:0;}
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;background:var(--dm-white);border-bottom:1px solid var(--dm-line);
}
.app-topbar .role-badge{
  font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  padding:5px 10px;background:var(--dm-offwhite);border:1px solid var(--dm-line);
}
.app-content{padding:40px 32px;}
.app-content h1{font-size:clamp(28px,3vw,38px);margin-bottom:8px;}
.app-content .lead{color:var(--dm-grey);font-size:14px;font-weight:500;margin-bottom:32px;}

/* ---------- Cards / Tables (Admin-Cockpit, funktional) ---------- */
.card{background:var(--dm-white);border:1px solid var(--dm-line);padding:24px;}
.data-table{width:100%;border-collapse:collapse;background:var(--dm-white);border:1px solid var(--dm-line);}
.data-table th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--dm-grey);padding:12px 16px;border-bottom:1px solid var(--dm-line);background:var(--dm-offwhite);
}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--dm-line);font-size:13.5px;}
.data-table tr:last-child td{border-bottom:none;}
.status-badge{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  padding:4px 9px;background:var(--dm-offwhite);border:1px solid var(--dm-line);
}
.status-badge.gold{border-color:var(--dm-gold);color:#8a6d1f;}
.status-badge.red{border-color:var(--dm-red);color:var(--dm-red);}

/* ---------- Forms ---------- */
.field{margin-bottom:20px;}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--dm-line);background:var(--dm-white);
  font-family:'Montserrat',sans-serif;font-size:14px;color:var(--dm-black);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--dm-gold);border-color:var(--dm-gold);}

/* ---------- Auth (Login) ---------- */
.auth-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--dm-offwhite);padding:24px;
}
.auth-card{
  width:100%;max-width:400px;background:var(--dm-white);border:1px solid var(--dm-line);
  padding:40px 36px;
}
.auth-card .dm-logo{justify-content:center;margin-bottom:28px;}
.auth-card h1{font-size:26px;text-align:center;margin-bottom:6px;}
.auth-card .lead{text-align:center;color:var(--dm-grey);font-size:13px;font-weight:500;margin-bottom:28px;}
.auth-card .btn{width:100%;margin-top:6px;}
.auth-error{
  background:#fdecec;border:1px solid var(--dm-red);color:var(--dm-red);
  font-size:13px;font-weight:600;padding:12px 14px;margin-bottom:20px;
}

@media (max-width:900px){
  .app-shell{flex-direction:column;}
  .app-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--dm-line);}
}