/* ============================================================
   Knigge Gutachten — gemeinsames Stylesheet
   ============================================================

   Gestaltungsidee: PRUEFPROTOKOLL, nicht Werbebroschuere.

   Die Konkurrenz im Sachverstaendigenwesen sieht aus wie eine
   Versicherungsagentur: Stockfoto vom Blechschaden, weiches Blau,
   abgerundete Kacheln. Markus kommt aus der Werkstatt — das darf
   man sehen. Deshalb die Anmutung eines technischen Dokuments:
   Monospace fuer alles Messbare, harte Linien statt weicher
   Schatten, Signalorange nur dort, wo etwas passieren soll.

   Schriften bewusst aus dem System-Stack: Externe Webfonts (Google)
   sind ohne Einwilligung ein DSGVO-Problem — fuer eine Seite, die
   Rechtssicherheit verkauft, waere das ein schlechter Auftakt.
   Wer spaeter eigene Schriften will, hostet sie selbst.
   ============================================================ */

:root {
  /* Farben: warmes Anthrazit statt Blauschwarz, Papier statt Reinweiss */
  --tinte:        #14171a;
  --tinte-weich:  #2a3038;
  --stahl:        #5d6670;
  --raster:       #d8d5cf;
  --papier:       #f7f5f1;
  --papier-tief:  #edeae4;
  --weiss:        #ffffff;

  --signal:       #d94f04;   /* Warnorange - nur fuer Handlung */
  --signal-tief:  #ab3d02;
  --pruef:        #1d7a4c;   /* Gruen fuer bestaetigte Angaben */

  --linie:        1px solid var(--raster);
  --linie-stark:  2px solid var(--tinte);

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --text: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --breite: 1120px;
  --luft: clamp(56px, 8vw, 104px);
}

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

body {
  font-family: var(--text);
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.7;
  font-size: 17px;
  /* Feines Messraster im Hintergrund - erst bei genauem Hinsehen sichtbar */
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: -1px -1px;
}

.wrap { width: min(var(--breite), calc(100% - 40px)); margin-inline: auto; }

/* ---------- Entwurfsbanner ---------- */
.draft-banner {
  background: #ffd400; color: #14171a; text-align: center;
  padding: 9px 14px; border-bottom: 2px solid var(--tinte);
  font: 700 .78rem/1.4 var(--mono); letter-spacing: .03em;
}

/* ---------- Kopf ---------- */
header {
  position: sticky; top: 0; z-index: 60;
  background: var(--tinte); color: var(--weiss);
  border-bottom: 3px solid var(--signal);
}
.nav { display: flex; align-items: center; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.logo { font: 800 1.22rem/1 var(--text); letter-spacing: -.02em; color: var(--weiss); text-decoration: none; margin-right: auto; }
.logo span { color: var(--signal); }
.logo small {
  display: block; margin-top: 5px;
  font: 400 .64rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9aa3ad;
}
.nav .tel { color: var(--weiss); text-decoration: none; font: 700 1.02rem/1.2 var(--mono); letter-spacing: -.01em; }
.nav .tel small { display: block; font: 400 .64rem/1 var(--mono); color: #9aa3ad; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.nav .cta {
  background: var(--signal); color: var(--weiss); text-decoration: none;
  padding: 12px 22px; font: 700 .9rem/1 var(--text); letter-spacing: .01em;
  border: 2px solid var(--signal); transition: background .15s, color .15s;
}
.nav .cta:hover { background: transparent; color: var(--signal); }

/* ---------- Hero: wie ein Deckblatt ---------- */
.hero {
  background: var(--tinte); color: var(--weiss);
  padding: clamp(52px, 7vw, 86px) 0 clamp(44px, 6vw, 72px);
  position: relative; overflow: hidden;
}
/* Diagonale Signalkante unten - bricht das Rechteck auf */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px;
  background: var(--papier);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.hero .badge, .badge {
  display: inline-block; margin-bottom: 20px;
  font: 700 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal); border: 1px solid var(--signal); padding: 7px 13px;
}
.hero h1 {
  font-size: clamp(1.85rem, 4.4vw, 3rem); line-height: 1.1; max-width: 21ch;
  font-weight: 800; letter-spacing: -.028em; text-wrap: balance;
}
.hero h1 em { color: var(--signal); font-style: normal; }
.hero .sub { max-width: 62ch; margin: 22px 0 32px; color: #c3cad2; font-size: 1.08rem; }
.hero .btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Schaltflaechen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; text-decoration: none;
  font: 700 .96rem/1 var(--text); border: 2px solid transparent;
  transition: transform .12s, background .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--signal); color: var(--weiss); border-color: var(--signal); }
