/* ───────────────────────────────────────────────────────────────────
   Landingpage „Website-Erstellung" — eigenes Erscheinungsbild.

   Bewusst NICHT style.css von tkai.tech: Die Dienstleistung soll als
   eigenes Angebot auftreten, nicht als weitere Projektkachel der
   Dachmarke. Dunkel bleibt es, aber die Farbwelt ist eine andere.

   tkai.tech          → kühles Blauschwarz, Türkis und Violett, Tech
   Website-Erstellung → warmes Dunkelbraun, Bernstein, handwerklich

   Warum warm statt kühl: Die Zielgruppe sind Handwerks- und
   Dienstleistungsbetriebe. Ein Türkis-Violett-Verlauf spricht Entwickler
   an; er ist zudem genau das Farbschema, an dem man KI-generierte Seiten
   erkennt (siehe Wissensextrakt). Bernstein auf warmem Dunkel wirkt
   werkstattnah und ist im Netz selten genug, um im Gedächtnis zu bleiben.

   Alle Schriften kommen vom eigenen Server. Was wir bei Kunden
   bemängeln, darf hier nicht vorkommen.
   ─────────────────────────────────────────────────────────────────── */

/* Eigene Schrift, sobald die Datei vorliegt — Anleitung im README.
   Bis dahin greift der Systemschrift-Stack darunter, die Seite sieht
   ordentlich aus, nur weniger eigen. */
@font-face {
  font-family: "Webcheck Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
}

:root {
  --bg:            #14100D;
  --bg-tief:       #0D0A08;
  --bg-karte:      #1D1815;
  --bg-karte-hover:#26201B;
  --text:          #F4EFE8;
  --text-leise:    #AEA29A;
  --akzent:        #E8A33D;
  --akzent-tief:   #B87424;
  --akzent-schwach:rgba(232, 163, 61, .10);
  --gut:           #7BB88A;
  --achtung:       #E08E5F;
  --linie:         #2E2721;
  --linie-hell:    #3D342C;
  --radius:        12px;
  --maxw:          1080px;
  --font-display:  "Webcheck Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-text:     "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.15;
}

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

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── Kopfzeile ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 16, 13, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo {
  font-size: 1.15rem; color: var(--text); text-decoration: none;
  display: flex; align-items: baseline; gap: 9px;
}
.logo b { font-weight: 700; }
.logo .marke { color: var(--text-leise); font-weight: 400; font-size: .82em; }
.logo .marke span { color: var(--akzent); }
nav ul { display: flex; gap: 22px; list-style: none; align-items: center; }
nav a { color: var(--text-leise); text-decoration: none; font-size: .95rem; }
nav a:hover { color: var(--text); }
.nav-cta {
  background: var(--akzent); color: #211501 !important; font-weight: 600;
  padding: 10px 18px; border-radius: 8px; white-space: nowrap;
}
.nav-cta:hover { background: #F2B356; }

/* ── Aufmacher ─────────────────────────────────────────────── */
.aufmacher {
  padding: 76px 0 48px; position: relative; overflow: hidden;
  background: var(--bg-tief);
  border-bottom: 1px solid var(--linie);
}
/* Feines Raster statt Farbverlauf — Verläufe sind das Erkennungsmerkmal
   austauschbarer KI-Seiten, und wir verkaufen das Gegenteil davon. */
.aufmacher::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.aufmacher .container { position: relative; z-index: 1; }
.aufmacher-raster { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
@media (min-width: 940px) {
  .aufmacher-raster { grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; }
}
.aufmacher h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); margin-bottom: 20px; }
.aufmacher h1 em { font-style: normal; color: var(--akzent); }
.aufmacher .lead { font-size: 1.1rem; color: var(--text-leise); max-width: 34em; margin-bottom: 26px; }
.merkmalzeile { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.merkmal {
  font-size: .85rem; color: var(--text-leise);
  border: 1px solid var(--linie-hell); border-radius: 999px;
  padding: 6px 14px; white-space: nowrap;
}
.merkmal b { color: var(--akzent); font-weight: 600; }

/* ── Abschnitte ────────────────────────────────────────────── */
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--linie); }
.rubrik {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--akzent); margin-bottom: 12px;
}
.abschnitt-titel { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.abschnitt-sub { color: var(--text-leise); max-width: 40em; margin-bottom: 40px; }

/* ── Karten ────────────────────────────────────────────────── */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; }
.karte {
  background: var(--bg-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px;
  color: var(--text); text-decoration: none; display: block;
}
a.karte:hover { background: var(--bg-karte-hover); border-color: var(--linie-hell); }
.karte h3 { font-size: 1.08rem; margin-bottom: 8px; }
.karte p { color: var(--text-leise); font-size: .95rem; }
.karte .weiter { color: var(--akzent); font-size: .9rem; font-weight: 600; margin-top: 14px; display: inline-block; }
.abzeichen {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--akzent); border: 1px solid rgba(232, 163, 61, .38);
  background: var(--akzent-schwach); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
}

