/* ==========================================================================
   Layouts der Templates
   Ergänzt components.css. Jede Klasse gehört zu genau einem Screen-Bereich.
   Reihenfolge: Seitenkopf, Archiv, Sortenprofil, Redaktion, Seiten, Bänder.
   ========================================================================== */

/* --- Seitenkopf zweispaltig (R1, R2, S1) -------------------------------- */

.cw-article-head,
.cw-strain-head,
.cw-lexicon-head {
  display: grid;
  gap: var(--cw-s9);
  padding: var(--cw-s6) 0 var(--cw-s7);
  align-items: start;
}
.cw-article-head { grid-template-columns: 1fr 520px; }
.cw-strain-head  { grid-template-columns: 1fr 420px; }
.cw-lexicon-head { grid-template-columns: 1fr 400px; }

.cw-hero { display: grid; grid-template-columns: 1fr 400px; gap: var(--cw-s9); align-items: end; }

@media (max-width: 1119px) {
  .cw-article-head { grid-template-columns: 1fr 400px; gap: var(--cw-s7); }
  .cw-strain-head,
  .cw-lexicon-head,
  .cw-hero { grid-template-columns: 1fr 340px; gap: var(--cw-s7); }
}
@media (max-width: 839px) {
  .cw-article-head,
  .cw-strain-head,
  .cw-lexicon-head,
  .cw-hero { grid-template-columns: 1fr; gap: var(--cw-s6); }
}

/* Autorenzeile */
.cw-meta {
  display: flex; flex-wrap: wrap; gap: var(--cw-s6); align-items: center;
  padding: var(--cw-s5) 0;
  border-top: 1px solid var(--cw-line-soft);
  border-bottom: 1px solid var(--cw-line-soft);
}
.cw-meta__author { display: flex; align-items: center; gap: var(--cw-s3); }
.cw-meta__author img { width: 44px; height: 44px; border-radius: var(--cw-r-pill); border: 1px solid var(--cw-line); }
.cw-meta__block { border-left: 1px solid var(--cw-line-soft); padding-left: var(--cw-s6); }
@media (max-width: 599px) {
  .cw-meta { gap: var(--cw-s4); }
  .cw-meta__block { border-left: 0; padding-left: 0; }
}

/* --- Abschnittskopf ----------------------------------------------------- */

.cw-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--cw-s5);
  border-bottom: 1px solid var(--cw-ink);
  padding-bottom: 12px;
  margin-bottom: var(--cw-s6);
}
@media (max-width: 599px) {
  .cw-section-head { flex-direction: column; align-items: flex-start; gap: var(--cw-s2); }
}

/* --- Archiv mit Filterspalte (02) --------------------------------------- */

.cw-archive {
  display: grid; grid-template-columns: 288px 1fr;
  gap: var(--cw-s8);
  padding: var(--cw-s7) 0 var(--cw-s9);
  align-items: start;
}
@media (max-width: 1119px) { .cw-archive { grid-template-columns: 244px 1fr; gap: var(--cw-s6); } }
@media (max-width: 839px)  { .cw-archive { grid-template-columns: 1fr; } }

.cw-archive__bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--cw-s5); margin-bottom: var(--cw-s5);
}
.cw-archive__chips { display: flex; flex-wrap: wrap; gap: var(--cw-s2); margin-bottom: var(--cw-s5); }

.cw-sort {
  font: inherit; font-size: 13.5px;
  background: var(--cw-surface); color: var(--cw-ink);
  border: 1px solid var(--cw-line); border-radius: var(--cw-r-flat);
  padding: 9px 13px; min-height: 44px;
}

/* --- Filter ------------------------------------------------------------- */

.cw-filter-toggle { display: none; }

.cw-filters { background: var(--cw-surface); border: 1px solid var(--cw-line); }
.cw-filters__head { display: none; }
.cw-filters__group { border-bottom: 1px solid var(--cw-line); }
.cw-filters__group summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--cw-s4) var(--cw-s5); min-height: 48px;
}
.cw-filters__group summary::-webkit-details-marker { display: none; }
.cw-filters__sign::after { content: "+"; color: var(--cw-muted); font-size: 16px; }
.cw-filters__group[open] .cw-filters__sign::after { content: "\2212"; }
.cw-filters fieldset { border: 0; margin: 0; padding: 0 var(--cw-s5) var(--cw-s4); }

.cw-check {
  display: flex; align-items: center; gap: var(--cw-s3);
  padding: 7px 0; min-height: 44px;
  font-size: 14.5px; color: var(--cw-text); cursor: pointer;
}
.cw-check input { width: 20px; height: 20px; flex: none; accent-color: var(--cw-accent); }
.cw-check__label { flex: 1; }
.cw-check__count { font-size: 12.5px; color: var(--cw-muted); }

