/* Taxbox Landingpage — Schriften, Basis, Interaktion, Responsive.
   Die Gestaltungsdetails liegen als Inline-Styles in landing.html (Design-
   Canvas-Vorlage); hier nur, was Inline nicht kann: @font-face, :hover,
   Formularzustände und Breakpoints. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #111311;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* --- Interaktive Elemente ------------------------------------------- */

.nav-link { font-size: 13.5px; font-weight: 500; color: #111311; }
.nav-link:hover { color: #0B7A45; }

.btn-primary {
  display: inline-block;
  font-weight: 600;
  background: #0B7A45;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:hover { background: #111311; }
.btn-primary:disabled { background: #737370; cursor: default; }

.btn-outline {
  display: inline-block;
  font-weight: 600;
  border: 1px solid #111311;
  color: #111311;
  background: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
}
.btn-outline:hover { background: #C9E7D5; color: #0B4D2C; }

.demo-panel:hover { background: #EFEFEC; }

.footer-link { font-size: 13px; color: #E5E5E3; }
.footer-link:hover { color: #7FCFA3; }

/* Segmentschalter (Kanzleigröße, Zahlungszeitraum) */
.seg {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  background: #FFFFFF;
  color: #4A4A47;
  border: none;
  border-left: 1px solid #111311;
  cursor: pointer;
}
.seg:first-child { border-left: none; }
.seg:hover { background: #C9E7D5; color: #0B4D2C; }
.seg.aktiv { background: #111311; color: #FFFFFF; }
.seg.zeitraum { padding: 8px 16px; }

/* Formular */
.feld-label {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #737370;
}
.feld {
  border: 1px solid #C9C9C6;
  border-radius: 0;
  height: 38px;
  padding: 0 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: #111311;
  background: #FFFFFF;
}
.feld:focus {
  outline: none;
  border-color: #0B7A45;
  box-shadow: 0 0 0 3px #C9E7D5;
}
.feld::placeholder { color: #A3A3A0; }

/* Honigtopf: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

#anfrage-status.ok { color: #0B4D2C; font-weight: 600; }
#anfrage-status.fehler { color: #B3362B; }

.merkmal { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: #262625; }
.merkmal span { color: #0B7A45; font-weight: 700; }

/* --- Layout-Raster ---------------------------------------------------- */

.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.hero-left {
  padding: 76px 56px 68px 0;
  display: flex; flex-direction: column; gap: 26px;
  border-right: 1px solid #E5E5E3;
}
.hero-right { padding: 76px 0 68px 56px; display: flex; flex-direction: column; gap: 18px; }

.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }

.steps-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.step-cell { border-left: 1px solid #E5E5E3; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.card {
  padding: 26px 26px 30px;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid #E5E5E3;
  border-bottom: 1px solid #E5E5E3;
}
.cards-3 .card:nth-child(3n) { border-right: none; }
.cards-3 .card:nth-child(n+4) { border-bottom: none; }

.kb-panel { display: grid; grid-template-columns: 320px 1fr; }
.kb-intro { border-right: 1px solid #111311; }
.kb-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.kb-cell {
  padding: 17px 22px;
  display: flex; flex-direction: column; gap: 3px;
  border-bottom: 1px solid #E5E5E3;
  border-right: 1px solid #E5E5E3;
}
.kb-grid .kb-cell:nth-child(2n) { border-right: none; }
.kb-grid .kb-cell:nth-child(n+5) { border-bottom: none; }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.price-col {
  padding: 30px 28px 32px;
  display: flex; flex-direction: column; gap: 20px;
  border-right: 1px solid #111311;
}
.price-grid .price-col:last-child { border-right: none; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 960px) {
  .shell { padding-left: 20px; padding-right: 20px; }
  .nav-links { gap: 16px; }
  .nav-links .nav-link, .nav-sep { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 0 36px; border-right: none; border-bottom: 1px solid #E5E5E3; }
  .hero-left h1 { font-size: 38px; }
  .hero-right { padding: 40px 0 48px; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section-head h2 { font-size: 29px; }
  .steps-4 { grid-template-columns: 1fr 1fr; }
  .steps-4 > div:nth-child(odd) { border-left: none; }
  .steps-4 > div:nth-child(n+3) { border-top: 1px solid #E5E5E3; }
  .cards-3 { grid-template-columns: 1fr; }
  .cards-3 .card { border-right: none; border-bottom: 1px solid #E5E5E3; }
  .cards-3 .card:last-child { border-bottom: none; }
  .kb-panel { grid-template-columns: 1fr; }
  .kb-intro { border-right: none; border-bottom: 1px solid #111311; }
  .price-grid { grid-template-columns: 1fr; }
  .price-col { border-right: none; border-bottom: 1px solid #111311; }
  .price-grid .price-col:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}