/* ─────────────────────────────────────────────────────────────────
   MKH GIS-Beratung — Reihe „KI in QGIS"
   Geteilte Komponenten, ergänzt blog-post.css
   ───────────────────────────────────────────────────────────────── */

:root { --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

/* Hero-Platzhalter (bis das echte Bild vorliegt) */
.article-hero-ph { position:absolute; inset:0; background:linear-gradient(135deg,var(--green-900) 0%,var(--green-700) 70%,var(--green-600) 100%); }
.img-note {
  position:absolute; bottom:10px; right:12px; z-index:5;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
  color:rgba(255,255,255,.72); background:rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:3px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

/* Inline-Bildplatzhalter */
.img-ph {
  position:relative; margin:30px 0; border-radius:var(--r-lg);
  background:repeating-linear-gradient(135deg,var(--n-100) 0 13px,var(--n-50) 13px 26px);
  border:1px solid var(--n-200);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; min-height:210px; gap:9px;
}
.img-ph .ph-tag { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green-700); }
.img-ph .ph-file { font-family:var(--mono); font-size:13px; color:var(--n-700); background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-md); padding:5px 11px; }
.img-ph .ph-desc { font-size:13px; color:var(--n-600); max-width:420px; line-height:1.55; }

/* Reihen-Navigation */
.series-nav { margin:34px 0; border:1px solid var(--n-200); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.series-nav-head { background:var(--green-900); padding:18px 24px; position:relative; overflow:hidden; }
.series-nav-head::before { content:''; position:absolute; inset:0; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cellipse cx='200' cy='200' rx='190' ry='90' fill='none' stroke='white' stroke-width='1'/%3E%3Cellipse cx='200' cy='200' rx='128' ry='52' fill='none' stroke='white' stroke-width='1'/%3E%3Cellipse cx='200' cy='200' rx='64' ry='22' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E"); background-size:300px 300px; }
.series-nav-head > * { position:relative; z-index:1; }
.series-nav-eyebrow { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.series-nav-head h3 { font-size:1.05rem !important; margin:5px 0 0 !important; color:#fff !important; font-weight:700; line-height:1.3; }
.series-nav ol { list-style:none; margin:0 !important; padding:0; }
.series-nav li { margin:0; border-bottom:1px solid var(--n-100); }
.series-nav li:last-child { border-bottom:none; }
.series-nav a, .series-nav .cur { display:flex; gap:16px; align-items:baseline; padding:15px 24px; text-decoration:none; color:inherit; transition:background .15s; }
.series-nav a:hover { background:var(--green-50); }
.series-nav .s-num { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--green-700); flex-shrink:0; width:58px; text-transform:uppercase; }
.series-nav .s-body { flex:1; }
.series-nav .s-ttl { font-size:.96rem; font-weight:600; color:var(--n-900); line-height:1.4; }
.series-nav .s-sub { font-size:.82rem; color:var(--n-600); display:block; margin-top:2px; }
.series-nav .cur { background:var(--green-50); cursor:default; }
.series-nav .cur .s-num { color:var(--teal-dark); }
.series-nav .cur .s-ttl { color:var(--green-800); }
.series-nav .s-here { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--teal); padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle; }

/* Code- / Konfig-Block */
.codeblock { background:#1b1d1a; color:#e7e6e0; border-radius:var(--r-md); padding:18px 20px; margin:22px 0; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.7; -webkit-font-smoothing:auto; }
.codeblock .c-com { color:#7f8a82; }
.codeblock .c-key { color:#86c79a; }
.codeblock .c-str { color:#e3c483; }
.codeblock .c-fn  { color:#7fb6e6; }
.code-cap { font-family:var(--mono); font-size:11.5px; color:var(--n-600); margin:-12px 0 24px; padding-left:2px; }

/* Beispiel-Prompt */
.prompt { background:var(--n-50); border:1px solid var(--n-200); border-left:3px solid var(--teal); border-radius:var(--r-md); padding:15px 18px; margin:20px 0; }
.prompt .p-label { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:7px; }
.prompt p { margin:0 !important; font-size:.95rem; color:var(--n-800); line-height:1.6; }
.prompt p + p { margin-top:10px !important; }

/* Nummerierte Tipps */
.tips { counter-reset:tip; margin:30px 0; }
.tip-item { counter-increment:tip; display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--n-100); }
.tip-item:last-child { border-bottom:none; }
.tip-item::before { content:counter(tip); flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--green-50); border:1px solid var(--green-100); color:var(--green-700); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); }
.tip-item .tip-body { flex:1; }
.tip-item h3 { font-size:1.1rem !important; margin:7px 0 7px !important; }
.tip-item p { margin:0 !important; font-size:.95rem; color:var(--n-700); }
.tip-item p + p { margin-top:8px !important; }

/* Warnbox */
.warn-box { background:#fef5ec; border:1px solid #fce8d1; border-left:4px solid #d97724; padding:16px 22px; border-radius:var(--r-md); margin:24px 0; }
.warn-box p { margin:0; font-size:.94rem; color:var(--n-800); }
.warn-box strong { color:#8c4a0f; }

/* Pro / Contra */
.pc-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:30px 0; }
.pc-col { border-radius:var(--r-lg); padding:22px 24px; border:1px solid var(--n-200); }
.pc-col.pro { background:var(--green-50); border-color:var(--green-100); }
.pc-col.con { background:#fdf6f0; border-color:#f3e2d2; }
.pc-col h4 { font-size:.78rem !important; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px !important; }
.pc-col.pro h4 { color:var(--green-800); }
.pc-col.con h4 { color:#a85d23; }
.pc-col ul { margin:0 !important; list-style:none; }
.pc-col li { position:relative; padding-left:22px; font-size:.92rem; margin-bottom:11px; color:var(--n-800); line-height:1.55; }
.pc-col li:last-child { margin-bottom:0; }
.pc-col.pro li::before { content:'+'; position:absolute; left:0; top:-1px; color:var(--green-600); font-weight:700; font-size:1.05rem; }
.pc-col.con li::before { content:'–'; position:absolute; left:0; top:-1px; color:#c47a3a; font-weight:700; font-size:1.05rem; }
@media (max-width:600px) { .pc-grid { grid-template-columns:1fr; } }

/* Installations-Schritte */
.steps { counter-reset:st; margin:30px 0; }
.step { counter-increment:st; position:relative; padding:0 0 28px 56px; }
.step:not(:last-child)::after { content:''; position:absolute; left:18px; top:40px; bottom:0; width:2px; background:var(--n-200); }
.step::before { content:counter(st); position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%; background:var(--green-700); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:15px; }
.step h4 { font-size:1.08rem !important; margin:5px 0 9px !important; }
.step p { margin:0 0 11px !important; font-size:.95rem; color:var(--n-700); }
.step p:last-child { margin-bottom:0 !important; }

/* Definitions-Karten (Was ist ChatGPT / Claude) */
.def-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0; }
.def-card { background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.def-card .d-name { font-size:1rem; font-weight:700; color:var(--n-900); margin-bottom:4px; }
.def-card .d-by { font-size:11px; font-family:var(--mono); color:var(--n-600); margin-bottom:10px; }
.def-card p { margin:0 !important; font-size:.9rem; color:var(--n-700); line-height:1.6; }
@media (max-width:600px) { .def-grid { grid-template-columns:1fr; } }

/* Schlanke Tabelle */
.mini-table-wrap { margin:26px 0; overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--n-200); box-shadow:var(--shadow-sm); }
.mini-table { width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; min-width:520px; }
.mini-table thead { background:var(--green-800); color:#fff; }
.mini-table th { padding:12px 16px; text-align:left; font-weight:600; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }
.mini-table td { padding:12px 16px; border-bottom:1px solid var(--n-100); vertical-align:top; color:var(--n-800); }
.mini-table td:first-child { font-weight:700; color:var(--n-900); white-space:nowrap; }
.mini-table tbody tr:last-child td { border-bottom:none; }
.mini-table tbody tr:hover { background:var(--green-50); }
.mini-table code { font-family:var(--mono); font-size:.85em; background:var(--n-100); padding:1px 5px; border-radius:3px; }

/* Inline-Code im Fließtext */
.article-body code { font-family:var(--mono); font-size:.86em; background:var(--n-100); color:var(--n-900); padding:2px 6px; border-radius:4px; }
.codeblock code { background:none; padding:0; color:inherit; font-size:inherit; }