/* ---------------------------------------------------------------
   Angebotsseite – hohmeier.org/website

   Bewusst hell gehalten: eine Verkaufsseite soll offen und
   vertrauenswuerdig wirken, nicht wie die dunkle Demoseite.
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --tinte:      #1c2431;   /* Fliesstext, Ueberschriften */
  --tinte-weich:#4a5568;   /* Nebentext */
  --akzent:     #1f5f8b;   /* Blau, sachlich und vertrauenswuerdig */
  --akzent-tief:#174a6d;
  --akzent-blass:#e8f0f6;
  --papier:     #ffffff;
  --papier-warm:#f6f7f9;
  --linie:      #dfe3e8;

  --breite: 1120px;
  --schmal: 760px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 28px; }
.innen.schmal { max-width: var(--schmal); }
.innen.mitte { text-align: center; }

/* ---- Kopfbereich ---- */

.kopf {
  background: linear-gradient(160deg, #1c2431 0%, #26374b 100%);
  color: #fff;
  padding: 88px 0 78px;
}

.augenbraue {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fb6d4;
  margin-bottom: 20px;
}

.kopf h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}

.kopf .vorspann {
  font-size: 1.16rem;
  color: #c8d6e2;
  max-width: 40em;
  margin-bottom: 34px;
}

/* ---- Knoepfe ---- */

.knopfreihe { display: flex; flex-wrap: wrap; gap: 13px; }

.knopf {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 1.01rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s;
}
.knopf:active { transform: translateY(1px); }

.knopf-haupt { background: var(--akzent); color: #fff; }
.knopf-haupt:hover { background: var(--akzent-tief); }

.knopf-neben { border-color: #55708c; color: #fff; }
.knopf-neben:hover { background: rgba(255,255,255,.09); }

.knopf.gross { font-size: 1.12rem; padding: 17px 40px; margin-top: 8px; }

/* ---- Baender ---- */

.band { padding: 72px 0; border-bottom: 1px solid var(--linie); }
.band-hell { background: var(--papier-warm); }
.band-demo { background: var(--akzent-blass); }

.band h2 {
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
}
.band-demo h2, .mitte h2 { margin-bottom: 18px; }

.band .vorspann { font-size: 1.08rem; color: var(--tinte-weich); margin-bottom: 26px; }
.mitte .vorspann { margin-left: auto; margin-right: auto; max-width: 34em; }

/* ---- Problemliste ---- */

.problem-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 26px;
}
.problem h3 {
  font-size: 1.06rem;
  font-weight: 700;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--akzent);
  display: inline-block;
}
.problem p { color: var(--tinte-weich); font-size: 0.97rem; }

/* ---- Nutzenpunkte ---- */

.punkt { margin-bottom: 34px; padding-left: 22px; border-left: 3px solid var(--akzent-blass); }
.punkt:last-child { margin-bottom: 0; }
.punkt h3 { font-size: 1.13rem; font-weight: 700; margin-bottom: 7px; }
.punkt p { color: var(--tinte-weich); }

/* ---- Preis ---- */

.preis-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 22px;
  margin-bottom: 24px;
}
.preis-karte {
  background: var(--papier-warm);
  border: 1px solid var(--linie);
  border-radius: 11px;
  padding: 28px 26px;
}
.preis-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 6px;
}
.preis-zahl { font-size: 2.35rem; font-weight: 700; line-height: 1.1; margin-bottom: 12px; }
.preis-hinweis { color: var(--tinte-weich); font-size: 0.95rem; }

/* Frueher zum Markieren ungeklaerter Werte (Preise, Telefonnummer).
   Alle bestaetigt am 2026-08-29; die Klasse bleibt fuer kuenftige
   Platzhalter erhalten und hat bewusst keine sichtbare Wirkung. */
.pruefen { }

/* ---- Kontakt ---- */

.band-kontakt { background: var(--papier-warm); border-bottom: none; }

.telefon {
  display: inline-flex;
  flex-direction: column;
  background: var(--papier);
  border: 2px solid var(--akzent);
  border-radius: 11px;
  padding: 18px 32px;
  text-decoration: none;
  margin-bottom: 34px;
  transition: background .18s;
}
.telefon:hover { background: var(--akzent-blass); }
.telefon-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--akzent);
}
.telefon-nummer { font-size: 1.62rem; font-weight: 700; color: var(--tinte); }

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

.formular { display: flex; flex-direction: column; gap: 17px; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 17px; }

.formular label {
  display: flex; flex-direction: column; gap: 6px;
  font-weight: 600; font-size: 0.93rem;
}
.optional { font-weight: 400; color: var(--tinte-weich); }

.formular input, .formular textarea {
  font-family: inherit; font-size: 1rem; font-weight: 400;
  padding: 11px 13px;
  border: 1px solid var(--linie);
  border-radius: 7px;
  background: var(--papier);
  color: var(--tinte);
}
.formular input:focus, .formular textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(31,95,139,.14);
}
.formular textarea { resize: vertical; min-height: 120px; }
.formular button { align-self: flex-start; }

/* Spam-Falle: fuer Menschen und Vorlesegeraete unsichtbar */
.falle {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.klein { font-size: 0.87rem; color: var(--tinte-weich); }

/* ---- Rueckmeldung nach dem Absenden ---- */

.hinweis {
  padding: 15px 19px; border-radius: 8px;
  margin-bottom: 24px; font-weight: 600;
}
.hinweis-ok  { background: #e6f4ea; color: #1c5b2e; border: 1px solid #b7dcc2; }
.hinweis-fehler { background: #fdeaea; color: #8a2020; border: 1px solid #f0c0c0; }

/* ---- Fussbereich ---- */

.fuss { background: var(--tinte); color: #b9c3d0; padding: 40px 0; }
.fuss strong { color: #fff; }
.fuss a { color: #9fc3dd; }
.fuss p + p { margin-top: 14px; }

/* ---- Kleine Bildschirme ---- */

@media (max-width: 600px) {
  .kopf { padding: 60px 0 52px; }
  .band { padding: 52px 0; }
  .innen { padding: 0 20px; }
  .knopf { width: 100%; text-align: center; }
  .telefon { width: 100%; align-items: center; }
  .preis-zahl { font-size: 2.05rem; }
}