/* ═══════════════════════════════════════════════════════════
   eSaver Glossar – CSS v1.0
   Gleiche Design-Tokens wie esaver-branchen
   DSGVO-konform: keine externen Fonts
═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
    --eg-ink:         #231F20;
    --eg-ink-soft:    #707070;
    --eg-ink-muted:   #707070;
    --eg-paper:       #ffffff;
    --eg-paper-warm:  #F5F5F5;
    --eg-rule:        #DCE0DF;
    --eg-accent:      #FF9B00;
    --eg-accent-dim:  rgba(255,155,0,.12);
    --eg-warn:        #FFB84D;
    --eg-warn-dim:    rgba(255,184,77,.12);

    --eg-ff-head: 'Poppins', inherit;
    --eg-ff-body: 'Poppins', inherit;
    --eg-ff-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono',
                  'Roboto Mono', 'Courier New', monospace;

    --eg-fs-body:  19px;
    --eg-fs-small: 15px;
    --eg-fs-xs:    13px;
    --eg-fs-h1:    50px;
    --eg-fs-h2:    36px;
    --eg-fs-h3:    28px;
    --eg-fs-prose: 17px;

    --eg-lh-body:  1.65;
    --eg-lh-head:  1.1;
    --eg-lh-tight: 1.3;

    --eg-content-max: 1400px;
    --eg-gutter:      clamp(16px, 3vw, 48px);
    --eg-radius:      4px;
}

/* ── RESET ──────────────────────────────────────────────── */
#esaver-glossar {
    font-family:            var(--eg-ff-body);
    font-size:              var(--eg-fs-body);
    color:                  var(--eg-ink);
    -webkit-font-smoothing: antialiased;
    line-height:            var(--eg-lh-body);
    width:     100%;
    max-width: 100%;
    margin:    0;
    padding:   0;
}
#esaver-glossar * { box-sizing: border-box; }

/* ── CONTAINER ──────────────────────────────────────────── */
.eg-container {
    max-width:     var(--eg-content-max);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--eg-gutter);
    padding-right: var(--eg-gutter);
    width:         100%;
}

/* ════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
.eg-hero {
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://www.esaver.eu/wp-content/uploads/2026/03/glossar-elektrische-netzqualitaet-fachwissen.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    color:      #fff;
    padding:    64px 0 52px;
    width:      100%;
    position:   relative;
    overflow:   hidden;
}

.eg-hero .eg-container { position: relative; }

.eg-overline {
    font-family:    var(--eg-ff-mono);
    font-size:      var(--eg-fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--eg-accent);
    margin:         0 0 16px;
}

.eg-hero-title {
    font-family:    var(--eg-ff-head);
    font-size:      clamp(2rem, 4vw, var(--eg-fs-h1));
    font-weight:    700;
    line-height:    var(--eg-lh-head);
    letter-spacing: -.02em;
    margin:         0 0 20px;
    color:          #fff;
}

.eg-hero-sub {
    font-size:   var(--eg-fs-small);
    color:       rgba(255,255,255,.6);
    max-width:   640px;
    margin:      0;
    line-height: var(--eg-lh-body);
}

/* ════════════════════════════════════════════════════════
   A–Z NAVIGATION
════════════════════════════════════════════════════════ */
.eg-az-nav-wrap {
    background:    var(--eg-paper-warm);
    border-bottom: 1px solid var(--eg-rule);
    padding:       16px 0;
    width:         100%;
    position:      sticky;
    top:           90px;
    z-index:       100;
}

.eg-az-nav {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px;
    align-items: center;
}

.eg-az-link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    font-family:     var(--eg-ff-mono);
    font-size:       var(--eg-fs-xs);
    font-weight:     600;
    border-radius:   var(--eg-radius);
    text-decoration: none;
    transition:      background .15s, color .15s;
}
.eg-az-link--active {
    background: var(--eg-accent);
    color:      #fff;
}
.eg-az-link--active:hover {
    background: #e08800;
    color:      #fff;
}
.eg-az-link--inactive {
    color:  var(--eg-rule);
    cursor: default;
}

/* ════════════════════════════════════════════════════════
   BODY LAYOUT
════════════════════════════════════════════════════════ */
.eg-body {
    background: var(--eg-paper);
    padding:    56px 0 90px;
    width:      100%;
}

.eg-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   56px;
    align-items:           start;
}

/* ════════════════════════════════════════════════════════
   BUCHSTABEN-GRUPPE
════════════════════════════════════════════════════════ */
.eg-letter-group {
    margin-bottom: 52px;
    scroll-margin-top: 170px; /* Offset für sticky Nav */
}

