:root{ --gray:#111827; --muted:#6b7280; --border:#e5e7eb; }
*{ box-sizing:border-box; } body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans; margin:0; color:#111; background:#fafafa;}
.container{ max-width: 1100px; margin: 0 auto; padding: 24px; } .card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.header{ text-align:center; margin-bottom:16px; } .input{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; font-size:16px; background:#fff; }
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid #111; background:#111; color:#fff; cursor:pointer; font-weight:600; }
.btn:disabled{ opacity:.6; cursor:not-allowed; } .row{ display:flex; gap:12px; align-items:center; } .select{ padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.table{ width:100%; border-collapse: collapse; } .table th,.table td{ border-bottom:1px solid var(--border); padding:10px; text-align:left; vertical-align: top; }
.badge{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); font-size:12px; background:#fff; }
.status{ display:flex; gap:6px; flex-wrap:wrap; } .status input{ display:none; }
.status label{ padding:8px 10px; border:1px solid var(--border); border-radius:999px; cursor:pointer; font-size:12px; background:#fff; }
.status input:checked + label{ border-color:#111; box-shadow: inset 0 0 0 1px #111; }
.label-green{ background:#ecfdf5; } .label-yellow{ background:#fffbeb; } .label-orange{ background:#fff7ed; } .label-red{ background:#fef2f2; } .label-absent{ background:#f3f4f6; }
footer{ margin-top:24px; color:var(--muted); font-size:12px; text-align:center; }
@media (max-width: 640px){ .container{ padding:16px; } .btn{ padding:14px 18px; font-size:16px; }
  .input,.select{ padding:12px 14px; font-size:16px; } .table th,.table td{ padding:12px 8px; } }

/* === Topbar Styles === */
<?php /* style-topbar.css.php */ ?>
:root{--bg:#fff;--fg:#0f172a;--muted:#64748b;--brand:#0d6efd;--ring:rgba(13,110,253,.15)}
.amp-header{position:sticky;top:0;z-index:1000;background:var(--bg);border-bottom:1px solid #e5e7eb;box-shadow:0 1px 1px rgba(0,0,0,.02)}
.amp-container{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.amp-logo{font-weight:700;color:var(--fg);text-decoration:none;letter-spacing:.2px}
.amp-nav ul{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.amp-nav a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--fg)}
.amp-nav li.active a{background:#f1f5f9}
.amp-nav a:hover{background:#eef5ff}
.amp-nav svg{width:18px;height:18px;fill:currentColor;opacity:.92}
.amp-user{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted)}
.amp-btn{display:inline-block;padding:6px 10px;border-radius:10px;border:1px solid #d0d7e2;text-decoration:none;color:var(--fg)}
.amp-btn:hover{background:#f8fafc;border-color:#b8c2d1}
.amp-logout-mobile{ display:none; }

/* Footer: full width, centered, subtle color, no extra spacing */
.amp-footer{ width:100%; margin-top:0; padding:12px 0; color:#94a3b8; font-size:14px; text-align:center; }
.amp-footer-inner{ width:100%; text-align:center; }

/* Burger */
.amp-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:8px}
.amp-burger span{display:block;width:22px;height:2px;background:var(--fg);margin:4px 0}

.amp-compact .amp-nav{ position:absolute; top:56px; left:0; right:0; background:var(--bg); border-bottom:1px solid #e5e7eb; display:none; padding:10px 16px; }
.amp-compact .amp-nav.open{ display:block; }
.amp-compact .amp-nav ul{ flex-direction:column; gap:8px; }
.amp-compact .amp-user{ display:none; }
.amp-compact .amp-logout-mobile{ display:block; }
.amp-compact .amp-burger{ display:block; margin-left:auto; }

@media (max-width:860px){
  .amp-burger{ display:block; margin-left:auto; }
  .amp-nav{ position:absolute; top:56px; left:0; right:0; background:var(--bg); border-bottom:1px solid #e5e7eb; display:none; padding:10px 16px; }
  .amp-nav.open{ display:block; }
  .amp-nav ul{ flex-direction:column; gap:8px; }
  .amp-user{ display:none; }
  .amp-logout-mobile{ display:block; }
}


/* forced */, #fff);
  border-bottom: 1px solid var(--line, #e5e7eb);
}



/* Hide duplicate large content logo (keep topbar brand) */
main img[src*="assets/img/ampel_logo_quer"],
.container img[src*="assets/img/ampel_logo_quer"] {
  display: none !important;
  max-height: 0 !important;
  visibility: hidden !important;
}



/* --- Amp Header compact sizing fix --- */
.amp-header { height: 56px; background:#fff; }
.amp-header .amp-container { height: 56px; }
.amp-header .amp-logo-image { height: 30px; width: auto; display: inline-block; object-fit: contain; vertical-align: middle; }
.amp-header .amp-brand a { display: inline-flex; align-items: center; gap: .5rem; line-height: 1; }

.amp-nav{background:#fff;}

.amp-nav{background:#fff;}


/* --- Ampel Legend (compact) --- */
.legend { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.legend-item { display:flex; gap:6px; align-items:center; }
.icon-dot { width:12px; height:12px; border-radius:999px; display:inline-block; }
.icon-dot.green{ background:#16a34a; }
.icon-dot.yellow{ background:#eab308; }
.icon-dot.orange{ background:#f97316; }
.icon-dot.red{ background:#dc2626; }
.icon-cross{ position:relative; width:12px; height:12px; display:inline-block; }
.icon-cross::before,.icon-cross::after{ content:""; position:absolute; left:0; top:50%; width:12px; height:2px; background:#ef4444; transform-origin:left center; }
.icon-cross::before{ transform:rotate(45deg); }
.icon-cross::after{ transform:rotate(-45deg); }

/* --- Bunte Punkte --- */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;font-size:.85rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle}
.dot-green{background:#16a34a}.dot-yellow{background:#eab308}.dot-orange{background:#f97316}.dot-red{background:#dc2626}
.cross{position:relative;display:inline-block;width:10px;height:10px}
.cross::before,.cross::after{content:"";position:absolute;left:0;top:50%;width:10px;height:2px;background:#ef4444;transform-origin:left center}
.cross::before{transform:rotate(45deg)}.cross::after{transform:rotate(-45deg)}
.table td.icon,.table th.icon{text-align:center;width:72px}


/* --- Topbar unified white theme (v12) --- */
.amp-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  height: 56px;
  border-bottom: 1px solid #e5e7eb;
}
.amp-header .amp-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
}
.amp-nav { background: #fff; }
.amp-brand .amp-logo-image {
  height: 36px;
  width: auto;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}


/* --- Amp Nav layout (v13) --- */
.amp-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.amp-nav li{margin:0;padding:0}
.amp-nav a{display:inline-block;text-decoration:none;padding:6px 12px;border-radius:999px;color:#111}
.amp-nav li.active a{background:#f1f5f9}
.amp-user .amp-btn{display:inline-block;padding:6px 12px;border-radius:10px;background:#f8fafc;border:1px solid #e5e7eb;text-decoration:none;color:#111}