.cw-filters__foot {
  display: flex; gap: var(--cw-s3);
  padding: var(--cw-s4) var(--cw-s5);
  border-top: 1px solid var(--cw-line);
}
.cw-filters__foot .cw-btn { width: auto; }

/* Mobil: Vollbild-Overlay mit fixierter Aktionsleiste */
@media (max-width: 839px) {
  .cw-filter-toggle { display: inline-flex; width: 100%; margin-bottom: var(--cw-s4); }
  .cw-filters {
    position: fixed; inset: 0; z-index: 60;
    display: none; flex-direction: column;
    border: 0;
  }
  .cw-filters[data-open] { display: flex; }
  .cw-filters__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--cw-s3) var(--cw-s5);
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface);
  }
  .cw-filters__close {
    width: 44px; height: 44px; border: 1px solid var(--cw-line);
    background: transparent; font-size: 18px; color: var(--cw-ink); cursor: pointer;
  }
  .cw-filters__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cw-filters__foot {
    border-top: 1px solid var(--cw-ink);
    padding: var(--cw-s4) var(--cw-s5);
    padding-bottom: calc(var(--cw-s4) + env(safe-area-inset-bottom));
    background: var(--cw-surface);
  }
  .cw-filters__foot .cw-btn { width: auto; }
}

/* --- Sortenprofil ------------------------------------------------------- */

.cw-strain-body {
  display: grid; grid-template-columns: 1fr 344px;
  gap: var(--cw-s8);
  padding: var(--cw-s7) 0 var(--cw-s9);
  align-items: start;
}
.cw-strain-main { display: flex; flex-direction: column; gap: var(--cw-s8); min-width: 0; }
.cw-strain-aside { display: flex; flex-direction: column; gap: var(--cw-s5); position: sticky; top: 24px; }

@media (max-width: 1119px) { .cw-strain-body { grid-template-columns: 1fr 300px; gap: var(--cw-s6); } }
@media (max-width: 839px) {
  .cw-strain-body { grid-template-columns: 1fr; }
  .cw-strain-aside { position: static; }
}

/* Kennzahlenband */
.cw-keyfigures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--cw-line);
  border: 1px solid var(--cw-line);
  margin-bottom: var(--cw-s7);
}
.cw-keyfigures > div { background: var(--cw-paper); padding: var(--cw-s4) var(--cw-s5); }
.cw-keyfigures__value { font-family: var(--cw-font-serif); font-size: 26px; color: var(--cw-ink); margin-top: 5px; }
@media (max-width: 839px) { .cw-keyfigures { grid-template-columns: repeat(2, 1fr); } }

/* Genetikbalken */
.cw-genobar { display: flex; height: 8px; border: 1px solid var(--cw-line); overflow: hidden; max-width: 320px; }
.cw-genobar__indica { background: var(--cw-ink); }
.cw-genobar__sativa { background: var(--cw-accent-soft); }

/* Galerie */
.cw-gallery__main { aspect-ratio: 4/3; }
.cw-gallery__thumbs { display: flex; gap: 6px; margin-top: 6px; }
.cw-gallery__thumbs > * { flex: 1; aspect-ratio: 1; }

/* --- Redaktion ---------------------------------------------------------- */

.cw-article-body {
  display: grid; grid-template-columns: 264px 1fr;
  gap: var(--cw-s9);
  padding: var(--cw-s8) 0 var(--cw-s9);
  align-items: start;
}
.cw-lexicon-body {
  display: grid; grid-template-columns: 264px 1fr 300px;
  gap: var(--cw-s8);
  padding: var(--cw-s7) 0 var(--cw-s9);
  align-items: start;
}
.cw-article-aside { position: sticky; top: 24px; }
.cw-toc-mobile { display: none; }

@media (max-width: 1119px) { .cw-lexicon-body { grid-template-columns: 240px 1fr; } }
@media (max-width: 839px) {
  .cw-article-body,
  .cw-lexicon-body { grid-template-columns: 1fr; gap: var(--cw-s6); }
  .cw-article-aside { position: static; }
  .cw-article-aside .cw-toc { display: none; }
  .cw-toc-mobile { display: block; }
}

/* Kategorieeinleitung, mobil einklappbar aber immer im HTML */
@media (max-width: 599px) {
  .cw-term-intro { max-height: 6.6em; overflow: hidden; position: relative; }
  .cw-term-intro::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 3em;
    background: linear-gradient(rgba(247,246,241,0), var(--cw-paper));
  }
}

/* --- Rechtsseiten und Standardseiten ------------------------------------ */

.cw-legal {
  display: grid; grid-template-columns: 290px 1fr;
  gap: var(--cw-s9);
  padding: var(--cw-s7) 0 var(--cw-s9);
  align-items: start;
}
.cw-legal > article { max-width: 720px; }
.cw-legal__nav { list-style: none; margin: 0; padding: 0; }
.cw-legal__nav a { display: block; padding: 12px 18px; border-bottom: 1px solid var(--cw-line-soft); font-size: 14px; color: var(--cw-text-2); }
.cw-legal__nav .current-menu-item a { background: var(--cw-sand); color: var(--cw-ink); font-weight: 600; }

