/* iConference — KI-Begriffserklärung. Pairs with ../colors_and_type.css */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { min-height:100%; background:var(--bg-1); }
body { font-family:var(--font-body); -webkit-font-smoothing:antialiased; color:var(--fg-1); }
button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a { color:inherit; text-decoration:none; }

.gpage { min-height:100vh; display:flex; flex-direction:column; }

/* top bar (matches framework page) ------------------------------ */
.gbar { height:62px; flex:none; position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px;
  padding:0 26px; background:var(--ink-900); border-bottom:1px solid rgba(255,255,255,.08); }
.gbar img { height:22px; }
.gbar .divider { width:1px; height:24px; background:rgba(255,255,255,.14); }
.gbar .ttl { font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; }
.gbar .ttl span { color:var(--ochre-300); font-weight:600; }
.gbar .right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.gbar .back { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--fg-on-dark-2);
  display:inline-flex; align-items:center; gap:7px; transition:color var(--dur) var(--ease); }
.gbar .back:hover { color:#fff; }
.gbar .back svg { width:17px; height:17px; }
.gbar .lang { display:flex; border:1.5px solid rgba(255,255,255,.18); border-radius:var(--radius-pill); overflow:hidden; }
.gbar .lang button { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--fg-on-dark-2);
  padding:6px 12px; transition:all var(--dur) var(--ease); }
.gbar .lang button.on { background:var(--ochre-500); color:#fff; }

/* hero ---------------------------------------------------------- */
.ghero { background:var(--ink-900); color:#fff; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06); }
.ghero::before { content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 85% 0%, rgba(201,139,59,.24), transparent 56%); }
.ghero-in { position:relative; max-width:1180px; margin:0 auto; padding:54px 40px 60px; }
.ghero .geyebrow { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ochre-300); margin-bottom:16px; }
.ghero h1 { font-family:var(--font-display); font-weight:800; font-size:44px; line-height:1.08;
  letter-spacing:-.02em; text-wrap:balance; }
.ghero h1 em { font-style:normal; color:var(--cornflower-400); }
.ghero .glead { font-size:18px; line-height:1.6; color:var(--fg-on-dark-2); max-width:50em; margin:18px 0 30px; text-wrap:pretty; }

/* search -------------------------------------------------------- */
.gsearch { position:relative; max-width:560px; display:flex; align-items:center; }
.gsearch > svg { position:absolute; left:18px; width:19px; height:19px; color:var(--ochre-300); pointer-events:none; }
.gsearch input { width:100%; font-family:var(--font-body); font-size:16px; color:#fff;
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.16); border-radius:var(--radius-pill);
  padding:14px 48px 14px 48px; outline:none; transition:all var(--dur) var(--ease); }
.gsearch input::placeholder { color:#8fa0b0; }
.gsearch input:focus { border-color:var(--ochre-400); background:rgba(255,255,255,.1); box-shadow:0 0 0 4px rgba(201,139,59,.18); }
.gsearch-x { position:absolute; right:10px; width:30px; height:30px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--fg-on-dark-2); transition:all var(--dur) var(--ease); }
.gsearch-x:hover { background:rgba(255,255,255,.12); color:#fff; }
.gsearch-x svg { width:16px; height:16px; }

/* body: toc + main --------------------------------------------- */
.gbody { flex:1; max-width:1180px; width:100%; margin:0 auto; padding:48px 40px 72px;
  display:grid; grid-template-columns:248px 1fr; gap:56px; align-items:start; }

/* sticky table of contents ------------------------------------- */
.gtoc { position:sticky; top:90px; }
.gtoc-title { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 14px 14px; }
.gtoc ul { list-style:none; display:flex; flex-direction:column; gap:2px; }
.gtoc a { display:flex; align-items:center; gap:11px; padding:9px 14px; border-radius:var(--radius-md);
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--fg-2);
  transition:all var(--dur) var(--ease); }
