/* Softera — gemeinsame Basis aller Seiten.
   Design-Tokens und Bausteine aus design-preview (index/anfrage/beratung). */

:root {
  /* Farben */
  --papier: #FCFBF8;      /* warmes Fast-Weiß, kein Creme-Beige */
  --karte: #FFFFFF;
  --tinte: #22201C;       /* warmes Fast-Schwarz */
  --grau: #6E6A63;
  --linie: #E7E4DD;
  --kontrolllinie: #918C83; /* Rahmen von Eingabefeldern: >= 3:1 auf Papier und Karte (WCAG 1.4.11); --linie hat nur 1,3:1 */
  --gruen: #177357;       /* der einzige Akzent: „im grünen Bereich" */
  --gruen-dunkel: #0F5A43;
  --gruen-tint: #EDF6F1;

  /* Abstände (design.md) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 20px;

  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

.container {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container--schmal { max-width: 760px; }
@media (min-width: 720px) {
  .container { padding-inline: var(--space-8); }
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gruen-tint); color: var(--gruen-dunkel); }

[hidden] { display: none !important; }

/* ---------- Typo-Bausteine ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grau);
  display: block;
  margin-bottom: var(--space-4);
}

.check {
  width: 15px; height: 15px; flex: none;
  stroke: var(--gruen); stroke-width: 2.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Icon-Set (Pages/Shared/_IconSprite.cshtml, Quelle: graphics/icons/) */
.icon {
  width: 24px; height: 24px; flex: none;
  stroke: var(--tinte); stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  padding: 0.9rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-primary {
  background: var(--gruen);
  color: #fff;
}
.btn-primary:hover { background: var(--gruen-dunkel); transform: translateY(-1px); }
.btn-ghost {
  border: 1px solid var(--linie);
  color: var(--tinte);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--grau); }

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

header {
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
  text-decoration: none;
}
.wordmark img {
  display: block;
  width: 130px;
  height: 30px;
}
.nav-telefon {
  display: inline-grid;
  grid-template-columns: 40px auto 7px;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 5px 10px 5px 5px;
  color: var(--tinte);
  background: var(--gruen-tint);
  border: 1px solid var(--gruen);
  border-radius: var(--radius-s);
  text-decoration: none;
  white-space: nowrap;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.nav-telefon::after {
  content: "";
  width: 7px;
  height: 7px;
  align-self: start;
  margin-top: 6px;
  background: var(--gruen);
  border-radius: 0;
}
.nav-telefon:hover {
  background: var(--karte);
  border-color: var(--gruen-dunkel);
}
.nav-telefon-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--gruen-dunkel);
  background: var(--karte);
  border: 1px solid var(--gruen);
  border-radius: 8px;
}
.nav-telefon-icon .icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}
.nav-telefon-kopie { display: grid; gap: 2px; }
.nav-telefon-label {
  color: var(--gruen-dunkel);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-telefon-nummer {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.nav .btn { padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.nav a.back {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grau);
  text-decoration: none;
}
.nav a.back:hover { color: var(--tinte); }
.nav-beratung-icon,
.nav-zurueck-icon { display: none; }

.nav-rechts {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Sprachumschalter: aktuell DE / EN; UA bleibt im Backend verfügbar. */
.sprachen {
  display: flex;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.sprachen form { display: contents; }
.sprachen button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--grau);
  cursor: pointer;
  padding: 0.5rem;
}
.sprachen button:hover { color: var(--tinte); }
.sprachen button.aktiv {
  color: var(--gruen);
  font-weight: 600;
  border-bottom-color: var(--gruen);
}

@media (max-width: 760px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem auto;
    gap: var(--space-2);
    padding-block: var(--space-2);
  }
  .wordmark { min-width: 0; }
  .wordmark img { width: 112px; height: auto; }
  .nav-telefon {
    width: 2.75rem;
    min-height: 2.75rem;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .nav-telefon::after,
  .nav-telefon-kopie { display: none; }
  .nav-telefon-icon {
    width: 2.625rem;
    height: 2.625rem;
    border: 0;
    background: transparent;
  }
  .nav-rechts {
    min-width: 0;
    gap: var(--space-2);
  }
  .sprachen { gap: 0; }
  .nav-beratung,
  .nav-zurueck {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }
  .nav-beratung-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
  }
  .nav-zurueck-icon {
    display: block;
    font-family: var(--sans);
    font-size: 1.5rem;
    line-height: 1;
  }
  .nav-beratung-label,
  .nav-zurueck-label { display: none; }
}

@media (max-width: 340px) {
  .sprachen button.aktiv { display: none; }
}

/* ---------- Formular-Bausteine ---------- */

textarea, select, input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--karte);
  border: 1px solid var(--kontrolllinie);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
}
textarea { min-height: 9rem; resize: vertical; }
textarea::placeholder, input::placeholder { color: var(--grau); opacity: 1; }
textarea:focus, select:focus, input:focus { outline: 2px solid var(--gruen); outline-offset: 0; border-color: transparent; }

.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
}
.field .optional {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau);
  margin-left: var(--space-2);
}
.field-hint {
  margin-top: var(--space-2);
  color: var(--grau);
  font-size: 0.8125rem;
}

