/* ------- Farbschema & Grundschrift -------------------------------- */
:root {
  --tuerkis: #1abc9c;
  --tuerkis-dark: #119178;
  --grau-hell: #f4f6f7;
  --grau: #dfe2e4;
  --text: #1e1e1e;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, sans-serif; /*  V12-Standard  */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 400 1rem/1.6 var(--font);
  background: var(--grau-hell);
  color: var(--text);
}

/* ---------- Header ------------------------------------------------- */
header {
  background: var(--tuerkis);
  color: #fff;
  box-shadow: var(--shadow);
  padding: 0.6rem 0 0.4rem; /* viel flacher */
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Logo max-height, skaliert automatisch */
.logo-full {
  width: 100%;
  max-height: 48px;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  .logo-full {
    max-height: 40px;
  }
}

header h1 {
  font-size: clamp(0.95rem, 3vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
}
.kanzlei {
  font-size: 0.65em;
}
.name {
  font-family: "Sarala", sans-serif;
  font-size: 1em;
  white-space: nowrap;
}

/* Navigation -------------------------------------------------------- */
nav {
  margin-top: 0.45rem;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
nav a {
  padding: 0.28rem 0.75rem;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
nav a:hover,
nav a.active {
  background: #fff;
  color: var(--tuerkis-dark);
}

@media (max-width: 480px) {
  nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0.4rem;
  }
  nav a {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
  }
}

/* ---------- Hero --------------------------------------------------- */
.hero {
  padding: 2.6rem 1rem 2.2rem;
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--tuerkis) 0%,
    var(--tuerkis-dark) 100%
  );
  color: #fff;
}
.hero h2 {
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  margin-bottom: 0.5rem;
}
.hero p {
  font-size: 0.95rem;
}
.portrait {
  width: 210px;
  margin: 2rem auto 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Banner (Cover-Bild) ----------------------------------- */
.banner {
  width: 100%;
  height: 30vh;
  min-height: 200px;
  background-size: cover;
  background-position: center;
}

/* ---------- Services ---------------------------------------------- */
.services {
  padding: 3rem 1rem;
  text-align: center;
}
.services h2 {
  font-size: 1.6rem;
  margin-bottom: 1.4rem;
  color: var(--tuerkis-dark);
}
.service-box {
  background: #fff;
  border-left: 5px solid var(--tuerkis);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.2rem;
  margin-bottom: 1.3rem;
}
.service-box h3 {
  margin-bottom: 0.55rem;
  color: var(--tuerkis-dark);
}
@media (min-width: 650px) {
  .service-box {
    max-width: 760px;
    margin: 1rem auto;
  }
}

/* ---------- About -------------------------------------------------- */
.about {
  padding: 3rem 1rem;
  text-align: left;
}
.about img {
  width: 210px;
  border: 4px solid var(--tuerkis);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
  margin: 0 auto 1.4rem;
}
.about p {
  max-width: 740px;
  margin: 0 auto 1.4rem;
  hyphens: auto;
}
@media (max-width: 640px) {
  .about {
    text-align: left;
  }
  .about p {
    margin: 0 0 1.4rem;
    hyphens: auto;
  }
}

.timeline {
  max-width: 740px;
  margin: 0 auto;
  text-align: left;
}

.timeline ul {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
}
.timeline li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
  color: var(--text);
}
.timeline span {
  flex: 0 0 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--tuerkis);
  color: #fff;
  font: 600 0.8rem/2.4rem var(--font);
  text-align: center;
}

/* Sprachliste */
.languages ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 2.2rem 0 0;
  padding: 0;
}

.languages li {
  background: #fff;
  border: 2px solid var(--tuerkis);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.55rem 1.1rem;
  color: var(--tuerkis-dark);
  font-weight: 600;
}

/* ---------- Kontakt-Teaser / -Page ------------------------------- */
.contact-teaser,
.contact-page {
  padding: 3rem 1rem;
  background: #fff;
  text-align: center;
}
.contact-teaser h2,
.contact-page h2 {
  font-size: 1.6rem;
  margin-bottom: 1.1rem;
  color: var(--tuerkis-dark);
}
.contact-teaser a,
.contact-page a {
  color: var(--tuerkis-dark);
  text-decoration: none;
}
@media (max-width: 640px) {
  .contact-teaser,
  .contact-page {
    text-align: left;
  }
}

/* ---------- Footer ------------------------------------------------- */
footer {
  text-align: center;
  padding: 0.7rem;
  background: #fff;
  border-top: 4px solid var(--tuerkis);
  margin-top: 2.4rem;
  font-size: 0.78rem;
}
footer .impr {
  color: var(--tuerkis-dark);
  font-size: 0.8rem;
  text-decoration: none;
}
footer .impr:hover {
  text-decoration: underline;
}

/* ---------- Lokale Schriften -------------------------------------- */
@font-face {
  font-family: "Sarala";
  src: url("../fonts/Sarala-Regular.ttf") format("truetype");
}

/* ===== Impressum / Datenschutz ===== */
.impressum {
  max-width: 880px; /* schlanke Spalte */
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #fff; /* weißer Textblock auf grauem BG */
}
.impressum h1,
.impressum h2 {
  color: var(--tuerkis-dark);
}
.impressum a {
  color: var(--tuerkis-dark);
}
.impressum .back {
  display: inline-block;
  margin-bottom: 1.4rem;
  text-decoration: none;
  color: var(--tuerkis-dark);
}
.impressum section {
  margin-bottom: 2rem;
}
/* =================================== */