/* ============================================================
   Leeway XETRA Widget v2.0 — Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── Dark Theme ── */
.lxw-theme-dark {
    --lxw-bg:        #0d1117;
    --lxw-bg2:       #161b22;
    --lxw-bg3:       #21262d;
    --lxw-border:    rgba(48,54,61,0.9);
    --lxw-text:      #e6edf3;
    --lxw-muted:     #7d8590;
    --lxw-dim:       #484f58;
    --lxw-accent:    #f0883e;
    --lxw-pos:       #3fb950;
    --lxw-neg:       #f85149;
    --lxw-shadow:    0 8px 32px rgba(0,0,0,0.6);
    --lxw-radius:    12px;
    --lxw-radius-sm: 7px;
    --lxw-mono:      'IBM Plex Mono', monospace;
    --lxw-sans:      'IBM Plex Sans', sans-serif;
}

/* ── Light Theme ── */
.lxw-theme-light {
    --lxw-bg:        #f6f8fa;
    --lxw-bg2:       #ffffff;
    --lxw-bg3:       #edf0f3;
    --lxw-border:    #d0d7de;
    --lxw-text:      #1f2328;
    --lxw-muted:     #656d76;
    --lxw-dim:       #9ba1a8;
    --lxw-accent:    #bf5700;
    --lxw-pos:       #1a7f37;
    --lxw-neg:       #cf222e;
    --lxw-shadow:    0 4px 16px rgba(0,0,0,0.1);
    --lxw-radius:    12px;
    --lxw-radius-sm: 7px;
    --lxw-mono:      'IBM Plex Mono', monospace;
    --lxw-sans:      'IBM Plex Sans', sans-serif;
}

/* ── Basis ── */
.lxw-widget {
    font-family:   var(--lxw-sans);
    background:    var(--lxw-bg);
    border:        1px solid var(--lxw-border);
    border-radius: var(--lxw-radius);
    box-shadow:    var(--lxw-shadow);
    color:         var(--lxw-text);
    overflow:      hidden;
    margin:        1.5rem 0;
    line-height:   1.5;
}
.lxw-widget * { box-sizing: border-box; }
.lxw-widget a { color: var(--lxw-accent); text-decoration: none; }
.lxw-widget a:hover { text-decoration: underline; }

.lxw-pos    { color: var(--lxw-pos) !important; }
.lxw-neg    { color: var(--lxw-neg) !important; }
.lxw-muted  { color: var(--lxw-muted) !important; }
.lxw-mono   { font-family: var(--lxw-mono) !important; }
.lxw-right  { text-align: right; }

/* ── Typografie ── */
.lxw-symbol {
    font-family:    var(--lxw-mono);
    font-weight:    700;
    font-size:      0.95rem;
    color:          var(--lxw-accent);
    letter-spacing: 0.05em;
}
.lxw-symbol-sm  { font-size: 0.8rem; }
.lxw-name       { font-size: 0.82rem; color: var(--lxw-muted); }
.lxw-flag       { font-size: 1.15rem; }
.lxw-flag-lg    { font-size: 2rem; }

.lxw-price {
    font-family:    var(--lxw-mono);
    font-size:      1.85rem;
    font-weight:    700;
    letter-spacing: -0.02em;
}
.lxw-price-lg {
    font-family:    var(--lxw-mono);
    font-size:      2.2rem;
    font-weight:    700;
    letter-spacing: -0.03em;
}
.lxw-change {
    font-family: var(--lxw-mono);
    font-size:   0.88rem;
    font-weight: 600;
    margin-top:  0.2rem;
}

/* ── Badges ── */
.lxw-badge {
    font-size:     0.68rem;
    background:    var(--lxw-bg3);
    border:        1px solid var(--lxw-border);
    border-radius: 20px;
    padding:       2px 8px;
    color:         var(--lxw-muted);
}
.lxw-badge-link { color: var(--lxw-accent) !important; }
.lxw-badge-link:hover { background: rgba(240,136,62,0.1); text-decoration: none; }

.lxw-exchange-badge {
    font-family:    var(--lxw-mono);
    font-size:      0.68rem;
    font-weight:    600;
    background:     rgba(240,136,62,0.12);
    border:         1px solid rgba(240,136,62,0.35);
    color:          var(--lxw-accent);
    border-radius:  5px;
    padding:        2px 7px;
}
.lxw-period-badge {
    font-size:     0.7rem;
    background:    var(--lxw-bg3);
    border:        1px solid var(--lxw-border);
    border-radius: 20px;
    padding:       2px 9px;
    color:         var(--lxw-muted);
}
.lxw-badge-upcoming {
    font-size:     0.7rem;
    background:    rgba(240,136,62,0.12);
    color:         var(--lxw-accent);
    border-radius: 4px;
    padding:       2px 6px;
}
.lxw-badge-paid {
    font-size:     0.7rem;
    background:    rgba(63,185,80,0.1);
    color:         var(--lxw-pos);
    border-radius: 4px;
    padding:       2px 6px;
}