.field-fehler {
  color: #8C3D1D;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.field-fehler:empty { display: none; }

.b2b-hinweis {
  color: var(--grau);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: var(--space-4) 0 var(--space-3);
}
.b2b-hinweis a {
  color: var(--gruen-dunkel);
  text-underline-offset: 0.15em;
}
.b2b-seitenhinweis {
  color: var(--grau);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: var(--space-4) 0 0;
}
.b2b-seitenhinweis a {
  color: currentColor;
  text-underline-offset: 0.15em;
}
.b2b-bestaetigung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  color: var(--tinte);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
}
.b2b-bestaetigung input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-top: 0.12rem;
  accent-color: var(--gruen-dunkel);
}
.b2b-bestaetigung + .field-fehler {
  display: block;
  margin: var(--space-2) 0 var(--space-4) calc(1.125rem + var(--space-3));
}
.b2b-bestaetigung + .field-fehler:empty { display: none; }

/* Serverseitige Fehlermeldung (Fallback, wenn JS-Validierung umgangen wurde) */
.form-fehler {
  border: 1px solid #B4552D;
  color: #8C3D1D;
  background: #FDF3EE;
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  margin-bottom: var(--space-6);
}

/* ---------- Das Angebots-Dokument (Signature-Element) ---------- */

.angebot {
  position: relative;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + 3.2rem); /* Zone für den Stempel */
  font-family: var(--mono);
  font-size: 0.875rem;
  /* Der Stempel startet seine Reveal-Animation mit scale(1.6) — ohne Clipping
     erzeugt der vergrößerte Zustand auf schmalen Viewports seitliches Scrollen. */
  overflow: hidden;
}
.angebot-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--grau);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--space-4);
}
.angebot-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.angebot-row .dots {
  flex: 1;
  border-bottom: 2px dotted var(--linie);
  transform: translateY(-4px);
}
.angebot-row .preis { font-weight: 500; white-space: nowrap; }
.angebot-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  border-top: 1px solid var(--tinte);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  font-weight: 600;
}
.assessment-capabilities[hidden] + .angebot-total {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.angebot-total .summe {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}
.angebot-total .summe-zusatz {
  margin-inline-start: 0.35em;
  color: var(--grau);
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.angebot-sub {
  width: 100%;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--grau);
}
.angebot-note {
  margin-top: var(--space-3);
  color: var(--grau);
  font-size: 0.75rem;
}

/* ---------- Bestätigung einer gespeicherten Anfrage ---------- */

.confirmation-summary {
  overflow: hidden;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  text-align: left;
}
.confirmation-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  color: var(--grau);
  background: var(--gruen-tint);
  border-bottom: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.confirmation-summary__head strong {
  color: var(--gruen-dunkel);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.confirmation-summary dl { margin: 0; }
.confirmation-summary dl > div {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-6);
}
.confirmation-summary dl > div + div { border-top: 1px solid var(--linie); }
.confirmation-summary dt {
  color: var(--grau);
  font-size: 0.875rem;
}
.confirmation-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.confirmation-summary dd > strong { font-weight: 650; }
.confirmation-summary dd > small {
  display: block;
  margin-top: var(--space-2);
  color: var(--grau);
  font-size: 0.75rem;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .confirmation-summary__head,
  .confirmation-summary dl > div {
    padding-inline: var(--space-4);
  }
  .confirmation-summary dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.stempel {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-4);
  transform: rotate(-7deg);
  border: 2.5px solid var(--gruen);
  color: var(--gruen);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  opacity: 0.95;
}

/* Schmale Viewports: der Stempel darf die Karte nie horizontal sprengen
   (376px Textbreite gegen 320px Viewport erzeugte seitliches Scrollen). */
@media (max-width: 400px) {
  .stempel {
    right: var(--space-4);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }
}

/* ---------- Fehlerseite ---------- */

.fehler-seite {
  padding-block: var(--space-24) var(--space-16);
  max-width: 620px;
}
.fehler-seite h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.fehler-seite p { color: var(--grau); margin-bottom: var(--space-6); }
.fehler-seite code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}

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

footer {
  border-top: 1px solid var(--linie);
  padding-block: var(--space-8);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grau);
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  justify-content: space-between;
}
.footer-meta {
  display: grid;
  gap: var(--space-1);
}
.footer-preise {
  font-size: 0.6875rem;
  max-width: 38rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
footer a { text-decoration: none; }
footer a:hover { color: var(--tinte); }
.footer-telefon {
  color: var(--tinte);
  font-weight: 600;
}
.footer-telefon::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: var(--space-2);
  background: var(--gruen);
  border-radius: 2px;
}

/* ---------- Rechtstexte und Datenschutzhinweise ---------- */

.recht {
  padding-block: var(--space-12) var(--space-16);
}
.recht article {
  max-width: 720px;
}
.recht h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-8);
}
.recht h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: var(--space-8) 0 var(--space-3);
}
.recht h3 {
  font-size: 1rem;
  margin: var(--space-6) 0 var(--space-2);
}
.recht p,
.recht ul {
  margin-bottom: var(--space-4);
}
.recht ul {
  padding-left: 1.25rem;
}
.recht address {
  font-style: normal;
  margin-bottom: var(--space-4);
}
.recht a,
.form-datenschutz a {
  color: var(--gruen-dunkel);
  text-underline-offset: 0.15em;
}
.recht .stand {
  color: var(--grau);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.form-datenschutz {
  color: var(--grau);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-block: var(--space-4);
}