:root{--bg:#0D1117;--card:#0f141b;--text:#C9D1D9;--muted:#8B949E;--accent:#58A6FF;--border:rgba(88,166,255,.14)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.container{width:min(1200px,92%);margin:0 auto;padding-bottom:96px}
.site-header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,rgba(13,17,23,.95),rgba(13,17,23,.7));backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 6px}.nav .brand{font-weight:700;color:#fff}
.nav-center,.nav-right{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav a{color:var(--text)} .nav a:hover{color:#fff}
.live a{background:#e11d48;color:#fff;padding:4px 10px;border-radius:999px}
.page-title{font-size:2rem;margin:28px 0 12px}
.card{background:linear-gradient(180deg,var(--card),#0b1016);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04)}
.grid{display:grid;gap:16px}.two-col{grid-template-columns:2fr 1fr}.three-col{grid-template-columns:repeat(3,1fr)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{background:var(--accent);color:#071018;border:0;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
.btn.subtle{background:transparent;border:1px solid var(--border);color:var(--text)}
.table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border)}.table thead th{background:rgba(88,166,255,.08)}
tr.today td{background:rgba(88,166,255,.08)}
input,select,textarea{background:#0b1016;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;width:100%}
label{display:block;margin:6px 0}.muted{color:var(--muted)}
.badge{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.85rem}
/* Admin toggles / rows */
.admin-rows>label{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:12px;padding:12px}
.toggle{position:relative;width:54px;height:28px;background:#11161d;border:1px solid var(--border);border-radius:999px}
.toggle input{opacity:0;width:0;height:0}
.toggle span{position:absolute;top:4px;left:4px;width:20px;height:20px;background:#667;border-radius:50%;transition:.2s}
.toggle input:checked + span{left:30px;background:#fff}
/* Footer new layout */
.site-footer{border-top:1px solid var(--border);padding:20px 0;background:rgba(0,0,0,.2)}
.footer-links{display:flex;gap:14px;justify-content:center;margin-bottom:6px}
.footer-disclaimer{color:var(--muted);text-align:center;margin:4px 0}
.footer-copy{text-align:center;color:var(--muted)}

<style>
/* --- Instant-Tooltip für Material-Chips --- */
.chip.tip { position: relative; outline: none; }
.chip.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #0b0f14;
  color: #e6edf3;
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: .85em;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .08s linear, transform .08s ease;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.chip.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--border);
  opacity: 0;
  transition: opacity .08s linear;
}
.chip.tip:hover::after,
.chip.tip:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.chip.tip:hover::before,
.chip.tip:focus::before { opacity: 1; }

/* Damit Tooltips trotz horizontalem Scroll sichtbar bleiben */
.table-wrap { overflow-x: auto; overflow-y: visible; }
</style>

<style>
/* Basis-Chip (falls noch nicht vorhanden) */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#0e141b; border:1px solid var(--border);
  border-radius:10px; padding:6px 10px; line-height:1;
}
.chip img{ width:20px; height:20px; border-radius:4px; }
.chip .qty{ opacity:.9; }

/* Sofort-Tooltip via data-tip (ohne Browser-title-Verzögerung) */
.chip.tip{ position:relative; outline:none; }
.chip.tip::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background:#0b0f14; color:#e6edf3;
  border:1px solid var(--border);
  padding:6px 8px; border-radius:8px; white-space:nowrap;
  font-size:.85em; line-height:1.2;
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition: opacity .08s linear, transform .08s ease, visibility 0s linear .08s;
  z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.chip.tip::before{
  content:"";
  position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%);
  border:6px solid transparent; border-bottom:0;
  border-top-color:var(--border);
  opacity:0; visibility:hidden;
  transition: opacity .08s linear, visibility 0s linear .08s;
  z-index:50;
}
.chip.tip:hover::after,
.chip.tip:focus::after{
  opacity:1; visibility:visible;
  transform: translateX(-50%) translateY(0);
  transition-delay:0s;
}
.chip.tip:hover::before,
.chip.tip:focus::before{
  opacity:1; visibility:visible; transition-delay:0s;
}

/* Wichtig: nichts abschneiden */
.table-wrap{ overflow-x:auto; overflow-y:visible; position:relative; z-index:0; }
.table{ overflow:visible; }
.table td, .table th{ overflow:visible; }
</style>

.guide-cover{
  display:block;
  width:100%;
  max-width:640px;           /* <= hier die maximale Breite steuern */
  aspect-ratio:16/9;         /* hält das Bild flacher/konstanter */
  object-fit:cover;          /* sauberer Zuschnitt */
  border-radius:12px;
  border:1px solid var(--border);
  margin:6px auto 14px;      /* zentriert, etwas Luft oben/unten */
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}