/* Frontend Styles mit CSS-Variablen aus Einstellungen */
:root {
  --body-bg: #0f172a;
  --content-bg: #99a5c6;
  --text: #f1f5f9;
  --link: #93c5fd;
  --header-bg: #1f2937;
  --header-text: #ffffff;
  --menu-bg: #111827;
  --menu-text: #e5e7eb;
  --menu-hover-bg: #1f2937;
  --menu-active-bg: #374151;
  --accent: #8b5cf6;
  --border: #334155;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: var(--body-bg);
  color: var(--text);
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: var(--shadow);
}
.header-inner {
  display:flex; align-items:center; gap:16px;
  max-width:1400px; margin:0 auto; padding:12px 16px;
}
.header .logo {
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}
.header .logo img { height:42px; width:auto; border-radius:8px }
.header .title { font-weight:700; font-size:1.125rem; letter-spacing:.3px }

.layout {
  display:grid;
  grid-template-columns: 200px 1fr; /* Sidebar schmaler */
  gap:20px;
  max-width:1400px;
  margin: 16px auto;
  padding: 0 20px 20px;
}

.sidebar {
  background: var(--menu-bg);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  height: fit-content;
}

.menu-item {
  display:block; padding:12px 14px;
  text-decoration:none; color: var(--menu-text);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.menu-item:hover { background: var(--menu-hover-bg) }
.menu-item.active { background: var(--menu-active-bg) }

.content {
  background: #99a5c6;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  overflow:hidden;
  min-height: 70vh;
}

.content iframe {
  display:block;
  width:100%;
  height: calc(100vh - 200px);
  border:0;
  background: #99a5c6;
}

.footer {
  max-width:1400px; margin: 0 auto 32px;
  padding: 0 20px; opacity: .7; font-size: .9rem;
}

/* Mobile */
.hamburger { display:none; margin-left:auto; }
@media(max-width: 900px){
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 64px; left: 0; right: 0; margin: 0 16px; transform: translateY(-120%); transition: transform .25s ease; z-index: 40; }
  .sidebar.open { transform: translateY(0); }
  .hamburger { display:inline-flex; border:1px solid var(--border); padding:8px 10px; border-radius:10px; background:transparent; color:inherit; }
  .content iframe { height: 60vh; }
}
a { color: var(--link) }
button, .btn {
  background: var(--accent);
  border: none; color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow: var(--shadow);
}
button:hover,.btn:hover{filter:brightness(1.05)}