:root{--line:#e5e7eb;--muted:#6b7280;--radius:16px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:#fff;color:#111}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
header.site-header{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:16px}
.logo img{height:50px;width:auto;display:block}
.menu-link{color:#111;text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid transparent}
.menu-link:hover{background:#f3f4f6}
.menu-link.active{background:#111;color:#fff;border-color:#111}
.lang-wrap label{font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:8px;margin:10px 0 16px}
.tabbtn{border:1px solid var(--line);background:#f9fafb;border-radius:999px;padding:8px 12px;cursor:pointer}
.tabbtn[aria-selected="true"]{background:#111;color:#fff;border-color:#111}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.card h2{margin:0 0 12px;font-size:18px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{border:0;border-radius:14px;background:#111;color:#fff;padding:12px 16px;font-weight:600;cursor:pointer}
.btn.secondary{background:#f3f4f6;color:#111;border:1px solid var(--line)}
.seg-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg-table th,.seg-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.seg-table tr:last-child td{border-bottom:0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fafafa}
.kpi .label{color:#6b7280;font-size:12px}
.kpi .value{font-size:20px;font-weight:600;margin-top:4px}
.note{color:#6b7280;font-size:12px;margin-top:8px}
.separator{margin:14px 0;border-top:2px dashed var(--line)}
.bar-bg{height:8px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.bar{height:8px;width:0%;background:#111;transition:width .1s linear}
.status-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0 6px}
canvas{max-height:420px}
/* --- Hamburger Button --- */
.menu-toggle{
  display:none; /* Desktop ausblenden */
  border:1px solid var(--line, #e5e7eb);
  background:#f9fafb;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  line-height:0;
}
.menu-toggle:focus{ outline:2px solid #111; outline-offset:2px; }

/* simple 3-Bars Icon */
.menu-bars,
.menu-bars::before,
.menu-bars::after{
  display:block;
  width:22px; height:2px;
  background:#111;
  content:"";
  position:relative;
}
.menu-bars::before{ top:-6px; position:relative; }
.menu-bars::after { top: 6px; position:relative; }

/* --- Mobile Layout --- */
@media (max-width: 720px){
  .site-header{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Nav als Dropdown; standardmäßig zu */
  #mainmenu{
    position:absolute;
    left:0; right:0; top:72px; /* unter dem Header */
    background:#fff;
    border-top:1px solid var(--line, #e5e7eb);
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    padding:12px;
    display:none !important;     /* Inline display:flex übersteuern */
    flex-direction:column;
    gap:8px;
    z-index:50;
  }
  #mainmenu.open{ display:flex !important; }

  /* Links hübsch als volle Zeilen */
  #mainmenu .menu-link{
    display:block;
    border:1px solid var(--line, #e5e7eb);
    background:#f9fafb;
    border-radius:12px;
    padding:10px 12px;
    text-decoration:none;
  }
  #mainmenu .menu-link.active{ background:#111; color:#fff; border-color:#111; }

  /* Sprache unten als volle Breite */
  #mainmenu .lang-wrap{
    display:flex; align-items:center; gap:8px;
    padding-top:6px; margin-top:6px;
    border-top:1px dashed var(--line, #e5e7eb);
  }

  /* Body sperren, wenn offen (optional) */
  body.no-scroll{ overflow:hidden; }
}