/* ==========================================================================
   Brutto-Netto-Calculator — design layer
   Loaded AFTER tw.css. Same specificity, later in the cascade, so these
   redefine what the existing utility classes mean. No markup churn required.
   Reference: the German Lohnabrechnung — ruled, tabular, figures that align.
   ========================================================================== */

:root {
  --paper:      #ffffff;
  --paper-2:    #f4f5f7;
  --paper-3:    #eceef1;
  --ink:        #0b0e11;
  --ink-2:      #565d66;
  --ink-3:      #61686f;
  --rule:       #e2e5e9;
  --rule-firm:  #c9ced5;
  --accent:     #1a4de0;
  --accent-dark:#1239a8;
  --accent-wash:#eef2ff;
  --net:        #0f7a4a;
  --net-bright: #34d399;
  --net-wash:   #ecf7f1;
  --deduct:     #b3261e;
  --panel:      #0b0e11;
  --panel-2:    #171b20;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Foundations ---------------------------------------------- */

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: #fff; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Money and any figure the reader compares down a column. */
.tabular,
#rBrutto, #rNetto, #rAbzugPct,
#dBrutto, #dLohnsteuer, #dSoli, #dKirche, #dRente, #dKV, #dAV, #dPV, #dNetto,
#zusatzLabel, #bruttoInput, #sachbezugInput, #freibetragInput {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

/* ---------- Type scale ------------------------------------------------ */

h1, h2, h3, h4 { letter-spacing: -0.022em; color: var(--ink); }
h1 { font-weight: 650; letter-spacing: -0.032em; }
h2 { font-weight: 620; }
h3, h4 { font-weight: 600; letter-spacing: -0.015em; }

.text-4xl { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); line-height: 1.06; }
.text-3xl { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.15rem); line-height: 1.12; }
.text-2xl { font-size: 1.5rem;  line-height: 1.18; }
.text-xl  { font-size: 1.2rem;  line-height: 1.3; }
.text-lg  { font-size: 1.06rem; line-height: 1.45; }
.md\:text-5xl, .lg\:text-6xl, .md\:text-4xl { font-size: inherit; line-height: inherit; }

p, li { color: var(--ink-2); }
.leading-relaxed { line-height: 1.68; }

/* Section eyebrow: mono, small, uppercase. Labels the section's job. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: .75rem;
}

/* ---------- Re-skin: kill the gradients and navy ---------------------- */

.bg-gradient-to-br, .bg-gradient-to-r { background-image: none; }

.from-blue-900, .to-blue-900, .via-blue-800 { background-color: var(--paper); }
.from-blue-600, .to-blue-800 { background-color: var(--ink); }
.from-gray-100, .to-gray-200 { background-color: var(--paper-2); }
.from-green-600, .to-green-800 { background-color: var(--panel); }

.bg-blue-900 { background-color: var(--panel); }
.bg-blue-800 { background-color: var(--accent); }
.bg-blue-700 { background-color: var(--accent); }
.bg-blue-600, .bg-blue-500 { background-color: var(--accent); }
.bg-gray-50  { background-color: var(--paper-2); }
.bg-gray-100, .bg-gray-200 { background-color: var(--paper-3); }
.bg-blue-50  { background-color: var(--accent-wash); }
.bg-green-50 { background-color: var(--net-wash); }

