/* KI content components only. The global header, navigation, footer and light shell
   are owned by /assets/css/styles.css and /assets/js/ws-layout.js. */
body.ki-page {
  --surface:#fff; --surface-muted:#eef2f8; --border:rgba(15,23,42,.12);
  --card:#f5f7fb; --accent:#d12a2a; --accent-dark:#a61f1f; --ink:#0f172a;
  --muted:#64748b; --text:#0f172a; --text-muted:#64748b;
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem;
  margin:0; min-height:100vh; background:#eef4fa; color:var(--ink);
  font:16px/1.6 "Inter","Segoe UI",Roboto,Arial,sans-serif;
}
body.ki-page *,body.ki-page *::before,body.ki-page *::after{box-sizing:border-box}
body.ki-page .site-main{background:#eef4fa;color:var(--ink)}
body.ki-page .container{max-width:1320px;margin:0 auto;padding-inline:var(--space-5)}
body.ki-page .section{padding-block:var(--space-3)}
body.ki-page .section-heading{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
body.ki-page .section-heading h1,body.ki-page .section-heading h2{margin:0}
body.ki-page .section-heading p{margin:0;color:var(--text-muted)}
body.ki-page .section-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;color:var(--muted);margin:0 0 var(--space-2)}
body.ki-page .callout{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--card);color:var(--text);display:flex;flex-direction:column;gap:var(--space-2)}
body.ki-page .callout h3,body.ki-page .callout p{margin:0}
body.ki-page .callout p{color:var(--text-muted)}
body.ki-page .breadcrumbs{background:rgba(15,23,42,.04);border-bottom:1px solid var(--border)}
body.ki-page .breadcrumbs__container{padding-block:.75rem}
body.ki-page .breadcrumbs__list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--text-muted)}
body.ki-page .breadcrumbs__item{display:inline-flex;align-items:center;gap:.5rem}
body.ki-page .breadcrumbs__item+.breadcrumbs__item::before{content:"›";opacity:.7}
body.ki-page .breadcrumbs__item a{color:inherit;text-decoration:none}
body.ki-page .breadcrumbs__item a:hover{color:var(--accent)}
body.ki-page .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}
body.ki-page .card{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:var(--space-4)}
body.ki-page .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
body.ki-page .btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:700}
body.ki-page .btn-primary{background:var(--accent);color:#fff}
body.ki-page .btn-outline{border:1px solid var(--border);color:var(--text);background:#fff}
@media(max-width:640px){body.ki-page .container{padding-inline:var(--space-4)}}
/* KI Page */
.ki-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 1120px;
}

.ki-hero__lede {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 72ch;
}

.ki-toc__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.ki-toc__nav h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
}

.ki-toc__list {
  margin: 0;
  padding-left: 1.5rem;
}

.ki-toc__list li {
  line-height: 1.5;
}

.ki-toc__list li + li {
  margin-top: 0.35rem;
}

.ki-toc__list a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.ki-toc__list a:hover,
.ki-toc__list a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.ki-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1120px;
}

.ki-section__inner > p {
  margin: 0;
  color: var(--text-muted);
}

.ki-section__inner > p + p {
  margin-top: 0.5rem;
}

.ki-tips {
  margin: 0;
  padding-left: 1.5rem;
}

.ki-tips li {
  margin-bottom: var(--space-4);
}

.ki-tips li::marker {
  font-weight: 700;
  color: var(--accent);
}

.ki-tips li:last-child {
  margin-bottom: 0;
}

.ki-tip-card {
  margin-top: var(--space-2);
}

.ki-tip-card h3 {
  font-size: 1.2rem;
}

.ki-tip-card p {
  margin: 0;
  color: var(--text-muted);
}

.ki-uses {
  margin: 0;
  padding-left: 1.25rem;
}

.ki-uses li {
  color: var(--text-muted);
}

.ki-uses li + li {
  margin-top: 0.4rem;
}

.ki-hero-center {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

.ki-card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ki-tools-teaser {
  margin-top: var(--space-5);
}

.ki-tools-teaser__intro {
  color: var(--text-muted);
  max-width: 80ch;
}

.ki-tools-teaser__list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
}

.ki-link-card {
  text-decoration: none;
  color: inherit;
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ki-link-card h3 {
  font-size: 1.2rem;
}

.ki-link-card p {
  margin: 0;
}

.ki-link-card:hover,
.ki-link-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 12px 30px -20px rgba(15, 23, 42, 0.45);
  transform: translateY(-2px);
}

.ki-two-column {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ki-pro-con-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ki-pro-card {
  border-radius: 18px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.35);
  display: grid;
  gap: var(--space-3);
}

.ki-pro-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

.ki-pro-card p {
  margin: 0;
  color: var(--text-muted);
}

.ki-pro-card ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  color: var(--text);
}