/* ── Befundliste ───────────────────────────────────────────── */
.befunde { list-style: none; display: grid; gap: 26px; }
.befunde li { border-left: 2px solid var(--akzent); padding: 2px 0 2px 22px; }
.befunde h3 { font-size: 1.05rem; margin-bottom: 7px; }
.befunde p { color: var(--text-leise); font-size: .96rem; }

/* ── Preise ────────────────────────────────────────────────── */
.preis-karte .preis {
  font-family: var(--font-display); font-size: 2rem; color: var(--akzent);
  display: block; margin: 12px 0 4px; letter-spacing: -.02em;
}
.preis-karte .preis-zusatz { color: var(--text-leise); font-size: .87rem; margin-bottom: 20px; }
.preis-karte ul { list-style: none; }
.preis-karte li {
  color: var(--text-leise); font-size: .93rem;
  padding: 7px 0 7px 24px; position: relative;
}
.preis-karte li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 13px; height: 13px;
  background-color: var(--akzent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}
.hervor { border-color: var(--akzent); }

/* ── Formular ──────────────────────────────────────────────── */
.check-form {
  background: var(--bg-karte); border: 1px solid var(--linie-hell);
  border-radius: var(--radius); padding: 28px; text-align: left;
}
.check-form fieldset { border: 0; padding: 0; margin: 0; }
.check-form legend { font-family: var(--font-display); font-size: 1.15rem; padding: 0 0 6px; }
.feld { margin-bottom: 18px; }
.feld label { display: block; font-size: .93rem; font-weight: 600; margin-bottom: 7px; }
.feld .hinweis { display: block; font-weight: 400; color: var(--text-leise); font-size: .85rem; margin-top: 3px; }
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld textarea, .feld select {
  width: 100%; background: var(--bg-tief); color: var(--text);
  border: 1px solid var(--linie-hell); border-radius: 8px;
  padding: 13px 14px; font: inherit; font-size: 1rem; min-height: 48px;
}
.feld textarea { min-height: 92px; resize: vertical; }
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }
.pflicht { color: var(--akzent); }
.kasten { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px; }
.kasten input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--akzent); }
.kasten label { font-size: .93rem; color: var(--text-leise); font-weight: 400; }
.check-form button {
  background: var(--akzent); color: #211501; font: inherit; font-weight: 700;
  font-size: 1.02rem; border: 0; border-radius: 9px; padding: 15px 30px;
  min-height: 50px; cursor: pointer; width: 100%;
}
.check-form button:hover { background: #F2B356; }
.form-fuss { font-size: .85rem; color: var(--text-leise); margin-top: 14px; }
.fehler { color: var(--achtung); font-size: .88rem; margin-top: 7px; font-weight: 600; }
.fehler-box {
  background: rgba(224, 142, 95, .10); border: 1px solid rgba(224, 142, 95, .4);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; font-size: .93rem;
}
.rueckruf-zeit { margin: -6px 0 18px 33px; }
.rueckruf-zeit label { font-size: .88rem; color: var(--text-leise); font-weight: 400; }
.rueckruf-zeit select { max-width: 260px; }

/* ── Person ────────────────────────────────────────────────── */
.person { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.person img, .person .platzhalter {
  width: 136px; height: 136px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--linie-hell); flex: none;
}
.person .platzhalter {
  background: var(--bg-karte); display: grid; place-items: center;
  color: var(--text-leise); font-size: .82rem; text-align: center;
}
.person > div:last-child { flex: 1; min-width: 280px; }
.person p { color: var(--text-leise); }
.person strong { color: var(--text); }

/* ── Abschlussblock ────────────────────────────────────────── */
.abschluss {
  background: var(--bg-karte); border: 1px solid var(--linie-hell);
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius); padding: 40px; text-align: center;
}
.abschluss h2 { font-size: 1.6rem; margin-bottom: 12px; }
.abschluss p { color: var(--text-leise); margin: 0 auto 26px; max-width: 34em; }
.knopf {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 14px 28px; border-radius: 9px; font-size: 1rem; margin: 0 6px 8px;
}
.knopf-voll { background: var(--akzent); color: #211501; }
.knopf-voll:hover { background: #F2B356; }
.knopf-rand { color: var(--text); border: 1px solid var(--linie-hell); }
.knopf-rand:hover { border-color: var(--akzent); }

/* ── Fußzeile ──────────────────────────────────────────────── */
footer { border-top: 1px solid var(--linie); padding: 34px 0; background: var(--bg-tief); }
.fuss-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
footer p, .fuss-links a { color: var(--text-leise); font-size: .9rem; }
.fuss-links { display: flex; gap: 20px; }
.fuss-links a { text-decoration: none; }
.fuss-links a:hover { color: var(--text); }

/* ── Bedienbarkeit ─────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.sprungmarke {
  position: absolute; left: -9999px; background: var(--akzent); color: #211501;
  padding: 11px 20px; border-radius: 8px; font-weight: 600; z-index: 100;
  text-decoration: none;
}
.sprungmarke:focus { left: 12px; top: 12px; position: fixed; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .aufmacher { padding: 48px 0 36px; }
  section { padding: 52px 0; }
  nav ul li.mobil-aus { display: none; }
  .abschluss { padding: 28px 20px; }
}