/* Dockup – Zusatz-Styles fuer die Design-Vorschau (/neu).
   Wird NUR auf der Vorschau-Seite geladen und ueberschreibt nichts am
   bestehenden Design-System: ausschliesslich neue Klassen plus
   Akzent-Woerter in Sektions-Headlines. */

/* ---------- Akzentwoerter in Sektions-Headlines ---------- */

.section h2 .accent {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Kicker als Badge-Pill (Vorlage: umrandete Pille) ---------- */

.badge-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay);
  border: 1px solid rgba(226, 115, 102, 0.35);
  background: rgba(226, 115, 102, 0.06);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 16px;
}
.badge-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay); box-shadow: 0 0 8px rgba(226, 115, 102, 0.8);
}

/* ---------- Fakten-Band (Vorlage: "Why It Matters") ---------- */

.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 44px;
}
.stat-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px 24px;
  transition: border-color 0.25s, transform 0.25s;
}
.stat-card:hover {
  border-color: rgba(226, 115, 102, 0.35);
  transform: translateY(-3px);
}
.stat-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 70px;
  background: radial-gradient(200px 70px at 18% 100%, rgba(226, 115, 102, 0.10), transparent 70%);
  pointer-events: none; opacity: 0; transition: opacity 0.25s;
}
.stat-card:hover::after { opacity: 1; }
.stat-card .sicon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(226, 115, 102, 0.10);
  border: 1px solid rgba(226, 115, 102, 0.28);
  color: var(--clay); margin-bottom: 18px;
}
.stat-card .sicon svg { width: 21px; height: 21px; }
.stat-card .sval {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 750;
  letter-spacing: -0.03em; line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card h3 {
  margin-top: 6px; font-size: 15.5px; font-weight: 650;
  letter-spacing: -0.015em; color: var(--paper);
}
.stat-card p { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 980px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats-band { grid-template-columns: 1fr; } }

/* ---------- Integrations-Grid (Vorlage: Icon-Orbit um Zentrum) ---------- */

.int-layout {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: 56px; align-items: center; margin-top: 12px;
}
@media (max-width: 920px) { .int-layout { grid-template-columns: 1fr; gap: 40px; } }

.int-grid {
  display: grid; grid-template-columns: repeat(3, minmax(88px, 116px));
  gap: 22px; justify-content: center; position: relative; padding: 24px 0;
}
.int-tile {
  aspect-ratio: 1; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(180deg, #17171c, #101014);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  color: var(--muted);
  transition: border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.int-tile svg { width: 26px; height: 26px; }
.int-tile .lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted-2); transition: color 0.25s;
}
.int-tile:hover {
  border-color: rgba(226, 115, 102, 0.45);
  color: var(--paper); transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 34px rgba(226, 115, 102, 0.10);
}
.int-tile:hover .lbl { color: var(--muted); }

.int-tile.center {
  background: var(--grad);
  border-color: rgba(226, 115, 102, 0.7);
  color: #fff;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(226, 115, 102, 0.38),
    0 0 130px rgba(226, 115, 102, 0.18);
}
.int-tile.center:hover { transform: none; }
.int-tile.center svg { width: 34px; height: 34px; }

.int-note {
  margin-top: 20px; text-align: center;
  color: var(--muted-2); font-size: 12.5px;
}

.int-copy h3 { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; }
.int-copy > p { margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.int-copy ul { list-style: none; margin-top: 16px; }
.int-copy li {
  padding: 6px 0; color: var(--muted); font-size: 14.5px;
  display: flex; gap: 10px;
}
.int-copy li::before { content: "✓"; color: var(--clay); }

/* ---------- Verifiziert-Highlight neben dem Phone-Screen ---------- */

.verify-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--good);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 999px; padding: 6px 14px;
}
.verify-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}

/* ---------- Methodik-Sektion (Radar + 5 Phasen, Vorlage: Methodology) ---------- */

.method {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(226, 115, 102, 0.07), transparent 65%),
    var(--bg);
}
.method .starfield {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.8;
}
.method-head { text-align: center; max-width: 720px; margin: 0 auto; }
.method-head .badge-kicker { margin-bottom: 20px; }
.method-head p.sub { margin-top: 18px; }

.radar-layout {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 48px; align-items: center; margin-top: 56px;
}
@media (max-width: 920px) { .radar-layout { grid-template-columns: 1fr; } }

.radar-wrap { position: relative; }
.radar-wrap svg { display: block; width: 100%; height: auto; }

