:root {
  --bg: floralwhite;
  --card: #fff;
  --accent: bisque; /* Standardfarbe der Buttons */
  --btn-text: #5a2b00; /* dunkles Braun für Lesbarkeit auf bisque */
  --active: saddlebrown; /* Farbe beim Klicken */
  --muted: #666;
  --radius: 12px;
  --maxw: 1600px;
  --focus-border: #003300;
  --focus-shadow: rgba(150, 120, 80, 0.8);
}
body {
  /*font-family: "Heiti SC", "Segoe UI", Roboto, Arial, sans-serif;*/
  background: var(--bg);
  color: #222;
  margin: 0;
  padding: 18px;
  display: flex;
  justify-content: center;
}
.wrap {
  width: 100%;
  /*max-width: var(--maxw);*/
  margin-top: 2rem;
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
h1 {
  margin: 6px 0;
  color: #333;
  font-size: 32px;
  text-align: center; /* Titel zentriert */
  flex: 1 1 auto;
}
.header-actions {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  margin-bottom: 18px;
  text-align: center;
}
.row { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.col { /*flex: 1 1 300px;*/ min-width: 240px; }
label { display:block; margin-bottom:8px; /*color:var(--muted);*/ font-size:14px; text-align:left; }
select, input[type="number"] {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #ccc; font-size:14px; outline:none; box-sizing:border-box;
}
/* Liederbuch-Auswahl zentriert und kompakter */
#liederbuch {
  display:block;
  /*margin:0 auto 8px auto;*/
  max-width:360px;
  text-align:left;
  background-color: white;
  padding: 6px;
}

/* Fokus/Click-Styling für das Liederbuch-Auswahlfeld */
#liederbuch:focus, #liederbuch:active {
  outline: none;
  border-color: var(--focus-border);
  border-width: 1.2px;
  box-shadow: 0 0 8px var(--focus-shadow);
}

.multiselect {
  height:340px; border-radius:10px; overflow:auto; text-align:left; padding:2px; border:1px solid #eee; background:#fafafa;
}
.multiselect .item {
  padding:4px 10px; margin:4px 4px; background:#fff; border-radius:8px; border:1px solid #f0f0f0; cursor:grab; user-select:none;
}
#order .item.selected { border-color: var(--active); box-shadow: 0 0 0 2px rgba(139,69,19,0.12); }
.controls { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }

/* Einheitlicher Button-Stil für alle Buttons */
.btn {
  padding:10px 14px;
  border-radius:10px;
  border:none;
  background: var(--accent);
  color: var(--btn-text);
  cursor:pointer;
  font-size:14px;
  transition: background .12s ease, color .12s ease, transform .06s ease, box-shadow .12s ease;
  text-align:center;
  box-shadow: none;
}
/* Focus style for buttons (keyboard/tab) */
.btn:focus {
  outline: none;
  border: 1.2px solid var(--focus-border);
  box-shadow: 0 0 8px var(--focus-shadow);
  color: #fff;
  background: var(--active);
}
.btn:active { background: var(--active); color: #fff; transform: translateY(1px); }
.btn.clicked { background: var(--active); color: #fff; }
/* secondary kept for semantic usage but same visual style */
.btn.secondary { background: var(--accent); color: var(--btn-text); }

.hint { color:var(--muted); font-size:13px; margin-top:8px; text-align:left; }
.personPreview { text-align:left; padding:10px; border-radius:8px; background:#fff; border:1px solid #eee; margin-top:8px; font-size:14px; color:#222; }
table.groupTable { border-collapse:collapse; width:100%; margin-top:12px; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.04); }
table.groupTable th, table.groupTable td { padding:10px 12px; text-align:left; }
table.groupTable th { background: bisque; color: rgb(100,0,0); font-size:14px; }
table.groupTable tr:nth-child(even) { background:#f9f9f9; }
table.groupTable tr:hover { background:#eaf6f0; }
/* Layout: moveUp/moveDown/Alle in einer Linie */
.order-controls { display:flex; gap:8px; align-items:center; justify-content:flex-start; margin-top:8px; }
@media (max-width:1200px) {
  .row { flex-direction:column; align-items:stretch; }
  .controls { justify-content:center; }
  .header { flex-direction:column; align-items:stretch; gap:8px; }
  .header-actions { justify-content:center; }
}
@media (min-width:2000px) {

}
@media (max-width:700px) {
.col {flex: 2 1 100px; max-width: 650px;}
}
@media (max-width:450px) {
  .wrap {
    margin-top: 0.5rem;
  }
.panel{
  padding: 10px;
}
.col{
  max-width: 100%;
}

article{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}


}