/* herbs.wohlsein.today — Gestaltung
 *
 * Farben aus Nicoles Logo gemessen, nicht gewaehlt: das Magenta ist der
 * Schlagschatten des Schriftzugs und die Trennlinie darunter. Primaer ist
 * SCHWARZ (die Kalligrafie traegt), Magenta ist untergeordnet — Linien, Links,
 * aktive Zustaende. Gefuellte Flaeche nur auf den zwei echten Handlungen.
 *
 * Mobil ist der Entwurf, nicht die Anpassung: alles unten ist fuer ein Telefon
 * geschrieben, der Desktop ist die Erweiterung.
 */

:root {
  --akzent: #a01953;
  --akzent-hell: #e8c2d9;
  --papier: #faf7f4;      /* kein Reinweiss — sonst stechen die Fotos aus */
  --papier-tief: #f2ece6;
  --tinte: #1a1618;
  --tinte-leise: #6b6167;
  --linie: #e2d8d2;
  --serife: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rand: clamp(1rem, 4vw, 2rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serife);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Kein waagerechtes Scrollen — nirgends, auf keiner Seite. */
  overflow-x: hidden;
}

.rahmen { max-width: 46rem; margin: 0 auto; padding: 0 var(--rand); }

a { color: var(--akzent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf { padding: 1.5rem 0 0.75rem; text-align: center; }
.kopf img { width: min(17rem, 72vw); height: auto; }
.kopf .unterzeile {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-top: 0.35rem;
}
.trennlinie { height: 1px; background: var(--akzent); opacity: 0.55; margin: 1rem 0 1.5rem; }

/* ── Miriam: das Suchfeld ─────────────────────────────────────────────── */
.frage { position: relative; }
.frage-zeile { display: flex; gap: 0.5rem; }

/* 16px Minimum — darunter zoomt iOS beim Fokus ungefragt hinein. */
#frageFeld {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--tinte);
}
#frageFeld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }

/* Eine der zwei gefuellten Flaechen der ganzen Seite. */
#frageKnopf {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 1.15rem;
  min-height: 44px;              /* Daumenziel */
  border: 0;
  border-radius: 0.6rem;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
}
#frageKnopf[disabled] { opacity: 0.55; cursor: default; }

.hinweiszeile {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--tinte-leise);
  margin: 0.5rem 0 0;
}

/* Sofort-Treffer aus dem Namensindex — erscheinen, waehrend Miriam noch denkt. */
#treffer { list-style: none; margin: 0.5rem 0 0; padding: 0; }
#treffer li { border-bottom: 1px solid var(--linie); }
#treffer a {
  display: block;
  padding: 0.75rem 0.25rem;      /* grosszuegig, damit man nicht zielen muss */
  min-height: 44px;
  text-decoration: none;
  color: var(--tinte);
}
#treffer .lat { font-style: italic; color: var(--tinte-leise); font-size: 0.9375rem; }

/* Miriams Antwort */
#antwort { margin-top: 1.25rem; }
.blase {
  background: #fff;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
}
.blase p:first-child { margin-top: 0; }
.blase p:last-child { margin-bottom: 0; }
.denkt { color: var(--tinte-leise); font-style: italic; }
.denkt::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: punkte 1.2s steps(4, end) infinite;
}
@keyframes punkte { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } }
@media (prefers-reduced-motion: reduce) { .denkt::after { animation: none; content: "···"; } }

/* ── Register ─────────────────────────────────────────────────────────── */
.buchstaben { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; margin: 0 0 1.25rem; }
.buchstaben a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--linie);
  border-radius: 0.5rem;
  background: #fff;
}
.buchstaben a[aria-current="page"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.9rem; padding: 0; list-style: none; }
.raster a {
  display: block;
  text-decoration: none;
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fff;
}
.raster img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier-tief); }

/* Der fotolose Zustand ist ein GESTALTETER Zustand, kein Loch:
   Typografie auf Papierton, darunter als Wasserzeichen die Blume des Lebens
   aus dem Rund-Logo — ein Markenelement, das ohnehin existiert. */
.raster .ohnebild {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.75rem;
  background: var(--papier-tief) url("/assets/blume.svg") center / 78% no-repeat;
  font-style: italic;
  color: var(--tinte-leise);
  font-size: 0.9375rem;
}
.raster .titel { padding: 0.6rem 0.7rem 0.75rem; }
.raster .titel b { display: block; font-family: var(--sans); font-size: 0.9375rem; }
.raster .titel span { font-style: italic; color: var(--tinte-leise); font-size: 0.875rem; }

/* ── Pflanzenseite ────────────────────────────────────────────────────── */
.pflanzenbild { width: 100%; height: auto; border-radius: 0.7rem; background: var(--papier-tief); }
h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; margin: 1.1rem 0 0.2rem; }
h1 + .lateinisch { font-style: italic; color: var(--tinte-leise); margin: 0 0 0.5rem; }
h2 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--akzent);
  border-top: 1px solid var(--linie);
  padding-top: 1.1rem;
  margin: 1.9rem 0 0.5rem;
}
.taxonomie { font-family: var(--sans); font-size: 0.9375rem; color: var(--tinte-leise); }

/* ── Auffaltbare Rubriken ─────────────────────────────────────────────────
   <details>/<summary> braucht kein Skript, keinen Hover und keine ARIA-
   Verrenkung — der Browser bringt Tastatur, Screenreader und Zustand mit.
   Die Zeile ist die Trefferflaeche, nicht ein kleines Dreieck daneben. */