@media (max-width: 839px) { .cw-legal { grid-template-columns: 1fr; gap: var(--cw-s6); } }

.cw-page {
  max-width: 860px; margin-inline: auto;
  padding: var(--cw-s8) var(--cw-gutter) var(--cw-s9);
}
.cw-page--wide { max-width: var(--cw-max); }

/* Blockabstände auf Seiten: eine Regel statt Abstand pro Block */
.cw-page > * + * { margin-top: var(--cw-s7); }
.cw-page > h2 + *, .cw-page > h3 + * { margin-top: var(--cw-s4); }

/* --- Autorenprofil ------------------------------------------------------ */

.cw-author-head {
  display: grid; grid-template-columns: 150px 1fr 300px;
  gap: var(--cw-s8);
  padding: var(--cw-s6) 0 var(--cw-s7);
  align-items: start;
}
.cw-author-head img { border: 1px solid var(--cw-line); }
@media (max-width: 1119px) { .cw-author-head { grid-template-columns: 120px 1fr; } }
@media (max-width: 599px)  { .cw-author-head { grid-template-columns: 1fr; gap: var(--cw-s5); } }

/* --- Große Suchmaske ---------------------------------------------------- */

.cw-search-big {
  display: flex; align-items: center; gap: var(--cw-s3);
  background: var(--cw-surface);
  border: 1px solid var(--cw-line-strong);
  border-radius: var(--cw-r-field);
  box-shadow: 0 2px 0 rgba(31,42,32,.06);
  padding-left: var(--cw-s5);
  max-width: 760px;
  overflow: hidden;
}
.cw-search-big input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; font: inherit; font-size: 17px;
  color: var(--cw-ink); padding: 17px 0;
}
.cw-search-big input::placeholder { color: var(--cw-muted); }
.cw-search-big .cw-btn { border-radius: 0; min-height: 56px; width: auto; flex: none; }
.cw-search-big .cw-icon-search { width: 20px; height: 20px; }

@media (max-width: 599px) {
  .cw-search-big { flex-wrap: wrap; padding: var(--cw-s3); gap: var(--cw-s2); }
  .cw-search-big input { width: 100%; padding: 12px 8px; }
  .cw-search-big .cw-btn { width: 100%; border-radius: var(--cw-r-button); }
}

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

.cw-newsletter {
  display: grid; grid-template-columns: 1fr 420px;
  gap: var(--cw-s8);
  padding: var(--cw-s8) var(--cw-gutter);
  align-items: center;
}
.cw-newsletter__form { display: grid; grid-template-columns: 1fr auto; gap: var(--cw-s3); }
.cw-newsletter__form input {
  font: inherit; font-size: 15px; color: var(--cw-ink);
  background: var(--cw-surface);
  border: 1px solid var(--cw-line-strong); border-radius: var(--cw-r-button);
  padding: 14px 16px; min-height: 48px;
}
.cw-newsletter__form .cw-btn { width: auto; }

@media (max-width: 839px)  { .cw-newsletter { grid-template-columns: 1fr; gap: var(--cw-s5); } }
@media (max-width: 599px)  {
  .cw-newsletter__form { grid-template-columns: 1fr; }
  .cw-newsletter__form .cw-btn { width: 100%; }
}

/* --- Pagination-Zeile --------------------------------------------------- */

.cw-pager-wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--cw-s5); margin-top: var(--cw-s7);
}
@media (max-width: 599px) { .cw-pager-wrap { flex-direction: column; gap: var(--cw-s3); } }

/* --- Mobiles Menü ------------------------------------------------------- */

.cw-mobile-nav { display: none; }
@media (max-width: 839px) {
  .cw-mobile-nav[data-open] {
    display: block;
    position: fixed; inset: 0; z-index: 60;
    background: var(--cw-ink);
    padding: var(--cw-s5) var(--cw-gutter);
    overflow-y: auto;
  }
  .cw-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .cw-mobile-nav__list a {
    display: block; padding: 14px 0;
    border-bottom: 1px solid var(--cw-line-dark);
    font-family: var(--cw-font-serif); font-size: 26px; color: var(--cw-paper);
    min-height: 48px;
  }
}

/* --- Druck (Rechtsseiten) ---------------------------------------------- */

@media print {
  .cw-header, .cw-footer, .cw-legal > aside,
  .cw-newsletter, .cw-disclosure, .cw-print { display: none !important; }
  .cw-legal { grid-template-columns: 1fr; }
  body { background: var(--cw-print-paper); }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: var(--cw-print-text); }
}
