/* TechDoc PC-Service -- Farbwelt wie die Pixel-Motive und die Videos.
   Eine einzige Datei, keine Bibliothek, kein Nachladen von fremden Servern.
   Das ist auch datenschutzrechtlich der einfachste Weg: es geht nichts raus. */

:root {
  --creme:      #fce4cc;
  --creme-hell: #fdf1e2;
  --beige:      #e4ccb4;
  --holz:       #e49c6c;
  --nacht:      #24243c;
  --nacht-matt: #3c3c54;
  --petrol:     #3c6c84;
  --stahl:      #9cb4b4;
  --gut:        #548c60;
  --rand:       #344464;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--nacht);
  background: var(--creme-hell);
}

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

.mitte { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- Kopf ---------- */
header {
  background: var(--nacht);
  color: var(--creme-hell);
  padding: 14px 0;
  border-bottom: 6px solid var(--holz);
}
header .mitte { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
header .marke { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
header .ort { color: var(--stahl); font-size: .95rem; }
header .ruf {
  margin-left: auto;
  background: var(--holz);
  color: var(--nacht);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
header .ruf:hover { background: #f0ad7c; }

/* ---------- Aufmacher ---------- */
.aufmacher { background: var(--creme); padding: 56px 0 48px; }
.aufmacher h1 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 14px; }
.aufmacher p.gross { font-size: 1.2rem; max-width: 44ch; margin: 0 0 26px; }
.aufmacher .zwei { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
.aufmacher img { width: 100%; border-radius: 12px; border: 4px solid var(--nacht); display: block; }

.knopf {
  display: inline-block; padding: 14px 26px; border-radius: 9px;
  background: var(--petrol); color: #fff; font-weight: 700; text-decoration: none;
}
.knopf:hover { background: #35607a; }
.knopf.zweit { background: transparent; color: var(--nacht); border: 3px solid var(--nacht); }

/* ---------- Abschnitte ---------- */
section { padding: 52px 0; }
section h2 { font-size: 1.8rem; margin: 0 0 8px; }
section .unterzeile { color: var(--nacht-matt); margin: 0 0 30px; }
section.hell { background: #fff; }

.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.karte {
  background: var(--creme-hell); border: 3px solid var(--nacht);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.karte img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
             border-bottom: 3px solid var(--nacht); }
.karte .inhalt { padding: 16px 18px 20px; }
.karte h3 { margin: 0 0 6px; font-size: 1.12rem; }
.karte p { margin: 0; font-size: .97rem; color: var(--nacht-matt); }

/* ---------- Ablauf ---------- */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.schritt { background: #fff; border-left: 8px solid var(--holz); padding: 18px 20px; border-radius: 0 10px 10px 0; }
.schritt h3 { margin: 0 0 6px; font-size: 1.08rem; }
.schritt p { margin: 0; color: var(--nacht-matt); font-size: .97rem; }

/* ---------- Vertrauen ---------- */
.belege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.beleg { border: 3px solid var(--stahl); border-radius: 10px; padding: 18px 20px; background: #fff; }
.beleg strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.beleg span { color: var(--nacht-matt); font-size: .95rem; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--petrol); color: #fff; }
.kontakt h2 { color: #fff; }
.kontakt a { color: #fff; }
.kontakt .zeile { font-size: 1.25rem; margin: 6px 0; }

/* ---------- Fuss ---------- */
footer { background: var(--nacht); color: var(--stahl); padding: 26px 0; font-size: .93rem; }
footer a { color: var(--creme); margin-right: 18px; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 760px; }
.rechtstext h2 { margin-top: 34px; font-size: 1.25rem; }
.rechtstext ul { padding-left: 22px; }

@media (max-width: 860px) {
  .aufmacher .zwei, .karten, .schritte, .belege { grid-template-columns: 1fr; }
  .aufmacher h1 { font-size: 1.9rem; }
  header .ruf { margin-left: 0; }
}