:root {
  --bogen:        #e7eae0;   /* Herbarbogen, Papier mit Gruenstich */
  --bogen-tief:   #d8ddce;
  --etikett:      #fbfaf6;
  --tinte:        #2b3f28;   /* Dunkelgruen aus der Signatur */
  --tinte-weich:  #61705c;
  --gruen:        #7ab648;   /* Signalgruen aus dem Emblem */
  --beere:        #cf2030;   /* Beerenrot, genau einmal verwendet */
  --linie:        #c7cebb;
  --logo-papier:  #fbfaf6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bogen:      #171d16;
    --bogen-tief: #10150f;
    --etikett:    #1e261c;
    --tinte:      #e4e9dc;
    --tinte-weich:#9aa893;
    --linie:      #35402f;
    --logo-papier:#dfe3d7;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bogen) 40%, var(--bogen-tief) 100%);
  color: var(--tinte);
  font-family: 'Alegreya Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Der Bogen ---------- */

.bogen {
  position: relative;
  width: min(43rem, 100%);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  animation: auftauchen .9s cubic-bezier(.2,.7,.3,1) both;
}

/* Eckhalter — die Papierecken, mit denen gepresste Pflanzen aufgezogen werden */
.ecke {
  position: absolute;
  width: 34px; height: 34px;
  border: 1.5px solid var(--linie);
  pointer-events: none;
}
.ecke.ol { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.ecke.or { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.ecke.ul { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.ecke.ur { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* ---------- Signatur auf Papierfeld ----------
   Das Etikett mit der Handschrift des Sammlers klebt auf dem Bogen.
   Deshalb bleibt das Feld in beiden Modi hell. */

.feld {
  display: block;
  width: fit-content;
  background: var(--logo-papier);
  padding: .7rem 1rem;
  margin: 0 0 clamp(2rem, 5vw, 2.75rem);
  border: 1px solid var(--linie);
  box-shadow: 0 8px 20px -18px rgba(20,30,18,.7);
}

/* Feste Breite, keine Prozentangabe: Sonst rechnet der Browser bei fit-content
   mit der Ursprungsbreite des Bildes und sprengt auf schmalen Schirmen das Layout. */
.signatur {
  display: block;
  width: 215px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 30rem) {
  .signatur { width: 165px; }
  .feld { padding: .55rem .8rem; }
}

/* ---------- Text ---------- */

.kennung {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin: 0 0 .9rem;
}

h1 {
  font-family: 'Alegreya', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 6.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 1.4rem;
  max-width: 16ch;
}

p {
  margin: 0 0 1.1rem;
  max-width: 46ch;
  color: var(--tinte);
}

p.leise { color: var(--tinte-weich); }

/* ---------- Das Etikett ---------- */

.etikett {
  margin: clamp(2rem, 5vw, 2.75rem) 0 0;
  background: var(--etikett);
  border: 1px solid var(--linie);
  padding: 1.4rem clamp(1.1rem, 3vw, 1.75rem);
  box-shadow: 0 1px 0 rgba(43,63,40,.04), 0 12px 28px -22px rgba(43,63,40,.5);
}


.etikett a {
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gruen);
  padding-bottom: 1px;
  transition: background-color .18s ease;
}
.etikett a:hover, .etikett a:focus-visible {
  background: color-mix(in srgb, var(--gruen) 18%, transparent);
}

/* ---------- Newsletter ---------- */

.melden {
  margin: 0;
}

.melden-titel {
  font-family: 'Alegreya', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 .35rem;
  max-width: none;
}

.melden-text {
  margin: 0 0 1rem;
  max-width: 42ch;
  color: var(--tinte-weich);
}

.melden-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.melden input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  color: var(--tinte);
  background: var(--bogen);
  border: 1px solid var(--linie);
  padding: .7rem .85rem;
  border-radius: 0;
}
.melden input[type="email"]::placeholder { color: var(--tinte-weich); opacity: .75; }
.melden input[type="email"]:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 1px;
  border-color: var(--gruen);
}

.melden button {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: #4f8c2b;
  border: 1px solid #4f8c2b;
  padding: .7rem 1.4rem;
  cursor: pointer;
  border-radius: 0;
  transition: background-color .18s ease, border-color .18s ease;
}
.melden button:hover, .melden button:focus-visible {
  background: #3f7321;
  border-color: #3f7321;
}

.melden-fein {
  margin: .85rem 0 0;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--tinte-weich);
  max-width: 42ch;
}

.nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible, :focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
}

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bogen { animation: none; }
  * { transition-duration: .01ms !important; }
}

@media (max-width: 30rem) {
  .melden button { flex: 1 1 100%; }
}

/* Letzter Absatz in der Karte ohne Abstand nach unten */
.etikett > p:last-child { margin-bottom: 0; }