/* Webseite Robert Mutschall, Sachverständiger
   Erscheinungsbild nach gutachten-branding/references/briefkopf-sachverstaendiger.md
   Arial, HKS 42 Blau, HKS 92 Grau, Wort-Bild-Marke immer als Einheit */

:root {
  --blau: #1E398F;      /* HKS 42 K */
  --blau-hell: #0067B1; /* HKS 42 N, nur für Hover */
  --grau: #717776;      /* HKS 92 K */
  --grau-hell: #f3f4f4;
  --linie: #d9dcdc;
  --text: #1a1a1a;
  --weiss: #ffffff;
  --breite: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  letter-spacing: .15pt;
}

a { color: var(--blau); }
a:hover { color: var(--blau-hell); }

img { max-width: 100%; height: auto; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.kopf .innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--blau);
}
.marke img { width: 56px; height: 56px; flex: 0 0 56px; }
.marke .name { display: block; font-weight: bold; font-size: 18px; line-height: 1.2; white-space: nowrap; }
.marke .beruf { display: block; font-size: 18px; line-height: 1.2; white-space: nowrap; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a {
  display: block;
  padding: 8px 12px;
  color: var(--blau);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blau-hell); }
.nav a[aria-current="page"] { font-weight: bold; border-bottom-color: var(--blau); }

.menue-schalter, .menue-knopf { display: none; }

@media (max-width: 860px) {
  .kopf .innen { min-height: 68px; }
  .marke img { width: 44px; height: 44px; flex-basis: 44px; }
  .marke .name, .marke .beruf { font-size: 15px; }
  .menue-knopf {
    display: block;
    cursor: pointer;
    padding: 8px 10px;
    border: 1px solid var(--blau);
    color: var(--blau);
    font-size: 15px;
    border-radius: 3px;
    user-select: none;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
  }
  .nav ul { flex-direction: column; padding: 8px 16px 16px; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .menue-schalter:checked ~ .nav { display: block; }
}

/* ---------- Seitenkopf ---------- */

.buehne {
  background: var(--grau-hell);
  border-bottom: 1px solid var(--linie);
  padding: 48px 0;
}
.buehne .innen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.buehne h1 { margin: 0 0 16px; font-size: 34px; line-height: 1.2; color: var(--blau); }
.buehne .bestellung { margin: 0 0 28px; font-size: 18px; color: var(--grau); }
.buehne-bild { width: 100%; height: auto; display: block; border-radius: 3px; }
@media (max-width: 860px) {
  .buehne .innen { grid-template-columns: 1fr; gap: 28px; }
}

.seitenkopf {
  background: var(--grau-hell);
  border-bottom: 1px solid var(--linie);
  padding: 40px 0 32px;
}
.seitenkopf h1 { margin: 0 0 8px; color: var(--blau); font-size: 32px; line-height: 1.2; }
.seitenkopf p { margin: 0; color: var(--grau); max-width: 760px; }

@media (max-width: 600px) {
  .buehne { padding: 40px 0 36px; }
  .buehne h1 { font-size: 28px; }
  .seitenkopf h1 { font-size: 26px; }
}

/* ---------- Inhalt ---------- */

main section { padding: 40px 0; }
main section + section { border-top: 1px solid var(--linie); }

h2 { color: var(--blau); font-size: 24px; line-height: 1.3; margin: 0 0 16px; }
.zweispaltig h2:not(:first-child) { margin-top: 28px; }

.portrait { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid var(--linie); }

h3 { color: var(--blau); font-size: 19px; line-height: 1.3; margin: 0 0 8px; }

.schmal { max-width: 760px; }

.knopf {
  display: inline-block;
  padding: 12px 22px;
  background: var(--weiss);
  color: var(--blau);
  text-decoration: none;
  font-weight: bold;
  border: 2px solid var(--weiss);
  border-radius: 3px;
  margin: 4px 8px 4px 0;
}
.knopf:hover { background: transparent; color: var(--weiss); }
.knopf.zweit { background: transparent; color: var(--weiss); }
.knopf.zweit:hover { background: var(--weiss); color: var(--blau); }

.buehne .hinweis-klein { margin: 12px 0 0; font-size: 15px; color: var(--grau); }

.knopf.rand { background: transparent; color: var(--blau); border-color: var(--blau); }
.knopf.rand:hover { background: var(--blau); color: var(--weiss); }

.knopf.blau { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.knopf.blau:hover { background: var(--weiss); color: var(--blau); }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.kacheln.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .kacheln.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kacheln.vier { grid-template-columns: 1fr; } }

.kachel {
  border: 1px solid var(--linie);
  border-top: 4px solid var(--blau);
  padding: 20px;
  background: var(--weiss);
}
.kachel p { margin: 0 0 12px; }
.kachel p:last-child { margin-bottom: 0; }
.kacheln.vier .kachel { display: flex; flex-direction: column; }
.kacheln.vier .kachel p:last-child { margin-top: auto; padding-top: 4px; }

.liste { padding-left: 20px; }
.liste li { margin-bottom: 6px; }

.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; }
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 24px 60px;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blau);
  color: var(--weiss);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schritte h3 { padding-top: 8px; }

.kasten {
  background: var(--grau-hell);
  border-left: 4px solid var(--blau);
  padding: 16px 20px;
  margin: 20px 0;
}
.kasten p:last-child { margin-bottom: 0; }

.zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) { .zweispaltig { grid-template-columns: 1fr; } }

.daten { border-collapse: collapse; width: 100%; }
.daten th, .daten td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linie); }
.daten th, .daten td { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 600px) {
  .daten, .daten tbody, .daten tr, .daten tr th, .daten tr td { display: block; width: 100%; }
  .daten tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .daten th, .daten td { border-bottom: 0; padding: 0; }
  .daten th { font-size: 14px; margin-bottom: 2px; }
}

.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
.zeiten span:nth-child(odd) { color: var(--grau); }

.daten th { color: var(--grau); font-weight: normal; width: 34%; }

/* Offene Punkte im Entwurf – vor der Veröffentlichung entfernen */
.offen {
  background: #fff3b0;
  outline: 1px dashed #b38f00;
  padding: 0 4px;
}
.offen::before { content: "offen: "; font-weight: bold; color: #7a6000; }

/* ---------- Druck ---------- */

@media print {
  .kopf { position: static; }
  .menue-knopf, .offen { display: none; }
  main section { break-inside: avoid; }
  a { color: inherit; }
}

/* ---------- Fuß ---------- */

.fuss {
  background: var(--grau-hell);
  border-top: 1px solid var(--linie);
  padding: 32px 0;
  color: var(--grau);
  font-size: 14px;
  margin-top: 0;
}
.fuss .innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.fuss .marke img { width: 32px; height: 32px; flex-basis: 32px; }
.fuss .marke .name, .fuss .marke .beruf { font-size: 13px; }
.fuss p { margin: 8px 0 0; max-width: 420px; }
.fuss a { color: var(--grau); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 4px; }