.btn.primary:hover { background: var(--signal-tief); border-color: var(--signal-tief); }
.btn.ghost { border-color: currentColor; color: inherit; }
.btn.ghost:hover { background: var(--weiss); color: var(--tinte); }
.btn.wa { background: #1faa54; color: var(--weiss); border-color: #1faa54; }
.btn.wa:hover { background: #178742; border-color: #178742; }

/* ---------- Abschnitte ---------- */
section { padding: var(--luft) 0; }
section.alt { background: var(--papier-tief); }
section.alt, section { position: relative; }

.kicker {
  display: block; margin-bottom: 12px;
  font: 700 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--signal);
}
h2 {
  font-size: clamp(1.5rem, 2.9vw, 2.1rem); line-height: 1.16;
  font-weight: 800; letter-spacing: -.022em; max-width: 24ch; text-wrap: balance;
}
h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; }
.lead { color: var(--stahl); max-width: 68ch; margin: 14px 0 38px; font-size: 1.05rem; }
p + p { margin-top: 14px; }
a { color: var(--signal-tief); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }

/* ---------- Karten: Prueffelder mit laufender Nummer ---------- */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 2px; background: var(--raster); border: var(--linie); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2px; background: var(--raster); border: var(--linie); }
.card {
  background: var(--weiss); padding: 28px 26px; position: relative;
  transition: background .18s;
}
.card:hover { background: #fffdf9; }
/* Laufende Nummer wie in einem Pruefbericht */
.grid3 { counter-reset: feld; }
.card::before {
  counter-increment: feld; content: counter(feld, decimal-leading-zero);
  position: absolute; top: 14px; right: 16px;
  font: 700 .68rem/1 var(--mono); color: var(--raster); letter-spacing: .08em;
}
.card h3 { margin-bottom: 9px; }
.card p { font-size: .95rem; color: var(--stahl); }
.card .ico {
  font-size: 1.45rem; display: block; margin-bottom: 12px; line-height: 1;
  /* Entsaettigt wirken die Emojis wie Piktogramme statt wie Chat-Symbole -
     das passt zur technischen Anmutung der uebrigen Seite. */
  filter: grayscale(1) contrast(.85) opacity(.62);
  transition: filter .2s;
}
.card:hover .ico { filter: grayscale(.2) opacity(.95); }

/* ---------- Themenleiste: Registerkarten wie an einem Aktendeckel ---------- */
.themen {
  background: var(--tinte-weich);
  border-bottom: var(--linie);
  position: sticky; top: 0; z-index: 55;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.themen::-webkit-scrollbar { display: none; }
.themen .wrap { display: flex; gap: 0; min-width: max-content; }
.themen a {
  display: block; padding: 13px 20px; white-space: nowrap;
  color: #b9c1ca; text-decoration: none;
  font: 600 .78rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  border-right: var(--linie); border-bottom: 3px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.themen a:first-child { border-left: var(--linie); }
.themen a:hover { color: var(--weiss); background: #333c47; }
.themen a[aria-current="page"] {
  color: var(--weiss); background: var(--tinte); border-bottom-color: var(--signal);
}
/* Der Seitenkopf klebt oben, die Themenleiste darunter */
header { top: 0; }
@media (max-width: 620px) {
  .themen { position: static; }
  .themen a { padding: 12px 15px; font-size: .72rem; }
}

/* Karten-Ueberschriften duerfen Links sein, ohne wie Fliesstext auszusehen */
.card h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--signal); padding-bottom: 2px; }
.card h3 a:hover { color: var(--signal); }

/* ---------- Ablaufschritte ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 24px; counter-reset: schritt; }
.step { background: var(--weiss); border: var(--linie); border-top: 3px solid var(--signal); padding: 30px 24px 26px; position: relative; }
.step::before {
  counter-increment: schritt; content: "Schritt " counter(schritt);
  display: block; margin-bottom: 10px;
  font: 700 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--signal);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .95rem; color: var(--stahl); }

/* ---------- Vertrauensleiste ---------- */
.trustbar { background: var(--tinte-weich); color: var(--weiss); padding: 22px 0; }
.trustbar .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; text-align: center; }
.trustbar b { display: block; color: var(--signal); font: 700 1.02rem/1.3 var(--mono); }
.trustbar small { color: #9aa3ad; font-size: .82rem; }

/* ---------- Person ---------- */
.about { display: grid; grid-template-columns: 290px 1fr; gap: 44px; align-items: start; }
/* Solange kein Foto vorliegt: eine Spalte, sonst bliebe links eine Luecke stehen. */
.about--ohne-bild { grid-template-columns: 1fr; max-width: 78ch; }
.about .photo {
  background: var(--tinte-weich); border: var(--linie); aspect-ratio: 3/4;
  display: grid; place-items: center; text-align: center; padding: 22px;
  color: #8a939d; font: .8rem/1.5 var(--mono);
}
.about blockquote {
  border-left: 3px solid var(--signal); padding: 4px 0 4px 20px; margin: 20px 0;
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.012em;
}

/* ---------- Einzugsgebiet ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.areas span, .slot {
  font: 600 .82rem/1 var(--mono); padding: 9px 13px;
  background: var(--weiss); border: var(--linie);
}

/* ---------- FAQ ---------- */
.faq details {
  background: var(--weiss); border: var(--linie); border-left: 3px solid var(--raster);
  margin-bottom: 2px; transition: border-color .18s;
}
.faq details[open] { border-left-color: var(--signal); }
.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--mono); color: var(--signal); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 22px 20px; color: var(--stahl); font-size: .97rem; max-width: 76ch; }

