/* sitelook.de — Farben und Schriften aus dem bisherigen Auftritt (Elementor-Kit) */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("/fonts/merriweather-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primaer: #16163F;
  --sekundaer: #6C6B7D;
  --text: #4A4A4A;
  --akzent: #00B2DD;
  --fuss: #161632;
  --linie: #D7D7D7;
  --hell: #F5F5F8;
  --weiss: #FFFFFF;
  --breite: 72rem;
  --lesebreite: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: "Merriweather", Georgia, serif;
  color: var(--primaer);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin: 2.5rem 0 1rem; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.5rem; }
h4 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }

p, ul, ol { margin: 0 0 1rem; }

a { color: var(--primaer); text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--akzent); }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

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

.skip { position: absolute; left: -999px; top: 0; background: var(--primaer); color: var(--weiss); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* Kopf */
.kopf { background: var(--weiss); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; }
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem;
}
.logo { display: block; line-height: 0; }
.logo img { width: 190px; }
.kopf nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.kopf nav a {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text);
  text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent;
}
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--primaer); border-bottom-color: var(--akzent); }

/* Bereiche */
.breit { max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }

.held { background: var(--hell); padding: clamp(3rem, 8vw, 6rem) 0; border-bottom: 4px solid var(--akzent); }
.held .breit > * { max-width: var(--lesebreite); }
.lead { font-size: 1.2rem; color: var(--primaer); font-weight: 500; }
.seit { color: var(--sekundaer); font-weight: 500; letter-spacing: 0.04em; }

.leistungen, .referenzen, .kontakt { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.leistungen h2, .referenzen h2, .kontakt h2 { margin-top: 0; }

.kacheln {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem;
  counter-reset: kachel;
}
.kachel {
  counter-increment: kachel;
  border: 1px solid var(--linie); border-top: 4px solid var(--akzent);
  padding: 1.5rem; background: var(--weiss); display: flex; flex-direction: column;
}
.kachel::before { content: "0" counter(kachel); font-family: "Merriweather", Georgia, serif; color: var(--sekundaer); font-size: 0.9rem; }
.kachel h3 { margin: 0.5rem 0 0.75rem; }
.kachel h3 a { text-decoration: none; }
.kachel p { font-size: 0.975rem; }
.kachel .mehr { margin-top: auto; margin-bottom: 0; font-weight: 600; font-size: 0.9rem; }

.referenzen { background: var(--hell); }
.referenzen p { max-width: var(--lesebreite); }
.referenzen strong { color: var(--primaer); display: block; font-family: "Merriweather", Georgia, serif; font-weight: 700; margin-bottom: 0.25rem; }

/* Einzelseiten */
.seite { max-width: calc(var(--lesebreite) + 2rem); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.seite h1 { border-bottom: 4px solid var(--akzent); padding-bottom: 1rem; }
.seite hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }
.kontakt-kurz { margin-top: 3rem; padding: 1.25rem 1.5rem; background: var(--hell); border-left: 4px solid var(--akzent); }
.kontakt-kurz p { margin: 0; }

/* Fuß */
.fuss { background: var(--fuss); color: #E4E4EC; padding: 3rem 0 1.5rem; font-size: 0.95rem; }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--akzent); }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 1rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem;
}
.fuss-logo { width: 160px; margin-bottom: 1rem; }
.fuss nav ul { list-style: none; padding: 0; margin: 0; }
.fuss-copy { max-width: var(--breite); margin: 2rem auto 0; padding: 1rem 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.15); color: #B9B9C8; font-size: 0.85rem; }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .kopf-innen { justify-content: flex-start; }
  .logo img { width: 160px; }
  .kopf nav ul { gap: 0.25rem 1rem; }
}