/* atlas-legal.css — geteilte Styles fuer Footer + Tooltip + Legal-Pages
 * Wird via STATIC_ROOT serviert (lokal) oder via nginx (Production). */

/* ===== Footer Variante 1: Big Page-End (Content-Seiten) ===== */
.al-footer { background: rgba(11, 18, 32, 0.65);
  border-top: 1px solid rgba(120, 160, 220, 0.18); padding: 32px 24px 24px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px; color: #7d8aa2; margin-top: 48px; }
.al-footer[hidden] { display:none; }
.al-footer-inner { max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  align-items: flex-start; }
.al-footer-col h4 { font-size:12px; color: #9fc8ff; text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 700; margin: 0 0 12px; }
.al-footer-col ul { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px; }
.al-footer-col a { color: #9fb3d1; text-decoration: none; transition: color 0.12s;
  font-size: 13px; }
.al-footer-col a:hover { color: #fff; text-decoration: underline; }
.al-footer-col p { margin: 0 0 8px; line-height: 1.55; font-size: 12.5px; color: #9fb3d1; }
.al-footer-col .al-brand-block { display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 10px; font-size: 16px; color: #fff; font-weight: 700; }
.al-footer-col .al-brand-block .al-brand-icon { font-size: 18px; }
.al-footer-col .al-brand-block b { color: #9fc8ff; }
.al-footer-bottom { max-width: 1200px; margin: 24px auto 0;
  padding-top: 16px; border-top: 1px solid rgba(120, 160, 220, 0.1);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size:12px; color: #5b6b85; }
.al-footer-bottom .al-spacer { flex: 1; }
@media (max-width: 760px) {
  .al-footer-inner { grid-template-columns: 1fr 1fr; gap: 22px; }
  .al-footer { padding: 24px 16px 18px; }
}

/* ===== Footer Variante 2: Mini-Bar (Map-Seiten, sticky bottom, einklappbar) ===== */
.al-footer-mini { position:fixed; bottom:0; left:0; right:0; z-index:300;
  background:rgba(11,18,32,.92); backdrop-filter:blur(8px);
  border-top:1px solid rgba(120,160,220,.18); padding:5px 14px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:12px; color:#7d8aa2;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.al-footer-mini .al-mini-source { color:#9fb3d1; opacity:.9; }
.al-footer-mini .al-mini-sep { color:#39455e; }
.al-footer-mini .al-mini-spacer { flex:1; }
.al-footer-mini a { color:#9fb3d1; text-decoration:none; transition:color .12s; }
.al-footer-mini a:hover { color:#fff; text-decoration:underline; }

/* ===== Tooltip-Popover (click-trigger, geteilt) ===== */
[data-glossar] { border-bottom:1px dotted rgba(159,200,255,.45); cursor:help;
  transition:color .12s, border-color .12s; }
[data-glossar]:hover { color:#9fc8ff; border-bottom-color:#9fc8ff; }
[data-glossar]:focus-visible { outline:2px solid #9fc8ff; outline-offset:2px; }

.al-tip { position:fixed; z-index:9000; max-width:340px;
  background:#141d33; color:#cdd9ec;
  border:1px solid rgba(74,144,226,.55); border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:12px; line-height:1.55;
  animation:al-tip-in .14s ease; }
.al-tip[hidden] { display:none; }
@keyframes al-tip-in { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }
.al-tip-h { display:flex; justify-content:space-between; align-items:flex-start;
  padding:10px 12px 8px; border-bottom:1px solid rgba(255,255,255,.06); gap:8px; }
.al-tip-title { font-weight:700; color:#fff; font-size:13px; }
.al-tip-cat { font-size:12px; color:#9fb3d1; text-transform:uppercase;
  letter-spacing:.5px; font-weight:600; margin-top:2px; }
.al-tip-x { background:transparent; color:#9fb3d1; border:0; font-size:16px;
  cursor:pointer; padding:0 4px; line-height:1; }
.al-tip-x:hover { color:#fff; }
.al-tip-body { padding:10px 12px; color:#cdd9ec; }
.al-tip-foot { padding:8px 12px 10px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:flex-end; }
.al-tip-link { color:#9fc8ff; text-decoration:none; font-size:12px;
  font-weight:600; padding:5px 10px; background:rgba(74,144,226,.18);
  border:1px solid rgba(74,144,226,.55); border-radius:5px; transition:.12s; }
.al-tip-link:hover { background:rgba(74,144,226,.32); color:#fff; text-decoration:none; }

/* ===== FAQ-Hero (viz/faq.html) =====
 * Layout (min-height:100vh + flex-center) aus atlas-brand.css.
 * Page-spezifische Headings hier. */
.atl-faq-hero h1 { font-size:48px; color:var(--atl-text-strong); margin:0 0 16px;
  font-weight:700; letter-spacing:-0.02em; line-height:1.1; max-width:900px; }
.atl-faq-hero p { font-size:18px; color:var(--atl-text-soft);
  max-width:680px; margin:0 auto 28px; line-height:1.55; }
.atl-faq-hero-eyebrow { display:inline-block; padding: 5px 12px;
  background: var(--atl-primary-soft); color: var(--atl-primary);
  border:1px solid var(--atl-border-bright); border-radius:14px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  margin-bottom:18px; }
@media (max-width:640px) {
  .atl-faq-hero h1 { font-size:32px; }
  .atl-faq-hero p { font-size:15px; }
}

/* ===== Glossar-Seite (viz/glossar.html) =====
 * .gl-wrap: 1200px-Container (analog .atl-container).
 * .atl-glossar-hero: full-viewport-Hero (Layout aus atlas-brand.css), Page-spezifisches Heading-Styling hier. */
.gl-wrap { max-width:1200px; margin:0 auto; padding:32px 24px 80px; }
.atl-glossar-hero h1 { font-size:48px; color:var(--atl-text-strong); margin:0 0 16px;
  font-weight:700; letter-spacing:-0.02em; line-height:1.1; max-width:900px; }
.atl-glossar-hero .lead { font-size:18px; color:var(--atl-text-soft);
  max-width:680px; margin:0 auto; line-height:1.55; }
.atl-glossar-hero-eyebrow { display:inline-block; padding: 5px 12px;
  background: var(--atl-primary-soft); color: var(--atl-primary);
  border:1px solid var(--atl-border-bright); border-radius:14px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  margin-bottom:18px; }
@media (max-width:640px) {
  .atl-glossar-hero h1 { font-size:32px; }
  .atl-glossar-hero .lead { font-size:15px; }
}

.gl-search { display:flex; gap:8px; max-width:520px; margin:0 auto 18px; }
.gl-search input { flex:1; padding:11px 14px; background:rgba(20,28,42,.94);
  border:1px solid rgba(120,160,220,.35); border-radius:6px; color:#fff;
  font-size:14px; font-family:inherit; outline:none; }
.gl-search input::placeholder { color:#7d8aa2; }
.gl-search input:focus { border-color:#9fc8ff; box-shadow:0 0 0 2px rgba(159,200,255,.18); }

.gl-cats { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:18px; }
.gl-cat-chip { padding:6px 12px; background:rgba(20,28,42,.94);
  border:1px solid rgba(120,160,220,.18); color:#9fb3d1; border-radius:14px;
  font-size:12px; cursor:pointer; font-family:inherit; transition:.12s; }
.gl-cat-chip:hover { background:rgba(74,144,226,.18); color:#cdd9ec; border-color:#4a90e2; }
.gl-cat-chip.active { background:rgba(74,144,226,.32); color:#fff;
  border-color:#9fc8ff; font-weight:600; }
.gl-cat-chip .count { color:#7d8aa2; margin-left:5px; font-size:12px; }
.gl-cat-chip.active .count { color:#cdd9ec; }

.gl-alpha { display:flex; gap:4px; justify-content:center; flex-wrap:wrap;
  margin-bottom:24px; padding:12px 0; border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06); }
.gl-alpha a { padding:4px 9px; color:#9fb3d1; text-decoration:none;
  font-size:12px; font-weight:600; border-radius:4px;
  font-variant-numeric:tabular-nums; transition:.12s; }
.gl-alpha a:hover { background:rgba(74,144,226,.18); color:#fff; }
.gl-alpha a.empty { color:#39455e; pointer-events:none; cursor:default; }

.gl-section { margin-bottom:30px; }
.gl-section-h { font-size:24px; color:#9fc8ff; font-weight:700;
  margin:24px 0 12px; padding-bottom:6px;
  border-bottom:2px solid rgba(159,200,255,.25); scroll-margin-top:20px; }

.gl-entries { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.gl-entry { background:rgba(20,28,42,.94); padding:14px 16px 12px;
  border-radius:6px; border:1px solid rgba(120,160,220,.18);
  transition:border-color .12s, transform .12s; scroll-margin-top:80px; }
.gl-entry:hover { border-color:rgba(159,200,255,.5); transform:translateY(-1px); }
.gl-entry:target { border-color:#9fc8ff; box-shadow:0 0 0 2px rgba(159,200,255,.25); }
.gl-entry-h { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.gl-entry-title { font-size:15px; color:#fff; font-weight:700; margin:0 0 3px; }
.gl-entry-cat { font-size:12px; color:#9fb3d1; text-transform:uppercase;
  letter-spacing:.5px; font-weight:600; padding:3px 7px;
  background:rgba(74,144,226,.18); border-radius:10px; white-space:nowrap; }
.gl-entry-desc { font-size:12.5px; color:#cdd9ec; line-height:1.6; margin-top:6px; }
.gl-entry-desc a { color:#9fc8ff; text-decoration:none; border-bottom:1px dotted rgba(159,200,255,.5); }
.gl-entry-desc a:hover { color:#fff; border-bottom-color:#fff; }

.gl-empty { padding:40px 20px; text-align:center; color:#7d8aa2; font-size:13px; }

/* ===== FAQ-Seite + Legal-Pages (Impressum, Datenschutz) ===== */
.al-page { max-width:720px; margin:0 auto; padding:32px 24px 80px; }
/* Wide-Modifier: Pages die volle Content-Breite brauchen (FAQ). */
.al-page.al-page--wide { max-width:1200px; }
.al-page {
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  color:#cdd9ec; line-height:1.7; }
.al-page h1 { font-size:28px; color:#9fc8ff; margin:0 0 12px; font-weight:700; }
.al-page h2 { font-size:18px; color:#cdd9ec; margin:28px 0 8px; font-weight:700;
  border-bottom:1px solid rgba(159,200,255,.18); padding-bottom:4px; }
.al-page h3 { font-size:14px; color:#9fc8ff; margin:18px 0 6px; font-weight:600; }
.al-page p { margin:0 0 12px; font-size:14px; }
.al-page ul { margin:0 0 12px; padding-left:24px; }
.al-page li { margin-bottom:5px; font-size:14px; }
.al-page a { color:#9fc8ff; text-decoration:none; border-bottom:1px dotted rgba(159,200,255,.45); }
.al-page a:hover { color:#fff; border-bottom-color:#fff; }
/* Button-Links (.atl-btn) sollen NICHT wie Fliesstext-Links aussehen — eigene
   Button-Farben behalten, keine gepunktete Unterstreichung. */
.al-page a.atl-btn { border-bottom:none; }
.al-page a.atl-btn-primary, .al-page a.atl-btn-primary:hover { color:#0b1220; border-bottom:none; }
.al-page a.atl-btn-secondary, .al-page a.atl-btn-secondary:hover { color:var(--atl-text-strong); border-bottom:none; }
.al-page .al-page-sub { color:#9fb3d1; font-size:13px; margin-top:-6px; }
.al-page .al-page-meta { padding:10px 14px; background:rgba(74,144,226,.08);
  border-left:3px solid rgba(159,200,255,.55); border-radius:4px;
  font-size:12.5px; color:#9fb3d1; margin:14px 0; }
.al-page details { margin-bottom:12px; background:rgba(20,28,42,.94);
  padding:10px 14px; border-radius:6px; border:1px solid rgba(120,160,220,.18); }
.al-page details[open] { border-color:rgba(159,200,255,.4); }
.al-page summary { cursor:pointer; font-weight:600; color:#fff; font-size:14px;
  list-style:none; padding-right:20px; position:relative; }
.al-page summary::after { content:'+'; position:absolute; right:0; top:0;
  color:#9fc8ff; font-weight:700; transition:transform .15s; }
.al-page details[open] summary::after { content:'−'; }
.al-page summary:hover { color:#9fc8ff; }
.al-page details > div { margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06); color:#cdd9ec; font-size:13.5px; }