body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.calculator {
  position: relative;
  width: 400px;
  padding: 20px;
  background: #2c2f33;
  border: 4px solid #23272a;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.calculator-display {
  width: 100%;
  margin-bottom: 15px;
  font-size: 2rem;
  text-align: right;
  color: #ffffff;
  background: #23272a;
  padding: 12px;
  min-height: 3rem;
  border-radius: 5px;
  max-width: 100%;       
  overflow: hidden;      
  box-sizing: border-box;
}
.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(60px, auto);
  gap: 12px;
}
.calculator-buttons .cs-btn {
  font-size: 1.5rem;
  padding: 18px 0;
  border-radius: 5px;
}
.cs-btn--double {
  grid-column: span 2;
}
#ProzentDisplay {
  display: flex;               
  justify-content: center;     
  align-items: center;         
  min-height: 3rem;            
  background: #23272a;
  border-radius: 5px;
  margin-bottom: 15px;
  color: white;
}
.weahrungselect{
    font-size: 1.2rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}
.prozentselect {
  font-size: 1.2rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}
/*input pfeile loswerden*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  appearance: none;         /* Standard */
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: none;           /* Standard */
}
/* ProzentDisplay: Flex-Container für Inhalt */
#ProzentDisplay .input {
  display: flex;
  gap: 10px;           
  width: 100%;
  box-sizing: border-box; 
}
/* Gemeinsamer Stil für Inputs */
#ProzentDisplay .cs-input {
  flex: 1;
  min-width: 0;        
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 4px;
  border: none;
  background: #2c2f33;
  color: white;
  box-sizing: border-box;
}
/* Select-Stil */
#ProzentDisplay .prozentselect {
  flex: 1;
  min-width: 0;
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 4px;
  border: none;
  background: #2c2f33;
  color: white;
  box-sizing: border-box;
}
/* Zustand: beide Displays aktiv und verschmolzen */
.calculator-display.merged {
  border: none;           
  margin: 0;              
  border-radius: 0;       
}

/* linkes Segment: linke Ecken abrunden */
#display.merged {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* rechtes Segment: rechte Ecken abrunden */
#display2.merged {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.home-button .cs-btn {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
}