:root {
  --blue: #506ba0;
  --bluelight: color-mix(in srgb, #506ba0, white 90%);
}

body {
	font-family: system-ui, Arial, sans-serif;
	background: var(--bluelight);
}

body.dragging {
  user-select: none;
}

*, *::before, *::after {
  box-sizing: border-box;
}


/* Dropzone-Bereiche, in die gezogen werden kann */
.dropzone {
  min-height:50px;
  border: 1px solid #bbb;
  border-radius:6px;
	margin:3px;
  /*padding:10px 5px;*/
	background: #1;
  background:#DDD;
  transition:all .15s ease;
}

.dropzone.active {
	border: 2px dashed red;
  background:#eef4ff;
}

/* enthält alle zu draggenden Elemente */
.pool {
  margin-top:20px;
  padding:10px;
	margin-bottom: 10px;
  background: var(--blue);
}

.kat-item,
.fas-item {
  display:inline-block;
  padding:2px 15px;
	font-size: smaller;
  margin:2px;
  background:#e8e8ff;
	border: 1px solid #33F;
  border-radius:4px;
  cursor:grab;
  user-select:none;
}

.kat-item:hover,
.fas-item:hover,
.lt-item:hover {
  background:#d0d0ff;
}

.lt-item {
  display:inline-block;
  /*padding:2px 4px;*/
  margin: 3px;
  background:#e8e8ff;
  border-radius:4px;
  cursor:grab;
  user-select:none;
}

.lt-drop {
  min-width: 120px;
  min-height: 20px;
  margin: 0 3px;
	line-height: 1; 
}

.lt-drop .lt-item {
  margin: 0;
  padding: 0 3px;
  min-width: 120px;
  height: 100%;
	line-height: 1;
  display: flex;
  align-items: center;
}

#lt-text {
  line-height: 1.5;
  margin-bottom: 20px;
}

#lt-text > div {
  display: inline-block;
  vertical-align: middle;
	margin: 0 1.8px;
}


.kat-zone { 
	border: 2px solid var(--blue);
	border-radius: 8px;
  margin-bottom:20px;
}

.kat-label {
  font-weight:bold;
  margin-bottom:5px;
}

.kat-drop, .fas-drop {
	display: flex;
	align-items: center;
} 


.fas-row {
  margin-bottom:18px;
}

.fas-text {
  margin-bottom:5px;
}

.sel-row {
  margin-bottom:14px;
}

.sel-bsp {
  margin-bottom:5px;
}

select {
  padding:4px;
  font-size:14px;
}

.mcopt {
	border: 1px solid #506ba0;
	border-radius: 8px; 
	padding: 8px;
	margin-bottom: 5px;
}

.mctext {
	margin-left: 5px;
}


/* --- Transkription --- */
.trans-wrap{
 display:flex;
 gap:20px;
 margin-bottom:15px;
}

.trans-text{
 font-family:monospace;
}

.trans-area textarea{
 font-family:monospace;
 width:100%;
}

.symbolBox{
 margin:10px 0;
}

.sym{
 display:inline-block;
 padding:4px 6px;
 margin:2px;
 border:1px solid #ccc;
 cursor:pointer;
}

.sym:hover{
 background:#eee;
}

.levTable{
 border-collapse:collapse;
 margin-bottom:15px;
 font-family:monospace;
}

.levTable td{
 padding:3px 5px;
 text-align:center;
}

.levMuster{
 background:#eef2ff;
}

.levMid{
 font-weight:bold;
}

/* --- Check-Button ---*/
#check {
	  /* Kleinere Größe */
	  padding: 6px 14px;
	  font-size: 13px;
	  font-weight: 600;
  
	  /* Hellerer Hintergrund */
	  background-color: #8fa3d0;
	  color: #FFF;
	  border: none;
	  outline: none;
	  cursor: pointer;
  
	  /* Sichtbare Ränder für 3D-Effekt */
	  border-top: 3px solid #b3c4e8;      /* Sehr hell oben */
	  border-bottom: 3px solid #6b85b8;   /* Mittel dunkel unten */
	  border-left: 3px solid #7a92c7;     /* Mittel links */
	  border-right: 3px solid #7a92c7;    /* Mittel rechts */
  
	  border-radius: 6px;
  
	  /* Längere Transition für bessere Wahrnehmung */
	  transition: all 0.2s ease-out;
  
	  position: relative;
	  top: 0;
	}

	/* Hover - Ränder werden deutlicher */
	#check:hover {
	  border-top-color: #cddbf5;
	  border-bottom-color: #5a75a8;
	  background-color: #9bb0d8;
	}

	/* Active/Pressed - Deutlicherer Effekt */
	#check:active {
	  /* Ränder tauschen Farben deutlich */
	  border-top-color: #6b85b8;
	  border-bottom-color: #b3c4e8;
  
	  /* Deutlichere Verschiebung nach unten */
	  top: 2px;
  
	  /* Hintergrund etwas dunkler */
	  background-color: #7a92c7;
  
	  /* Optional: Schatten reduzieren */
	  box-shadow: none;
	}

	/* Fokus für Tastatur-Nutzer */
	#check:focus {
	  outline: 2px solid #506ba0;
	  outline-offset: 2px;
	}

/* --- Score-Balken --- */
.scorebar {
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;

  background:linear-gradient(
    to right,
    #ff534f 0%,
    #f0ad4e 45%,
    #33CC33 100%
  );
}

.scorebar-cover {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background: var(--bluelight);

  transition:left 0.8s ease;

  /* Kreis aus dem Deckbalken ausschneiden */
  -webkit-mask-image: radial-gradient(circle at left center,
      transparent 12px,
      black 13px);

  mask-image: radial-gradient(circle at left center,
      transparent 12px,
      black 13px);
}

/* --- Canvas für Baumstruktur --- */
#app {
	margin-top: 20px;
	margin-bottom: 5px;
}


#app #toolbar {
	width: 794px;
	background: #6b85b8;
	padding-left: 10px;
	border-radius: 8px;
}


#app #toolbar button {
    padding: 6px 12px;
    border: 1px solid #888;
    background: #f5f5f5;
		border-radius: 8px;
    transition: background 0.2s, border-color 0.2s;
}

/* Hover */
#app #toolbar button:hover {
    cursor: pointer;
    background: #e0e0e0;
}

/* Aktiver Modus */
#app #toolbar button.active {
    background: #ED3;
    color: #222;
    border-color: #EEDD33;
}

/* Klick-Feedback */
#app #toolbar button:active {
    transform: scale(0.97);
}

canvas {
  width: 800px;
  height: 500px;
  border: 1px solid #222;
  display: block;
	background: #EFE;
	border-radius: 8px;
}