/**
 * Förderrechner E-Auto 2026
 * Cleanthinking-Designsystem v2.3 · Pattern ct/foerderrechner
 *
 * Tokens werden global aus :root des Child-Themes gezogen
 * (--paper, --paper-deep, --ink, --muted, --rule, --ct-green,
 *  --ct-green-deep, --ct-error, --ct-focus-ring,
 *  --space-2xs … --space-xl).
 *
 * Schriften (Instrument Serif, Inter Tight, JetBrains Mono) werden
 * vom Child-Theme lokal eingebunden (Kap. 8.3 Punkt 1).
 */

.ct-calc{
  background:var(--paper-deep);
  border-top:4px solid var(--ct-green);
  padding:var(--space-l) var(--space-l) var(--space-xl);
  font-family:'Inter Tight',sans-serif;
  color:var(--ink);
  position:relative;
}
.ct-calc *{box-sizing:border-box}

.ct-calc__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:.8125rem;
  color:var(--ct-green-deep);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 var(--space-m);
}
.ct-calc__eyebrow::before{
  content:""; width:32px; height:2px; background:var(--ct-green-deep);
}
.ct-calc__title{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(1.875rem,3.4vw,2.625rem);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0 0 var(--space-s);
  color:var(--ink);
  text-wrap:balance;
}
.ct-calc__title em{
  font-style:italic;
  color:var(--ct-green);
  font-weight:400;
}
.ct-calc__lead{
  font-size:1.0625rem;
  line-height:1.55;
  margin:0 0 var(--space-l);
  color:var(--ink);
  max-width:54ch;
}
.ct-calc__lead strong{
  font-weight:600;
  color:var(--ink);
}

/* Form */
.ct-calc__field{margin:0 0 var(--space-m)}
.ct-calc__label{
  display:block;
  font-family:'Inter Tight',sans-serif;
  font-weight:600;
  font-size:.9375rem;
  color:var(--ink);
  margin-bottom:var(--space-2xs);
}
.ct-calc__hint{
  font-family:'Inter Tight',sans-serif;
  font-size:.8125rem;
  color:var(--muted);
  margin:0 0 var(--space-xs);
  line-height:1.4;
}