.text-blue-100, .text-blue-200, .text-blue-300 { color: #9aa2ab; }
.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900 { color: var(--accent); }
.text-gray-500 { color: var(--ink-3); }
.text-gray-600, .text-gray-700 { color: var(--ink-2); }
.text-gray-900 { color: var(--ink); }
.text-green-700, .text-green-800, .text-green-900 { color: var(--net); }
.text-red-600 { color: var(--deduct); }

/* Documents have rules, not drop shadows. */
.shadow-sm, .shadow-md, .shadow-lg { box-shadow: none; }
.rounded-xl  { border-radius: 6px; }
.rounded-lg  { border-radius: 5px; }
.rounded-md  { border-radius: 4px; }
.rounded-t-xl { border-radius: 6px 6px 0 0; }
.border-gray-100, .border-gray-200 { border-color: var(--rule); }
.border-gray-300 { border-color: var(--rule-firm); }
.border-blue-200 { border-color: #c7d3f7; }
.border-green-200 { border-color: #bfe3d1; }

.backdrop-blur-sm { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bg-opacity-10, .bg-opacity-50 { --tw-bg-opacity: 1; }

/* ---------- Header ---------------------------------------------------- */

nav.sticky {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--rule);
}
nav.sticky .text-xl { font-weight: 620; letter-spacing: -.028em; }
nav.sticky .text-xs {
  font-family: var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .625rem;
  color: var(--ink-3);
}
.nav-group > button { color: var(--ink-2); font-weight: 500; }
.nav-group > button:hover { color: var(--ink); background: var(--paper-2); }
.nav-dropdown { border-color: var(--rule); border-radius: 6px; box-shadow: 0 12px 28px -12px rgba(11,14,17,.22); }
.nav-dropdown a:hover { background: var(--accent-wash); color: var(--accent); }

/* ---------- Hero ------------------------------------------------------ */

.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: clamp(2.75rem, 1.5rem + 5vw, 5rem) 0 clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}
.hero h1 { color: var(--ink); max-width: 17ch; }
.hero .hero-deck {
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 56ch;
}
.hero-rule {
  height: 1px; background: var(--rule);
  margin: 1.75rem 0 1.25rem;
}
/* Facts strip: mono labels over the values, like a form header. */
.hero-facts { display: flex; flex-wrap: wrap; gap: 2.25rem; }
.hero-facts dt {
  font-family: var(--font-mono); font-size: .656rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem;
}
.hero-facts dd { font-size: .94rem; font-weight: 550; color: var(--ink); }

/* ---------- Calculator ------------------------------------------------ */

#calculator { background: var(--paper-2); }

#calculator .rounded-xl.border {
  background: var(--paper);
  border: 1px solid var(--rule);
}
/* Input card header: quiet, black, mono label */
#calculator .rounded-t-xl { border-bottom: 1px solid rgba(255,255,255,.12); }
#calculator .rounded-t-xl .text-xl { font-weight: 600; letter-spacing: -.02em; }

label { color: var(--ink); }
input[type="number"], select {
  border-color: var(--rule-firm);
  background: var(--paper);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="number"]:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(26,77,224,.14) !important;
}
input[type="range"] { accent-color: var(--accent); }

/* Period toggle reads as a segmented control */
#btnMonat, #btnJahr {
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase;
}

/* THE SIGNATURE — the result panel inverts. */
#resultsHeader {
  background: var(--panel) !important;
  color: #fff;
  padding: 1.65rem 1.5rem;
  border-radius: 6px 6px 0 0;
}
#resultsHeader > div:first-child {
  font-family: var(--font-mono);
  font-size: .688rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: #8b929b;
}
#resultsHeader > div:last-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--net-bright);
  margin-top: .35rem;
  line-height: 1;
}
#resultsHeader.is-empty > div:last-child { color: #6b7280; }

#rNetto { color: var(--net); font-weight: 600; letter-spacing: -.03em; }
#rBrutto { color: var(--ink); font-weight: 550; }

/* Breakdown reads as a statement: ruled rows, figures right, aligned. */
#resultsContent .border-b { border-color: var(--rule); }
#resultsContent .border-b span:first-child { color: var(--ink-2); font-size: .906rem; }
#resultsContent .border-b span:last-child { font-size: .906rem; }
#dNetto { font-size: 1.06rem; font-weight: 650; color: var(--net); }

#rBar { background: var(--deduct); border-radius: 0; }
.progress-bar { transition: width .45s cubic-bezier(.2,.7,.2,1); }
#resultsContent .bg-gray-200 { background: var(--paper-3); border-radius: 0; }

/* ---------- Content sections ------------------------------------------ */

section { border-top: 1px solid transparent; }
.card, .rounded-xl.border { border-color: var(--rule); }

/* Steuerklassen: roman numerals are how the law names them, so let them lead. */
.steuerklasse-mark {
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid #d7dffb;
  border-radius: 4px;
  padding: .18rem .45rem;
  display: inline-block;
  min-width: 2.4rem; text-align: center;
}

