/* ==========================================================================
   Praxis-Marketing-KI · Werkzeuge & Demo (werkzeuge.css)
   HWG-Live-Check, Erlaubt/Verboten-Ampel und Generator-Demo,
   geteilt von werkzeuge.html (Käuferbereich) und demo.html (öffentlich).
   Baut auf base.css auf, Liquid-Look.
   ========================================================================== */

.wz-wrap { max-width: 1100px; margin: 0 auto; padding: clamp(30px, 5vw, 56px) var(--pad-x) 90px; }
.wz-head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 40px); }
.wz-head h1 { margin-bottom: .3em; }
.wz-section { margin-top: clamp(40px, 7vw, 72px); }
.wz-section > h2 { font-family: var(--sans); font-weight: 600; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.wz-section > .sub { color: var(--ink-soft); max-width: 62ch; }

/* ---------- HWG-Live-Check ---------- */
.check-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
  align-items: start;
}
.check-input, .check-result { padding: 20px; }
.check-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.check-input textarea {
  min-height: 220px;
  resize: vertical;
  font-size: .96rem;
  line-height: 1.55;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .8);
}
.cr-empty { text-align: center; color: var(--ink-soft); padding: 48px 18px; }
.cr-shield { font-size: 2.2rem; margin-bottom: 10px; }
.cr-score {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-weight: 600;
}
.cr-score small { font-weight: 400; color: inherit; opacity: .8; }
.cr-score .big { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.cr-score.ok { background: var(--ok-soft); color: var(--ok); }
.cr-score.risk { background: var(--bad-soft); color: var(--bad); }
.cr-highlight {
  background: rgba(251, 246, 239, .9);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px;
  font-size: .94rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.cr-highlight mark { background: var(--bad-soft); color: var(--bad); font-weight: 600; border-radius: 4px; padding: 0 3px; }
.cr-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cr-findings li {
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font-size: .9rem;
}
.cr-findings .ft { font-weight: 700; color: var(--bad); }
.cr-findings .ff { color: var(--ink-soft); }

/* ---------- Ampel-Karten ---------- */
.ampel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.ampel-card {
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ampel-card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); }
}
.ampel-bad, .ampel-good { padding: 16px 18px; }
.ampel-bad { border-left: 4px solid var(--bad); }
.ampel-good { border-left: 4px solid var(--ok); background: var(--ok-soft); display: none; }
.ampel-card.open .ampel-good { display: block; }
.ampel-card.open .ampel-toggle { display: none; }
.ampel-card .lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.ampel-bad .lbl { color: var(--bad); }
.ampel-good .lbl { color: var(--ok); }
.ampel-card p { margin: 0; font-size: .95rem; }
.ampel-toggle { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--teal-700); }
.ampel-good .why { display: block; margin-top: 8px; font-size: .84rem; color: var(--ink-soft); }

/* ---------- Info-Karten (Regeln) ---------- */
.wz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.wz-card { padding: 20px; }
.wz-card .ic { font-size: 1.6rem; margin-bottom: 8px; }
.wz-card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; margin-bottom: .35em; }
.wz-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ---------- Generator (Demo) ---------- */
.gen-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 16px; }
.gen-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .15s ease;
}
.gen-tab:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.gen-tab.active { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.gen-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.gen-col { display: grid; gap: 18px; }
.gen-form { padding: 20px; }
.gf-row { margin-bottom: 14px; }
.gf-row textarea { min-height: 110px; resize: vertical; }
.gf-ex { margin-top: 8px; }
.gen-run { width: 100%; margin-top: 6px; }
.gen-anon, .gen-output { padding: 20px; }
.ga-empty { text-align: center; color: var(--ink-soft); padding: 30px 14px; }
.ga-ic { font-size: 2rem; margin-bottom: 8px; }
.ga-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ga-head h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; margin: 0; }
.ga-note { border-radius: var(--r-sm); padding: 10px 13px; font-size: .9rem; margin-bottom: 12px; }
.ga-note.found { background: var(--amber-soft); color: var(--amber-dark); }
.ga-note.ok { background: var(--ok-soft); color: var(--ok); }
.ga-risk { border-radius: var(--r-sm); padding: 10px 13px; font-size: .9rem; margin-bottom: 12px; background: var(--bad-soft); color: var(--bad); }
.ga-prompt {
  background: rgba(251, 246, 239, .9);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px;
  font-size: .9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--sans);
  margin: 0 0 14px;
}
.ga-prompt mark.ph { background: var(--teal-soft); color: var(--teal-900); font-weight: 600; border-radius: 4px; padding: 0 3px; }
.out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.out-flag { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700); }
.out-text {
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px;
  font-size: .97rem;
  line-height: 1.6;
}
.out-changes { margin-top: 12px; font-size: .88rem; color: var(--ink-soft); }
.out-changes ul { margin: 6px 0 0; padding-left: 1.2em; }
.out-note { margin: 12px 0 0; font-size: .84rem; color: var(--ink-mute); }

.disclaimer { margin-top: 26px; font-size: .85rem; color: var(--ink-mute); max-width: 72ch; }

/* ---------- Video-Kostproben ---------- */
.demo-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.demo-videos figure { margin: 0; }
.demo-videos video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--r-md);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: var(--ink);
}
.demo-videos figcaption { margin-top: 10px; font-size: .9rem; color: var(--ink-soft); }
.demo-videos figcaption strong { color: var(--teal-700); }

/* ---------- Kit-Überblick (Kennzahlen) ---------- */
.kit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.kit-stat { padding: 20px 18px; text-align: center; }
.kit-stat .num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--teal-700);
}
.kit-stat .lbl { display: block; margin-top: 4px; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Demo-spezifisch: CTA-Sektion ---------- */
.demo-cta {
  margin-top: clamp(48px, 8vw, 80px);
  text-align: center;
  padding: clamp(30px, 5vw, 50px);
  background: linear-gradient(140deg, var(--ink) 0%, var(--teal-900) 70%, var(--teal-700) 100%);
  border-radius: var(--r-lg);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.demo-cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: #fff; }
.demo-cta .accent { font-style: italic; background: linear-gradient(92deg, #fff, var(--peach), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.demo-cta p { color: rgba(255, 255, 255, .85); max-width: 54ch; margin: 14px auto 26px; }
.demo-cta .btn-primary { background: #fff; color: var(--teal-900); }
.demo-cta .btn-primary:hover { background: var(--peach); color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .check-wrap, .gen-wrap { grid-template-columns: 1fr; }
  .wz-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .topbar .btn-ghost { display: none; } /* "Zur Website" entfällt, die Brand verlinkt ohnehin zur Startseite */
  .topbar .brand { flex: 1 1 auto; min-width: 0; font-size: .95rem; }
  .topbar .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
}