/* ═══════════════════════════════════════════════════════════════════════
   HERCHEN HERBARIUM — Frontend Design System
   Ästhetik: Botanisches Archiv · Editorial · Organic/Natural
   Inspiriert von historischen Herbariumssammlungen & Kew-Gardens-Publikationen
   Schriften: Playfair Display (Display) · Crimson Pro (Text) · Source Code Pro (Akzent)
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Source+Code+Pro:wght@400;500&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────── */
:root {
  /* Primäre Palette — Waldgrün & Pergament */
  --hh-ink:          #1a1a14;        /* Fast-Schwarz, wie Tinte auf Pergament */
  --hh-forest:       #2c4a2e;        /* Tiefdunkles Waldgrün */
  --hh-moss:         #4a7c59;        /* Moosgrün */
  --hh-sage:         #7a9e7e;        /* Salbeigrün */
  --hh-mint:         #b8d4be;        /* Hellgrün Akzent */
  --hh-fern:         #e8f0e2;        /* Farnhell Hintergrund */

  /* Pergament-Töne */
  --hh-parchment:    #f5f0e6;        /* Haupthintergrund wie altes Papier */
  --hh-cream:        #faf7f0;        /* Helles Cremeweiß */
  --hh-aged:         #e8e0cd;        /* Gealtert, für Trennlinien */
  --hh-sepia:        #8b6f47;        /* Sepiabraun für Akzente */
  --hh-rust:         #c4593a;        /* Terrakotta für Warnungen */
  --hh-amber:        #c9922a;        /* Bernstein für Highlights */

  /* Typografie */
  --hh-font-display: 'Playfair Display', 'Georgia', serif;
  --hh-font-text:    'Crimson Pro', 'Garamond', 'Georgia', serif;
  --hh-font-mono:    'Source Code Pro', 'Courier New', monospace;

  /* Spacing — grosszügig wie Buchseiten */
  --hh-space-xs:     0.25rem;
  --hh-space-sm:     0.5rem;
  --hh-space-md:     1rem;
  --hh-space-lg:     1.5rem;
  --hh-space-xl:     2.5rem;
  --hh-space-2xl:    4rem;

  /* Effekte */
  --hh-shadow-sm:    0 1px 3px rgba(26,26,20,.08);
  --hh-shadow-md:    0 4px 16px rgba(26,26,20,.12);
  --hh-shadow-lg:    0 8px 32px rgba(26,26,20,.16);
  --hh-radius:       2px;           /* Minimal, fast gar nicht rund */
  --hh-border:       #d4cab8;

  /* Altchinesisches Dekorband: SVG-Muster als CSS */
  --hh-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='4'%3E%3Cpath d='M0 2 Q15 0 30 2 Q45 4 60 2' stroke='%234a7c59' stroke-width='.8' fill='none' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */
.hh-single-wrap,
.hh-archive-wrap,
.hh-pflanzenliste,
.hh-index-table { box-sizing: border-box; }

/* ── Seitenhintergrund (wenn Theme es erlaubt) ───────────────────────── */
body.single-pflanze,
body.post-type-archive-pflanze {
  background-color: var(--hh-parchment);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(74,124,89,.04) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(44,74,46,.05) 0%, transparent 60%);
}

/* ════════════════════════════════════════════════════════════════════════
   EINZELNE PFLANZENSEITE — Single Plant View
   ════════════════════════════════════════════════════════════════════════ */
.hh-single-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--hh-space-xl) var(--hh-space-lg) var(--hh-space-2xl);
  font-family: var(--hh-font-text);
  font-size: 1.15rem;
  line-height: 1.72;
  color: var(--hh-ink);
  background-color: var(--hh-cream);
  position: relative;
}

/* Schmale dekorative Randspalte links */
.hh-single-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--hh-forest), var(--hh-sage), var(--hh-forest));
  opacity: .6;
}

/* ── Page Header ─────────────────────────────────────────────────────── */
.hh-header {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--hh-space-xl);
  align-items: start;
  margin-bottom: var(--hh-space-xl);
  padding-bottom: var(--hh-space-xl);
  border-bottom: 1px solid var(--hh-aged);
  position: relative;
}
.hh-header::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg, var(--hh-moss) 0, var(--hh-moss) 6px,
    transparent 6px, transparent 14px
  );
  opacity: .3;
}

