/*
 * Edelmetall Ticker
 * Default-Layout bewusst neutral gehalten.
 */

.mk-etg {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mk-etg-font, inherit);
    font-size: var(--mk-etg-font-size, 15px);
    line-height: 1.4;
    color: var(--mk-etg-text, #1f2933);
}

.mk-etg,
.mk-etg * {
    box-sizing: border-box;
}

.mk-etg__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
    padding: 10px 14px;
    border: var(--mk-etg-bar-border-width, 1px) solid var(--mk-etg-bar-border, rgba(31, 41, 51, 0.12));
    border-radius: 10px;
    background: var(--mk-etg-bar-bg, #ffffff);
    background: color-mix(in srgb, var(--mk-etg-bar-bg, #ffffff) calc(var(--mk-etg-bar-alpha, 100) * 1%), transparent);
    box-shadow: 0 4px 14px rgba(31, 41, 51, 0.06);
}

.mk-etg__headline {
    font-weight: var(--mk-etg-headline-weight, 600);
    color: var(--mk-etg-headline-color, inherit);
    white-space: nowrap;
    margin-right: 2px;
}

.mk-etg__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 140px;
}

.mk-etg__item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    padding: var(--mk-etg-item-pad-y, 4px) var(--mk-etg-item-pad-x, 8px);
    border-radius: var(--mk-etg-item-radius, 999px);
    background: var(--mk-etg-item-bg, rgba(31, 41, 51, 0.045));
    transition: background-color 0.12s ease;
}

.mk-etg__item:hover {
    background: var(--mk-etg-item-hover-bg, var(--mk-etg-item-bg, rgba(31, 41, 51, 0.045)));
}

.mk-etg__label {
    font-weight: var(--mk-etg-label-weight, 600);
    color: var(--mk-etg-label-color, inherit);
}

.mk-etg__value {
    color: var(--mk-etg-value-color, inherit);
    font-variant-numeric: tabular-nums;
}

.mk-etg__credit {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--mk-etg-credit-color, inherit);
    opacity: 0.7;
    white-space: nowrap;
    margin-left: auto;
}

.mk-etg__credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mk-etg--error {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(31, 41, 51, 0.045);
    opacity: 0.85;
}

/* Tablet: bewusst eine breite, flache Leiste statt hoher Stapel.
   Chips fließen horizontal und umbrechen, nehmen aber nur ihre natürliche Breite ein. */
@media (min-width: 601px) and (max-width: 1024px) {
    .mk-etg__inner {
        align-items: center;
    }

    .mk-etg__row {
        flex: 1 1 100%;
        min-width: 0;
    }

    .mk-etg__item {
        flex: 0 0 auto;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .mk-etg__inner {
        align-items: flex-start;
        padding: 10px 12px;
    }

    .mk-etg__headline,
    .mk-etg__row,
    .mk-etg__credit {
        width: 100%;
    }

    .mk-etg__credit {
        margin-left: 0;
    }

    .mk-etg__item {
        flex: 1 1 auto;
        justify-content: space-between;
    }
}


/* Trend-Anzeige */
.mk-etg__trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    margin-left: 2px;
    border-radius: 999px;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1;
}

.mk-etg__item--up .mk-etg__trend {
    color: var(--mk-etg-up-color, #15803d);
    background: var(--mk-etg-up-bg, rgba(21, 128, 61, 0.10));
}

.mk-etg__item--down .mk-etg__trend {
    color: var(--mk-etg-down-color, #b91c1c);
    background: var(--mk-etg-down-bg, rgba(185, 28, 28, 0.10));
}

.mk-etg__item--neutral .mk-etg__trend {
    color: var(--mk-etg-neutral-color, rgba(31, 41, 51, 0.45));
    background: var(--mk-etg-neutral-bg, rgba(31, 41, 51, 0.06));
}


/* Währungsumschalter */
.mk-etg__top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.mk-etg__toggle {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: var(--mk-etg-toggle-radius, 999px);
    background: var(--mk-etg-toggle-bg, rgba(31, 41, 51, 0.07));
}

.mk-etg__toggle-btn {
    appearance: none;
    border: 0;
    border-radius: var(--mk-etg-toggle-radius, 999px);
    background: transparent;
    color: var(--mk-etg-toggle-color, inherit);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: var(--mk-etg-toggle-pad-y, 5px) var(--mk-etg-toggle-pad-x, 8px);
    opacity: 0.65;
}

.mk-etg__toggle-btn.is-active {
    background: var(--mk-etg-toggle-active-bg, #ffffff);
    color: var(--mk-etg-toggle-active-color, inherit);
    box-shadow: 0 1px 4px rgba(31, 41, 51, 0.16);
    opacity: 1;
}

/* Hover der Umschalt-Buttons – einstellbar; Standard = kein Wechsel,
   überschreibt (per !important) einen vom Theme erzwungenen Hover (z. B. rot). */
.mk-etg__toggle-btn:hover {
    background: var(--mk-etg-toggle-hover-bg, transparent) !important;
    color: var(--mk-etg-toggle-hover-color, var(--mk-etg-toggle-color, inherit)) !important;
}

.mk-etg__toggle-btn.is-active:hover {
    background: var(--mk-etg-toggle-active-bg, #ffffff) !important;
    color: var(--mk-etg-toggle-active-color, inherit) !important;
}

.mk-etg__item[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .mk-etg__top {
        width: 100%;
        justify-content: space-between;
    }
}


/* Robuster EUR/USD-Filter: verhindert doppelte Anzeige auch bevor JS läuft */
.mk-etg[data-active-currency="EUR"] .mk-etg__item[data-currency="USD"],
.mk-etg[data-active-currency="USD"] .mk-etg__item[data-currency="EUR"] {
    display: none !important;
}


/* v1.0.14: Standard-Fallback ohne JavaScript */
.mk-etg:not([data-active-currency]),
.mk-etg[data-active-currency="EUR"] {
}

.mk-etg:not([data-active-currency]) .mk-etg__item[data-currency="USD"],
.mk-etg[data-active-currency="EUR"] .mk-etg__item[data-currency="USD"],
.mk-etg[data-active-currency="USD"] .mk-etg__item[data-currency="EUR"] {
    display: none !important;
}


/* Meta-Hinweis im Ticker */
.mk-etg__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    flex: 0 0 100%;
    font-size: 12px;
    color: var(--mk-etg-meta-color, inherit);
    opacity: 0.72;
}

.mk-etg__status {
    white-space: nowrap;
}

/* Ankauf-Rechner */
.mk-etg-calc,
.mk-etg-calc * {
    box-sizing: border-box;
}

.mk-etg-calc {
    width: 100%;
    color: #1f2933;
}

.mk-etg-calc__inner {
    padding: 18px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(31, 41, 51, 0.07);
}

.mk-etg-calc__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mk-etg-calc__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}

.mk-etg-calc__title {
    margin: 2px 0 0;
    font-size: 22px;
    line-height: 1.2;
}

.mk-etg-calc__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.mk-etg-calc__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.mk-etg-calc__field select,
.mk-etg-calc__field input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(31, 41, 51, 0.18);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    padding: 8px 10px;
    font: inherit;
    font-weight: 500;
}

.mk-etg-calc__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(31, 41, 51, 0.045);
}

.mk-etg-calc__result span {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.75;
}

.mk-etg-calc__amount {
    font-size: 28px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mk-etg-calc__details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.78;
}

.mk-etg-calc__note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.72;
}

@media (max-width: 767px) {
    .mk-etg__meta,
    .mk-etg__status {
        width: 100%;
        white-space: normal;
    }

    .mk-etg-calc__grid {
        grid-template-columns: 1fr;
    }

    .mk-etg-calc__result {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Platzhalter-/Hinweistext (z. B. wenn Feed kurz nicht verfügbar) */
.mk-etg__note {
    opacity: 0.75;
    font-size: 13px;
}