/* Schriften lokal gehostet – keine Verbindung zu Google */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

/* Aufbau: Mobile First. Basis = schmales Handy, groessere Layouts
   kommen erst ueber min-width dazu. */

:root {
  --mist: #F2F4F1;
  --pine: #1B2E2A;
  --moss: #2F6F5E;
  --sage: #D9E4DE;
  --stone: #5C6F69;
  --white: #FFFFFF;

  /* Seitenrand waechst mit dem Viewport und weicht der Notch aus */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --gutter-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-right: max(var(--gutter), env(safe-area-inset-right, 0px));

  --hero-overlay: linear-gradient(160deg, rgba(27,46,42,0) 55%, rgba(27,46,42,.35));

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

html, body { height: 100%; }
html {
  /* iOS vergroessert Text im Querformat sonst eigenmaechtig */
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--mist);
  color: var(--pine);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

.page {
  display: grid;
  /* minmax(0, …) verhindert, dass breite Inhalte die Spalte aufblaehen */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100%;
  /* svh = Viewport mit sichtbarer Browserleiste: kein Sprung beim Scrollen */
  min-height: 100svh;
}

/* Bildseite */
.visual {
  position: relative;
  background-color: var(--sage);
  background-image: var(--hero-overlay), url("assets/IMG-20260909-WA0002-900.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Fester Bildstreifen: zeigt die Praxis, verdraengt aber nie die Kontaktdaten */
  height: clamp(11rem, 34svh, 22rem);
}

/* Inhaltsseite */
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(1.75rem, 5vw, 5rem);
  padding-bottom: max(clamp(1.75rem, 5vw, 5rem), env(safe-area-inset-bottom, 0px));
  padding-inline: var(--gutter-left) var(--gutter-right);
}
/* Auf sehr breiten Monitoren nicht endlos auseinanderlaufen */
.content > section { max-width: 42rem; }

.brand {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}
.brand .logo {
  display: block;
  height: clamp(40px, 6vw, 64px);
  width: auto;
  max-width: 100%;
  /* JPG mit weißem Hintergrund: Weiß verschmilzt mit dem Seitenhintergrund */
  mix-blend-mode: multiply;
}
.brand small {
  display: block;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 400;
  font-size: .95rem;
  color: var(--stone);
  letter-spacing: 0;
}

h1 {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.15rem, 1.45rem + 3.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 12ch;
  margin-bottom: 1.25rem;
  /* lange deutsche Woerter duerfen umbrechen statt herauszuragen */
  overflow-wrap: break-word;
  hyphens: auto;
}
.lead {
  max-width: 38ch;
  color: var(--stone);
  margin-bottom: 2.25rem;
}

.contact {
  display: grid;
  /* min(15rem, 100%) laesst die Spalten auf schmalen Handys zusammenklappen */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.75rem 1.25rem;
  max-width: 40rem;
}
.dept { display: grid; gap: .6rem; align-content: start; }
.dept h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}
.contact a {
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(1rem, 3vw, 1.25rem);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid var(--sage);
  background: var(--white);
  transition: border-color .15s ease, background-color .15s ease;
}
.contact a span { font-size: .95rem; color: var(--stone); }
.contact a strong {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.contact a.primary {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--white);
}
.contact a.primary span { color: rgba(255,255,255,.8); }
a:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }

/* Hover nur dort, wo es wirklich einen Mauszeiger gibt –
   auf Touchgeraeten bleibt der Zustand sonst nach dem Tippen kleben */
@media (hover: hover) {
  .contact a:hover { border-color: var(--moss); }
  .contact a.primary:hover { background: #275E50; }
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  font-size: .95rem;
  color: var(--stone);
}
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
footer a { color: inherit; }

/* Ab Tablet: grosses Bild nachladen, davor reicht die 900px-Fassung */
@media (min-width: 45em) {
  .visual {
    background-image: var(--hero-overlay), url("assets/IMG-20260909-WA0002.jpg");
  }
}

/* Ab Laptop: Bild links, Inhalt rechts */
@media (min-width: 60em) {
  .page {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: none;
  }
  .visual { height: auto; }
}

/* Handy im Querformat: breit, aber flach – hier lohnt sich die
   Zweiteilung frueher, sonst bleibt vom Inhalt nichts uebrig */
@media (min-width: 40em) and (max-height: 32em) {
  .page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: none;
  }
  .visual { height: auto; }
  .content { justify-content: flex-start; gap: 1.75rem; }
  .brand .logo { height: 38px; }
  h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem); margin-bottom: .75rem; }
  .lead { margin-bottom: 1.5rem; }
  .contact { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding-block: clamp(2rem, 6vw, 4.5rem) 4rem;
  padding-bottom: max(4rem, env(safe-area-inset-bottom, 0px));
  padding-inline: var(--gutter-left) var(--gutter-right);
  overflow-wrap: break-word;
}
.legal .brand { margin-bottom: clamp(2rem, 6vw, 3rem); }
.legal .brand a { color: inherit; text-decoration: none; display: inline-block; }
footer address { font-style: normal; }
.legal h1 {
  max-width: none;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  margin-bottom: 2rem;
}
.legal h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  margin: 2.5rem 0 .6rem;
  hyphens: auto;
}
.legal h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .4rem; }
.legal p, .legal ul, .legal address { margin-bottom: 1rem; font-style: normal; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: .3rem; }
.legal a { color: var(--moss); text-underline-offset: 2px; }
.legal .back {
  display: inline-block;
  margin-top: 3rem;
  font-weight: 600;
}
.legal .stand { color: var(--stone); font-size: .95rem; margin-top: 2.5rem; }