:root { --green:#bdd624; --dark:#222; --muted:#667; --line:#ddd; --bg:#f7f7f5; --danger:#b00020; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--dark)}
a{color:#154c79;text-decoration:none} a:hover{text-decoration:underline}.topbar{display:flex;gap:18px;align-items:center;background:#1f2933;color:white;padding:12px 24px;position:sticky;top:0;z-index:10}.topbar a{color:white}.topbar .brand{font-weight:800}.topbar .right{margin-left:auto}.container{max-width:1200px;margin:0 auto;padding:24px}.pill{background:var(--green);color:#111;border-radius:999px;padding:2px 8px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.card{background:white;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.04);color:inherit}.card h2{margin-top:0}.statgrid{display:grid;grid-template-columns:1fr auto;gap:6px}.muted{color:var(--muted)}table{width:100%;border-collapse:collapse;background:white;border-radius:12px;overflow:hidden;margin:14px 0}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}th{background:#eef0f0}.cancelled{opacity:.55;text-decoration:line-through}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.button,button{border:1px solid #bbb;background:white;border-radius:9px;padding:9px 12px;cursor:pointer;font:inherit;text-decoration:none;color:#222;display:inline-block}.primary{background:var(--green);border-color:#a8bf1d;font-weight:700}.secondary{background:#f0f0f0}.danger{background:#fff0f0;color:var(--danger);border-color:#e5a2ac}.small{padding:5px 8px}.filters,.inline-form{display:flex;gap:10px;align-items:end;margin:14px 0;flex-wrap:wrap}label{display:block;font-weight:650;margin-top:12px}input,select,textarea{width:100%;padding:9px;border:1px solid #bbb;border-radius:8px;font:inherit;background:white}.filters input{min-width:320px}.panel,.login-card{background:white;border:1px solid var(--line);border-radius:14px;padding:18px;margin:16px 0;max-width:650px}.login-card{max-width:420px;margin:80px auto}.flash{padding:10px 12px;border-radius:10px;margin:8px 0;background:#e8f5e9}.flash.error{background:#ffebee}.flash.success{background:#e8f5e9}.seat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px;align-items:start}.seat-wrap{text-align:center}.seat{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;font-weight:750;border:1px solid #888}.seat.frei{background:#fee770}.seat.selected{background:#96d4ff}.seat.verkauft{background:#c8c8c8}.seat.reserviert{background:#ffd09c}.seat.gesperrt{background:#f2a7a7}.seat.mini{width:18px;height:18px;vertical-align:middle}.seat-wrap form{margin:0}.seat-wrap small{display:block;color:#777;font-size:11px}.legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}.planbox{background:white;border:1px solid var(--line);border-radius:12px;padding:12px;margin:14px 0}.seatplan-img{max-width:100%;height:auto;display:block;margin:12px auto}.price{max-width:120px}.total{font-size:1.4rem;font-weight:800;margin:16px 0}.actions{display:flex;gap:12px;align-items:center;margin-top:20px}.badge{display:inline-block;padding:8px 12px;border-radius:8px}.dangerbadge{background:#ffebee;color:var(--danger);font-weight:800}pre{background:#1f2933;color:#f7f7f7;padding:16px;border-radius:12px;overflow:auto}.smallcards{max-width:500px}.checkout{max-width:760px}@media print{.topbar,.no-print,.actions{display:none!important}.container{max-width:none;padding:0}body{background:white}table{border:1px solid #ccc}.printable{font-size:14px}}@media (max-width:700px){.topbar{flex-wrap:wrap}.topbar .right{margin-left:0}.page-head{display:block}.seat-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}.seat{width:38px;height:38px}}

/* Strukturierter Sitzplan wie PNG */
.original-plan{margin-top:14px}
.hall-scroll{
  overflow-x:auto;
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  margin-top:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.hall-plan{
  --seat-size:28px;
  --seat-gap:4px;
  --table-w:38px;
  min-width:1040px;
  position:relative;
  margin:0 auto;
  padding:0 22px 22px
}
.stage{
  width:330px;
  margin:0 auto 58px;
  background:var(--green);
  text-align:center;
  font-size:1.75rem;
  font-weight:900;
  padding:14px 20px
}
.music{
  position:absolute;
  right:104px;
  top:138px;
  width:112px;
  height:154px;
  background:var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:1.25rem
}
.table-zone{
  display:grid;
  grid-template-columns:180px 180px 180px 180px;
  gap:34px 42px;
  align-items:start
}
.table-zone-top{
  padding-left:58px;
  padding-right:170px
}
.table-zone-bottom{
  padding-left:58px;
  padding-right:170px;
  margin-top:64px
}
.table-stack{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center
}
.plan-table{
  margin:0 0 4px 0
}
.plan-table-v{
  display:grid;
  grid-template-columns:var(--seat-size) var(--seat-size) var(--table-w) var(--seat-size) var(--seat-size);
  grid-auto-rows:var(--seat-size);
  gap:var(--seat-gap);
  align-items:center;
  justify-content:center
}
.seat-pos{
  width:var(--seat-size);
  height:var(--seat-size)
}
.table-label{
  background:#fff;
  border:1px solid #aaa;
  color:#222;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:1.03rem
}
.table-label-v{
  grid-column:3;
  min-height:100%;
  height:100%
}
.plan-table-h{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:5px
}
.table-label-h{
  width:112px;
  height:30px;
  margin-bottom:8px
}
.h-seat-row{
  display:flex;
  gap:10px;
  justify-content:center
}
.seat-form{
  margin:0;
  width:var(--seat-size);
  height:var(--seat-size)
}
.plan-seat{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:var(--seat-size)!important;
  height:var(--seat-size)!important;
  min-width:0!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid rgba(0,0,0,.18)!important;
  font-size:.68rem!important;
  line-height:1!important;
  font-weight:850!important;
  text-decoration:none!important;
  color:#17202a!important;
  box-shadow:0 1px 2px rgba(0,0,0,.08)
}
button.plan-seat:hover,
a.plan-seat:hover{
  transform:scale(1.08);
  text-decoration:none
}
.plan-seat.frei{background:#fee770!important}
.plan-seat.selected{background:#96d4ff!important}
.plan-seat.verkauft{background:#c8c8c8!important;color:#333!important}
.plan-seat.reserviert{background:#ffd09c!important}
.plan-seat.gesperrt{background:#f2a7a7!important}
.plan-seat.missing{background:#eee!important;color:#999!important}

@media (max-width:900px){
  .hall-plan{
    --seat-size:25px;
    min-width:960px
  }
  .table-zone{
    gap:28px
  }
  .music{
    right:82px
  }
}