.eg-letter-header {
    display:       flex;
    align-items:   center;
    gap:           16px;
    margin-bottom: 24px;
}
.eg-letter-header::after {
    content:    '';
    flex:       1;
    height:     2px;
    background: var(--eg-accent);
    opacity:    .25;
}

.eg-letter-badge {
    font-family:    var(--eg-ff-head);
    font-size:      var(--eg-fs-h2);
    font-weight:    700;
    color:          var(--eg-accent);
    line-height:    1;
    width:          52px;
    height:         52px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     var(--eg-accent-dim);
    border-radius:  var(--eg-radius);
    flex-shrink:    0;
}

/* ════════════════════════════════════════════════════════
   EINZELNER BEGRIFF
════════════════════════════════════════════════════════ */
.eg-begriff {
    background:    var(--eg-paper);
    border:        1px solid var(--eg-rule);
    border-radius: var(--eg-radius);
    padding:       28px 32px;
    margin-bottom: 16px;
    scroll-margin-top: 170px;
    transition:    border-color .15s, box-shadow .2s;
}
.eg-begriff:hover {
    border-color: var(--eg-accent);
    box-shadow:   0 4px 20px rgba(0,0,0,.07);
}

.eg-begriff-head {
    display:     flex;
    align-items: flex-start;
    justify-content: space-between;
    gap:         16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--eg-rule);
}

.eg-begriff-title {
    font-family:    var(--eg-ff-head);
    font-size:      var(--eg-fs-h3);
    font-weight:    700;
    line-height:    var(--eg-lh-tight);
    color:          var(--eg-ink);
    margin:         0;
    border-left:    4px solid var(--eg-accent);
    padding-left:   14px;
}

.eg-kontext-badge {
    font-family:    var(--eg-ff-mono);
    font-size:      11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--eg-ink-muted);
    background:     var(--eg-paper-warm);
    border:         1px solid var(--eg-rule);
    border-radius:  2px;
    padding:        4px 10px;
    white-space:    nowrap;
    flex-shrink:    0;
    align-self:     flex-start;
    margin-top:     4px;
}

/* Felder */
.eg-einfach,
.eg-technisch {
    margin-bottom: 18px;
}

.eg-field-label {
    display:        block;
    font-family:    var(--eg-ff-mono);
    font-size:      var(--eg-fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--eg-accent);
    margin-bottom:  6px;
}

.eg-einfach p {
    font-size:   var(--eg-fs-body);
    font-weight: 500;
    color:       var(--eg-ink);
    line-height: var(--eg-lh-body);
    margin:      0;
}

.eg-technisch p {
    font-size:     var(--eg-fs-prose);
    color:         var(--eg-ink-soft);
    line-height:   var(--eg-lh-body);
    margin:        0;
    background:    var(--eg-paper-warm);
    border-left:   3px solid var(--eg-rule);
    padding:       14px 16px;
    border-radius: 0 var(--eg-radius) var(--eg-radius) 0;
}

/* Merksatz */
.eg-merksatz {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    background:    var(--eg-accent-dim);
    border:        1px solid rgba(255,155,0,.25);
    border-radius: var(--eg-radius);
    padding:       14px 18px;
    font-size:     var(--eg-fs-small);
    font-style:    italic;
    color:         var(--eg-ink);
    line-height:   var(--eg-lh-body);
    margin-top:    4px;
}
.eg-merksatz-icon { font-style: normal; flex-shrink: 0; }

/* Abschluss-Hinweis */
.eg-footer-note {
    background:    var(--eg-ink);
    color:         rgba(255,255,255,.7);
    border-radius: var(--eg-radius);
    padding:       24px 28px;
    font-size:     var(--eg-fs-small);
    font-style:    italic;
    line-height:   var(--eg-lh-body);
    margin-top:    40px;
    border-left:   4px solid var(--eg-accent);
}

.eg-empty {
    color:     var(--eg-ink-muted);
    font-size: var(--eg-fs-body);
}

/* ════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════ */
.eg-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    position:       sticky;
    top:            80px; /* unterhalb sticky A–Z Nav */
}

.eg-sidebar-card {
    background:    var(--eg-paper);
    border:        1px solid var(--eg-rule);
    border-radius: var(--eg-radius);
    overflow:      hidden;
}
.eg-sidebar-card--accent .eg-sidebar-head {
    background: var(--eg-accent);
}

