/* christine-heinrichs.de — gesamtes Styling.
   Farben, Schriftgroessen, Abstaende: alles unter :root anpassbar. */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papier: #fbfaf8;        /* Seitenhintergrund */
  --flaeche: #ffffff;       /* Kopfbereich */
  --tinte: #33312d;         /* Fliesstext */
  --grau: #6f6b62;          /* Nebentext */
  --linie: #e7e2d9;         /* Trennlinien */
  --akzent: #2d566b;        /* Foerde-Blau */
  --akzent-dunkel: #22455a;
  --akzent-hell: #eef3f6;   /* Hinweiskaesten */
  --fuss: #24333d;          /* Footer-Hintergrund */
  --titel: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: 52rem;            /* die eine Inhaltsspalte */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--text);
  margin-inline: auto;
  padding-inline: 1.4rem;
}

a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-dunkel); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--akzent); color: #fff; }

.klein { font-size: 0.92rem; color: var(--grau); }

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

/* ---------- Kopf: alles mittig auf einer Achse ---------- */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  text-align: center;
}
.kopf .wrap { max-width: 60rem; }
.marke { padding-block: 1.7rem 0.9rem; }
.wortmarke {
  font-family: var(--titel);
  font-size: 1.4rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  color: var(--tinte);
  text-decoration: none;
}
.wortmarke:hover { color: var(--akzent); }
.untertitel {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grau);
  font-size: 0.72rem;
  margin-top: 0.2rem;
}
.hauptnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 1.5rem;
  padding-block: 0.35rem 0.9rem;
}
.hauptnav a {
  font-family: var(--titel);
  font-size: 0.95rem;
  color: #55524b;
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover { color: var(--akzent); }
.hauptnav a.aktiv {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
  font-weight: 550;
}

/* ---------- Inhalt: eine ruhige Spalte ---------- */

main { padding-block: 2.75rem 4rem; }

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--akzent);
  font-family: var(--titel);
  font-weight: 600;
  font-size: 0.76rem;
  margin-bottom: 0.7rem;
}

h1 {
  font-family: var(--titel);
  font-size: clamp(1.75rem, 3.5vw, 2.15rem);
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.prosa h2 {
  font-family: var(--titel);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2.25rem 0 0.5rem;
}
.prosa p, .prosa ul { margin-block: 1rem; }
.prosa ul { padding-left: 1.4rem; }
.prosa li { margin-block: 0.3rem; }

.hero { margin: 2rem 0; }
.hero img,
.kartenbild img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.hero img { box-shadow: 0 10px 28px -16px rgba(36, 51, 61, 0.35); }

.kartenbild { margin: 2rem 0; }
.kartenbild img { border: 1px solid var(--linie); }
.kartenbild figcaption {
  font-size: 0.84rem;
  color: var(--grau);
  margin-top: 0.5rem;
}

.hinweis {
  background: var(--akzent-hell);
  border-radius: 12px;
  padding: 1.15rem 1.4rem;
  margin: 2rem 0;
}
.hinweis p { margin: 0; }
.hinweis p + p { margin-top: 0.75rem; }

.adresse-block { line-height: 1.6; }

/* Home-Abschnitte: Karten, buendig zur Textspalte gestapelt */
.kartenreihe {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0;
}
.karte {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.7rem;
  box-shadow: 0 1px 2px rgba(36, 51, 61, 0.04), 0 10px 28px -18px rgba(36, 51, 61, 0.22);
}
.karte h2 {
  font-family: var(--titel);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.karte p { margin-block: 0.8rem; }
.karte p:first-of-type { margin-top: 0; }
.karte p:last-child { margin-bottom: 0; }

.btn {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  font-family: var(--titel);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
}
.btn:hover { background: var(--akzent-dunkel); color: #fff; }

.mehr { font-family: var(--titel); font-weight: 550; text-decoration: none; }
.mehr::after { content: " \2192"; }
.mehr:hover { text-decoration: underline; }

/* ---------- Fuss ---------- */

.fuss {
  background: var(--fuss);
  color: #dde6ec;
  font-size: 0.95rem;
  text-align: center;
}
.fuss-spalten {
  display: grid;
  gap: 1.9rem;
  padding-block: 2.75rem 2.25rem;
}
.fuss h2 {
  font-family: var(--titel);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  font-weight: 600;
  color: #9fb4c2;
  margin-bottom: 0.5rem;
}
.fuss p { margin-block: 0.4rem; }
.fuss a { color: #fff; }
.fuss a:hover { color: #c8d8e2; }
.fuss .klein { color: #9fb4c2; font-size: 0.88rem; }
.fuss-zeile {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.2rem;
  color: #9fb4c2;
  font-size: 0.84rem;
}

@media print {
  .kopf, .fuss, .skip { display: none; }
  body { background: #fff; }
}