/* Segmented control (Fahrzeugtyp) */
.ct-seg{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--space-2xs);
}
.ct-seg__btn{
  appearance:none;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--rule);
  padding:14px 10px;
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:.9375rem;
  cursor:pointer;
  transition:border-color 120ms, background 120ms, color 120ms;
  text-align:center;
  line-height:1.25;
  border-radius:0;
}
.ct-seg__btn small{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-weight:500;
  font-size:.6875rem;
  color:var(--muted);
  margin-top:2px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ct-seg__btn:hover{border-color:var(--ink)}
.ct-seg__btn:focus-visible{
  outline:3px solid var(--ct-focus-ring);
  outline-offset:2px;
}
.ct-seg__btn[aria-pressed="true"]{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.ct-seg__btn[aria-pressed="true"] small{color:rgba(247,246,242,.6)}

/* Selects */
.ct-calc .ct-select{
  width:100%;
  padding:12px 40px 12px 14px !important;
  font-family:'Inter Tight',sans-serif !important;
  font-size:15px !important;
  line-height:1.5 !important;
  height:auto !important;
  min-height:48px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%230A0A0A' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  cursor:pointer;
  transition:border-color 120ms;
}
.ct-calc .ct-select:hover{border-color:var(--ink)}
.ct-calc .ct-select:focus{
  outline:none;
  border-color:var(--ct-green-deep);
  box-shadow:0 0 0 2px rgba(0,107,77,.2);
}

/* Primary CTA */
.ct-calc__cta{
  display:block;
  width:100%;
  padding:16px 24px;
  background:var(--ink);
  color:var(--paper);
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:2px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  margin-top:var(--space-m);
  transition:background 150ms, border-color 150ms, color 150ms;
}
.ct-calc__cta:hover{
  background:var(--ct-green-deep);
  border-color:var(--ct-green-deep);
}
.ct-calc__cta:focus-visible{
  outline:3px solid var(--ct-focus-ring);
  outline-offset:2px;
}
.ct-calc__cta[aria-pressed="true"]{
  background:var(--paper);
  color:var(--ink);
}
.ct-calc__cta[aria-pressed="true"]:hover{
  background:var(--ct-green-deep);
  color:var(--paper);
}

.ct-calc__meta{
  margin:var(--space-m) 0 0;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ct-calc__meta span{margin:0 .6em}

/* Result panel */
.ct-result{
  margin-top:var(--space-l);
  background:transparent;
  border-top:2px solid var(--ink);
  padding:var(--space-l) 0 var(--space-m);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 280ms ease, transform 280ms ease;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
}
.ct-result.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  max-height:2000px;
}
.ct-result__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:.8125rem;
  color:var(--ct-green-deep);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 var(--space-xs);
}
.ct-result__eyebrow::before{
  content:""; width:32px; height:2px; background:var(--ct-green-deep);
}
.ct-result__amount{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(3rem,8vw,6rem);
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0 0 var(--space-2xs);
  display:flex;
  align-items:baseline;
  gap:.15em;
  font-variant-numeric:tabular-nums;
}
.ct-result__amount .unit{
  font-size:.5em;
  color:var(--muted);
  font-style:italic;
}
.ct-result__caption{
  font-family:'Inter Tight',sans-serif;
  font-size:1rem;
  color:var(--muted);
  margin:0 0 var(--space-l);
}
.ct-result__caption strong{
  color:var(--ink);
  font-weight:600;
}

/* Breakdown table */
.ct-breakdown{
  width:100%;
  border-collapse:collapse;
  font-family:'Inter Tight',sans-serif;
  font-size:.9375rem;
  margin:0 0 var(--space-m);
  font-variant-numeric:tabular-nums;
}
.ct-breakdown caption{
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  font-weight:500;
  color:var(--ct-green-deep);
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:0 0 var(--space-2xs);
  border-bottom:2px solid var(--ink);
  margin-bottom:var(--space-xs);
}
.ct-breakdown td{
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.ct-breakdown td:last-child{
  text-align:right;
  font-weight:500;
  white-space:nowrap;
  padding-left:var(--space-s);
}
.ct-breakdown tr.is-zero td{color:var(--muted)}
.ct-breakdown tr.total td{
  border-bottom:none;
  border-top:2px solid var(--ink);
  padding-top:14px;
  font-weight:700;
  font-size:1rem;
}

/* No-funding state */
.ct-result.is-zero .ct-result__amount{color:var(--muted)}
.ct-result.is-zero .ct-result__amount .unit{color:var(--muted)}

.ct-noteline{
  font-family:'Inter Tight',sans-serif;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 var(--space-s);
  padding:var(--space-s) var(--space-s);
  background:var(--paper);
  border-left:3px solid var(--ct-error);
}
.ct-result.is-zero .ct-noteline{border-left-color:var(--ct-error)}
.ct-result:not(.is-zero) .ct-noteline{border-left-color:var(--ct-green-deep)}

/* Methodology / sources */
.ct-method{
  margin-top:var(--space-l);
  padding-top:var(--space-m);
  border-top:1px solid var(--rule);
}
.ct-method summary{
  cursor:pointer;
  list-style:none;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ct-green-deep);
  border-bottom:2px solid var(--ct-green-deep);
  padding-bottom:2px;
  display:inline-block;
}
.ct-method summary::-webkit-details-marker{display:none}
.ct-method summary::after{
  content:" +";
  font-family:'JetBrains Mono',monospace;
}
.ct-method[open] summary::after{content:" −"}
.ct-method[open] summary{margin-bottom:var(--space-m)}
.ct-method__inner{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink);
}
.ct-method__inner p{margin:0 0 var(--space-s)}
.ct-method__inner ul{
  list-style:none;
  padding:0;
  margin:0 0 var(--space-s);
}
.ct-method__inner ul li{
  position:relative;
  padding-left:1.4em;
  margin-bottom:var(--space-2xs);
}
.ct-method__inner ul li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--ct-green-deep);
  font-weight:600;
}
.ct-method__inner strong{font-weight:600}
.ct-method__sources{
  margin-top:var(--space-m);
  padding-top:var(--space-s);
  border-top:1px solid var(--rule);
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.1em;
  line-height:1.6;
}
.ct-method__sources a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--rule);
  text-underline-offset:3px;
}
.ct-method__sources a:hover{
  color:var(--ct-green-deep);
  text-decoration-color:var(--ct-green-deep);
}

/* Mobile */
@media (max-width:540px){
  .ct-calc{padding:var(--space-m) var(--space-s) var(--space-l)}
  .ct-seg{grid-template-columns:1fr}
  .ct-result{padding:var(--space-m) 0}
}