/* ========= Farben im Stil von individualbesteuerung.ch ========= */
:root{
  --ib-text:    #29235C;       /* Haupttext, Labels third */
  --ib-label:     #c2cf38;     /* Labels first */ 
  --ib-label-alt: #818b27;     /* Labels second */
  --ib-border:  #E0E6EA;       /* Linien/Border */
  --ib-bg:      #ffffff;       /* viel Weissraum */
  --ib-surface: #FAFBFC;       /* helle Flächen */
  --ib-grey-light: #F5F7F9;    /* Erläuterung Infobox */
  
  /* Button */
  --ib-dunkelblau: #29235C; 
  --ib-dunkelblau-hover: #3a336c; 
  
  /* Abbildungen: Säulen */
  --ib-blau: #DBF2FF;
  --ib-rosa: #daa6b9;
  --ib-gelb: #FFEACA;
  --ib-gruen: #E3EDC6;



}

/* Google Font Cairo einbinden */
@font-face {
  font-family: 'Cairo';  
  src: url("ttf/cairo-v30-latin-regular.woff2") format("woff");
  
}
@font-face {
  font-family: 'Cairo 700';  
  font-weight: 700;
  src: url("ttf/cairo-v30-latin-700.woff2") format("woff");
  
}

/* Reset/Basis – unverändert ausser Farben */
*{ box-sizing: border-box; margin:0; padding:0; }

html, body{ height:100%; }

body{
  font-family: "Cairo", sans-serif; /* sans-serif als Fallback */
  background-color: var(--ib-bg);
  color: var(--ib-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 24px;
}

/* Container */
.container{
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  padding: 0px;   
}

/* Headlines */
h1, h2, h3{ 
  font-family: "Cairo 700", sans-serif;
  /*font-weight: 600; */
  color: var(--ib-text); 
  /*letter-spacing: .2px; */
  margin-top: 16px;
}

h1{
  text-align: left;
  font-size: 1.75rem;
  margin-bottom: 20px;
  border-left: 6px solid var(--ib-text);
  padding-left: 12px;
}

/* Formulare */
.form-group{ margin-bottom: 18px; }

label{
  display:block; 
  margin-top:3px;
  margin-bottom:6px; 
  color: var(--ib-text); 
  /*font-size: .95rem;*/
  text-wrap: nowrap;
}

label[first]{
  color: var(--ib-label);
}

label[second]{
  color: var(--ib-rosa);
}

h3[first]{
  color: var(--ib-label);
}

h3[second]{
  color: var(--ib-rosa);
}


input, select{
  width:100%; 
  padding:10px 12px; 
  font-size:16px; 
  background:#fff;
  border:1px solid var(--ib-border); 
  border-radius:6px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus, select:focus{
  outline:none; 
  border-color: var(--ib-text);
  /*box-shadow: 0 0 0 3px rgba(0,166,166,.18);*/
}

/* Radio-Optionen */
.radio-options{ 
  display:flex; 
  gap:14px; 
  margin-top:6px; 
  flex-wrap:wrap; 
}
.radio-options label{ 
  display:flex; 
  align-items:center; 
  gap:8px; 
  margin:0; 
  font-weight:500; 
  color:var(--ib-text); 
}

/* Checkbox (alleinerziehend) */
.checkbox input {
  width: 10%;
  margin-right: 8px; 
  transition: border-color 120ms ease, box-shadow 120ms ease;
  
}
.checkbox b { 
  font-size: 0.95rem;
  font-weight:600; 
  color:var(--ib-muted); 
}

/* Berechnen-Button – Primär in Türkis, Akzent-Variante optional */
button{
  background-color: var(--ib-dunkelblau);
  color:#fff; 
  border:none; 
  padding:12px 20px; 
  border-radius:6px;
  cursor:pointer; 
  font-size:16px; 
  width:100%; 
  margin-top:12px;
  transition: background-color 120ms ease, transform 80ms ease;
}
button:hover{ background-color: var(--ib-dunkelblau-hover); }
button:active{ transform: translateY(1px); }
button:disabled{ background:#cbd3da; cursor:not-allowed; }

/* Links  */
a{ color: var(--ib-dunkelblau);  }
a:visited{ color: var(--ib-dunkelblau);  }
a:hover{ text-decoration: underline; }

/* Resultate/Charts */
.hidden{ display:none; }

#results{ 
  margin-top:36px; 
  padding-top:18px; 
  border-top:1px solid var(--ib-border); 
}

.result-container{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:24px; 
  margin-top:16px; 
}
.result-text{ flex:1; min-width:260px; }

.result-item{
  display:flex; 
  justify-content:space-between; 
  align-items:baseline;
  padding:10px 0; 
  border-bottom:1px solid #ECEFF3; 
  font-size:.98rem;
}
.result-item span:first-child{ color: var(--ib-text); }
.result-item.total{
  font-weight:700; 
  font-size:1.12rem; 
  margin-top:10px;
  border-top:2px solid var(--ib-border); border-bottom:none; 
  padding-top:14px;
  color: var(--ib-text);
}

/* Chart-Container */
.chart-container{
  flex:2; 
  min-width:320px; height:320px;
  background: var(--ib-surface);
  border:1px solid var(--ib-border);  border-radius:6px; 
  padding:12px;
}

/* Infobox für Ergebnisbeschreibung */
.info-box{
  background: #F0F6F7; 
  border-left: 4px solid var(--ib-text); border-radius:4px;
  padding:12px 16px; 
  margin-top:24px; 
  color: var(--ib-text); 
  font-size:.95rem;
  
}

/* Infobox für Erläuterungen */
.info-box-desc {
  background: var(--ib-grey-light); 
  border-left: 4px solid var(--ib-text); border-radius:4px;
  
  padding:12px 16px; 
  margin-top:24px; 
  color: var(--ib-text); 
  font-size:.9rem; /* kleinere Schrift */
}

.info-box-desc ul { 
  padding-left:16px; /* relativ */
  
}

.info-box-desc ul ul {
  padding-left: 16px;
  margin-top: 0;
  padding-top: 0;
}

#toggle-info-box{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font-size:1.0rem;
  font-weight:bold;
  color:var(--ib-text);
  cursor:pointer;
  text-align:left;
  width:100%;
  display:block;
}

/* Responsive */
@media (max-width: 768px){
  .container{ padding:20px; }
  .result-container{ flex-direction: column; }
  .chart-container{ width:100%; height:280px; }
}