.hh-header-text { padding-top: var(--hh-space-sm); }

.hh-nr-badge {
  display: inline-block;
  font-family: var(--hh-font-mono);
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hh-moss);
  border: 1px solid var(--hh-mint);
  padding: 3px 10px;
  margin-bottom: var(--hh-space-md);
  background: transparent;
  border-radius: 0;
}

.hh-name {
  font-family: var(--hh-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--hh-forest);
  margin: 0 0 var(--hh-space-sm);
  letter-spacing: -.02em;
}

.hh-latin {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--hh-sepia);
  display: block;
  margin: 0 0 var(--hh-space-sm);
  letter-spacing: .01em;
}

.hh-familie {
  font-family: var(--hh-font-mono);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hh-sage);
  margin: 0;
}

/* Hauptbild */
.hh-header-img img.hh-main-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--hh-aged);
  box-shadow: var(--hh-shadow-md);
  filter: sepia(8%) contrast(1.02);
}
.hh-header-img {
  position: relative;
}
.hh-header-img::after {
  content: '';
  position: absolute;
  inset: 6px 6px -6px -6px;
  border: 1px solid var(--hh-mint);
  z-index: -1;
  pointer-events: none;
}

/* ── Bildquelle-Caption ──────────────────────────────────────────────────── */
.hh-bildquelle {
    font-family: var(--hh-font-mono);
    font-size: .72rem;
    color: var(--hh-sage);
    margin: 4px 0 0;
    line-height: 1.4;
    letter-spacing: .02em;
}

/* ── Hinweis-Banner ───────────────────────────────────────────────────── */
.hh-notice {
  padding: var(--hh-space-md) var(--hh-space-lg);
  margin-bottom: var(--hh-space-lg);
  font-family: var(--hh-font-text);
  font-size: 1rem;
  border-left: 3px solid;
  border-radius: 0;
}
.hh-notice--danger {
  background: rgba(196,89,58,.07);
  border-color: var(--hh-rust);
  color: #7a2c1a;
}
.hh-notice--warning {
  background: rgba(201,146,42,.07);
  border-color: var(--hh-amber);
  color: #6b4800;
}

/* ── Content Body ─────────────────────────────────────────────────────── */
.hh-body { display: flex; flex-direction: column; gap: var(--hh-space-lg); }

/* ── Sections ─────────────────────────────────────────────────────────── */
.hh-section {
  background: var(--hh-cream);
  border: 1px solid var(--hh-border);
  padding: var(--hh-space-lg) var(--hh-space-xl);
  position: relative;
}

.hh-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--hh-forest), transparent);
  opacity: .25;
}

.hh-section h2 {
  font-family: var(--hh-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hh-forest);
  margin: 0 0 var(--hh-space-lg);
  padding-bottom: var(--hh-space-sm);
  border-bottom: 1px solid var(--hh-aged);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: var(--hh-space-sm);
}

.hh-section h3 {
  font-family: var(--hh-font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--hh-sepia);
  margin: var(--hh-space-lg) 0 var(--hh-space-xs);
  font-style: italic;
}

/* ── Definition List ─────────────────────────────────────────────────── */
.hh-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--hh-space-sm) var(--hh-space-lg);
  margin: 0;
  font-size: 1.05rem;
}
.hh-dl dt {
  font-family: var(--hh-font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hh-moss);
  padding-top: 3px;
}
.hh-dl dd {
  margin: 0;
  color: var(--hh-ink);
  border-bottom: 1px dotted var(--hh-aged);
  padding-bottom: var(--hh-space-xs);
}

/* ── Fließtext-Blöcke ─────────────────────────────────────────────────── */
.hh-wissen-block { margin-bottom: var(--hh-space-md); }
.hh-wissen-block p {
  margin: var(--hh-space-xs) 0 0;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--hh-ink);
}

/* ── Galerie ──────────────────────────────────────────────────────────── */
.hh-galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--hh-space-sm);
}
.hh-galerie-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hh-aged);
  filter: sepia(5%) contrast(1.02);
  transition: filter .3s, transform .3s;
}
.hh-galerie-grid img:hover {
  filter: sepia(0%) contrast(1.05);
  transform: scale(1.02);
}