/* Rate tables */
table { font-variant-numeric: tabular-nums; }
thead th {
  font-family: var(--font-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
tbody td:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* FAQ */
.faq-content.open { max-height: 640px; }
#faqList > div { border-color: var(--rule); }
#faqList button:hover { background: var(--paper-2); }
.faq-q { font-family: var(--font-sans); }
.faq-a { color: var(--ink-2); }

/* Buttons */
button.bg-blue-800 { background: var(--accent); font-weight: 550; letter-spacing: -.005em; }
button.bg-blue-800:hover, .hover\:bg-blue-900:hover { background: var(--accent-dark); }
a.bg-white { border: 1px solid var(--rule-firm); }

/* ---------- Footer ---------------------------------------------------- */

footer.bg-blue-900 { background: var(--panel); border-top: 1px solid var(--panel-2); }
footer h3, footer h4 {
  font-family: var(--font-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: #8b929b;
}
footer a { color: #b7bdc5; }
footer a:hover { color: #fff; }
footer .border-t { border-color: #262b31; }
footer .text-xs { color: #7d848d; }

/* ---------- Motion & mobile ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  .hero-facts { gap: 1.25rem 2rem; }
  #resultsHeader { padding: 1.35rem 1.15rem; }
}

/* Tinted callout boxes (gradients are off; give them a flat wash) */
.from-blue-50   { background-color: var(--accent-wash); }
.from-green-50  { background-color: var(--net-wash); }
.from-yellow-50 { background-color: #fdf6e3; }
.from-orange-50 { background-color: #fdf1e7; }
.to-blue-100, .to-yellow-100, .to-orange-100, .to-green-100 { background-color: transparent; }
.border-yellow-200 { border-color: #eddcae; }
.border-orange-200 { border-color: #f0d5bd; }

/* h1 subline: a deck, not a second headline */
.hero h1 { max-width: 20ch; }
.hero h1 span.block {
  display: block;
  font-size: .46em;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink-3);
  margin-top: .55rem;
  line-height: 1.25;
}

/* Section intros align with the hero; centred blocks read as marketing. */
.text-center.mb-12 { text-align: left; }
.text-center.mb-12 > p { margin-left: 0; max-width: 62ch; }
.text-center.mb-12 > h2 { max-width: 24ch; }

/* Section rhythm: a hairline opens each band instead of extra whitespace. */
#calculator, #rechner-uebersicht, #methodik, #faq { border-top: 1px solid var(--rule); }

/* Only the result panel inverts. The input card stays quiet paper. */
#calculator .rounded-t-xl.from-blue-600 {
  background-color: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
#calculator .rounded-t-xl.from-blue-600 .text-blue-100 { color: var(--ink-2); }
#calculator .rounded-t-xl.from-blue-600 svg { color: var(--accent); }
#calculator .rounded-t-xl.from-blue-600 .text-xl {
  font-size: .78rem; font-family: var(--font-mono); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
#calculator .rounded-t-xl.from-blue-600 .text-sm { font-size: .875rem; margin-top: .5rem; color: var(--ink-2); }

/* Deduction cards: six pastel tints was decoration. One card treatment,
   colour reserved for the thing that is actually a deduction. */
#abzuege .rounded-xl {
  background-color: var(--paper);
  border: 1px solid var(--rule);
}
#abzuege .rounded-xl > div:first-child {
  background-color: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
#abzuege .rounded-xl svg { color: var(--deduct); }
#abzuege h3 { font-size: 1rem; }
#abzuege h3::after {
  content: "";
  display: block;
  width: 1.75rem; height: 2px;
  background: var(--deduct);
  margin-top: .5rem; margin-bottom: .15rem;
}

/* Steuerklassen: the law numbers them I–VI, so the numeral leads the row. */
#steuerklassen .rounded-xl { background-color: var(--paper); border: 1px solid var(--rule); }
#steuerklassen h3 { font-size: .97rem; }

/* The h1 subline is a deck, so hold it to body-text contrast. */
.hero h1 span.block { color: var(--ink-2); }

/* Text sitting on a dark or accent surface must not inherit the ink colours. */
.bg-blue-500 h1, .bg-blue-500 h2, .bg-blue-500 h3, .bg-blue-500 h4,
.bg-blue-600 h1, .bg-blue-600 h2, .bg-blue-600 h3, .bg-blue-600 h4,
.bg-blue-700 h1, .bg-blue-700 h2, .bg-blue-700 h3, .bg-blue-700 h4,
.bg-blue-800 h1, .bg-blue-800 h2, .bg-blue-800 h3, .bg-blue-800 h4,
.bg-blue-900 h1, .bg-blue-900 h2, .bg-blue-900 h3, .bg-blue-900 h4 { color: #fff; }

.bg-blue-500 p, .bg-blue-600 p, .bg-blue-700 p, .bg-blue-800 p,
.bg-blue-500 li, .bg-blue-600 li, .bg-blue-700 li, .bg-blue-800 li,
.bg-blue-700 .text-blue-100, .bg-blue-700 .text-blue-200,
.bg-blue-800 .text-blue-100, .bg-blue-800 .text-blue-200 { color: rgba(255,255,255,.9); }

footer p, footer li, footer span { color: #b7bdc5; }
footer .text-xs, footer .border-t p { color: #9aa1a9; }
footer .font-bold, footer strong { color: #fff; }

/* Unit suffixes and hint icons inside fields still need to be readable. */
.text-gray-400 { color: var(--ink-3); }
.text-gray-300 { color: #98a0a8; }