/* ---------- Hinweiskasten ---------- */
.box, .notice {
  background: var(--weiss); border: var(--linie); border-left: 3px solid var(--signal);
  padding: 22px 24px; margin: 26px 0;
}
.box h3 { margin-bottom: 8px; }
.notice { font-size: .95rem; color: var(--stahl); }

/* Quellennachweis - die Fussnote unter einer geprueften Angabe.
   Das Label nutzt --pruef, die Variable ist genau dafuer da: bestaetigte Angaben. */
.quelle {
  margin-top: 18px; padding-top: 13px; border-top: 1px dotted var(--raster);
  font: 400 .78rem/1.65 var(--mono); color: var(--stahl);
}
.quelle::before {
  content: "Beleg"; display: block; margin-bottom: 5px;
  font: 700 .64rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--pruef);
}
.todo {
  background: #fff8e1; border: 1px dashed #c9a227; color: #6b5200;
  padding: 12px 16px; margin: 14px 0; font: .87rem/1.5 var(--mono);
}

/* ---------- Terminbuchung ---------- */
.booking-panel { display: grid; grid-template-columns: 340px 1fr; gap: 2px; background: var(--raster); border: var(--linie); }
.booking-note { background: var(--tinte); color: #c3cad2; padding: 30px 28px; }
.booking-note h3 { color: var(--weiss); margin-bottom: 12px; }
.booking-note ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.booking-note li { position: relative; padding-left: 20px; font-size: .9rem; }
.booking-note li::before { content: "▸"; position: absolute; left: 0; color: var(--signal); }
.booking-form { background: var(--weiss); padding: 30px 28px; }

form label { display: block; margin-bottom: 14px; font: 700 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); }
form input, form textarea, form select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
  border: var(--linie); background: var(--papier);
  font: 400 1rem/1.4 var(--text); color: var(--tinte);
  transition: border-color .15s, background .15s;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--signal); background: var(--weiss);
  box-shadow: 0 0 0 3px rgba(217, 79, 4, .12);
}
form textarea { min-height: 96px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.slot { cursor: pointer; border: var(--linie); transition: all .15s; }
.slot:hover { border-color: var(--signal); color: var(--signal); }
.slot[aria-pressed="true"], .slot.aktiv { background: var(--signal); color: var(--weiss); border-color: var(--signal); }
.booking-submit { width: 100%; margin-top: 6px; cursor: pointer; border: none; }
.booking-status { margin-top: 14px; font: .9rem/1.5 var(--mono); }
.booking-status.ok { color: var(--pruef); }
.booking-status.err { color: var(--signal-tief); }
.booking-small { font-size: .82rem; color: var(--stahl); margin-top: 12px; }

/* ---------- Kontakt ---------- */
.contact { background: var(--tinte); color: var(--weiss); }
.contact h2 { color: var(--weiss); }
.contact .lead { color: #c3cad2; }
.contact .kicker { color: var(--signal); }
.contact .grid3 { background: var(--tinte-weich); border-color: var(--tinte-weich); }
.contact .card { background: var(--tinte-weich); color: #c3cad2; }
.contact .card:hover { background: #323a44; }
.contact .card h3 { color: var(--weiss); }
.contact .card p { color: #c3cad2; }
.contact .card a { color: var(--signal); }
.contact .card::before { color: #3d4550; }

/* ---------- Fuss ---------- */
footer { background: #0d1013; color: #8a939d; padding: 34px 0; font-size: .87rem; border-top: 3px solid var(--signal); }
footer a { color: #c3cad2; }
footer a:hover { color: var(--signal); }

/* ---------- Sprungmarke fuer Tastaturnutzung ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: var(--weiss); padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- Bewegung nur, wenn gewuenscht ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .sub, .hero .btns { animation: auf .5s cubic-bezier(.2,.7,.3,1) both; }
  .hero .sub { animation-delay: .07s; }
  .hero .btns { animation-delay: .14s; }
  @keyframes auf { from { opacity: 0; transform: translateY(14px); } }
}

/* ---------- Schmale Schirme ---------- */
@media (max-width: 860px) {
  .booking-panel { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about .photo { max-width: 260px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav { gap: 12px; }
  .nav .cta { width: 100%; text-align: center; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
}

/* ---------- Druck: das Gutachten liegt oft ausgedruckt vor ---------- */
@media print {
  header, .draft-banner, .btns, .contact, .booking-panel, footer { display: none; }
  body { background: #fff; font-size: 11pt; }
  .hero { background: #fff; color: #000; padding: 0 0 18pt; }
  .hero h1 { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}