/* ── QR-Sektion ───────────────────────────────────────────────────────── */
.hh-qr-section {
  text-align: center;
  background: var(--hh-fern);
  border: 1px solid var(--hh-mint);
}
.hh-qr-frontend {
  border: 4px solid var(--hh-cream);
  box-shadow: var(--hh-shadow-sm);
}
.hh-qr-hint {
  font-family: var(--hh-font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hh-moss);
  margin-top: var(--hh-space-sm);
}

/* ── Quellen ──────────────────────────────────────────────────────────── */
.hh-quellen a {
  color: var(--hh-forest);
  text-decoration: underline;
  text-decoration-color: var(--hh-mint);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.hh-quellen a:hover {
  color: var(--hh-moss);
  text-decoration-color: var(--hh-moss);
}
.hh-lizenz-text { color: var(--hh-sage); }
.hh-ki-info summary {
  cursor: pointer;
  font-family: var(--hh-font-mono);
  font-size: .8rem;
  color: var(--hh-moss);
  letter-spacing: .06em;
}

/* ════════════════════════════════════════════════════════════════════════
   ARCHIVSEITE — Pflanzengalerie
   ════════════════════════════════════════════════════════════════════════ */
.hh-archive-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--hh-space-xl) var(--hh-space-lg) var(--hh-space-2xl);
}

.hh-archive-header {
  text-align: center;
  margin-bottom: var(--hh-space-2xl);
  position: relative;
  padding-bottom: var(--hh-space-xl);
}
.hh-archive-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: var(--hh-sage);
}
.hh-archive-header h1 {
  font-family: var(--hh-font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--hh-forest);
  margin: 0 0 var(--hh-space-sm);
  letter-spacing: -.02em;
}
.hh-archive-header p {
  font-family: var(--hh-font-mono);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hh-sage);
  margin: 0;
}

/* ── Pflanzenkarten-Grid ──────────────────────────────────────────────── */
.hh-pflanzenliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--hh-space-lg);
}

.hh-pflanze-card {
  background: var(--hh-cream);
  border: 1px solid var(--hh-border);
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.hh-pflanze-card:hover {
  box-shadow: var(--hh-shadow-lg);
  transform: translateY(-3px);
}
/* Eckakzent oben-links */
.hh-pflanze-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 24px;
  border-top: 2px solid var(--hh-sage);
  border-left: 2px solid var(--hh-sage);
  z-index: 1;
  transition: width .3s, height .3s;
}
.hh-pflanze-card:hover::before {
  width: 32px; height: 32px;
  border-color: var(--hh-forest);
}

.hh-pflanze-card a { text-decoration: none; color: inherit; display: block; }

.hh-card-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: sepia(8%) contrast(1.02) saturate(.95);
  transition: filter .4s, transform .4s;
}
.hh-pflanze-card:hover .hh-card-img img {
  filter: sepia(0%) contrast(1.04) saturate(1.05);
  transform: scale(1.04);
}
.hh-card-img { overflow: hidden; }

.hh-card-img--empty {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--hh-fern);
  color: var(--hh-sage);
}

.hh-card-body {
  padding: var(--hh-space-md) var(--hh-space-md) var(--hh-space-lg);
  border-top: 1px solid var(--hh-aged);
}
.hh-card-body .hh-nr {
  font-family: var(--hh-font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hh-sage);
  display: block;
  margin-bottom: var(--hh-space-xs);
}
.hh-card-body h3 {
  font-family: var(--hh-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hh-forest);
  margin: 0 0 4px;
  line-height: 1.25;
}
.hh-card-body .hh-latin {
  font-family: var(--hh-font-display);
  font-style: italic;
  font-size: .88rem;
  color: var(--hh-sepia);
  display: block;
  margin-bottom: 4px;
}
.hh-card-body .hh-familie {
  font-family: var(--hh-font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hh-sage);
  display: block;
}