.eg-sidebar-head {
    background:     var(--eg-ink);
    color:          #fff;
    padding:        11px 16px;
    font-family:    var(--eg-ff-mono);
    font-size:      var(--eg-fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eg-sidebar-body { padding: 16px 18px; }

/* Kontext-Liste */
.eg-kontext-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         9px 0;
    border-bottom:   1px solid var(--eg-rule);
    font-size:       var(--eg-fs-small);
    color:           var(--eg-ink-soft);
}
.eg-kontext-item:last-child { border-bottom: none; }

.eg-kontext-dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   var(--eg-accent);
    flex-shrink:  0;
}
.eg-kontext-label { flex: 1; line-height: 1.4; }
.eg-kontext-count {
    font-family: var(--eg-ff-mono);
    font-size:   var(--eg-fs-xs);
    font-weight: 600;
    color:       var(--eg-accent);
    background:  var(--eg-accent-dim);
    padding:     2px 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Stat */
.eg-sidebar-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        20px 18px;
    text-align:     center;
}
.eg-stat-num {
    font-family: var(--eg-ff-head);
    font-size:   3rem;
    font-weight: 700;
    color:       var(--eg-accent);
    line-height: 1;
}
.eg-stat-label {
    font-family:    var(--eg-ff-mono);
    font-size:      var(--eg-fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--eg-ink-muted);
    margin-top:     6px;
}

.eg-sidebar-note {
    font-size:   var(--eg-fs-small);
    color:       var(--eg-ink-soft);
    line-height: var(--eg-lh-body);
    font-style:  italic;
    margin:      0;
}

.eg-top-link {
    display:         inline-block;
    font-family:     var(--eg-ff-mono);
    font-size:       14px;
    color:           var(--eg-ink-muted);
    text-decoration: none;
    letter-spacing:  .04em;
    padding:         4px 0;
    transition:      color .15s;
}
.eg-top-link:hover { color: var(--eg-accent); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .eg-layout { grid-template-columns: 1fr 240px; gap: 36px; }
}

@media (max-width: 768px) {
    :root {
        --eg-fs-h1: 36px;
        --eg-fs-h2: 28px;
        --eg-fs-h3: 22px;
    }

    .eg-hero        { padding: 44px 0 36px; }
    .eg-layout      { grid-template-columns: 1fr; gap: 0; }

    .eg-sidebar {
        position:              static;
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   14px;
        margin-top:            16px;
    }
    .eg-top-link { grid-column: 1 / -1; }

    .eg-az-nav-wrap { position: static; }
    .eg-letter-group { scroll-margin-top: 16px; }
    .eg-begriff      { scroll-margin-top: 16px; }
    .eg-sidebar      { top: 0; }
}

@media (max-width: 580px) {
    .eg-sidebar { grid-template-columns: 1fr; }
    .eg-begriff { padding: 20px 18px; }
    .eg-az-link { width: 28px; height: 28px; font-size: 11px; }
}

@media (max-width: 480px) {
    :root {
        --eg-gutter:   16px;
        --eg-fs-body:  17px;
        --eg-fs-h1:    28px;
        --eg-fs-h2:    24px;
        --eg-fs-h3:    20px;
    }
    .eg-hero             { padding: 32px 0 28px; }
    .eg-body             { padding: 28px 0 52px; }
    .eg-letter-badge     { width: 42px; height: 42px; font-size: 1.4rem; }
    .eg-begriff-head     { flex-direction: column; gap: 10px; }
    .eg-kontext-badge    { align-self: flex-start; }
}

/* ════════════════════════════════════════════════════════
   GENERATEPRESS RESET
════════════════════════════════════════════════════════ */
body.esaver-glossar-archiv .site,
body.esaver-glossar-archiv .grid-container,
body.esaver-glossar-archiv .site-content,
body.esaver-glossar-archiv .content-area,
body.esaver-glossar-archiv .site-main {
    max-width: 100% !important;
    width:     100% !important;
    padding:   0    !important;
    margin:    0    !important;
}
body.esaver-glossar-archiv article,
body.esaver-glossar-archiv .inside-article,
body.esaver-glossar-archiv .entry-content,
body.esaver-glossar-archiv .inside-full-width-content {
    max-width: 100% !important;
    padding:   0    !important;
    margin:    0    !important;
}

body.admin-bar .eg-az-nav-wrap { top: 102px; }
body.admin-bar .eg-sidebar     { top: 112px; }
@media (max-width: 782px) {
    body.admin-bar .eg-az-nav-wrap { top: 0; }
    body.admin-bar .eg-sidebar     { top: 0; }
}