.gtoc a svg { width:17px; height:17px; flex:none; color:var(--fg-3); stroke-width:1.9; transition:color var(--dur) var(--ease); }
.gtoc a span { flex:1; text-wrap:balance; line-height:1.2; }
.gtoc a em { font-family:var(--font-mono); font-style:normal; font-size:11px; font-weight:500; color:var(--fg-3); }
.gtoc a:hover { background:var(--bg-2); color:var(--fg-1); }
.gtoc a:hover svg { color:var(--ochre-600); }
.gtoc a.on { background:var(--ochre-50); color:var(--ochre-700); }
.gtoc a.on svg { color:var(--ochre-600); }
.gtoc a.on em { color:var(--ochre-600); }
.gtoc-foot { margin:18px 0 0 14px; font-family:var(--font-mono); font-size:12px; color:var(--fg-3); }
.gtoc-foot b { color:var(--ochre-600); font-weight:600; }

/* groups & terms ----------------------------------------------- */
.gmain { min-width:0; }
.ggroup { scroll-margin-top:90px; margin-bottom:48px; }
.ggroup-head { display:flex; align-items:center; gap:14px; margin-bottom:6px;
  padding-bottom:16px; border-bottom:2px solid var(--border-2); }
.ggroup-ico { width:42px; height:42px; flex:none; border-radius:var(--radius-md); background:var(--ink-900);
  display:flex; align-items:center; justify-content:center; color:var(--ochre-300); }
.ggroup-ico svg { width:21px; height:21px; stroke-width:1.85; }
.ggroup-head h2 { font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.015em; color:var(--navy-700); }
.ggroup-count { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--fg-3);
  background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius-pill); padding:3px 11px; }
.ggroup-intro { font-size:15px; line-height:1.6; color:var(--fg-2); margin:18px 0 4px; max-width:60em; text-wrap:pretty; }

.gterms { display:flex; flex-direction:column; margin-top:8px; }
.gterm { display:grid; grid-template-columns:230px 1fr; gap:28px; padding:18px 0; border-bottom:1px solid var(--border-1); }
.gterm:last-child { border-bottom:0; }
.gterm-name { font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--navy-700);
  line-height:1.3; letter-spacing:-.01em; display:flex; flex-wrap:wrap; align-items:center; gap:8px; align-content:start; }
.gterm-sub { font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ochre-700); background:var(--ochre-50); border:1px solid var(--ochre-100); border-radius:var(--radius-sm); padding:2px 8px; }
.gterm-core { display:inline-flex; color:var(--ochre-500); }
.gterm-core svg { width:15px; height:15px; fill:var(--ochre-200); }
.gterm-def { font-size:15px; line-height:1.62; color:var(--fg-2); text-wrap:pretty; }
.gterm.star .gterm-def { color:var(--navy-600); }

/* empty state --------------------------------------------------- */
.gempty { text-align:center; padding:60px 20px; }
.gempty-ico { width:60px; height:60px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border-1);
  display:flex; align-items:center; justify-content:center; color:var(--fg-3); margin:0 auto 18px; }
.gempty-ico svg { width:28px; height:28px; }
.gempty h3 { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--navy-700); margin-bottom:8px; }
.gempty p { font-size:15px; color:var(--fg-2); max-width:34em; margin:0 auto 22px; }
.gbtn { font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff; background:var(--ochre-500);
  border-radius:var(--radius-pill); padding:10px 20px; transition:all var(--dur) var(--ease); }
.gbtn:hover { background:var(--ochre-600); }

.gfoot { display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding-top:24px;
  border-top:1px solid var(--border-1); font-family:var(--font-mono); font-size:12px; line-height:1.6; color:var(--fg-3); }
.gfoot svg { width:15px; height:15px; flex:none; margin-top:2px; color:var(--ochre-600); }

@media (max-width:880px) {
  .gbody { grid-template-columns:1fr; gap:28px; padding:32px 22px 60px; }
  .gtoc { position:static; }
  .gtoc ul { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .gtoc a { padding:8px 12px; background:var(--bg-2); }
  .gtoc a span { flex:none; }
  .gtoc-foot { display:none; }
  .ghero-in { padding:40px 22px 44px; }
  .ghero h1 { font-size:34px; }
  .gterm { grid-template-columns:1fr; gap:6px; }
}

@media (max-width:600px) {
  .gbar { padding:0 14px; gap:10px; }
  .gbar .divider, .gbar .ttl { display:none; }
  .gbar .back { font-size:0; gap:0; }
  .gbar .back svg { width:18px; height:18px; }
  .ggroup-head h2 { min-width:0; overflow-wrap:anywhere; }
}