.radar-legend {
  display: flex; gap: 22px; justify-content: center; margin-top: 10px;
}
.radar-legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.radar-legend i {
  width: 18px; height: 3px; border-radius: 2px; display: inline-block;
}
.radar-legend .l-dockup i { background: var(--clay); box-shadow: 0 0 10px rgba(226, 115, 102, 0.7); }
.radar-legend .l-sync i { background: var(--violet); }

.vs-card {
  background: linear-gradient(180deg, #17171c, #101014);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.vs-card h3 { font-size: 17px; font-weight: 680; letter-spacing: -0.015em; }
.vs-card .vs-case {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted-2); letter-spacing: 0.06em;
  text-transform: uppercase; font-family: var(--mono);
}
.vs-card .vs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.vs-card .vs-cols b { display: block; font-size: 13px; font-weight: 650; margin-bottom: 4px; }
.vs-card .vs-cols .d b { color: var(--clay); }
.vs-card .vs-cols .s b { color: #a78bfa; }
.vs-card .vs-cols p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* 5-Phasen-Bogen */
.phases { position: relative; margin-top: 84px; }
.phases .arc { position: absolute; inset: 0; pointer-events: none; }
.phase-row {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 18px; align-items: start;
}
.phase { text-align: center; padding: 0 6px; }
.phase:nth-child(1) { transform: translateY(0); }
.phase:nth-child(2) { transform: translateY(34px); }
.phase:nth-child(3) { transform: translateY(56px); }
.phase:nth-child(4) { transform: translateY(68px); }
.phase:nth-child(5) { transform: translateY(70px); }
.phase .hex {
  width: 74px; height: 74px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.phase .hex svg { width: 100%; height: 100%; }
.phase h3 {
  margin-top: 14px; font-size: 16px; font-weight: 680;
  letter-spacing: -0.01em; color: var(--clay);
}
.phase p { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.phases-spacer { height: 110px; }
@media (max-width: 860px) {
  .phase-row { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .phase:nth-child(n) { transform: none; }
  .phases .arc { display: none; }
  .phases-spacer { height: 20px; }
}

/* ---------- "Für wen": offenes Layout ohne Kacheln ---------- */

.duo-flow {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: 0 56px; margin-top: 56px; align-items: start;
}
.duo-flow .df { position: relative; padding: 8px 0; }
.duo-flow .df h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }
.duo-flow .df p { color: var(--muted); line-height: 1.65; margin-top: 12px; max-width: 46ch; }
.duo-flow .df-hex { width: 60px; height: 60px; margin-bottom: 18px; }
.duo-flow .df-hex svg { width: 100%; height: 100%; }
.duo-flow .df.violet .df-hex svg { filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.35)); }
.duo-flow .df.clay .df-hex svg { filter: drop-shadow(0 0 16px rgba(226, 115, 102, 0.35)); }
.duo-flow .df-kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.duo-flow .df.violet .df-kicker { color: #a78bfa; }
.duo-flow .df.clay .df-kicker { color: var(--clay); }
.duo-flow .df-fact {
  font-family: var(--mono); font-size: 13px; color: var(--paper);
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft); max-width: 46ch;
}
.duo-flow .df-divider {
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(244, 243, 239, 0.16) 30%, rgba(244, 243, 239, 0.16) 70%, transparent);
}
@media (max-width: 860px) {
  .duo-flow { grid-template-columns: 1fr; gap: 40px; }
  .duo-flow .df-divider { display: none; }
}

/* ---------- "Swiss made": offene Punkteliste ohne Kacheln ---------- */

.why-flow {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 44px 64px; margin-top: 56px;
}
.why-flow .wf { display: flex; gap: 22px; align-items: flex-start; }
.why-flow .wf-hex { flex: 0 0 58px; width: 58px; height: 58px; }
.why-flow .wf-hex svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(226, 115, 102, 0.28)); }
.why-flow .wf-hex.swiss svg { filter: drop-shadow(0 0 16px rgba(218, 41, 28, 0.4)); }
.why-flow .wf h3 { font-size: 17.5px; font-weight: 680; letter-spacing: -0.015em; }
.why-flow .wf p { color: var(--muted); line-height: 1.65; margin-top: 8px; font-size: 14.5px; }
@media (max-width: 860px) {
  .why-flow { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Elegante Bewegung (respektiert reduzierte Bewegung) ---------- */

@media (prefers-reduced-motion: no-preference) {

  @keyframes glow-pulse {
    0%, 100% {
      box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(226, 115, 102, 0.38),
        0 0 130px rgba(226, 115, 102, 0.18);
    }
    50% {
      box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.5),
        0 0 84px rgba(226, 115, 102, 0.55),
        0 0 170px rgba(226, 115, 102, 0.26);
    }
  }
  .int-tile.center { animation: glow-pulse 3.6s ease-in-out infinite; }

  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }
  .phone-row .phone.mid { animation: floaty 6s ease-in-out infinite; }

  @keyframes dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(226, 115, 102, 0.8); }
    50% { opacity: 0.45; box-shadow: 0 0 3px rgba(226, 115, 102, 0.4); }
  }
  .badge-kicker::before { animation: dot-pulse 2.4s ease-in-out infinite; }
  .verify-chip::before { animation: dot-pulse 2.4s ease-in-out infinite; }

  @keyframes dash-drift { to { stroke-dashoffset: -240; } }
  .method .orbit { animation: dash-drift 26s linear infinite; }

  @keyframes radar-breathe {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.55; }
  }
  .radar-wrap .poly-glow { animation: radar-breathe 4.5s ease-in-out infinite; }

  @keyframes star-blink {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.15; }
  }
  .method .star { animation: star-blink 4s ease-in-out infinite; }
  .method .star.s2 { animation-delay: 1.3s; }
  .method .star.s3 { animation-delay: 2.6s; }
}

