/* =========================================================================
   Beertyme – Wissensbereich
   Styles für Sektionen, Info-Boxen und Inline-SVG-Illustrationen.
   Nutzt die globalen Design-Tokens aus styles.css.
   ========================================================================= */

/* ---------- Textstruktur ---------- */

.wk-lead {
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 72ch;
  margin: 0.2em 0 1.1em;
}

.wk-lead strong { color: var(--honey); font-weight: 650; }

/* Info-Box mit Glühbirne */
.wk-tip {
  position: relative;
  margin: 1.1em 0;
  padding: 14px 18px 14px 52px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--foam);
  font-size: 0.97rem;
  line-height: 1.6;
}
.wk-tip::before {
  content: "💡";
  position: absolute;
  left: 16px;
  top: 13px;
  font-size: 1.25rem;
  line-height: 1;
}
.wk-tip strong { color: var(--honey); }

/* Kleine Kennzahlen-/Merk-Kacheln */
.wk-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 1em 0;
}
.wk-fact {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 12px 14px;
}
.wk-fact b {
  display: block;
  color: var(--honey);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.wk-fact span { color: var(--text-dim); font-size: 0.88rem; line-height: 1.45; }

/* Länder-/Themen-Karten (Weltreise, Craft) */
.wk-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 1em 0;
}
.wk-col {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 16px 18px;
}
.wk-col h4 {
  margin: 0 0 6px;
  color: var(--honey);
  font-size: 1.06rem;
  font-weight: 650;
}
.wk-col p { margin: 0 0 8px; color: var(--text-dim); font-size: 0.93rem; line-height: 1.6; }
.wk-col p:last-child { margin-bottom: 0; }
.wk-col em { color: var(--foam); font-style: normal; font-weight: 600; }

/* Glossar */
.wk-glossar dt {
  color: var(--honey);
  font-weight: 650;
  margin-top: 0.9em;
}
.wk-glossar dd {
  margin: 0.15em 0 0 0;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Nummerierte Schrittfolgen etwas luftiger */
.wk-steps li { margin-bottom: 0.55em; line-height: 1.6; }

/* ---------- Illustrationen ---------- */

.wk-figure {
  margin: 1.3em 0;
  padding: 18px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.06), transparent 65%),
    rgba(10, 7, 4, 0.35);
}
.wk-figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.wk-figure figcaption {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.5;
}

/* SVG-Zeichenklassen: Strichzeichnung Foam + Bernstein-Akzente */
.wks-line {
  stroke: #f8f1e2;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wks-thin { stroke-width: 1.4; }
.wks-amber { stroke: #fbbf24; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wks-amber-thin { stroke: #f59e0b; fill: none; stroke-width: 1.4; stroke-linecap: round; }
.wks-dash { stroke-dasharray: 4 5; }
.wks-fill-soft { fill: rgba(245, 158, 11, 0.10); }
.wks-fill-mid { fill: rgba(245, 158, 11, 0.22); }
.wks-fill-amber { fill: #f59e0b; }
.wks-fill-foam { fill: #f8f1e2; }
.wks-dot { fill: #fbbf24; stroke: #f8f1e2; stroke-width: 1.4; }

.wks-label {
  fill: #f8f1e2;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.wks-sub {
  fill: #b7a684;
  font-size: 11px;
  font-family: inherit;
}
.wks-num {
  fill: #1a1208;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}

/* ---------- Feinschliff ---------- */

.wk-section h3 { margin-top: 1.4em; }

@media (max-width: 640px) {
  .wk-tip { padding-left: 46px; }
  .wk-figure { padding: 12px 8px 10px; }
}