/* 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;
  --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: "Bricolage Grotesque", 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 {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark span { color: var(--gruen); }
.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-rechts {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Sprachumschalter: DE / EN / UA (Mini-Formulare, siehe _Layout) */
.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 {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--grau);
  cursor: pointer;
  padding: 0.15rem 0.1rem;
}
.sprachen button:hover { color: var(--tinte); }
.sprachen button.aktiv {
  color: var(--gruen);
  font-weight: 600;
  border-bottom-color: var(--gruen);
}

@media (max-width: 560px) {
  .nav-rechts { gap: var(--space-3); }
  .nav .btn { padding: 0.45rem 0.7rem; font-size: 0.8125rem; }
  .nav a.back { font-size: 0.75rem; }
}

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

textarea, input[type="text"], input[type="email"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
}
textarea { min-height: 9rem; resize: vertical; }
textarea::placeholder, input::placeholder { color: #A6A199; }
textarea: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);
}

/* 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;
}
.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;
}
.angebot-total .summe {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}
.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;
}

.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;
}

/* ---------- 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 nav { display: flex; gap: var(--space-6); }
footer a { text-decoration: none; }
footer a:hover { color: var(--tinte); }