/* Natur bewusst – Stylesheet
   Layout: ruhige Einspaltigkeit mit farbigen Bändern (Waldgrün, Leinen, Salbei),
   Angebot als drei „Herbarium-Bögen“ mit Pflanzenetikett. */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Farben aus dem Moodboard */
  --wald: #2f5b43;      /* Waldgrün: Hauptfarbe */
  --wald-tief: #24473a;
  --salbei: #9eb0a0;
  --leinen: #e4e1d6;    /* Hellgrau-Beige */
  --creme: #faf5f0;
  --rose: #edd5ca;
  --erde: #7e5b43;      /* Braun: Akzent für Etiketten */
  --tinte: #26302a;     /* Text */
  --tinte-leise: #4a544e;
  --linie: #cfcabd;

  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --mass: 68rem;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
}
img, svg { max-width: 100%; }
a { color: var(--wald); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--erde); }
:focus-visible { outline: 2px solid var(--erde); outline-offset: 3px; border-radius: 2px; }
strong { font-weight: 500; }

/* Platzhalter: im Entwurf sichtbar markiert, vor dem Livegang ersetzen */
.ph {
  background: repeating-linear-gradient(-45deg, #f6e3d9, #f6e3d9 6px, #f1d6c9 6px, #f1d6c9 12px);
  color: var(--erde);
  border: 1px dashed var(--erde);
  border-radius: 3px;
  padding: 0 0.35em;
  font-style: normal;
}

.wrap {
  max-width: var(--mass);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.eyebrow {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: clamp(2.1rem, 4.5vw, 3rem); }
h3 { font-size: 1.65rem; font-weight: 500; }
p { margin: 0; }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--wald); color: var(--creme); }
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.1rem;
}
.wortmarke {
  font-family: var(--f-display); font-size: 1.45rem; font-style: italic; font-weight: 500;
  color: var(--creme); text-decoration: none; letter-spacing: 0.01em;
}
.wortmarke:hover { color: var(--rose); }
.kopf nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.kopf nav a {
  color: var(--creme); text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.kopf nav a:hover { color: var(--rose); }

/* ---------- Hero ---------- */
.hero { background: var(--wald); color: var(--creme); position: relative; overflow: hidden; }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 2rem; align-items: center;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 8vw, 6rem);
}
.hero .eyebrow { color: var(--salbei); }
.hero h1 {
  font-size: clamp(3.6rem, 11vw, 7.6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-block: 1.1rem 1.4rem;
}
.hero h1 em { font-style: italic; color: var(--rose); }
.hero .lead {
  font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.35; max-width: 30ch; color: #f1ebe4;
}
.eroeffnung {
  margin-top: 2.4rem;
  display: inline-flex; align-items: stretch; flex-wrap: wrap;
  border: 1px solid rgba(250, 245, 240, 0.35);
}
.eroeffnung > div { padding: 0.9rem 1.3rem; }
.eroeffnung > div + div { border-left: 1px solid rgba(250, 245, 240, 0.35); }
.eroeffnung .klein { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--salbei); display: block; }
.eroeffnung .gross { font-family: var(--f-display); font-size: 1.75rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.hero-zweig { justify-self: end; width: min(100%, 22rem); color: var(--salbei); opacity: 0.9; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(4rem, 9vw, 7rem); }
.abschnitt-kopf { display: grid; gap: 0.9rem; max-width: 42rem; margin-bottom: 3rem; }
.abschnitt-kopf .eyebrow { color: var(--erde); }

.willkommen .wrap {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.willkommen h2 em { font-style: italic; color: var(--wald); }
.willkommen .text { display: grid; gap: 1.2rem; max-width: 36rem; }
.willkommen .text p:first-child::first-letter {
  font-family: var(--f-display); float: left; font-size: 4.1rem; line-height: 0.8;
  padding: 0.35rem 0.6rem 0 0; color: var(--wald);
}

/* Angebot als Herbarium-Bögen */
.angebot { background: var(--leinen); }
.boegen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.bogen {
  background: #fdfbf7;
  border: 1px solid var(--linie);
  padding: 2rem 1.6rem 1.6rem;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem;
  min-width: 0;
}
.bogen .pflanze { height: 8.5rem; display: flex; justify-content: center; color: var(--wald); }
.bogen .pflanze svg { height: 100%; width: auto; }
.bogen p { color: var(--tinte-leise); }
.bogen ul { margin: 0; padding: 0; list-style: none; color: var(--tinte-leise); font-size: 0.97rem; }
.bogen li { padding-left: 1.1rem; position: relative; }
.bogen li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.45rem; height: 1px; background: var(--erde); }
.etikett {
  margin-top: 0.6rem;
  border: 1px solid var(--erde);
  padding: 0.55rem 0.8rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--erde);
}
.etikett i { font-family: var(--f-display); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.hinweis { margin-top: 2rem; font-size: 0.88rem; color: var(--tinte-leise); max-width: 46rem; }

/* Über Romana */
.romana .wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center;
  max-width: 54rem;
}
.portrait {
  width: clamp(8rem, 20vw, 11rem); aspect-ratio: 1; border-radius: 50%; max-width: 100%;
  background: var(--rose); color: var(--erde);
  display: grid; place-items: center; text-align: center; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px dashed var(--erde); padding: 1rem; overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.romana .text { display: grid; gap: 0.9rem; }
.romana .eyebrow { color: var(--erde); }
.romana h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
.romana p { color: var(--tinte-leise); max-width: 40rem; }

/* Besuch */
.besuch { background: var(--salbei); }
.besuch .abschnitt-kopf .eyebrow { color: var(--wald-tief); }
.besuch-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: stretch; }
.infos {
  background: var(--creme); padding: 2rem 1.8rem; display: grid; gap: 1.6rem; align-content: start; min-width: 0;
}
.infos h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.infos address { font-style: normal; }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.2rem; margin: 0; font-variant-numeric: tabular-nums; }
.zeiten dt { font-weight: 400; }
.zeiten dd { margin: 0; }
.klein-text { font-size: 0.88rem; color: var(--tinte-leise); }
.sozial { display: flex; gap: 1rem; flex-wrap: wrap; }