/* ── Stat-Kacheln ── */
.lxw-stat {
    display:        flex;
    flex-direction: column;
    background:     var(--lxw-bg2);
    border:         1px solid var(--lxw-border);
    border-radius:  var(--lxw-radius-sm);
    padding:        0.55rem 0.75rem;
    gap:            0.1rem;
}
.lxw-stat-l {
    font-size:      0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lxw-dim);
}
.lxw-stat-v {
    font-family: var(--lxw-mono);
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--lxw-text);
}

/* ── Logo ── */
.lxw-logo {
    width:         38px;
    height:        38px;
    border-radius: 8px;
    object-fit:    contain;
    background:    #fff;
    padding:       2px;
    border:        1px solid var(--lxw-border);
    flex-shrink:   0;
}
.lxw-logo-lg {
    width:  52px;
    height: 52px;
    border-radius: 10px;
}

/* ── Footer ── */
.lxw-footer {
    font-size:  0.68rem;
    color:      var(--lxw-dim);
    padding:    0.55rem 1.2rem;
    border-top: 1px solid var(--lxw-border);
    background: var(--lxw-bg2);
    text-align: right;
}

/* ── Section Title ── */
.lxw-section-title {
    font-size:      0.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lxw-dim);
    padding:        0.6rem 1.3rem 0.4rem;
    border-top:     1px solid var(--lxw-border);
    margin-top:     0;
}

/* ── Fehler ── */
.lxw-error {
    background:    rgba(248,81,73,0.07);
    border:        1px solid rgba(248,81,73,0.3);
    border-radius: var(--lxw-radius-sm);
    color:         #f85149;
    padding:       0.7rem 1rem;
    font-size:     0.85rem;
    margin:        1rem 0;
}

/* ============================================================
   QUOTE
   ============================================================ */
.lxw-header {
    padding:       1.1rem 1.3rem 0.8rem;
    border-bottom: 1px solid var(--lxw-border);
    background:    linear-gradient(135deg, var(--lxw-bg2), var(--lxw-bg));
}
.lxw-identity {
    display:     flex;
    align-items: center;
    gap:         0.8rem;
    flex-wrap:   wrap;
}
.lxw-identity-row {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    flex-wrap:   wrap;
    margin-bottom: 0.15rem;
}
.lxw-price-row {
    display:     flex;
    align-items: baseline;
    gap:         1rem;
    padding:     0.9rem 1.3rem 0.5rem;
    flex-wrap:   wrap;
}
.lxw-stats {
    display:               grid;
    grid-template-columns: repeat(2,1fr);
    gap:                   0.5rem;
    padding:               0.4rem 1.3rem 1.1rem;
}
@media(min-width:480px){ .lxw-stats { grid-template-columns: repeat(5,1fr); } }

/* ============================================================
   CHART
   ============================================================ */
.lxw-chart-wrap { padding: 0; }
.lxw-chart-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.9rem 1.3rem 0.5rem;
    font-weight:     600;
    font-size:       0.9rem;
    border-bottom:   1px solid var(--lxw-border);
}
.lxw-chart-wrap canvas { padding: 0.4rem 1rem; }

/* ============================================================
   TICKER
   ============================================================ */
.lxw-ticker {
    display:      flex;
    align-items:  center;
    overflow:     hidden;
    height:       44px;
    padding:      0 !important;
    border-radius: var(--lxw-radius-sm) !important;
}
.lxw-ticker-badge {
    flex-shrink:    0;
    background:     var(--lxw-accent);
    color:          #fff;
    font-family:    var(--lxw-mono);
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.15em;
    padding:        0 1rem;
    height:         100%;
    display:        flex;
    align-items:    center;
    position:       relative;
}
.lxw-ticker-badge::after {
    content:    '';
    position:   absolute;
    right:      -10px; top:0; bottom:0;
    width:      10px;
    background: linear-gradient(90deg,var(--lxw-accent),transparent);
}
.lxw-ticker-track {
    display:      flex;
    white-space:  nowrap;
    animation:    lxw-scroll linear infinite;
    will-change:  transform;
    padding-left: 1.5rem;
}
@keyframes lxw-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.lxw-ticker-item {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
    padding:     0 1.2rem;
    border-right: 1px solid var(--lxw-border);
    font-size:   0.82rem;
}
.lxw-ticker-sym   { font-family:var(--lxw-mono); font-weight:700; color:var(--lxw-accent); font-size:.78rem; }
.lxw-ticker-price { font-family:var(--lxw-mono); font-weight:600; color:var(--lxw-text); }
.lxw-ticker-chg   { font-family:var(--lxw-mono); font-size:.72rem; font-weight:600; }

/* ============================================================
   WATCHLIST & TABELLEN
   ============================================================ */