.ki-pro-card--pro {
  background: color-mix(in oklab, #10b981 12%, var(--card));
  border-color: color-mix(in oklab, #10b981 45%, var(--border));
}

.ki-pro-card--pro h3 {
  color: #065f46;
}

.ki-pro-card--risk {
  background: color-mix(in oklab, #ef4444 12%, var(--card));
  border-color: color-mix(in oklab, #ef4444 40%, var(--border));
}

.ki-pro-card--risk h3 {
  color: #b91c1c;
}

.prompt-rule-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prompt-rule-list li {
  font-weight: 600;
  color: var(--text);
}

.prompt-rule-list li span {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.prompt-example-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.prompt-example {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prompt-example__title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

.prompt-example pre {
  margin: 0;
  padding: var(--space-3);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.prompt-example code {
  color: var(--text);
}

.ki-tool-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ki-tool-card {
  height: 100%;
}

.ki-tool-card h3 {
  margin: 0;
  font-size: 1.2rem;
}

.ki-tool-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ki-tool-card strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.ki-tool-usage,
.ki-tool-coming-up {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ki-tool-coming-up li::marker {
  color: var(--accent);
}

.faq-accordion {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4);
  font-weight: 600;
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--border);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin: 0;
  padding: var(--space-4);
  padding-top: 0;
  color: var(--text-muted);
}

.callout.note {
  border-color: #60a5fa;
  background: color-mix(in oklab, #60a5fa 12%, var(--card));
}

.ki-lexicon {
  display: grid;
  gap: var(--space-3);
}

.ki-lexicon dt {
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.ki-lexicon dd {
  margin: 0;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-bottom: var(--space-3);
}

.ki-lexicon dd:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ki-lexicon__group {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--space-4);
  background: var(--card);
}

.ki-lexicon__group h2 {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.lex-contact,
.lex-links {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  color: var(--text-muted);
}

.lex-contact a,
.lex-links a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.lex-contact a:hover,
.lex-links a:hover,
.lex-contact a:focus-visible,
.lex-links a:focus-visible {
  text-decoration: underline;
}

.ki-cta .hero-actions {
  margin-top: 0;
}

@media only screen and (max-width: 640px) {
  .ki-toc__nav {
    padding: var(--space-4);
  }
}

/* Slicer Guide Modernization */
.container.ki-wide {
  max-width: 1320px;
}
.container.ki-wide.ki-hero__inner,
.container.ki-wide.ki-section__inner {
  max-width: 100%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.ki-highlight {
  background-color: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ki-highlight__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .ki-highlight__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: rgba(209, 42, 42, 0.05);
}

/* Mitlaufender Rücksprung für KI-Detailseiten */
body.ki-page .ki-detail-back {
  position: fixed;
  top: 140px;
  left: max(16px, calc((100vw - 1320px) / 2 + 24px));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: 42px;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid rgba(45,126,255,.35);
  background: rgba(255,255,255,.96);
  color: #1e5f9f;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(31,58,85,.14);
  backdrop-filter: blur(8px);
}

body.ki-page .ki-detail-back:hover,
body.ki-page .ki-detail-back:focus-visible {
  border-color: #2d7eff;
  background: #fff;
  outline: 3px solid rgba(45,126,255,.14);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  body.ki-page .ki-detail-back {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 14px;
    max-width: calc(100vw - 28px);
    font-size: .92rem;
  }
}

.ki-praxis-steps,.ki-praxis-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ki-praxis-card{height:100%;display:flex;flex-direction:column;gap:var(--space-3)}
.ki-praxis-step{height:100%;display:list-item;padding:var(--space-4);border-left:4px solid var(--accent);background:var(--card);border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.ki-praxis-step h3,.ki-praxis-step p,.ki-praxis-card h3,.ki-praxis-card p{margin:0}
.ki-content-status{margin:0;color:var(--text-muted);font-size:.9rem}

/* KI-Lexikon und sichere Nutzung */
.ki-term{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.25rem,4vw,4rem);align-items:center;padding-block:clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--border)}
.ki-term--reverse .ki-term__visual{order:2}
.ki-term__visual{margin:0;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 40px -30px rgba(15,23,42,.45)}
.ki-term__visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.ki-term__content{max-width:64ch}
.ki-term__content h2{margin:.1rem 0 .8rem;font-size:clamp(1.75rem,4vw,2.65rem);line-height:1.14}
.ki-term__content p{margin:.65rem 0;color:var(--text-muted)}
.ki-term__content strong{color:var(--text)}
.ki-advanced-term .ki-term__content h2{font-size:clamp(1.55rem,3.2vw,2.25rem)}
.ki-term-teaser-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.ki-term-teaser{position:relative;display:block;overflow:hidden;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 12px 26px -24px rgba(15,23,42,.55)}
.ki-term-teaser img{display:block;width:100%;height:clamp(220px,23vw,330px);object-fit:cover;transition:transform .22s ease}
.ki-term-teaser span{display:block;padding:.8rem 1rem;font-weight:800;font-size:1.05rem}
.ki-term-teaser:hover img,.ki-term-teaser:focus-visible img{transform:scale(1.035)}
.ki-term-teaser:focus-visible{outline:3px solid rgba(209,42,42,.28);outline-offset:3px}
.ki-safety-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ki-safety-card{height:100%}
.ki-safety-card h3{margin:.1rem 0 .6rem;font-size:1.12rem}
.ki-safety-card p{margin:0;color:var(--text-muted)}
.ki-answer-lede{margin:0;max-width:74ch;font-size:1.18rem;line-height:1.65;color:var(--text)}
.ki-work-shift{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);background:var(--surface)}
.ki-work-shift__item{padding:clamp(1rem,3vw,1.6rem);border-right:1px solid var(--border)}
.ki-work-shift__item:last-child{border-right:0}
.ki-work-shift__item h3{margin:0 0 .55rem;font-size:1.1rem}
.ki-work-shift__item p{margin:0;color:var(--text-muted)}
.ki-source-note{margin:0;font-size:.92rem;color:var(--text-muted)}
.ki-source-note a{color:var(--accent);font-weight:700}
@media(max-width:760px){.ki-term{grid-template-columns:1fr}.ki-term--reverse .ki-term__visual{order:0}.ki-term-teaser-grid{grid-template-columns:1fr}.ki-term-teaser img{height:auto;aspect-ratio:3/2}.ki-work-shift{grid-template-columns:1fr}.ki-work-shift__item{border-right:0;border-bottom:1px solid var(--border)}.ki-work-shift__item:last-child{border-bottom:0}}