/* custom.css */
body {
  background-color: #f8f9fa;
}
.card {
  margin-bottom: 1.5rem;
}

.card-img-top {
  background-color: #e9ecef;
}
.card {
  transition: transform 0.15s ease-in-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

/* Syntax-Highlighting */
pre code.hljs {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1rem;
  border-radius: 0.5rem;
  display: block;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.hljs-comment, .hljs-quote { color: #6a9955; }
.hljs-keyword, .hljs-selector-tag { color: #569cd6; }
.hljs-string, .hljs-regexp { color: #ce9178; }
.hljs-number { color: #b5cea8; }
.hljs-title { color: #dcdcaa; }
.hljs-function { color: #dcdcaa; }
.hljs-built_in { color: #4ec9b0; }
.hljs-symbol { color: #d16969; }
.hljs-literal { color: #d16969; }

/* Zeilennummern verbessern */
pre {
  counter-reset: line;
  position: relative;
}

pre code {
  padding-left: 4.5em !important;
}

pre code::before {
  content: counter(line) " ";
  counter-increment: line;
  position: absolute;
  left: 0.8em;
  color: #858585;
  text-align: right;
  width: 3em;
  user-select: none;
}

/* Visuelle Konfigurationseditoren */
.editor-shell { --ink:#20201d; --paper:#fffdf8; --red:#9b2c20; max-width:1320px; margin:0 auto; }
.editor-hero { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:2.2rem; margin-bottom:1.5rem; border-radius:1.25rem; color:var(--ink); background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.8),transparent 32%),linear-gradient(135deg,#f1c86b,#e98e62); box-shadow:0 18px 45px rgba(72,47,24,.16); }
.editor-hero.soundboard-hero { color:white; background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,#173f48,#276f68 55%,#d89b46); }
.editor-hero h1 { margin:.15rem 0; font-size:clamp(2rem,4vw,3.4rem); font-family:Georgia,'Times New Roman',serif; }
.editor-hero p { margin:0; opacity:.78; }
.editor-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:800; }
.editor-panel { padding:1.5rem; border:1px solid #dedbd2; border-radius:1.1rem; background:var(--paper); box-shadow:0 8px 24px rgba(39,37,31,.07); }
.editor-section-title { display:flex; align-items:center; gap:.85rem; margin-bottom:1.25rem; }
.editor-section-title.compact { margin-bottom:1rem; }
.editor-section-title>span { display:grid; place-items:center; flex:0 0 2.4rem; height:2.4rem; border-radius:50%; color:white; background:var(--red); font-weight:800; }
.editor-section-title h2,.lane-heading h2 { margin:0; font-size:1.25rem; font-weight:800; }
.editor-section-title p,.lane-heading p { margin:0; color:#77736a; font-size:.9rem; }
.component-palette { display:grid; gap:.75rem; }
.component-chip { padding:1rem; border:1px solid transparent; border-radius:.9rem; cursor:grab; box-shadow:0 5px 12px rgba(0,0,0,.08); transition:transform .15s,border-color .15s; }
.component-chip:hover { transform:translateY(-2px); border-color:#333; }
.component-chip strong,.component-chip small,.sound-kind strong,.sound-kind small { display:block; }
.component-chip.motor { background:#f5c86e; }.component-chip.light { background:#fff4b8; }.component-chip.fogger { background:#d8e5e5; }.component-chip.switch { background:#e7ded2; }
.channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.channel-slot { min-height:190px; padding:1rem; border:2px dashed #cfcac0; border-radius:1rem; background:#faf8f2; transition:border-color .15s,background .15s,transform .15s; }
.channel-slot.drag-over,.lane-dropzone.drag-over { border-color:#9b2c20; background:#fff2df; transform:scale(1.01); }
.channel-slot.occupied { border-style:solid; }.channel-slot.occupied.motor { border-color:#d79b2e; }.channel-slot.occupied.light { border-color:#e6c84d; }.channel-slot.occupied.fogger { border-color:#7ca7aa; }.channel-slot.occupied.switch { border-color:#9a8874; }
.empty-channel { min-height:155px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#8a867d; }
.empty-channel small { margin-top:.35rem; }.port-badge { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.65rem; color:white; background:#282722; font-weight:900; }
.channel-slot-head { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }.channel-slot-head .btn-close { margin-left:auto; }.component-type { text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; font-weight:800; color:#666; }
.channel-fields { display:grid; gap:.65rem; }.channel-options { display:flex; flex-wrap:wrap; gap:.75rem; font-size:.85rem; }
.editor-field { display:block; }.editor-field>span { display:block; margin-bottom:.28rem; font-size:.78rem; font-weight:700; color:#656158; }
.sound-entry-list { display:grid; gap:.8rem; }.sound-entry-card { display:flex; align-items:flex-start; gap:1rem; padding:1rem; border:1px solid #dedbd2; border-radius:.9rem; background:white; }.sound-entry-index { display:grid; place-items:center; flex:0 0 2rem; height:2rem; border-radius:50%; background:#292823; color:white; font-weight:800; }.sound-entry-fields { flex:1; display:grid; gap:.6rem; }.editor-empty { padding:2rem; border:2px dashed #d8d4ca; border-radius:.9rem; text-align:center; color:#888278; }
.sound-palette { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.sound-kind { padding:1rem; border:0; border-radius:1rem; text-align:left; cursor:grab; }.sound-kind.background { background:#cce8df; }.sound-kind.effect { background:#f7d083; }.sound-kind.random { background:#d9d7ef; }
.theme-lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:start; }.sound-lane { overflow:hidden; border:1px solid #d9d5cb; border-radius:1rem; background:#f8f6f0; }.lane-heading { display:flex; gap:.8rem; align-items:center; padding:1rem; }.lane-icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.8rem; background:#292823; color:white; font-size:1.25rem; }.lane-dropzone { min-height:230px; padding:.8rem; border:2px dashed transparent; transition:.15s; }.lane-empty { display:grid; place-items:center; min-height:190px; border:2px dashed #d4d0c6; border-radius:.8rem; color:#928d82; }
.theme-sound-card { padding:1rem; margin-bottom:.8rem; border:1px solid #d7d3ca; border-radius:.85rem; background:white; box-shadow:0 5px 14px rgba(0,0,0,.06); cursor:grab; }.theme-card-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; }.theme-card-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.theme-card-head .btn-close { margin-left:auto; }.drag-handle { color:#989287; font-size:1.2rem; }

@media (max-width:991px) { .editor-hero { align-items:flex-start; flex-direction:column; }.theme-lanes { grid-template-columns:1fr; }.sound-palette { grid-template-columns:1fr; } }
@media (max-width:767px) { .channel-grid { grid-template-columns:1fr; }.editor-panel,.editor-hero { padding:1.1rem; }.sound-entry-card { flex-wrap:wrap; }.sound-entry-fields { flex-basis:calc(100% - 3rem); } }