/* 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; }

/* Social-Kanaele in der Brand-Spalte. Die Marken-Icons sind Flaechen (Simple Icons),
   nicht Striche wie die Lucide-Icons — deshalb faerbt hier `color` ueber
   fill:currentColor und nicht ueber stroke. Trefferflaeche bewusst 34px: das Icon
   selbst ist 18px, ein 18px-Ziel ist auf dem Handy zu klein. */
.al-social { margin-top: 16px; }
.al-social-h { display: block; font-size: 12px; color: #9fc8ff; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin-bottom: 8px; }
.al-social-row { display: flex; gap: 6px; flex-wrap: wrap; }
.al-footer-col a.al-social-link { display: inline-flex; align-items: center;
  justify-content: center; width: 34px; height: 34px; border-radius: 9px;
  color: #9fb3d1; background: rgba(255,255,255,.04);
  transition: color .12s, background .12s; text-decoration: none; }
.al-footer-col a.al-social-link:hover { color: #fff; background: rgba(79,139,227,.22);
  text-decoration: none; }
.al-social-link .atl-ic { width: 18px; height: 18px; vertical-align: 0; }
.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; }
/* Quellenzeile darf schrumpfen statt die Navi-Links in eine zweite Zeile zu druecken
   (de_10km listet 7 Quellen — bei 1440px rutschte "AGB" allein nach unten).
   Volltext haengt als title am Element. */
.al-footer-mini .al-mini-source { color:#9fb3d1; opacity:.9;
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Ab Tablet-Breite einzeilig: mit flex-wrap:wrap gewinnt der Umbruch gegen das
   Schrumpfen, die Ellipsis oben griffe nie. Unter 900px bleibt Umbruch richtig,
   dort ist die Leiste ohnehin eingeklappt (al-mini-collapsed). */
@media (min-width: 900px) { .al-footer-mini { flex-wrap:nowrap; } }
/* Datenbasis-Knopf + Panel (opt-in via body[data-footer-info]) */
.al-footer-mini .al-mini-info { flex:none; width:15px; height:15px; padding:0; cursor:pointer;
  border:1px solid rgba(120,160,220,.45); border-radius:50%; background:transparent;
  color:#9fb3d1; font-family:Georgia,serif; font-style:italic; font-size:10px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; }
.al-footer-mini .al-mini-info:hover { color:#fff; border-color:rgba(120,160,220,.8); }
.al-mini-infopanel { position:absolute; bottom:100%; left:14px; margin-bottom:6px; z-index:301;
  width:min(430px, calc(100vw - 28px)); max-height:min(60vh, 460px); overflow-y:auto;
  background:rgba(14,20,32,.98); backdrop-filter:blur(8px);
  border:1px solid rgba(120,160,220,.3); border-radius:8px; padding:12px 14px;
  box-shadow:0 -6px 26px rgba(0,0,0,.45); color:#cdd9ec; font-size:11.5px; line-height:1.5;
  text-align:left; white-space:normal; }
.al-mini-infopanel[hidden] { display:none; }
.al-mini-infopanel h4 { margin:0 0 6px; font-size:12px; color:#9fc8ff; font-weight:700; }
.al-mini-infopanel p { margin:0 0 7px; }
.al-mini-infopanel b { color:#e6ecf5; }
.al-mini-infopanel a { color:#9fc8ff; }
.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; }
/* Klapp-Toggle (User-Feedback iPhone 2026-07-14): zu = eine schmale Zeile nur mit Quelle,
   Links versteckt — spart auf dem Handy ~3 umgebrochene Zeilen */
.al-footer-mini .al-mini-toggle { margin-left:auto; flex:none; display:inline-flex; align-items:center;
  background:transparent; border:none; color:#9fb3d1; cursor:pointer; padding:2px 4px; }
.al-footer-mini .al-mini-toggle:hover { color:#fff; }
.al-footer-mini .al-mini-toggle .atl-ic { width:14px; height:14px; }
.al-footer-mini.al-mini-collapsed { flex-wrap:nowrap; }
.al-footer-mini.al-mini-collapsed a,
.al-footer-mini.al-mini-collapsed .al-mini-sep,
.al-footer-mini.al-mini-collapsed .al-mini-spacer { display:none; }
.al-footer-mini.al-mini-collapsed .al-mini-source { flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-footer-mini.al-mini-collapsed .al-mini-toggle .atl-ic { transform:rotate(180deg); }

/* ===== 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; }
/* QUERVERWEISE IM POPOVER-TEXT (27.08.2026). Die `[[key]]`-Verweise bekommen in
 * atlas-legal.js die Klasse `al-tip-inline` — die es hier bis heute NICHT gab. Ohne
 * eigene Regel faerbt der Browser sie mit seinem Vorgabewert #0000EE, und der steht auf
 * dem Popovergrund #141d33 praktisch unsichtbar. Derselbe Fehlertyp wie die dunkelblauen
 * Links auf der Nachrechnen-Seite, nur eine Ebene tiefer: Dort fehlte die Farbe im
 * Generator, hier fehlte die Klasse ueberhaupt.
 * Die Unterstreichung bleibt: Im Fliesstext ist Farbe allein kein Hinweis auf einen Link,
 * und wer Farben schlecht unterscheidet, hat sonst gar keinen. */
.al-tip-inline { color:#9fc8ff; text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px; }
.al-tip-inline:hover { color:#fff; }

/* Das Kategorie-Piktogramm sitzt in der Zeile, nicht darueber. `.atl-ic` bringt aus
 * atlas-brand.css seine Groesse mit; hier steht nur die Ausrichtung. */
.al-tip-cat .atl-ic { vertical-align:-2px; margin-right:2px; }

.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; }