:root{
  --bg:#f5f7fb;              /* Gesamt-Hintergrund – soft */
  --panel:#ffffff;           /* Cards / Panels */
  --panel-2:#eef2fb;         /* leichte Sekundärfläche */
  --text:#101322;            /* Haupttext */
  --muted:#6b7280;           /* Sekundärtext */

  /* Primär-UI (modernes Blau) */
  --accent:#1a73e8;          /* Primary Blue */
  --accent-2:#2563eb;        /* etwas dunkler */
  --accent-soft:#e3efff;     /* zarte Hintergründe / Hovers */

  /* Schweizer Touch dezent über Logo & Danger */
  --swiss-red:#c62828;

  /* Statusfarben */
  --danger:#d32f2f;
  --ok:#2e7d32;
  --warn:#f9a825;

  --border:#dde3ee;          /* sehr dezente Linien */
  --shadow:0 10px 30px rgba(15,23,42,.10);
  --radius:16px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--accent);
  text-decoration:none;
  transition:color .18s ease, opacity .18s ease;
}
a:hover{
  color:var(--accent-2);
  opacity:.9;
}

/* Buttons */

button,.btn{
  cursor:pointer;
  border:none;
  border-radius:999px;
  padding:.7rem 1.2rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;
  box-shadow:var(--shadow);
  font-weight:600;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
button:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 35px rgba(15,23,42,.16);
}
button:active,.btn:active{
  transform:translateY(0);
  box-shadow:0 6px 18px rgba(15,23,42,.16);
  opacity:.9;
}

.btn.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:none;
}
.btn.danger{
  background:var(--danger);
  color:#fff;
}

.small{
  font-size:.85rem;
  padding:.4rem .9rem;
  border-radius:999px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  border:1px solid var(--border);
  padding:.18rem .6rem;
  border-radius:999px;
  color:var(--muted);
  font-size:.8rem;
  background:#fafbff;
}

/* Layout */

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:270px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-right:1px solid var(--border);
  padding:1.2rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  box-shadow:0 0 35px rgba(15,23,42,.08);
}

.sidebar .logo{
  display:block;
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--swiss-red);          /* Schweizer Touch hier */
}
.sidebar .version{
  color:var(--muted);
  font-size:.8rem;
  margin-top:-.3rem;
}

.sidebar ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  overflow:auto;
}

.sidebar li a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .75rem;
  border-radius:12px;
  color:var(--text);
  font-size:.92rem;
  transition:background .16s ease, color .16s ease, transform .08s ease;
}
.sidebar li a:hover,
.sidebar li a.active{
  background:var(--accent-soft);
  color:var(--accent-2);
  transform:translateX(1px);
}

.sidebar .sep{
  height:1px;
  background:var(--border);
  margin:.8rem 0;
}

.sidebar #logout-btn{
  margin-top:.5rem;
}

.content{
  margin-left:270px;
  min-height:100svh;
  padding:1.5rem 2rem;
  display:grid;
  gap:1.2rem;
  max-width:1200px;
  margin-right:auto;
}

/* Panels / Cards */

.container,
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem 1.4rem;
  box-shadow:var(--shadow);
}

h1,h2,h3{
  margin:.2rem 0 .6rem;
  letter-spacing:.01em;
}
h1{
  font-size:clamp(2rem,4vw,2.7rem);
  font-weight:800;
}
h2{
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
}
h3{
  font-size:1.1rem;
  font-weight:600;
}

.muted{color:var(--muted)}

.center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.grid{
  display:grid;
  gap:1rem;
}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* Hero */

.hero{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:1.4rem;
  align-items:center;
}
.hero .title{
  font-size:clamp(2.2rem,5vw,3.1rem);
  font-weight:800;
  margin-bottom:.4rem;
}
.hero .sub{
  color:var(--muted);
  max-width:32rem;
}

/* Tabelle */

.table{
  width:100%;
  border-collapse:collapse;
  background:transparent;
  font-size:.92rem;
}
.table th,
.table td{
  border-bottom:1px solid var(--border);
  padding:.7rem .55rem;
  text-align:left;
  vertical-align:top;
}
.table th{
  color:var(--muted);
  font-weight:600;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.table tr:nth-child(even){
  background:#f9fbff;
}
.table tr:hover{
  background:#eef4ff;
}
.table tfoot td{color:var(--muted)}

/* Inputs */

.input,
select,
textarea{
  width:100%;
  padding:.6rem .8rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fdfdff;
  color:var(--text);
  font-size:.95rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(26,115,232,.25);
  background:#ffffff;
}

label.inline{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
}

/* KPI/Karten */

.kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg,#ffffff,#f6f8fe);
}

/* Notice */

.notice{
  padding:.85rem 1rem;
  border-radius:12px;
  background:#f3f6ff;
  border:1px solid #d4e0ff;
  color:#1a2a55;
  font-size:.9rem;
}

/* Footer */

.footer{
  margin-top:1rem;
  padding:1rem;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
}

/* Public Topbar */

.public-topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-bottom:1px solid var(--border);
  padding:.8rem 1.2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.public-topbar a.logo{
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--swiss-red);
}

/* Public Layout */

.public{
  max-width:1100px;
  margin:0 auto;
  padding:1.2rem 1rem;
  display:grid;
  gap:1.1rem;
}

/* Responsive */

@media (max-width: 980px){
  .sidebar{
    position:static;
    width:auto;
    inset:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
  }

  .content{
    margin-left:0;
    padding:1rem;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4{
    grid-template-columns:1fr;
  }

  .hero{
    grid-template-columns:1fr;
  }
}