/* ---------- Ratgeber-Artikel ---------- */

.article-hero { padding: 96px 0 30px; }
.article-hero h1 {
  font-size: clamp(32px, 4.2vw, 50px); font-weight: 750;
  letter-spacing: -0.035em; line-height: 1.08; max-width: 24ch;
}
.article-hero .lead {
  margin-top: 20px; font-size: 17px; color: var(--muted);
  max-width: 62ch; line-height: 1.65;
}
.article-meta {
  margin-top: 18px; font-family: var(--mono); font-size: 12.5px;
  color: var(--muted-2);
}

.article { max-width: 760px; }
.article h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;
  letter-spacing: -0.025em; margin-top: 52px;
}
.article h3 { font-size: 18px; font-weight: 650; margin-top: 30px; letter-spacing: -0.015em; }
.article p { margin-top: 14px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.article p b, .article li b { color: var(--paper); font-weight: 600; }
.article ul, .article ol { margin-top: 14px; padding-left: 22px; }
.article li { color: var(--muted); font-size: 15.5px; line-height: 1.7; padding: 3px 0; }
.article a { color: var(--clay); }
.article .callout {
  margin-top: 24px; padding: 20px 24px;
  background: rgba(226, 115, 102, 0.06);
  border: 1px solid rgba(226, 115, 102, 0.25);
  border-radius: var(--radius);
}
.article .callout p { margin-top: 0; color: var(--paper); font-size: 15px; }
.article .callout p + p { margin-top: 8px; color: var(--muted); }

.article-cta {
  margin-top: 56px; padding: 34px 36px; text-align: center;
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(226, 115, 102, 0.10), transparent 70%),
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.article-cta h2 { margin-top: 0; }
.article-cta p { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ---------- Drill-Verify (oeffentliche Pruefseite /drill/verify) ---------- */

.drill-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.drill-card > label {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.drill-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px dashed rgba(244, 243, 239, 0.22);
  border-radius: var(--radius); padding: 18px 20px;
  color: var(--muted); font-size: 14px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.drill-drop svg { width: 18px; height: 18px; flex: 0 0 auto; }
.drill-drop:hover, .drill-drop.over {
  border-color: rgba(226, 115, 102, 0.55);
  background: rgba(226, 115, 102, 0.05);
  color: var(--paper);
}
.drill-drop input[type="file"] { display: none; }
.drill-card textarea {
  width: 100%; margin-top: 14px; min-height: 150px; resize: vertical;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  color: var(--paper); font-family: var(--mono); font-size: 12.5px;
  line-height: 1.6; transition: border-color 0.2s, box-shadow 0.2s;
}
.drill-card textarea::placeholder { color: var(--muted-2); }
.drill-card textarea:hover { border-color: rgba(244, 243, 239, 0.18); }
.drill-card textarea:focus {
  outline: none; border-color: rgba(226, 115, 102, 0.55);
  box-shadow: 0 0 0 3px rgba(226, 115, 102, 0.12);
}

.drill-alert {
  margin: 0 0 18px; padding: 14px 18px; font-size: 14.5px;
  color: #fca5a5; background: rgba(229, 87, 63, 0.08);
  border: 1px solid rgba(229, 87, 63, 0.35); border-radius: var(--radius);
}
.drill-alert b { color: #fecaca; }

.drill-result {
  margin-top: 30px; padding: 24px 26px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.drill-result.ok {
  border-color: rgba(74, 222, 128, 0.32);
  background:
    radial-gradient(420px 160px at 12% 0%, rgba(74, 222, 128, 0.08), transparent 70%),
    rgba(74, 222, 128, 0.03);
}
.drill-result.warn {
  border-color: rgba(245, 158, 11, 0.38);
  background:
    radial-gradient(420px 160px at 12% 0%, rgba(245, 158, 11, 0.08), transparent 70%),
    rgba(245, 158, 11, 0.03);
}
.drill-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; border-radius: 999px;
  padding: 7px 15px;
}
.drill-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
}
.drill-result.ok .drill-chip {
  color: var(--good); background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.drill-result.ok .drill-chip::before {
  background: var(--good); box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}
.drill-result.warn .drill-chip {
  color: #fbbf24; background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
}
.drill-result.warn .drill-chip::before {
  background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}
.drill-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px; margin-top: 22px;
}
.drill-fact .k {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
}
.drill-fact .v {
  margin-top: 4px; font-size: 14.5px; color: var(--paper);
  overflow-wrap: anywhere;
}
.drill-fact.befund .v { color: #fbbf24; }
@media (max-width: 640px) { .drill-facts { grid-template-columns: 1fr; } }

.drill-key {
  margin-top: 26px; padding: 18px 22px;
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius); font-size: 13.5px; color: var(--muted);
}
.drill-key .row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px;
}
.drill-key code {
  font-family: var(--mono); font-size: 12px; color: var(--paper);
  overflow-wrap: anywhere;
}
.drill-key button {
  flex: 0 0 auto; font-size: 12px; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 12px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.drill-key button:hover { color: var(--paper); border-color: rgba(244, 243, 239, 0.3); }

/* ---------- Hinweisbalken "Design-Vorschau" ---------- */

.preview-note {
  position: sticky; top: 64px; z-index: 40;
  background: rgba(139, 92, 246, 0.12);
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--paper); font-size: 13px; text-align: center; padding: 8px 16px;
}
.preview-note b { color: #c4b5fd; }

/* ---------- Wiki (Funktions-Referenz /wiki) ---------- */

.wiki-layout {
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.wiki-toc { position: sticky; top: 92px; }
.wiki-toc .wt-title {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px;
}
.wiki-toc a {
  display: block; padding: 6px 0 6px 14px; font-size: 13.5px;
  color: var(--muted); text-decoration: none;
  border-left: 1.5px solid var(--line);
  transition: color 0.15s, border-color 0.15s;
}
.wiki-toc a:hover { color: var(--paper); border-left-color: var(--clay); }
.wiki-toc .wt-sep { height: 14px; }
.wiki-layout h2, .wiki-layout h3 { scroll-margin-top: 96px; }

/* Screenshot-Figuren: immer Nachbauten mit Beispieldaten, nie echte Fotos */
.wiki-fig { margin: 26px 0 6px; }
.wiki-fig .frame {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px; overflow: hidden;
}
.wiki-fig img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 8px); }
.wiki-fig figcaption {
  margin-top: 10px; font-family: var(--mono); font-size: 12px;
  color: var(--muted-2);
}
.wiki-figrow { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 6px; }
.wiki-figrow .wiki-fig { flex: 1 1 220px; max-width: 300px; margin: 0; }
.wiki-figrow .wiki-fig .frame { padding: 10px; }

/* Kachel-Grid der Wiki-Uebersicht */
.wiki-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 40px;
}
a.wiki-tile {
  display: block; padding: 24px 26px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
a.wiki-tile:hover {
  border-color: rgba(226, 115, 102, 0.45);
  background: rgba(226, 115, 102, 0.04);
  transform: translateY(-2px);
}
.wiki-tile .wt-kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay);
}
.wiki-tile h3 {
  margin-top: 8px; font-size: 17px; font-weight: 650;
  letter-spacing: -0.015em; color: var(--paper);
}
.wiki-tile p { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.wiki-tile .wt-count {
  margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted-2);
}

@media (max-width: 1080px) {
  .wiki-layout { grid-template-columns: 1fr; gap: 0; }
  .wiki-toc {
    position: static; margin-bottom: 26px; padding: 18px 20px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
}
@media (max-width: 980px) { .wiki-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .wiki-tiles { grid-template-columns: 1fr; } }