/* calculator-es-theme.css
   Paleta:
   --primary: #1F2A44 (Tiefblau)
   --secondary: #A9B7C9 (Grau-Blau)
   --accent: #2DBDB6 (Türkis)
   --neutral: #F7F9FB (Soft Weiß)
   Texto: #2B2B2B
*/

:root{
  --primary:#1F2A44;
  --secondary:#A9B7C9;
  --accent:#2DBDB6;
  --neutral:#F7F9FB;
  --text:#2B2B2B;
}

/* Base / Typography
   -------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  color:var(--text);
  background:var(--neutral);
  font-family: Lato, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.1px;
}

h1,h2,h3,h4,h5,h6{
  color:var(--primary);
  font-weight:900;
  line-height:1.2;
  margin:0 0 .5rem 0;
}

p{margin:0 0 .75rem 0; color:#4c5a74;}
small,.text-muted{color:#63728f !important}

/* Container & Card
   -------------------------------------------------- */
.container-calculator{
  width:672px;
  max-width:100%;
  margin:0 auto;
  padding-left:0;
  padding-right:0;
}

.form{
  background:#fff;
  border:1px solid var(--secondary);
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  overflow:hidden;
}

/* Header (Logo-Bereich ohne Bild)
   -------------------------------------------------- */
.form-logo-section{
  border-bottom:1px solid var(--secondary);
  background:#fff;
  padding:8px 0;
}

.form-logo-title{
  padding:16px 24px;
}

.form-logo-title h2{
  font-size:34px;
  line-height:40px;
  color:var(--primary);
  letter-spacing:.2px;
}

.form-logo-title h4{
  font-size:20px;
  line-height:28px;
  font-weight:400;
  color:#4c5a74;
}

/* Form Controls
   -------------------------------------------------- */
label{
  display:block;
  margin-bottom:.35rem;
  font-weight:800;
  color:var(--text);
}

.form-control{
  border:1px solid var(--secondary);
  border-radius:10px;
  padding:.6rem .8rem;
  color:var(--primary);
  font-weight:700;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.form-control::placeholder{color:#8d9ab0}
.form-control:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(45,189,182,.15);
  outline:0;
}
.form-control[readonly]{
  background:#fff;
}

/* Sections / Results
   -------------------------------------------------- */
.bottom{padding:6px 12px 20px}
.bottom h3{margin:14px 0 6px; color:var(--primary)}

.highlight{color:var(--accent); font-weight:900}

/* Utilities
   -------------------------------------------------- */
.divider{height:1px; background:var(--secondary); opacity:.65; margin:8px 0}
.list-unstyled{list-style:none; padding-left:0; margin:0}

/* Grid Fine-Tuning (Bootstrap friendly)
   -------------------------------------------------- */
.row{margin-left:0; margin-right:0; padding:10px}
.col-sm-6{padding-left:10px; padding-right:10px}

/* Buttons (if any added later)
   -------------------------------------------------- */
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
}
.btn-primary:hover, .btn-primary:focus{
  background:#182236;
  border-color:#182236;
}
.btn-accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#083b39;
  font-weight:800;
}
.btn-accent:hover, .btn-accent:focus{
  background:#21a9a3;
  border-color:#21a9a3;
  color:#062e2c;
}

/* Accessibility & States
   -------------------------------------------------- */
:focus-visible{outline:2px dashed var(--accent); outline-offset:2px}
select.form-control{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--secondary) 50%), linear-gradient(135deg, var(--secondary) 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 20px) calc(1.2em), calc(100% - 15px) calc(1.2em), 100% 0;
  background-size:5px 5px,5px 5px,2.5em 2.5em;
  background-repeat:no-repeat;
}

/* Responsive
   -------------------------------------------------- */
@media (max-width: 640px){
  body{padding:16px}
  .form-logo-title{padding:14px 16px; text-align:center}
  .form-logo-title h2{font-size:26px; line-height:32px}
  .form-logo-title h4{font-size:18px; line-height:24px}
  label{font-size:15px}
}

/* Print (falls Nutzer PDF erzeugen möchte)
   -------------------------------------------------- */
@media print{
  body{background:#fff}
  .form{box-shadow:none; border-color:#ccc}
  .form-logo-section{border-bottom:1px solid #ccc}
}