.lxw-watchlist-header, .lxw-kalender .lxw-watchlist-header {
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
    padding:       1rem 1.3rem 0.8rem;
    border-bottom: 1px solid var(--lxw-border);
    background:    var(--lxw-bg2);
    justify-content: space-between;
}
.lxw-watchlist-title { font-weight:600; font-size:.95rem; }
.lxw-table-wrap      { overflow-x: auto; }
.lxw-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.85rem;
}
.lxw-table thead th {
    font-size:      0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lxw-dim);
    padding:        0.55rem 0.9rem;
    background:     var(--lxw-bg2);
    border-bottom:  2px solid var(--lxw-border);
    white-space:    nowrap;
}
.lxw-table tbody tr        { border-bottom:1px solid var(--lxw-border); }
.lxw-table tbody tr:last-child { border-bottom:none; }
.lxw-table tbody tr:hover  { background:var(--lxw-bg3); }
.lxw-table td              { padding:.6rem .9rem; color:var(--lxw-text); white-space:nowrap; }
.lxw-company-name          { color:var(--lxw-muted); font-size:.82rem; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.lxw-row-error             { color:var(--lxw-neg); font-size:.78rem; }
.lxw-row-future            { background:rgba(240,136,62,0.04); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.lxw-dashboard { padding:0; }
.lxw-dash-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             1rem;
    padding:         1.4rem 1.5rem 1rem;
    border-bottom:   1px solid var(--lxw-border);
    background:      linear-gradient(135deg,var(--lxw-bg2) 0%,var(--lxw-bg) 100%);
    position:        relative;
}
.lxw-dash-header::before {
    content:    '';
    position:   absolute;
    left:0; top:0; bottom:0;
    width:      3px;
    background: linear-gradient(180deg,var(--lxw-accent),transparent);
}
.lxw-dash-identity { display:flex; align-items:center; gap:1rem; }
.lxw-dash-company  { font-size:1.15rem; font-weight:600; margin:0 0 .4rem; }
.lxw-dash-meta     { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.lxw-dash-price-block { text-align:right; flex-shrink:0; }

.lxw-dash-stats, .lxw-fund-grid {
    display:               grid;
    grid-template-columns: repeat(2,1fr);
    gap:                   0.5rem;
    padding:               0.9rem 1.3rem;
    border-bottom:         1px solid var(--lxw-border);
}
@media(min-width:520px) { .lxw-dash-stats,.lxw-fund-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:800px) { .lxw-dash-stats,.lxw-fund-grid { grid-template-columns:repeat(5,1fr); } }

.lxw-desc {
    padding:       0.9rem 1.4rem;
    font-size:     0.83rem;
    color:         var(--lxw-muted);
    border-bottom: 1px solid var(--lxw-border);
    line-height:   1.6;
}
.lxw-desc p { margin:0; }
.lxw-dash-chart { border-bottom: 1px solid var(--lxw-border); }
.lxw-dash-chart canvas { padding: 0.3rem 1rem; }

/* ============================================================
   DIVIDENDEN
   ============================================================ */
.lxw-dividenden .lxw-table td { vertical-align:middle; }

/* ============================================================
   KALENDER
   ============================================================ */
.lxw-kalender { padding:0; }

/* ============================================================
   AKTIENSUCHE
   ============================================================ */
.lxw-suche-body {
    display: flex;
    gap:     0.5rem;
    padding: 0.9rem 1.2rem 0.5rem;
}
.lxw-suche-input {
    flex:          1;
    background:    var(--lxw-bg2);
    border:        1px solid var(--lxw-border);
    border-radius: var(--lxw-radius-sm);
    color:         var(--lxw-text);
    padding:       0.5rem 0.8rem;
    font-family:   var(--lxw-sans);
    font-size:     0.88rem;
    outline:       none;
    transition:    border-color 0.15s;
}
.lxw-suche-input:focus {
    border-color: var(--lxw-accent);
    box-shadow:   0 0 0 2px rgba(240,136,62,0.15);
}
.lxw-suche-btn {
    background:    var(--lxw-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--lxw-radius-sm);
    padding:       0.5rem 1rem;
    font-family:   var(--lxw-sans);
    font-size:     0.85rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    opacity 0.15s;
}
.lxw-suche-btn:hover    { opacity: 0.85; }
.lxw-suche-results      { padding: 0 1.2rem 0.6rem; min-height: 0; }
.lxw-suche-item {
    display:       flex;
    align-items:   center;
    gap:           0.7rem;
    padding:       0.55rem 0.7rem;
    border-bottom: 1px solid var(--lxw-border);
    font-size:     0.85rem;
}
.lxw-suche-item:last-child  { border-bottom:none; }
.lxw-suche-item:hover       { background:var(--lxw-bg3); border-radius:var(--lxw-radius-sm); }
.lxw-suche-isin             { font-family:var(--lxw-mono); font-size:.72rem; color:var(--lxw-dim); margin-left:auto; }
.lxw-suche-empty, .lxw-loading { padding:0.9rem; text-align:center; color:var(--lxw-muted); font-size:.85rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:480px) {
    .lxw-price,.lxw-price-lg      { font-size:1.5rem; }
    .lxw-dash-header               { flex-direction:column; align-items:flex-start; }
    .lxw-dash-price-block          { text-align:left; }
    .lxw-ticker-item               { padding:0 0.8rem; }
    .lxw-suche-body                { flex-direction:column; }
    .lxw-watchlist-header          { flex-direction:column; align-items:flex-start; gap:.4rem; }
}