.box { border-top: 1px solid var(--linie); }
.box > summary {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--akzent);
  list-style: none;            /* Standard-Dreieck weg, wir zeichnen selbst */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 2.75rem;         /* 44 px — mit dem Daumen zu treffen */
  padding: 0.9rem 0.1rem;
  -webkit-tap-highlight-color: transparent;
}
.box > summary::-webkit-details-marker { display: none; }
/* Das Zeichen sagt im RUHEZUSTAND, was passiert — auf dem Handy gibt es
   keinen Hover, der es nachtraeglich erklaeren koennte. */
.box > summary::after {
  content: "";
  flex: none;
  width: 0.62rem; height: 0.62rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.14rem, -0.14rem);
  transition: transform 0.18s ease;
}
.box[open] > summary::after { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }
.box > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 0.3rem; }
.boxinhalt { padding-bottom: 1.1rem; }
.boxinhalt > :first-child { margin-top: 0; }
.boxinhalt > :last-child { margin-bottom: 0; }
.boxinhalt h3 {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--tinte-leise);
  margin: 1.1rem 0 0.2rem;
}
.boxinhalt h3:first-child { margin-top: 0; }

/* Die Sicherheitsbox wird ausgeliefert wie sie gelesen gehoert: offen. */
.box.sicherheit {
  border: 1px solid var(--akzent-hell);
  border-radius: 0.6rem;
  background: var(--papier-tief);
  margin: 1.6rem 0;
  padding: 0 0.9rem;
}
.box.sicherheit > summary { color: var(--akzent); }
@media (prefers-reduced-motion: reduce) {
  .box > summary::after { transition: none; }
}
dl.paare { margin: 0; }
dl.paare dt { font-family: var(--sans); font-size: 0.8125rem; color: var(--tinte-leise); margin-top: 0.7rem; }
dl.paare dd { margin: 0.1rem 0 0; }

.reifegrad {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--tinte-leise);
  background: var(--papier-tief);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin: 1rem 0 0;
}

/* Fehlende Wechselwirkungsangaben werden AUSGEWIESEN, nicht weggelassen —
   eine leere Rubrik wuerde sonst als "unbedenklich" gelesen. */
.keine-angabe {
  font-family: var(--sans);
  font-size: 0.9375rem;
  border: 1px dashed var(--akzent);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
}

/* Pilze, Flechten und Algen stehen im Katalog — sie gehoeren dorthin, denn ein
   Kraeuterbuch, das den Fliegenpilz ausschliesst, muesste den Eisenhut auch
   ausschliessen. Aber die Einordnung muss dranstehen und darf nicht wie eine
   Fussnote wirken: deshalb Grossbuchstaben und Akzentfarbe, nicht die leise
   Tinte der Taxonomiezeile darunter. */
.reich-hinweis {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0.2rem 0 0.1rem;
}

.pdf {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  min-height: 44px;
  padding: 0.75rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--akzent);      /* die zweite gefuellte Flaeche */
  color: #fff;
  text-decoration: none;
}

/* ── Fuss ─────────────────────────────────────────────────────────────── */
footer {
  margin: 3rem 0 0;
  border-top: 1px solid var(--linie);
  padding: 1.25rem 0 2.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--tinte-leise);
}
footer nav a { margin-right: 1rem; display: inline-block; min-height: 44px; line-height: 44px; }
.sicherheitshinweis {
  background: var(--papier-tief);
  border-left: 3px solid var(--akzent);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 44rem) {
  .raster { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

/* Herkunft der Giftstufe (#979, 03.09.2026) ---------------------------------
   Die Stufe allein sagt nicht, worauf sie beruht. Seit dem Zufluss aus dem
   Wissensspeicher kann sie aus einer PubMed-Arbeit stammen oder aus einer
   Einschaetzung ohne Textbeleg. Belegtes bleibt ruhig; alles Ungepruefte
   nutzt die bestehende .keine-angabe-Kachel und faellt damit auf. */
.herkunft-belegt {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--gedaempft, #6b6257);
  margin: 0.25rem 0 0.5rem;
}
.herkunft-detail {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gedaempft, #6b6257);
  opacity: 0.85;
  margin: 0 0 0.75rem;
  word-break: break-word;
}

/* Teil × Zustand (#989, 2026-09-04) — welcher Pflanzenteil in welcher Zubereitung.
   Giftige Eintraege tragen die Farbe der Warnung, verwendete bleiben bewusst NEUTRAL:
   eine gruene Kachel neben einer Giftwarnung liest sich wie eine Entwarnung fuer die
   ganze Pflanze, und genau das ist sie nicht. */
ul.teilmatrix { list-style: none; padding: 0; margin: .4rem 0 .8rem; }
ul.teilmatrix li { padding: .45rem .6rem; margin: .3rem 0; border-left: 4px solid #bbb;
                   background: #f7f7f5; border-radius: 0 3px 3px 0; }
ul.teilmatrix li.tm-giftig   { border-left-color: #b03030; background: #fbf2f2; }
ul.teilmatrix li.tm-verwendet{ border-left-color: #9a9a9a; }
.tm-symptom { display: inline-block; margin-top: .25rem; font-size: .93em; }
.tm-hinweis { display: inline-block; margin-top: .25rem; font-size: .88em; color: #555;
              font-style: italic; }