.karte {
  position: relative; min-height: 22rem; background: var(--wald-tief); color: var(--creme);
  overflow: hidden; display: grid;
}
.karte iframe { border: 0; width: 100%; height: 100%; min-height: 22rem; display: block; }
.karte-platz {
  position: relative; display: grid; align-content: center; justify-items: start; gap: 1rem;
  padding: 2rem 1.8rem;
  background:
    radial-gradient(circle at 70% 40%, rgba(158, 176, 160, 0.25), transparent 55%),
    var(--wald-tief);
}
.karte-platz svg.strassen { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--salbei); opacity: 0.35; }
.karte-platz > *:not(svg) { position: relative; }
.karte-platz p { max-width: 30rem; font-size: 0.92rem; color: #e6e9e3; }
.karte-platz a { color: var(--rose); }
.knopf {
  font: inherit; font-weight: 400; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--creme); color: var(--wald); border: 0; padding: 0.85rem 1.4rem; cursor: pointer;
}
.knopf:hover { background: var(--rose); }
.links-zeile { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.9rem; }

/* Fuß */
.fuss { background: var(--wald-tief); color: #dfe5df; font-size: 0.9rem; }
.fuss .wrap {
  padding-block: 2.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.fuss a { color: var(--creme); }
.fuss nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.fuss .wortmarke { font-size: 1.3rem; }

/* ---------- Rechtstexte ---------- */
.rechtstext { padding-block: clamp(3rem, 7vw, 5rem); }
.rechtstext .wrap { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2.6rem, 6vw, 3.6rem); margin-bottom: 0.6rem; }
.rechtstext h2 { font-size: 1.7rem; margin-top: 2.6rem; margin-bottom: 0.7rem; }
.rechtstext h3 { font-size: 1.25rem; margin-top: 1.6rem; margin-bottom: 0.4rem; }
.rechtstext p, .rechtstext ul, .rechtstext dl { margin-bottom: 0.9rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.45rem 1.2rem; }
.rechtstext dt { font-weight: 400; color: var(--tinte-leise); }
.rechtstext dd { margin: 0; }
.stand { color: var(--tinte-leise); font-size: 0.9rem; }

/* ---------- Schmal ---------- */
@media (max-width: 860px) {
  .hero .wrap, .willkommen .wrap, .besuch-raster { grid-template-columns: minmax(0, 1fr); }
  .hero-zweig { display: none; }
  .boegen { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
}
@media (max-width: 560px) {
  .kopf nav { display: none; }
  .romana .wrap { grid-template-columns: minmax(0, 1fr); }
  .eroeffnung > div + div { border-left: 0; border-top: 1px solid rgba(250, 245, 240, 0.35); }
  .eroeffnung { display: grid; }
  .rechtstext dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .rechtstext dd { margin-bottom: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }