:root{
  /* warmer, "Gitarren"-Look */
  --bg1:#f3efe6;        /* Papier */
  --bg2:#e8dcc8;        /* Sand */
  --card:#fffaf2;       /* warmes Offwhite */
  --ink:#2a221c;        /* dunkles Braun */
  --muted:#6a5a4e;      /* warmes Grau */
  --line:rgba(42,34,28,.14);
  --accent:#b45309;     /* amber/burnt */
  --accent2:#8b5e34;    /* wood */
  --ok:#2f855a;
  --warn:#b45309;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ink);

  /* Papier + leichter Holzton */
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(139,94,52,.22) 0%, rgba(139,94,52,0) 55%),
    radial-gradient(700px 380px at 90% 10%, rgba(180,83,9,.18) 0%, rgba(180,83,9,0) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.wrap{ max-width:980px; margin:0 auto; padding:28px 16px 60px; }

.header{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

h1{ margin:0 0 6px; font-size:28px; letter-spacing:.2px; }
p{ margin:0; color:var(--muted); line-height:1.55; }

.card{
  margin-top:18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius:16px;
  padding:18px;

  /* warmes, weiches Shadow */
  box-shadow: 0 14px 35px rgba(42,34,28,.10);
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:14px;
}

.field{ grid-column: span 12; }
@media(min-width:800px){
  .field.half{ grid-column: span 6; }
  .field.third{ grid-column: span 4; }
}

label{ display:block; font-weight:700; margin:0 0 6px; }
small{ display:block; color:var(--muted); margin-top:6px; }

input, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: #fff;
  color:var(--ink);
  outline:none;
}

input::placeholder{ color: rgba(106,90,78,.75); }

input:focus, select:focus{
  border-color: rgba(180,83,9,.45);
  box-shadow: 0 0 0 4px rgba(180,83,9,.12);
}

/* Checkbox-Gruppen: mehr Platz + wrap-fähig + responsive */
.checks{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(255,255,255,.65);
}

.chk{
  display:flex;
  gap:10px;
  align-items:flex-start;   /* wichtig: lange Labels sauber umbrechen */
  padding:8px 10px;
  border-radius:10px;
  border: 1px solid rgba(42,34,28,.08);
  background: rgba(255,255,255,.7);
}

.chk:hover{
  border-color: rgba(180,83,9,.22);
  background: rgba(255,255,255,.95);
}

.chk input{
  width:auto;
  margin:2px 0 0 0;
  accent-color: var(--accent); /* moderner Browser: Checkbox-Farbe */
}

.chk span{
  white-space: normal;      /* Umbruch erlauben */
  overflow-wrap: anywhere;  /* falls extrem lang */
  line-height: 1.25;
}

/* Buttons / Aktionen */
.actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.btn{
  appearance:none;
  border:0;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  color:#fff;

  /* warmes "Holz"/Amber */
  background: linear-gradient(90deg, var(--accent), #d97706);
  box-shadow: 0 12px 26px rgba(180,83,9,.18);
}

.btn:active{ transform: translateY(1px); }

.note{ font-size:14px; color:var(--muted); }

.alert{
  border-radius:14px;
  padding:12px 14px;
  margin-top:12px;
  border:1px solid rgba(180,83,9,.30);
  background: rgba(180,83,9,.08);
  color: #7c2d12;
}

.ok{
  border:1px solid rgba(47,133,90,.25);
  background: rgba(47,133,90,.08);
  color:#14532d;
}

.footer{ margin-top:18px; color:var(--muted); font-size:13px; }

a{ color:var(--accent2); text-decoration:none; }
a:hover{ text-decoration:underline; }

hr{ border:0; border-top:1px solid rgba(42,34,28,.12); margin:14px 0; }

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(180,83,9,.25);
  color: var(--muted);
  background: rgba(255,255,255,.55);
}

/* Admin-Table */
.tablewrap{ overflow:auto; border:1px solid rgba(42,34,28,.12); border-radius:14px; }
table{ width:100%; border-collapse:collapse; min-width:900px; background:#fff; }
th, td{ padding:10px 10px; border-bottom:1px solid rgba(42,34,28,.10); vertical-align:top; }
th{ text-align:left; color:var(--muted); font-size:13px; font-weight:800; }
tr:hover td{ background: rgba(180,83,9,.04); }

.kpi{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.kpi .tile{
  background: rgba(255,255,255,.65);
  border:1px solid rgba(42,34,28,.12);
  border-radius:14px;
  padding:10px 12px;
}
.kpi .tile b{ display:block; font-size:18px; }
.kpi .tile span{ color:var(--muted); font-size:13px; }