.hh-card--protected { border-color: rgba(196,89,58,.4); }
.hh-card--protected::before { border-color: var(--hh-rust); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.hh-badge {
  display: inline-block;
  font-family: var(--hh-font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 0;
  margin-top: 6px;
  border: 1px solid;
}
.hh-badge--red    { border-color: var(--hh-rust); color: var(--hh-rust); background: rgba(196,89,58,.06); }
.hh-badge--yellow { border-color: var(--hh-amber); color: #7a5200; background: rgba(201,146,42,.06); }
.hh-badge--green  { border-color: var(--hh-sage); color: var(--hh-moss); background: rgba(74,124,89,.06); }

/* ════════════════════════════════════════════════════════════════════════
   INHALTSVERZEICHNIS — Index Table
   ════════════════════════════════════════════════════════════════════════ */
.hh-index-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--hh-space-lg) 0;
  font-family: var(--hh-font-text);
  font-size: 1.05rem;
}
.hh-index-table thead { border-bottom: 2px solid var(--hh-forest); }
.hh-index-table th {
  background: transparent;
  color: var(--hh-forest);
  font-family: var(--hh-font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: var(--hh-space-sm) var(--hh-space-md);
  text-align: left;
  border-bottom: 2px solid var(--hh-forest);
  font-weight: 500;
}
.hh-index-table td {
  padding: var(--hh-space-sm) var(--hh-space-md);
  border-bottom: 1px solid var(--hh-aged);
  vertical-align: middle;
  color: var(--hh-ink);
  transition: background .15s;
}
.hh-index-table tr:nth-child(even) td { background: rgba(232,240,226,.35); }
.hh-index-table tr:hover td { background: var(--hh-fern); }
.hh-index-table a {
  color: var(--hh-forest);
  text-decoration: none;
  border-bottom: 1px solid var(--hh-mint);
  padding-bottom: 1px;
  transition: border-color .2s, color .2s;
}
.hh-index-table a:hover {
  color: var(--hh-moss);
  border-bottom-color: var(--hh-moss);
}
.hh-index-table em {
  font-family: var(--hh-font-display);
  color: var(--hh-sepia);
}

/* Bild-Spalte im Index */
.hh-index-th-img { width: 58px; text-align: center; padding: 6px var(--hh-space-sm); }
.hh-index-td-img { width: 58px; padding: 4px var(--hh-space-sm); text-align: center; }

.hh-index-img-wrap {
  display: inline-block;
  position: relative;
  line-height: 0;
  border-radius: 0;
  text-decoration: none !important;
  border: none !important;
}
.hh-index-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--hh-aged);
  display: block;
  filter: sepia(10%);
  transition: filter .2s, border-color .2s;
}
.hh-index-img-wrap:hover .hh-index-thumb {
  filter: sepia(0%);
  border-color: var(--hh-moss);
}
.hh-index-thumb-hover {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 240px;
  height: 240px;
  object-fit: contain;
  background: var(--hh-cream);
  border: 1px solid var(--hh-aged);
  box-shadow: var(--hh-shadow-lg);
  pointer-events: none;
}
.hh-index-img-wrap:hover .hh-index-thumb-hover,
.hh-index-img-wrap:focus-within .hh-index-thumb-hover {
  display: block;
  animation: hh-fadeIn .12s ease;
}
@keyframes hh-fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.hh-index-img-empty {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--hh-fern);
  border: 1px solid var(--hh-aged);
  text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hh-header { grid-template-columns: 1fr; }
  .hh-header-img { order: -1; }
  .hh-name { font-size: 1.9rem; }
  .hh-dl   { grid-template-columns: 1fr; }
  .hh-dl dt { margin-top: var(--hh-space-sm); border-top: 1px dotted var(--hh-aged); padding-top: var(--hh-space-sm); }
  .hh-dl dd { border-bottom: none; }
  .hh-section { padding: var(--hh-space-md) var(--hh-space-md); }
  .hh-pflanzenliste { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--hh-space-md); }
  .hh-single-wrap { padding: var(--hh-space-lg) var(--hh-space-md); }
  .hh-single-wrap::before { display: none; }
  .hh-index-table { font-size: .95rem; }
}
@media (max-width: 480px) {
  .hh-pflanzenliste { grid-template-columns: 1fr 1fr; }
  .hh-index-table th, .hh-index-table td { padding: 5px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHORTCODE — Inline-Pflanze
   ════════════════════════════════════════════════════════════════════════ */
.hh-pflanze-inline {
  border-left: 3px solid var(--hh-sage);
  padding: var(--hh-space-md) var(--hh-space-lg);
  background: var(--hh-fern);
  margin: var(--hh-space-md) 0;
}
.hh-pflanze-inline h2 {
  font-family: var(--hh-font-display);
  font-size: 1.3rem;
  color: var(--hh-forest);
  margin: 0 0 4px;
}
.hh-pflanze-inline em { color: var(--hh-sepia); }