:root {
  --gruen: #1e5a10;        /* Grün der runden Scheibe hinter dem Stern (Vorlage Jutta), etwas heller als der Mittelwert #235114 */
  --gruen-dunkel: #153f0b;
  --gold: #b8963e;
  --gold-hell: #e8d9a8;
  --creme: #faf7ef;
  --text: #26302b;
  --linie: #ddd3b8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  color: var(--gruen);
  line-height: 1.25;
}

a { color: var(--gruen); }
a:hover { color: var(--gold); }

.huelle { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.schmal { max-width: 720px; }

/* Kopf */
.kopf {
  background: var(--gruen);
  color: #fff;
  text-align: center;
  padding: 56px 16px 48px;
  border-bottom: 4px solid var(--gold);
}
.kopf h1 {
  color: #fff;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}
.kopf h1 span { color: var(--gold-hell); font-style: italic; }
.kopf p { margin: 0; color: var(--gold-hell); font-size: 1.05rem; }
.kopf .menue { margin-top: 26px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.kopf .menue a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; font-size: 0.95rem; }
.kopf .menue a:hover { color: var(--gold-hell); }

/* Abschnitte */
section { padding: 52px 0; }
section + section { border-top: 1px solid var(--linie); }
section h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); margin-top: 0; }
.unterzeile { color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 4px; }

.knopf, button.knopf {
  display: inline-block;
  background: var(--gruen);
  color: #fff;
  text-decoration: none;
  border: 2px solid var(--gold);
  padding: 12px 26px;
  font: inherit;
  cursor: pointer;
}
.knopf:hover, button.knopf:hover { background: var(--gruen-dunkel); color: #fff; }

/* Interview-Bild mit Abspiel-Symbol, verlinkt zum Video */
.video { margin: 28px 0; max-width: 768px; } /* nicht größer als das Originalbild (768 px), sonst unscharf */
.video a { position: relative; display: block; border: 3px solid var(--gold); background: #fff; padding: 5px; line-height: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.12); } /* weißer Passepartout-Rand rundherum, goldener Rahmen außen */
.video img { width: 100%; height: auto; display: block; }
.video .abspielen {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  background: rgba(30, 90, 16, 0.88); border: 3px solid var(--gold-hell); border-radius: 50%;
}
.video .abspielen::after {
  content: ""; position: absolute; left: 28px; top: 20px;
  border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff;
}
.video a:hover .abspielen, .video a:focus-visible .abspielen { background: var(--gruen-dunkel); }
.video figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--gruen); text-align: center; }

.zitat {
  background: #fff;
  border-left: 4px solid var(--gold);
  padding: 20px 24px;
  font-style: italic;
}
.zitat footer { font-style: normal; color: var(--gruen); margin-top: 10px; }

/* Über mich: Text links, Bild rechts (mobil untereinander) */
.ueber-mich { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 44px; align-items: center; }
.ueber-mich h2 { margin-bottom: 12px; }
.ueber-bild { margin: 0; border: 3px solid var(--gold); background: #fff; padding: 5px; line-height: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.ueber-bild img { width: 100%; height: auto; display: block; }
@media (min-width: 720px) { .ueber-mich { grid-template-columns: 1fr 470px; gap: 36px; } }

/* Produkte */
.produkte { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 28px 0; }
.produkt {
  background: #fff;
  border: 1px solid var(--linie);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 16px;
}
.produkt img { width: 130px; height: auto; align-self: center; }
.produkt h3 { margin: 0 0 2px; font-size: 1.15rem; }
.produkt .preis { color: var(--gold); font-weight: bold; margin: 0 0 8px; }
.produkt p { margin: 0 0 10px; font-size: 0.93rem; }
.produkt .erfahrung { font-style: italic; border-left: 3px solid var(--gold); padding-left: 10px; }
.menge { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; }
.menge input { width: 76px; }

/* Formular */
label { display: block; font-size: 0.9rem; margin-bottom: 4px; }
input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #b9ae8e;
  background: #fff;
  width: 100%;
}
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.felder { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
.summe { background: var(--gruen); color: #fff; padding: 16px 20px; margin: 22px 0; }
.summe strong { font-size: 1.3rem; }
.hinweis { font-size: 0.88rem; color: #4f5a54; }
.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; }
.einwilligung input { width: auto; margin-top: 5px; }
.verborgen { position: absolute; left: -9999px; }

.versand { margin-top: 28px; background: #fff; border-left: 4px solid var(--gold); padding: 16px 22px; font-size: 0.95rem; }
.versand h3 { margin: 0 0 8px; font-size: 1.15rem; }
.versand p { margin: 0 0 8px; }

/* Fuß */
.fuss { background: var(--gruen-dunkel); color: var(--gold-hell); text-align: center; padding: 30px 16px; font-size: 0.9rem; }
.fuss a { color: #fff; margin: 0 10px; }

/* Entwurfsbanner (Rechtsseiten) */
.entwurf { background: #fff3cd; border: 2px solid #d9a400; padding: 12px 16px; margin: 20px 0; font-size: 0.9rem; }
.recht h2 { font-size: 1.3rem; margin-top: 32px; }
.recht { padding: 40px 0; }

@media (min-width: 720px) {
  .felder.zwei { grid-template-columns: 1fr 1fr; }
  /* Produkte untereinander, jedes über die ganze Breite, schmal und klar */
  .produkt { grid-template-columns: 160px 1fr; align-items: center; }
  .produkt img { width: 160px; }
}