html {
    font-family: 'Crimson', sans-serif;
    font-size: 100%;
 }
 
 body {
     word-wrap: break-word;
     position: relative;
     text-align: left;
     background: transparent;
 }
 
 p {
     margin: 0 0 10px 0;
 }
 
 p#klein {
     font-size: 70%;
     max-width: 30em;
     margin: 2em 0 2em 0;
 }
 
 img {
     max-width: 100%;
     height: auto;
     vertical-align: middle;
     border: 0;
     box-sizing: border-box;
     margin: 5px 80% 10px 0;
 }
 
 #info {
     width: 22px;
     height: auto;
     vertical-align: middle;
     border: 0;
     margin: 0;
 }
 
 #Nettoinfo {
     cursor: pointer;
 }
 
 #calc {
     width: 24em;
     text-align: center;
     padding: 0.5em;
     background: #88AD2C;
     border-radius: 0.5em;
     margin: 1em; /* Rand um das gesamte Formular hinzufügen */
 }
 
 #calc output {
     display: block;
     height: 2.0em;
     background: white;
     text-align: right;
     font-size: 150%;
     padding-right: 5%;
     margin: 5px 5% 0 5%;
 }
 
 #calc fieldset {
     border: none;
     margin: 0.5em 3% auto;
     padding-bottom: 0;
 }
 
 /* Anpassung für Button-Text-Zentrierung und Spaltenlayout */
 #calc_fs {
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* Stellt sicher, dass es 4 Spalten gibt */
     gap: 0.5em; /* Abstand zwischen den Buttons */
 }
 
 #calc_fs button {
     cursor: pointer;
     text-align: center;
     width: 100%; /* Lässt den Button die gesamte Spaltenbreite einnehmen */
     height: 2.5em;
     font-size: 1em; /* Schriftgröße normalisieren */
     line-height: normal; /* Normale Textzeilenhöhe */
     display: flex;
     justify-content: center;
     align-items: center; /* Vertikale Zentrierung des Textes */
     padding: 0;
 }
 
 #breit {
     grid-column: span 2; /* Sorgt dafür, dass dieser Button zwei Spalten einnimmt */
 }
 
 #mittel, #zahl {
     width: 100%;
 }
 
 /* Anpassungen für die vergrößerten Ausgabefelder (Kind, Einkommen, Monatsbeitrag) */
 #anza output, #eink output {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 2.5em;
     padding: 0;
     text-align: center;
     font-size: 1.5em; /* Schriftgröße für diese Felder vergrößern */
     margin: 10px 5%; /* Rand hinzufügen, damit die Felder nicht den Rand berühren */
     background-color: white;
     box-sizing: border-box;
 }
 
 #erge output {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 2.5em;
     padding: 0;
     text-align: center;
     font-size: 1.5em; /* Schriftgröße für Monatsbeitrag vergrößern */
     margin: 10px 5%; /* Rand hinzufügen, damit das Feld nicht den Rand berührt */
     background-color: yellow; /* Gelbe Hintergrundfarbe für den Monatsbeitrag */
     box-sizing: border-box;
 }
 
 /* Normale Schriftgrößen für die übrigen Felder */
 #fd_b output, #sol_b output, #proz output {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 2.5em;
     padding: 0;
     text-align: center;
     font-size: 1em; /* Normale Schriftgröße für diese Felder */
     margin: 10px 5%; /* Rand hinzufügen, damit die Felder nicht den Rand berühren */
     background-color: lightyellow; /* Gleiche Hintergrundfarbe für beide Felder */
 }
 
 /* Tooltip */
 .tooltip {
     position: relative;
     display: inline-block;
     border-bottom: 0px dotted blue;
 }
 
 .tooltip .tooltiptext {
     visibility: hidden;
     width: 22em;
     background-color: #eee;
     color: #000;
     text-align: center;
     border-radius: 0.5em;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     top: -20%;
     left: 105%;
     opacity: 0;
     transition: opacity 0.3s;
 }
 
 .tooltip .tooltiptext::after {
     content: "";
     position: absolute;
     top: 30%;
     left: 0%;
     margin-left: -10px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent #eee transparent transparent;
 }
 
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }
 
 /* Overlay-Fenster */
 .overlay {
     border-radius: 0.3em;
     border: 1px solid;
     margin: 0.5em;
 }
 
 #ok, #schliessen {
     font-size: 1em;
     background: #666;
     border: 1px solid #333;
     color: white;
     cursor: pointer;
 }
 
 .overlayHidden {
     display: none;
 }
 
 .overlay {
     text-align: left;
     max-width: 40em;
     width: 90%;
     background: #fffbf0;
     border: 1px solid #e7c157;
     position: absolute;
     top: 5%;
     right: 0%;
     margin: auto;
     padding: 1em;
 }
 
 #schliessen {
     padding: 0.5rem;
     margin: 0.5em 0;
     position: absolute;
     margin: auto;
     right: 0;
     top: 0;
     color: white;
     font: bold 0/0 sans-serif;
     border: none;
     background: none;
 }
 
 #schliessen::before {
     content: "❒";
     font: normal 0.8rem system-ui;
     filter: grayscale(1);
     border: none;
     background: none;
 }
 

 /* === Beitragsrechner – neue Klassen/IDs (Drop-in Override) === */

/* Gemeinsame Button-Basis wie vorher (#zahl/#mittel/#breit) */
#calc.fee-calc button,
#calc.fee-calc .btn-num,
#calc.fee-calc .btn-mid,
#calc.fee-calc .btn-wide,
#calc.fee-calc .btn-back,
#calc.fee-calc .btn-clear {
  cursor: pointer;
  text-align: center;
  width: 100%;
  height: 2.5em;
  font-size: 1em;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* Feldsätze (ersetzt #calc_fs) */
#calc.fee-calc fieldset {
  border: none;
  margin: 0.5em 3% auto;
  padding-bottom: 0;
}

/* Kinder +/- (vorher 2 Buttons mit #breit) */
#calc.fee-calc .kids-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}

/* Einkommen-Step-Buttons (vorher #calc_fs + #breit -> 2 pro Zeile) */
#calc.fee-calc .income-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}
#calc.fee-calc .income-steps .btn-wide { 
  grid-column: span 2; /* wie früher #breit */
}

/* Tastenfeld (vorher #calc_fs mit 4 Spalten) */
#calc.fee-calc .pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}

/* Ausgaben – groß zentriert (ersetzt #anza output, #eink output) */
#kidsOut,
#incomeOut {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding: 0;
  text-align: center;
  font-size: 1.5em;
  margin: 10px 5%;
  background-color: #fff;
  box-sizing: border-box;
}

/* Monatsbeitrag prominent (ersetzt #erge output) */
#sumOut {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding: 0;
  text-align: center;
  font-size: 1.5em;
  margin: 10px 5%;
  background-color: yellow;
  box-sizing: border-box;
}

/* Restliche Ausgaben (ersetzt #fd_b output, #sol_b output, #proz output) */
#famOut,
#solOut,
#pctOut {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding: 0;
  text-align: center;
  font-size: 1em;
  margin: 10px 5%;
  background-color: lightyellow;
}

/* Optional: Gesamtbreite/Look des Formulars wie vorher */
#calc.fee-calc {
  width: 24em;
  text-align: center;
  padding: 0.5em;
  background: #88AD2C;
  border-radius: 0.5em;
  margin: 1em;
}

/* Optional: Info-Label klickbar lassen (wie gehabt) */
#Nettoinfo { cursor: pointer; }