/* ==========================================================================
   Stylesheet der zentralen Landing-Page (softbill.softics.de).

   Die Seite laedt nichts nach: keine Webschrift von fremden Servern, kein
   fremdes Stylesheet, kein Skript. Die Schriftdateien liegen im selben
   Abbild unter /fonts/. Das ist kein Purismus — die Seite verkauft
   Datenschutz-Sauberkeit, und eine Startseite, die vor dem ersten Satz die
   IP-Adresse des Besuchers an einen Dritten uebermittelt, widerlegt genau
   diese Behauptung.

   Die Farbwerte sind der UI-Vertrag der Anwendung, in rgb()-Notation wie in
   recht.css: die Landing-Page ist kein Blazor und kennt die
   MudBlazor-Variablen nicht.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
}

:root {
  --hintergrund: rgb(244, 246, 248);
  --flaeche: rgb(255, 255, 255);
  --text: rgb(26, 32, 39);
  --akzent: rgb(30, 95, 191);
  --linien: rgb(226, 230, 234);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

.behaelter {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--akzent);
}

/* --- Kopf und Aufmacher ------------------------------------------------- */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linien);
  padding: 1rem 0;
}

.marke {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.softics img {
  display: block;
  height: 24px;
  width: auto;
}

.hero {
  padding: 4rem 0 3rem;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 44rem;
}

.hero p {
  font-size: 1.125rem;
  max-width: 46rem;
  margin: 0 0 2rem;
}

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

/* --- Funktionsraster ---------------------------------------------------- */

section {
  padding: 2rem 0;
}

section h2 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linien);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.karte h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.karte p {
  margin: 0;
}

.zielgruppe {
  background: var(--flaeche);
  border: 1px solid var(--linien);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.zielgruppe ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* --- Unterschiede ------------------------------------------------------- */

/*
  Eine nummerierte Liste, keine Karten: die Punkte sind eine Argumentation, die von oben
  nach unten gelesen wird, und die Zahl sagt "es sind fuenf". Ein Kartenraster stellte
  alles gleichrangig nebeneinander, und genau das war das Problem der alten Fassung.
*/
.unterschiede {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: unterschied;
  display: grid;
  gap: 1rem;
}

.unterschiede li {
  counter-increment: unterschied;
  background: var(--flaeche);
  border: 1px solid var(--linien);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem 1.25rem 4.25rem;
  position: relative;
}

.unterschiede li::before {
  content: counter(unterschied);
  position: absolute;
  left: 1.5rem;
  top: 1.2rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--akzent);
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unterschiede h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.unterschiede p {
  margin: 0;
  max-width: 46rem;
}

/*
  "demnaechst": ehrlich, klein, neben der Ueberschrift. Faellt weg, sobald die Funktion
  live ist - nicht als Dauerzustand gedacht.
*/
.marker {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgb(180, 83, 9);
  color: rgb(180, 83, 9);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Vertrauensstreifen ------------------------------------------------- */

/*
  Technik und Recht in EINER Zeile: Hygienefaktoren, die jeder erwartet und niemand kauft.
  Sie stehen, damit niemand fragen muss - und nehmen keinen Platz von den Unterschieden.
*/
.vertrauen {
  padding: 0.5rem 0 1.5rem;
}

.vertrauen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.9rem;
  color: rgb(91, 101, 114);
}

.vertrauen li::before {
  content: "\2713";
  color: rgb(27, 122, 61);
  font-weight: 600;
  margin-right: 0.4rem;
}

.zielgruppe p {
  margin: 0;
}

.zielgruppe p + p {
  margin-top: 0.75rem;
}

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

form {
  background: var(--flaeche);
  border: 1px solid var(--linien);
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 34rem;
}

label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

input,
textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--linien);
  border-radius: 0.375rem;
  font: inherit;
  color: inherit;
  background: var(--hintergrund);
}

textarea {
  resize: vertical;
}

button {
  margin-top: 1.25rem;
  background: var(--akzent);
  color: rgb(255, 255, 255);
  border: 0;
  border-radius: 0.375rem;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.hinweis {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

/*
  Honigtopf: das Feld wird aus dem Sichtbereich geschoben und bleibt dabei im
  Dokument. Bewusst NICHT per Anzeigemodus ausgeblendet — solche Felder
  ueberspringen viele Formularroboter, und dann faengt der Honigtopf nichts
  und sieht trotzdem nach Schutz aus.
*/
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Fuss --------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--linien);
  margin-top: 4rem;
  padding: 2rem 0;
  font-size: 0.9rem;
}

footer nav a {
  margin-right: 1rem;
  white-space: nowrap;
}

footer p {
  margin: 0.75rem 0 0;
}

/* --- Kleine Anzeigen ---------------------------------------------------- */

@media (max-width: 40rem) {
  .hero {
    padding: 2.5rem 0 2rem;
  }

  .hero h1 {
    font-size: 1.875rem;
  }

  .hero p {
    font-size: 1rem;
  }

  section h2 {
    font-size: 1.5rem;
  }

  .unterschiede li {
    padding-left: 3.5rem;
  }

  .unterschiede li::before {
    left: 1rem;
  }
}