.buehne{background:#d6183f;color:white;font-size:20px;margin:0px auto;text-align:center;padding:20px;margin-bottom:20px}

.raumplan{width: 815px;
  margin: 0px auto;
  padding: 30px 40px 5px 40px;
background: #ffffff42;
background: url("images/sitzplan_bg.png") #393939;
}
/* 
   Grundstruktur für die gesamten „seatblocks“,
   also Container, die mehrere seatblock-Spalten/Zeilen enthalten.
*/
.seatblocks {
	display: flex;        /* Flex-Layout, damit Blöcke nebeneinander oder untereinander stehen */
	flex-wrap: wrap;      /* Mehrere Zeilen, wenn nicht genug Platz pro Zeile */
	margin-bottom: 47px;  /* Abstand nach unten */
	justify-content: flex-start; /* Ausrichtung der Blöcke */
	/*! max-width: 781px; */
  }
  
  /*
	Jedes seatblock ist eine einzelne Spalte oder Reihe von Sitzplätzen.
	Du kannst hier z. B. Abstände festlegen.
  */
  .seatblock {
	/*! margin-right: 20px; */   /* Abstand rechts zwischen Blöcken */
	/*! margin-bottom: 20px; */  /* Abstand nach unten zwischen Blöcken */
  }
  
  /* 
	Wenn du einen Block vertikal ausrichten willst,
	füge in der HTML-Struktur z. B. class="seatblock seatblock--vertical" hinzu
  */
  .seatblock--vertical {
	display: flex;
	flex-direction: column; /* Buttons untereinander */
  }
  
  /*
	Für horizontale Anordnung (eine Reihe von Buttons).
	Z. B. class="seatblock seatblock--horizontal"
  */
  .seatblock--horizontal {
	display: flex;
	flex-direction: row;   /* Buttons nebeneinander */
  }
  

.seatblocks-bottom{margin-top:40px;margin-left: 44px;}
.row-top{margin-top:20px;}
.row-bottom {margin-bottom:20px}
  /*
	.seatblock--2rows, .seatrow--left, .seatrow--right usw. kannst du nach Bedarf verwenden,
	falls du besondere Stile für bestimmte Blöcke brauchst.
	
	Hier nur einige Platzhalter-Klassen:
  */
  .seatblock--2rows { /* z. B. spezielles Layout für 2-reihige Blocks */ }
  .seatrow--left  { /* optional, falls du linke Sitzreihe anders stylen willst */ }
  .seatrow--right { /* optional, falls du rechte Sitzreihe anders stylen willst */ margin-right: 113px;}
  
  /* 
	Beispiel für seatblock-Identifikatoren (Block A, B, C ...):
	Wenn du bestimmte Blöcke unterschiedlich stylen willst:
  */
  .btn-success {
    background-color: #28a745;  /* Grün für freie Plätze */
    border-color: #28a745;
    color: #fff;
}

.btn-warning {
    background-color: #ffc107;  /* Gelb/Orange für vorgemerkte Plätze */
    border-color: #ffc107;
    color: #212529;
}

.non-editable{background:red !important;;border:1px solid #d6183f !important;color:white !important;}

.btn-danger {
    background-color: #dc3545;  /* Rot für fest reservierte Plätze */
    border-color: #dc3545;
    color: #fff;
}

.btn-secondary {
    background-color: #6c757d;  /* Grau für deaktivierte Plätze */
    border-color: #6c757d;
    color: #fff;
}

/* Optional: Visuelle Anpassungen für nicht editierbare Buttons */
.non-editable {
    cursor: not-allowed !important;
}


  .btn.seat {
	margin: 3px;           /* kleiner Außenabstand */
	min-width: 41px;       /* damit die Buttons nicht zu schmal werden */
	text-align: center;    
  }
  
  .bggrey {background:#1a1a1a;padding: 29px;margin-bottom: 48px;border: 1px solid #515151;}

  /* Erzwinge, dass das Tooltip immer oberhalb des Elements erscheint */
/* Stil für den gesamten Tooltip */
.ui-tooltip {
    background: #0C0A0A;        /* dunkler Hintergrund */
    color: #fff;             /* weiße Schrift */
    border: 1px solid #ddd;  /* hellgraue Umrandung */
	box-shadow:none!important;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
	transform: translateY(-15px) !important;}


  .btn.seat:hover {
	opacity: 0.85;
  }