/* Prima Bauelemente — Glossar Styles */
/* Wiederverwendung der article.css Tokens, eigene Spezifika für Glossar-Layout */

.glossar-hero{
  padding:clamp(48px,5.5vw,80px) var(--gutter);
  background:var(--surface-paper);border-bottom:1px solid var(--line);
}
.glossar-hero-inner{max-width:var(--maxw-prose,760px);margin:0 auto}
.glossar-hero-eyebrow{
  display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;
}
.glossar-hero h1{
  font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.12;
  letter-spacing:-.022em;color:var(--accent-2);margin-bottom:14px;
}
.glossar-hero p{font-size:16.5px;line-height:1.6;color:var(--ink-3)}

/* INDEX-PAGE: Kategorie-Tabs (Anker-Navigation) */
.glossar-nav{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:14px var(--gutter);
}
.glossar-nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.glossar-nav a{
  font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
  padding:8px 14px;border-radius:var(--r-full);
  border:1px solid var(--line);transition:all .15s var(--ease);
}
.glossar-nav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* INDEX-PAGE: Kategorie-Sections */
.glossar-section{padding:clamp(40px,5vw,72px) var(--gutter)}
.glossar-section--alt{background:var(--surface-paper)}
.glossar-section-inner{max-width:var(--maxw);margin:0 auto}
.glossar-section h2{
  font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.18;
  letter-spacing:-.018em;color:var(--accent-2);margin-bottom:28px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.glossar-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media (max-width:780px){.glossar-grid{grid-template-columns:1fr}}
.glossar-card{
  display:block;text-decoration:none;color:inherit;
  padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
}
.glossar-card:hover{
  border-color:var(--accent);transform:translateY(-1px);
  box-shadow:0 8px 22px -16px rgba(7,24,66,.18);text-decoration:none;
}
.glossar-card h3{
  font-size:16px;font-weight:700;color:var(--accent-2);line-height:1.25;
  letter-spacing:-.008em;margin-bottom:6px;
}
.glossar-card p{font-size:13.5px;line-height:1.5;color:var(--ink-3);margin:0}

/* TERM-PAGE: Article-Body */
.glossar-article{
  padding:clamp(40px,5vw,72px) var(--gutter);
}
.glossar-article-inner{max-width:var(--maxw-prose,760px);margin:0 auto}
.glossar-breadcrumb{
  font-size:13px;color:var(--ink-4);margin-bottom:18px;
}
.glossar-breadcrumb a{color:var(--ink-3);text-decoration:none}
.glossar-breadcrumb a:hover{color:var(--accent);text-decoration:underline}
.glossar-breadcrumb span{margin:0 6px;color:var(--ink-5)}
.glossar-cat-tag{
  display:inline-block;font-size:11px;font-weight:700;
  color:var(--accent);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;background:rgba(22,44,112,.07);
  border-radius:var(--r-full);margin-bottom:14px;
}
.glossar-article h1{
  font-size:clamp(28px,3.4vw,38px);font-weight:700;line-height:1.12;
  letter-spacing:-.022em;color:var(--accent-2);margin-bottom:14px;
}
.glossar-article-lead{
  font-size:17.5px;line-height:1.55;color:var(--ink-2);font-weight:500;
  padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.glossar-article-body p{
  font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:16px;
}
.glossar-article-body ul{
  margin:14px 0 18px 0;padding-left:22px;
}
.glossar-article-body li{
  font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:8px;
}
.glossar-article-body strong{color:var(--ink-2);font-weight:700}

/* Praxis-Beispiel-Box */
.glossar-example{
  margin:28px 0;padding:22px 24px;
  background:var(--surface-paper);border:1px solid var(--line);
  border-radius:var(--r-md);border-left:3px solid var(--accent);
}
.glossar-example-label{
  display:inline-block;font-size:11px;font-weight:700;color:var(--accent);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;
}
.glossar-example p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}

/* Footer: Related Terms + Magazin-Links */
.glossar-related{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
}
.glossar-related h3{
  font-size:13px;font-weight:700;color:var(--accent-2);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;
}
.glossar-related-list{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 24px;
}
.glossar-related-list a{
  display:inline-block;font-size:13.5px;font-weight:500;color:var(--accent-2);
  padding:7px 13px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-full);text-decoration:none;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.glossar-related-list a:hover{border-color:var(--accent);background:var(--surface-paper);text-decoration:none}

.glossar-magazin-links{
  background:var(--surface-paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 22px;
}
.glossar-magazin-links h3{
  font-size:13px;font-weight:700;color:var(--accent-2);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;
}
.glossar-magazin-links ul{list-style:none;padding:0;margin:0}
.glossar-magazin-links li{margin-bottom:8px}
.glossar-magazin-links li:last-child{margin-bottom:0}
.glossar-magazin-links a{
  font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.glossar-magazin-links a:hover{color:var(--accent-2);text-decoration:underline}
.glossar-magazin-links a::before{
  content:"→";color:var(--ink-4);font-weight:400;
}