/* SV Preischel – Sachverständigenbüro Ralf Preischel */

/* ---------- Fonts ---------- */
@font-face{font-family:Jura;src:url(/assets/fonts/jura-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jura;src:url(/assets/fonts/jura-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(/assets/fonts/roboto-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(/assets/fonts/roboto-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --grau:#707070;
  --grau-dunkel:#5a5a5a;
  --grau-hell:#f2f2f2;
  --grau-band:#e2e2e2;
  --linie:#d8d8d8;
  --text:#5f5f5f;
  --weiss:#fff;
  --serif:Jura,'Trebuchet MS',sans-serif;
  --sans:Roboto,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --breite:1240px;
  --rand:24px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--text);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--grau-dunkel);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:#333}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--grau);line-height:1.2;margin:0 0 .55em}
h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.schmal{max-width:860px}
/* Fliesstext begrenzen, aber linksbuendig zum Raster darunter */
.einleitung > *{max-width:860px}

.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--weiss);color:var(--grau);padding:.75rem 1.25rem;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid #2f6f9f;outline-offset:2px}

/* ---------- Kopfbereich ---------- */
.kopf{background:var(--grau);position:sticky;top:0;z-index:50}
.kopf-innen{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;padding-block:1.1rem;
}
.logo{display:block;flex:0 0 auto}
.logo img{width:340px;max-width:min(340px,70vw)}

.nav-schalter{
  display:none;background:none;border:1px solid rgba(255,255,255,.55);
  color:var(--weiss);font:inherit;font-size:.95rem;
  padding:.5rem .85rem;border-radius:3px;cursor:pointer;
}
.nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  color:var(--weiss);text-decoration:none;font-size:1.0625rem;
  padding-block:.35rem;display:inline-block;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--weiss);border-bottom-color:rgba(255,255,255,.7)}
.nav a[aria-current=page]{border-bottom-color:var(--weiss)}

/* ---------- Kacheln ---------- */
.kacheln{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(3,1fr);
  margin:3.5rem 0;padding:0;list-style:none;
}
.kachel{position:relative;display:block;text-decoration:none;overflow:hidden;background:#ddd}
.kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.kachel:hover img,.kachel:focus-visible img{transform:scale(1.04)}
.kachel span{
  position:absolute;inset:auto 0 0 0;
  background:rgba(112,112,112,.88);color:var(--weiss);
  font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.25;
  text-align:center;padding:.9rem 1rem;
}

/* ---------- Abschnitte ---------- */
.block{padding-block:3.5rem}
.block-grau{background:var(--grau-hell)}
.willkommen h2{margin-bottom:1rem}
.zwei-spalten{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- Visitenkarte ---------- */
.person{background:var(--grau-band);padding-block:3.5rem}
.person-innen{display:grid;gap:2.5rem;align-items:center;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.person-bild{text-align:center}
.person-bild img{width:260px;height:260px;border-radius:50%;object-fit:cover;margin-inline:auto}
.person-bild h3{margin:1.2rem 0 .3rem;font-size:1.5rem}
.person-bild p{font-size:1rem}
.person ul{margin:0;padding-left:1.2rem}
.person li{margin-bottom:.9rem}
.person li:last-child{margin-bottom:0}

/* ---------- Leistungen ---------- */
.leistung{
  display:grid;gap:2.5rem;align-items:center;
  grid-template-columns:1fr 1fr;
  padding-block:3rem;border-top:1px solid var(--linie);
}
.leistung:first-of-type{border-top:0}
.leistung h2{margin-bottom:.6rem}
/* Bilder liegen nur in 400x300 vor - nicht weiter hochskalieren, sonst weich */
.leistung-bild{margin:0;text-align:center}
.leistung-bild img{width:100%;max-width:460px;aspect-ratio:4/3;object-fit:cover;margin-inline:auto}
/* Bild abwechselnd rechts und links */
.leistung:nth-of-type(even) .leistung-bild{order:-1}

/* ---------- Kontakt ---------- */
.kontaktdaten{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:2.5rem 0;
}
.karte{background:var(--grau-hell);padding:1.75rem}
.karte h3{margin-bottom:.6rem;color:var(--grau)}
.karte p{margin-bottom:.4rem}
.gross{font-size:1.2rem;font-weight:700}
.gross a{color:var(--grau-dunkel)}

/* ---------- Rechtstexte ---------- */
.rechtstext h2{margin-top:2.5rem;font-size:1.6rem}
.rechtstext h3{margin-top:1.8rem;color:var(--grau-dunkel)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext ul{padding-left:1.3rem}
.rechtstext li{margin-bottom:.5rem}

/* ---------- Fuß ---------- */
.fuss{background:var(--grau);color:var(--weiss);padding-block:3rem;margin-top:4rem}
.fuss-innen{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fuss h4{color:var(--weiss);font-size:1.1rem;margin-bottom:.7rem}
.fuss p{font-size:.98rem;margin-bottom:.35rem}
.fuss a{color:var(--weiss)}
.fuss img{width:150px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.45rem}
.fuss-unten{
  border-top:1px solid rgba(255,255,255,.25);
  margin-top:2.5rem;padding-top:1.25rem;
  font-size:.9rem;color:rgba(255,255,255,.85);
}

/* ---------- Mobil ---------- */
@media (max-width:980px){
  .kacheln{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* einspaltig, Bild immer ueber dem Text */
  .leistung{grid-template-columns:1fr;gap:1.5rem;padding-block:2.5rem}
  .leistung .leistung-bild{order:-1}
}
@media (max-width:860px){
  .nav-schalter{display:block}
  .nav{flex-basis:100%;display:none}
  .nav[data-offen]{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav li{border-top:1px solid rgba(255,255,255,.25)}
  .nav a{display:block;padding:.85rem 0;border-bottom:0}
  .nav a[aria-current=page]{font-weight:700;border-bottom:0}
  .kopf{position:static}
  html{scroll-padding-top:1rem}
}
@media (max-width:560px){
  .block,.person{padding-block:2.5rem}
  .kacheln{margin:2.5rem 0;grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kachel img{transition:none}
}