/* Schriften – lokal eingebunden, keine Verbindung zu Google */
@font-face {
  font-family: "Alegreya";
  src: url("fonts/alegreya.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* Farben – hier zentral änderbar */
:root {
  --grund: #F4F0E8;      /* Leinen */
  --grund-dunkel: #EAE3D6;
  --grund-gruen: #E4E8DC;
  --karte: #FBF9F4;
  --text: #2B2A26;
  --text-leise: #4A473F;
  --text-grau: #5E5A50;
  --linie: #DDD5C6;
  --linie-dunkel: #CFC6B5;
  --akzent: #4A5D3A;     /* Moosgrün */
  --akzent-dunkel: #2A3822;
  --erde: #7A5634;       /* Erdbraun */
  --platzhalter: #D6CCB9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Alegreya Sans", Georgia, sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #3F5233; }
a:hover { color: var(--akzent-dunkel); }

h1, h2, h3 { font-family: "Alegreya", Georgia, serif; font-weight: 500; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap-schmal { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* Kopfzeile */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 32px;
  padding-top: 20px; padding-bottom: 20px;
}
.marke {
  font-family: "Alegreya", Georgia, serif; font-size: 1.5rem; font-weight: 700;
  color: var(--text); text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 1rem; }
.nav a { padding: 10px 0; text-decoration: none; color: var(--text-leise); }
.nav a:hover { color: var(--akzent); }

/* Einstieg */
.hero { padding-top: 96px; padding-bottom: 72px; }
.dachzeile {
  margin: 0 0 16px; font-size: 0.95rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--akzent); font-weight: 700;
}
.hero h1 { margin: 0; font-size: 3.4rem; line-height: 1.12; max-width: 820px; }
.hero .rollen { margin: 28px 0 0; max-width: 680px; color: var(--text-leise); font-size: 1.2rem; }
.knoepfe { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.knopf {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
  border-radius: 4px; text-decoration: none; font-weight: 700;
}
.knopf-voll { background: var(--akzent); color: #fff; }
.knopf-voll:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf-rand { border: 1.5px solid #8C8475; color: var(--text); font-weight: 500; }
.knopf-rand:hover { border-color: var(--text); color: var(--text); }
.zweig { display: block; margin-top: 72px; }

/* Abschnitte */
.abschnitt { padding-top: 88px; padding-bottom: 88px; }
.abschnitt h2 { margin: 0 0 24px; font-size: 2.4rem; line-height: 1.2; }
.hell { background: var(--grund-dunkel); }
.gruen { background: var(--grund-gruen); }
.leise { color: var(--text-leise); }

/* Über mich */
.ueber { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.foto {
  flex: 1 1 280px; max-width: 360px; aspect-ratio: 4 / 5; border-radius: 4px;
  background: var(--platzhalter); display: flex; align-items: center; justify-content: center;
  color: var(--text-grau); font-size: 1rem; overflow: hidden;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.ueber-text { flex: 999 1 420px; min-width: 0; }
.ueber-text p { margin: 0 0 18px; }
.eckdaten { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 20px 48px; font-size: 1rem; }
.eckdaten dt { color: var(--text-grau); }
.eckdaten dd { margin: 0; font-weight: 500; }

/* Angebot */
.angebote { display: flex; flex-wrap: wrap; gap: 0 48px; margin-top: 16px; }
.angebot { flex: 1 1 420px; padding: 28px 0; border-top: 1px solid var(--linie-dunkel); }
.angebot h3 { margin: 0 0 8px; font-size: 1.45rem; }
.angebot p { margin: 0; color: var(--text-leise); }

/* Veranstaltungen */
.einleitung { margin: -12px 0 40px; color: var(--text-leise); max-width: 640px; }
.termine { display: flex; flex-direction: column; gap: 16px; }
.termin {
  background: var(--karte); border-radius: 4px; padding: 28px;
  display: flex; flex-wrap: wrap; gap: 16px 32px;
}
.datum { flex: 0 0 120px; font-family: "Alegreya", Georgia, serif; }
.datum .tag { font-size: 2.2rem; line-height: 1; font-weight: 700; color: var(--akzent); }
.datum .monat { font-size: 1rem; color: var(--text-leise); }
.termin-text { flex: 999 1 380px; min-width: 0; }
.termin-text h3 { margin: 0 0 6px; font-size: 1.4rem; }
.termin-text p { margin: 0 0 8px; }
.termin-text p:last-child { margin: 0; }
.etikett {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--akzent);
}
.etikett.empfehlung { color: var(--erde); }

/* Kontakt */
.kontakt { display: flex; flex-wrap: wrap; gap: 32px 64px; margin-top: 16px; }
.kontakt > div { flex: 1 1 260px; }
.kontakt h3, .klein-titel {
  margin: 0 0 8px; font-family: "Alegreya Sans", Georgia, sans-serif;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-grau);
}
.kontakt p { margin: 0; }

/* Rechtstexte */
.rechtstext { padding-top: 72px; padding-bottom: 96px; }
.rechtstext h1 { margin: 0 0 16px; font-size: 2.8rem; line-height: 1.15; }
.rechtstext h2 { margin: 36px 0 8px; font-size: 1.45rem; }
.rechtstext p { margin: 0 0 12px; }
.rechtstext .stand { margin-top: 40px; color: var(--text-grau); font-size: 1rem; }

/* Fußzeile */
.fuss { border-top: 1px solid var(--linie); }
.fuss .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-top: 28px; padding-bottom: 28px; font-size: 0.95rem; color: var(--text-grau);
}
.fuss nav { display: flex; gap: 24px; }
.fuss a { color: var(--text-grau); }

/* Handy */
@media (max-width: 640px) {
  body { font-size: 1.05rem; }
  .hero { padding-top: 56px; padding-bottom: 48px; }
  .hero h1 { font-size: 2.2rem; }
  .abschnitt { padding-top: 56px; padding-bottom: 56px; }
  .abschnitt h2 { font-size: 1.9rem; }
  .rechtstext h1 { font-size: 2.1rem; }
  .zweig { margin-top: 48px; }
}