/* ============================================================
   MHL – Ansicht & Darstellung
   Professional Glass UI
   ============================================================ */

.mhl-view-scale {
    width: 100%;
    box-sizing: border-box;

    margin: 14px 0 17px;
    padding: 18px;

    border: 1px solid rgba(116, 211, 232, .28);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 53, 68, .52),
            rgba(4, 30, 43, .58)
        );

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 25px rgba(0,0,0,.13);
}

/* ------------------------------------------------------------
   Überschrift
   ------------------------------------------------------------ */

.mhl-view-scale__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    margin-bottom: 16px;
}

.mhl-view-scale__label span {
    display: block;

    margin-bottom: 5px;

    color: rgba(113, 211, 234, .82);

    font-size: 10px;
    line-height: 1;

    font-weight: 850;
    letter-spacing: .16em;
}

.mhl-view-scale__label strong {
    display: block;

    color: #f4fafc;

    font-size: 16px;
    line-height: 1.15;

    font-weight: 850;
}

.mhl-view-scale__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 64px;
    height: 36px;

    padding: 0 10px;

    box-sizing: border-box;

    border: 1px solid rgba(112, 211, 233, .40);
    border-radius: 10px;

    background: rgba(2, 25, 38, .68);

    color: #f7fbfc;

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* ------------------------------------------------------------
   Slider
   ------------------------------------------------------------ */

.mhl-view-scale__slider {
    display: grid;

    grid-template-columns: 36px minmax(0,1fr) 42px;

    align-items: center;

    gap: 10px;
}

.mhl-view-scale__edge {
    color: rgba(220, 241, 246, .67);

    font-size: 10px;
    line-height: 1;

    font-weight: 850;
}

.mhl-view-scale__edge:last-child {
    text-align: right;
}

.mhl-view-scale input[type="range"] {
    width: 100%;
    height: 8px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

    background: rgba(255,255,255,.11);

    cursor: pointer;
}

.mhl-view-scale input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(72, 182, 211, .58),
            rgba(172, 82, 213, .38)
        );
}

.mhl-view-scale input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 21px;
    height: 21px;

    margin-top: -6.5px;

    border: 3px solid #f8fbfc;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 9px rgba(0,0,0,.35),
        0 0 0 3px rgba(93, 202, 229, .18);

    cursor: grab;
}

.mhl-view-scale input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.mhl-view-scale input[type="range"]::-moz-range-track {
    height: 8px;

    border: 0;
    border-radius: 999px;

    background: rgba(255,255,255,.11);
}

.mhl-view-scale input[type="range"]::-moz-range-progress {
    height: 8px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(72,182,211,.70),
            rgba(172,82,213,.55)
        );
}

.mhl-view-scale input[type="range"]::-moz-range-thumb {
    width: 17px;
    height: 17px;

    border: 3px solid #f8fbfc;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 9px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------
   Prozent-Buttons
   ------------------------------------------------------------ */

.mhl-view-scale__presets {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: 15px;
}

.mhl-view-scale__preset {
    min-height: 36px;

    padding: 7px 5px;

    border: 1px solid rgba(104, 205, 230, .23);
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 64, 80, .52),
            rgba(4, 36, 50, .58)
        );

    color: rgba(239,248,250,.88);

    font: inherit;
    font-size: 11px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.mhl-view-scale__preset:hover {
    transform: translateY(-1px);

    border-color: rgba(112,211,234,.55);

    background:
        linear-gradient(
            180deg,
            rgba(27, 104, 126, .65),
            rgba(7, 54, 70, .68)
        );
}

.mhl-view-scale__preset.is-active {
    border-color: rgba(103, 212, 239, .78);

    background:
        linear-gradient(
            180deg,
            rgba(38, 136, 164, .82),
            rgba(18, 88, 111, .80)
        );

    color: #ffffff;

    box-shadow:
        0 4px 12px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.09);
}

/* ------------------------------------------------------------
   Hinweis
   ------------------------------------------------------------ */

.mhl-view-scale__caption {
    margin-top: 11px;

    color: rgba(214,237,242,.50);

    font-size: 9px;
    line-height: 1.35;

    letter-spacing: .02em;
}

/* ============================================================
   Kontrast
   ============================================================ */

.mhl-display-contrast {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;

    width: 100%;
}

.mhl-display-contrast button {
    min-height: 66px;

    padding: 10px 8px;

    border: 1px solid rgba(107,205,229,.22);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(9,58,73,.48),
            rgba(3,32,45,.57)
        );

    color: rgba(236,247,249,.88);

    font: inherit;

    cursor: pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.mhl-display-contrast button:hover {
    transform: translateY(-1px);

    border-color: rgba(107,205,229,.48);

    background:
        linear-gradient(
            145deg,
            rgba(21,91,111,.58),
            rgba(5,43,58,.65)
        );
}

.mhl-display-contrast button.is-active,
.mhl-display-contrast button[aria-pressed="true"] {
    border-color: rgba(81,205,237,.78);

    background:
        linear-gradient(
            145deg,
            rgba(31,124,151,.76),
            rgba(12,74,94,.76)
        );

    box-shadow:
        0 5px 15px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.mhl-display-contrast button strong {
    display: block;

    font-size: 12px;
    font-weight: 850;
}

.mhl-display-contrast button small {
    display: block;

    margin-top: 4px;

    font-size: 9px;

    opacity: .60;
}

/* ============================================================
   Vollbild im Ansicht-Menü
   ============================================================ */

.mhl-display-fullscreen {
    position: relative;

    display: grid;

    grid-template-columns:
        48px minmax(0,1fr) auto;

    align-items: center;

    gap: 12px;

    width: 100%;
    min-height: 67px;

    box-sizing: border-box;

    padding: 9px 12px;

    border: 1px solid rgba(231, 65, 197, .34);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(52, 20, 57, .30),
            rgba(5, 34, 48, .56)
        );

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.mhl-display-fullscreen:hover {
    transform: translateY(-1px);

    border-color: rgba(245, 82, 211, .72);

    background:
        linear-gradient(
            135deg,
            rgba(103, 26, 93, .38),
            rgba(7, 43, 58, .64)
        );

    box-shadow:
        0 5px 18px rgba(0,0,0,.17);
}

.mhl-display-fullscreen__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(244,83,211,.58);
    border-radius: 11px;

    background:
        rgba(109, 21, 94, .25);

    color: #ff72df;

    font-size: 21px;

    box-shadow:
        0 0 14px rgba(238,59,202,.16);
}

.mhl-display-fullscreen strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;
}

.mhl-display-fullscreen small {
    display: block;

    margin-top: 4px;

    color: rgba(221,240,244,.60);

    font-size: 9px;
}

.mhl-display-fullscreen__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 82px;
    height: 34px;

    padding: 0 11px;

    border: 1px solid rgba(244,83,211,.52);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(126,25,109,.72),
            rgba(76,17,77,.66)
        );

    color: #ffffff;

    font-size: 10px;
    font-weight: 850;

    box-shadow:
        0 0 12px rgba(239,59,202,.13);
}

/* ============================================================
   Header-Vollbildbutton
   Magenta pulsierend + Tooltip
   ============================================================ */

.mhl-header-fullscreen {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    margin-left: 8px;
    padding: 0;

    border: 1px solid rgba(255,84,218,.72);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137,25,119,.72),
            rgba(37,14,48,.78)
        );

    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 0 0 1px rgba(239,70,210,.10),
        0 0 12px rgba(239,70,210,.42);

    animation:
        mhl-fullscreen-pulse 2.2s ease-in-out infinite;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.mhl-header-fullscreen:hover {
    transform: scale(1.09);

    box-shadow:
        0 0 0 3px rgba(239,70,210,.15),
        0 0 23px rgba(239,70,210,.68);
}

/* Tooltip */
.mhl-header-fullscreen::after {
    content: "Vollbild";

    position: absolute;

    left: 50%;
    top: calc(100% + 9px);

    transform:
        translate(-50%, -4px)
        scale(.96);

    padding: 6px 10px;

    border: 1px solid rgba(245,88,218,.42);
    border-radius: 7px;

    background:
        rgba(9, 24, 38, .94);

    color: #ffffff;

    font-size: 10px;
    line-height: 1;

    font-weight: 800;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    box-shadow:
        0 5px 14px rgba(0,0,0,.25);

    transition:
        opacity .14s ease,
        transform .14s ease;
}

.mhl-header-fullscreen:hover::after,
.mhl-header-fullscreen:focus-visible::after {
    opacity: 1;

    transform:
        translate(-50%, 0)
        scale(1);
}

.mhl-header-fullscreen.is-active {
    animation:
        mhl-fullscreen-active-pulse 1.7s ease-in-out infinite;
}

@keyframes mhl-fullscreen-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(239,70,210,.10),
            0 0 10px rgba(239,70,210,.32);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(239,70,210,.16),
            0 0 20px rgba(239,70,210,.62);
    }
}

@keyframes mhl-fullscreen-active-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(239,70,210,.13),
            0 0 13px rgba(239,70,210,.42);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(239,70,210,.20),
            0 0 26px rgba(239,70,210,.72);
    }
}

/* ============================================================
   Ansicht-Panel breiter / einheitlicher
   ============================================================ */

#display-panel {
    width: min(430px, calc(100vw - 24px)) !important;
    max-width: 430px !important;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(21, 78, 94, .73),
            rgba(4, 35, 49, .80)
        ) !important;

    border: 1px solid rgba(113,211,234,.30) !important;
    border-radius: 18px !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* Keine unterschiedlichen, harten Hintergründe
   zwischen den einzelnen Bereichen */

#display-panel .mhl-view-scale,
#display-panel .mhl-display-contrast,
#display-panel .mhl-display-fullscreen {
    box-sizing: border-box;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {

    #display-panel {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }

    .mhl-view-scale {
        padding: 15px;
    }

    .mhl-display-contrast {
        gap: 6px;
    }

    .mhl-display-contrast button {
        min-height: 61px;
        padding: 8px 5px;
    }

    .mhl-display-fullscreen {
        grid-template-columns:
            43px minmax(0,1fr);

        min-height: 64px;
    }

    .mhl-display-fullscreen__action {
        display: none;
    }

    .mhl-header-fullscreen {
        width: 36px;
        height: 36px;

        margin-left: 6px;

        font-size: 18px;
    }
}

/* ============================================================
   MHL VIEW PANEL – UNIFIED PROFESSIONAL
   ============================================================ */

#display-panel {
    width: min(440px, calc(100vw - 24px)) !important;
    max-width: 440px !important;
    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 76, 92, .78),
            rgba(5, 38, 52, .86)
        ) !important;

    border: 1px solid rgba(119, 214, 236, .34) !important;
    border-radius: 20px !important;

    padding: 0 10px 12px !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/*
 * Der komplette Funktionsbereich wird als EIN Glasbereich
 * dargestellt.
 */
#display-panel .mhl-view-scale,
#display-panel .mhl-display-contrast,
#display-panel .mhl-display-fullscreen {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Schriftgrößenbereich */
#display-panel .mhl-view-scale {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 15px !important;
}

/* Keine zusätzliche Box um die Kontrastbuttons */
#display-panel .mhl-display-contrast {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;

    border-top: 1px solid rgba(130,211,229,.16) !important;
    border-radius: 0 !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr)) !important;

    gap: 7px !important;
}

/* ============================================================
   KONTRASTBUTTONS – sauber, flach, hochwertig
   ============================================================ */

#display-panel .mhl-display-contrast button {
    position: relative !important;

    min-height: 55px !important;

    padding: 9px 7px !important;

    border: 1px solid rgba(126,213,233,.18) !important;
    border-radius: 10px !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,57,73,.42),
            rgba(4,34,48,.50)
        ) !important;

    color: rgba(237,247,249,.88) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

#display-panel .mhl-display-contrast button:hover {
    transform: translateY(-1px) !important;

    border-color: rgba(117,213,236,.48) !important;

    background:
        linear-gradient(
            180deg,
            rgba(19,94,115,.56),
            rgba(6,48,64,.62)
        ) !important;

    box-shadow:
        0 5px 15px rgba(0,0,0,.14) !important;
}

#display-panel .mhl-display-contrast button.is-active,
#display-panel .mhl-display-contrast button[aria-pressed="true"] {
    border-color: rgba(85,211,240,.78) !important;

    background:
        linear-gradient(
            180deg,
            rgba(27,124,151,.82),
            rgba(10,76,96,.82)
        ) !important;

    color: #fff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 15px rgba(0,0,0,.16) !important;
}

/* ============================================================
   VOLLBILD – IN DAS GLEICHE PANEL
   ============================================================ */

#display-panel .mhl-display-fullscreen {
    display: grid !important;

    grid-template-columns:
        42px minmax(0,1fr) auto !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 65px !important;

    margin: 7px 0 0 !important;
    padding: 7px 9px !important;

    border-top: 1px solid rgba(130,211,229,.13) !important;
    border-radius: 0 0 10px 10px !important;

    background: transparent !important;

    text-align: left !important;
}

#display-panel .mhl-display-fullscreen__icon {
    width: 38px !important;
    height: 38px !important;

    border-radius: 10px !important;

    background:
        rgba(113,25,102,.25) !important;

    border: 1px solid rgba(244,84,213,.58) !important;

    color: #ff75df !important;

    box-shadow:
        0 0 13px rgba(239,59,202,.14) !important;
}

#display-panel .mhl-display-fullscreen strong {
    font-size: 12px !important;
}

#display-panel .mhl-display-fullscreen small {
    font-size: 9px !important;
    line-height: 1.3 !important;
}

#display-panel .mhl-display-fullscreen__action {
    min-width: 76px !important;
    height: 32px !important;

    padding: 0 9px !important;

    border-radius: 8px !important;

    border: 1px solid rgba(244,83,211,.55) !important;

    background:
        linear-gradient(
            135deg,
            rgba(128,27,111,.78),
            rgba(73,18,74,.72)
        ) !important;

    color: #fff !important;

    font-size: 9px !important;
    font-weight: 900 !important;
}

/* ============================================================
   RESET – ebenfalls Bestandteil des einen Bereiches
   ============================================================ */

#display-panel [data-mhl-view-scale-reset] {
    width: calc(100% - 8px) !important;

    min-height: 45px !important;

    margin: 10px 4px 0 !important;

    border: 1px solid rgba(113,211,234,.20) !important;
    border-radius: 10px !important;

    background:
        rgba(5,38,52,.42) !important;

    color: rgba(238,248,250,.90) !important;

    font-weight: 800 !important;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease !important;
}

#display-panel [data-mhl-view-scale-reset]:hover {
    transform: translateY(-1px) !important;

    border-color: rgba(113,211,234,.42) !important;

    background:
        rgba(15,74,91,.58) !important;
}

/* ============================================================
   HEADER – VOLLbildbutton
   ============================================================ */

.mhl-header-fullscreen {
    flex: 0 0 auto !important;

    width: 38px !important;
    height: 38px !important;

    margin-left: 8px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(255,82,218,.78) !important;

    background:
        radial-gradient(
            circle,
            rgba(139,27,121,.82),
            rgba(38,12,48,.88)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 12px rgba(239,59,202,.42) !important;

    animation:
        mhl-fullscreen-pulse 2.1s ease-in-out infinite !important;
}

.mhl-header-fullscreen:hover {
    transform: scale(1.08) !important;

    box-shadow:
        0 0 0 3px rgba(239,70,210,.15),
        0 0 24px rgba(239,70,210,.72) !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    #display-panel {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        padding-inline: 7px !important;
    }

    #display-panel .mhl-view-scale {
        padding-inline: 10px !important;
    }

    #display-panel .mhl-display-contrast {
        padding-inline: 2px !important;
        gap: 5px !important;
    }

    #display-panel .mhl-display-contrast button {
        min-height: 52px !important;
        font-size: 10px !important;
    }

    #display-panel .mhl-display-fullscreen {
        grid-template-columns:
            40px minmax(0,1fr) !important;
    }

    #display-panel .mhl-display-fullscreen__action {
        display: none !important;
    }

    .mhl-header-fullscreen {
        width: 35px !important;
        height: 35px !important;
    }
}


/* ============================================================
   MHL – SLIDERBOX FINAL
   kompakt, transparent, sauber ausgerichtet
   ============================================================ */

#display-panel .mhl-view-scale {
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 18px 16px 16px !important;

    border: 0 !important;
    border-radius: 14px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 61, 76, .42),
            rgba(4, 35, 49, .48)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Kopfzeile */
#display-panel .mhl-view-scale__top {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    margin: 0 0 17px !important;
}

/* Linker Titel */
#display-panel .mhl-view-scale__label {
    min-width: 0 !important;
}

#display-panel .mhl-view-scale__label span {
    margin: 0 0 5px !important;

    font-size: 10px !important;
    letter-spacing: .16em !important;

    color: rgba(110,211,234,.82) !important;
}

#display-panel .mhl-view-scale__label strong {
    font-size: 16px !important;
    line-height: 1.05 !important;

    letter-spacing: .035em !important;

    color: #f5fbfc !important;
}

/* Prozentanzeige */
#display-panel .mhl-view-scale__value {
    flex: 0 0 auto !important;

    min-width: 67px !important;
    height: 36px !important;

    padding: 0 11px !important;

    border-radius: 10px !important;

    border: 1px solid rgba(111,211,235,.42) !important;

    background:
        rgba(3, 29, 42, .64) !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* ============================================================
   SLIDER
   ============================================================ */

#display-panel .mhl-view-scale__slider {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        38px minmax(0,1fr) 42px !important;

    align-items: center !important;

    gap: 9px !important;

    margin: 0 !important;
}

/* 70 / 100 */
#display-panel .mhl-view-scale__edge {
    font-size: 10px !important;
    font-weight: 850 !important;

    color: rgba(225,242,246,.68) !important;
}

#display-panel .mhl-view-scale__edge:first-child {
    text-align: left !important;
}

#display-panel .mhl-view-scale__edge:last-child {
    text-align: right !important;
}

/* eigentliche Schiene */
#display-panel
.mhl-view-scale input[type="range"] {
    display: block !important;

    width: 100% !important;
    height: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        rgba(255,255,255,.12) !important;

    outline: none !important;
}

/* Chromium / Edge / Safari */
#display-panel
.mhl-view-scale input[type="range"]::-webkit-slider-runnable-track {
    height: 8px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(74,184,211,.72),
            rgba(154,79,194,.62)
        ) !important;
}

#display-panel
.mhl-view-scale input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 20px !important;
    height: 20px !important;

    margin-top: -6px !important;

    border: 3px solid #ffffff !important;
    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.32),
        0 0 0 3px rgba(83,196,225,.17) !important;

    cursor: grab !important;
}

#display-panel
.mhl-view-scale input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing !important;
}

/* Firefox */
#display-panel
.mhl-view-scale input[type="range"]::-moz-range-track {
    height: 8px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        rgba(255,255,255,.12) !important;
}

#display-panel
.mhl-view-scale input[type="range"]::-moz-range-progress {
    height: 8px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(74,184,211,.72),
            rgba(154,79,194,.62)
        ) !important;
}

#display-panel
.mhl-view-scale input[type="range"]::-moz-range-thumb {
    width: 17px !important;
    height: 17px !important;

    border: 3px solid #ffffff !important;
    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.32) !important;
}

/* ============================================================
   PRESET-BUTTONS
   ============================================================ */

#display-panel .mhl-view-scale__presets {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap: 8px !important;

    margin: 16px 0 0 !important;
}

#display-panel .mhl-view-scale__preset {
    width: 100% !important;

    min-height: 37px !important;

    padding: 0 4px !important;

    border: 1px solid rgba(109,207,231,.22) !important;
    border-radius: 9px !important;

    background:
        rgba(4,39,54,.52) !important;

    color: rgba(235,247,249,.84) !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease !important;
}

#display-panel .mhl-view-scale__preset:hover {
    transform: translateY(-1px) !important;

    border-color:
        rgba(106,210,236,.55) !important;

    background:
        rgba(17,83,101,.68) !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.14) !important;
}

#display-panel .mhl-view-scale__preset.is-active,
#display-panel .mhl-view-scale__preset[aria-pressed="true"] {
    border-color:
        rgba(96,213,239,.76) !important;

    background:
        linear-gradient(
            180deg,
            rgba(35,139,166,.80),
            rgba(15,84,105,.80)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 12px rgba(0,0,0,.15) !important;
}

/* Hinweis */
#display-panel .mhl-view-scale__caption {
    width: 100% !important;

    margin: 11px 0 0 !important;

    color:
        rgba(214,237,242,.48) !important;

    font-size: 8.5px !important;
    line-height: 1.3 !important;

    letter-spacing: .025em !important;
}

/* ============================================================
   PANEL – Innenabstände angleichen
   ============================================================ */

#display-panel .mhl-view-scale + .mhl-display-contrast {
    margin-top: 0 !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    #display-panel .mhl-view-scale {
        padding:
            16px 12px 14px !important;
    }

    #display-panel .mhl-view-scale__presets {
        gap: 6px !important;
    }

    #display-panel .mhl-view-scale__preset {
        min-height: 35px !important;
        font-size: 9px !important;
    }
}


/* ============================================================
   MHL DISPLAY VIEW – PREVIEW MATCH
   ============================================================ */

#display-panel {
    width: min(470px, calc(100vw - 24px)) !important;
    max-width: 470px !important;

    padding: 10px !important;
    box-sizing: border-box !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            145deg,
            rgba(22, 82, 99, .72),
            rgba(3, 35, 49, .84)
        ) !important;

    border: 1px solid rgba(100, 211, 235, .32) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.31),
        inset 0 1px 0 rgba(255,255,255,.045) !important;

    backdrop-filter: blur(14px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
}

.mhl-display-view {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   HEADER
   ============================================================ */

.mhl-display-view__header {
    width: 100%;

    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    box-sizing: border-box;

    padding: 18px 18px 17px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(2, 38, 53, .90),
            rgba(1, 29, 42, .93)
        );

    border: 1px solid rgba(110,205,229,.19);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.mhl-display-view__header-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}

.mhl-display-view__gear {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #f4fafc;

    font-size: 25px;
    line-height: 1;
}

.mhl-display-view__header strong {
    display: block;

    color: #f7fbfc;

    font-size: 17px;
    line-height: 1.12;

    font-weight: 900;
}

.mhl-display-view__header small {
    display: block;

    margin-top: 5px;

    color: rgba(203,228,235,.72);

    font-size: 10px;
    line-height: 1.35;
}

.mhl-display-view__close {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(109,213,236,.27);
    border-radius: 50%;

    background: rgba(3,38,53,.50);

    color: #f2cf65;

    font-size: 21px;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.mhl-display-view__close:hover {
    transform: scale(1.05);

    border-color: rgba(109,213,236,.58);

    background: rgba(7,56,73,.70);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.mhl-display-view__section {
    width: 100%;

    box-sizing: border-box;

    margin-top: 22px;
}

.mhl-display-view__section-title {
    display: flex;
    align-items: center;

    gap: 10px;

    color: rgba(120,217,239,.86);

    font-size: 10px;
    line-height: 1;

    letter-spacing: .15em;
    font-weight: 900;
}

.mhl-display-view__section-title::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(111,211,233,.26),
            rgba(111,211,233,.06)
        );
}

/* ============================================================
   FESTE SEITENGRÖSSE
   ============================================================ */

.mhl-fixed-size {
    width: 100%;

    box-sizing: border-box;

    margin-top: 11px;
    padding: 18px 18px;

    border-radius: 14px;

    border: 1px solid rgba(105,205,228,.24);

    background:
        linear-gradient(
            145deg,
            rgba(22,85,102,.43),
            rgba(8,51,66,.50)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.mhl-fixed-size__title {
    display: block;

    color: #f7fbfc;

    font-size: 16px;
    line-height: 1.15;

    font-weight: 900;
}

.mhl-fixed-size__text {
    display: block;

    margin-top: 9px;

    color: rgba(210,232,237,.82);

    font-size: 10.5px;
    line-height: 1.55;
}

/* ============================================================
   SCHRIFTGRÖSSE
   ============================================================ */

.mhl-font-control {
    width: 100%;

    box-sizing: border-box;

    margin-top: 18px;
    padding: 19px 18px 17px;

    border-radius: 14px;

    border: 1px solid rgba(95,207,233,.34);

    background:
        linear-gradient(
            145deg,
            rgba(5,57,73,.48),
            rgba(3,38,52,.58)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.mhl-font-control__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.mhl-font-control__eyebrow {
    display: block;

    color: rgba(109,211,235,.85);

    font-size: 10px;
    line-height: 1;

    letter-spacing: .15em;
    font-weight: 900;
}

.mhl-font-control__title {
    display: block;

    margin-top: 5px;

    color: #f7fbfc;

    font-size: 16px;
    line-height: 1;

    font-weight: 950;

    letter-spacing: .05em;
}

.mhl-font-control__value {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 67px;
    height: 37px;

    padding: 0 11px;

    border: 1px solid rgba(107,213,237,.44);
    border-radius: 10px;

    background: rgba(2,29,42,.70);

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.mhl-font-control__slider-row {
    display: grid;

    grid-template-columns:
        40px minmax(0,1fr) 45px;

    align-items: center;

    gap: 9px;

    margin-top: 18px;
}

.mhl-font-control__side {
    color: rgba(224,241,245,.74);

    font-size: 10px;
    line-height: 1;

    font-weight: 900;
}

.mhl-font-control__side:last-child {
    text-align: right;
}

/* Slider */
#mhl-view-scale {
    width: 100%;
    height: 9px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(63,192,219,.78),
            rgba(190,76,210,.72)
        );

    cursor: pointer;

    outline: none;
}

#mhl-view-scale::-webkit-slider-runnable-track {
    height: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(62,190,217,.76),
            rgba(184,79,210,.68)
        );
}

#mhl-view-scale::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 22px;
    height: 22px;

    margin-top: -6.5px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 9px rgba(0,0,0,.35),
        0 0 0 3px rgba(86,196,225,.16);

    cursor: grab;
}

#mhl-view-scale::-webkit-slider-thumb:active {
    cursor: grabbing;
}

#mhl-view-scale::-moz-range-track {
    height: 9px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(62,190,217,.76),
            rgba(184,79,210,.68)
        );
}

#mhl-view-scale::-moz-range-thumb {
    width: 17px;
    height: 17px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 9px rgba(0,0,0,.35);

    cursor: grab;
}

#mhl-view-scale:focus-visible {
    outline: 2px solid rgba(109,213,236,.85);
    outline-offset: 5px;
}

/* Presets */
.mhl-font-control__presets {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 8px;

    margin-top: 16px;
}

.mhl-font-preset {
    min-height: 38px;

    border: 1px solid rgba(105,210,234,.23);
    border-radius: 9px;

    background:
        rgba(4,38,52,.50);

    color: rgba(235,247,250,.88);

    font: inherit;
    font-size: 10px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.mhl-font-preset:hover {
    transform: translateY(-1px);

    border-color:
        rgba(105,210,234,.54);

    background:
        rgba(17,81,100,.68);
}

.mhl-font-preset.is-active,
.mhl-font-preset[aria-pressed="true"] {
    border-color:
        rgba(99,215,241,.82);

    background:
        linear-gradient(
            180deg,
            rgba(35,141,168,.82),
            rgba(16,84,105,.80)
        );

    color: #ffffff;

    box-shadow:
        0 5px 13px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.mhl-font-control__hint {
    margin-top: 11px;

    color: rgba(207,231,236,.58);

    font-size: 9px;
    line-height: 1.4;
}

/* ============================================================
   KONTRAST
   ============================================================ */

.mhl-contrast-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 8px;

    margin-top: 11px;
}

.mhl-contrast-button {
    min-height: 93px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 9px 6px;

    border: 1px solid rgba(105,208,233,.23);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(7,52,67,.44),
            rgba(3,33,46,.54)
        );

    color: rgba(236,247,249,.86);

    font: inherit;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.mhl-contrast-button:hover {
    transform: translateY(-1px);

    border-color:
        rgba(106,211,235,.52);

    background:
        linear-gradient(
            145deg,
            rgba(17,88,108,.56),
            rgba(5,43,58,.63)
        );
}

.mhl-contrast-button.is-active,
.mhl-contrast-button[aria-pressed="true"] {
    border-color:
        rgba(80,211,239,.80);

    background:
        linear-gradient(
            145deg,
            rgba(30,128,156,.79),
            rgba(11,76,96,.78)
        );

    color: #ffffff;

    box-shadow:
        0 6px 16px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.mhl-contrast-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin-bottom: 4px;

    font-size: 23px;
    line-height: 1;
}

.mhl-contrast-button strong {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 900;
}

.mhl-contrast-button small {
    margin-top: 5px;

    text-align: center;

    font-size: 8.5px;
    line-height: 1.25;

    opacity: .66;
}

/* ============================================================
   VOLLBILD
   ============================================================ */

.mhl-fullscreen-option {
    width: 100%;

    min-height: 78px;

    display: grid;

    grid-template-columns:
        48px minmax(0,1fr) auto;

    align-items: center;

    gap: 13px;

    box-sizing: border-box;

    margin-top: 11px;
    padding: 10px 11px;

    border: 1px solid rgba(246,73,211,.61);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(103,18,91,.28),
            rgba(4,43,58,.56)
        );

    color: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 15px rgba(235,56,201,.08);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.mhl-fullscreen-option:hover {
    transform: translateY(-1px);

    border-color:
        rgba(255,91,222,.90);

    box-shadow:
        0 7px 20px rgba(0,0,0,.15),
        0 0 18px rgba(237,56,203,.18);
}

.mhl-fullscreen-option__icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(247,81,219,.74);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(147,22,126,.43),
            rgba(75,13,76,.46)
        );

    color: #ff71dc;

    font-size: 22px;

    box-shadow:
        0 0 14px rgba(240,53,202,.22);
}

.mhl-fullscreen-option__copy strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.1;

    font-weight: 900;
}

.mhl-fullscreen-option__copy small {
    display: block;

    margin-top: 5px;

    color: rgba(218,238,243,.62);

    font-size: 9px;
}

.mhl-fullscreen-option__action {
    min-width: 125px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 10px;

    border: 1px solid rgba(246,76,213,.71);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(141,26,121,.83),
            rgba(84,17,84,.78)
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 0 14px rgba(240,59,203,.13);
}

.mhl-fullscreen-option__action b {
    font-size: 17px;
    line-height: 1;
}

/* ============================================================
   RESET
   ============================================================ */

.mhl-display-view__reset-wrap {
    margin-top: 13px;
    padding-top: 12px;

    border-top:
        1px solid rgba(113,211,234,.13);
}

.mhl-display-reset {
    width: 100%;

    min-height: 57px;

    display: grid;

    grid-template-columns:
        37px minmax(0,1fr) minmax(125px,auto);

    align-items: center;

    gap: 10px;

    box-sizing: border-box;

    padding: 8px 13px;

    border: 1px solid rgba(104,203,226,.23);
    border-radius: 11px;

    background:
        rgba(4,38,53,.48);

    color: #ffffff;

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.mhl-display-reset:hover {
    transform: translateY(-1px);

    border-color:
        rgba(106,211,234,.46);

    background:
        rgba(14,72,90,.60);
}

.mhl-display-reset__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    font-size: 24px;
    line-height: 1;
}

.mhl-display-reset strong {
    font-size: 11px;
    line-height: 1.1;

    font-weight: 900;
}

.mhl-display-reset small {
    color: rgba(212,235,240,.57);

    font-size: 8.5px;
    line-height: 1.3;
}

/* ============================================================
   HEADER FULLSCREEN BUTTON – MAGENTA PULSE
   ============================================================ */

.mhl-header-fullscreen {
    position: relative !important;

    width: 39px !important;
    height: 39px !important;

    margin-left: 8px !important;

    flex: 0 0 39px !important;

    border: 1px solid rgba(255,83,218,.82) !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(140,28,122,.84),
            rgba(38,12,47,.88)
        ) !important;

    color: #ffffff !important;

    animation:
        mhl-fullscreen-header-pulse
        2s
        ease-in-out
        infinite !important;

    box-shadow:
        0 0 11px rgba(239,59,202,.45) !important;

    cursor: pointer !important;
}

.mhl-header-fullscreen::after {
    content: "Vollbild";

    position: absolute;

    left: 50%;
    top: calc(100% + 9px);

    transform:
        translate(-50%, -4px)
        scale(.95);

    opacity: 0;

    pointer-events: none;

    padding: 6px 10px;

    border: 1px solid rgba(245,82,216,.46);
    border-radius: 7px;

    background:
        rgba(6,22,35,.96);

    color: #ffffff;

    font-size: 10px;
    line-height: 1;

    font-weight: 900;

    white-space: nowrap;

    box-shadow:
        0 6px 16px rgba(0,0,0,.25);

    transition:
        opacity .14s ease,
        transform .14s ease;
}

.mhl-header-fullscreen:hover::after,
.mhl-header-fullscreen:focus-visible::after {
    opacity: 1;

    transform:
        translate(-50%, 0)
        scale(1);
}

@keyframes mhl-fullscreen-header-pulse {

    0%, 100% {
        box-shadow:
            0 0 9px rgba(239,59,202,.34);
    }

    50% {
        box-shadow:
            0 0 0 4px rgba(239,59,202,.13),
            0 0 23px rgba(239,59,202,.70);
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    #display-panel {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;

        padding: 7px !important;
    }

    .mhl-display-view__header {
        min-height: 79px;

        padding:
            13px 13px;
    }

    .mhl-display-view__header strong {
        font-size: 15px;
    }

    .mhl-display-view__header small {
        font-size: 9px;
    }

    .mhl-fixed-size {
        padding:
            15px 14px;
    }

    .mhl-font-control {
        padding:
            16px 13px 14px;
    }

    .mhl-font-control__slider-row {
        grid-template-columns:
            36px minmax(0,1fr) 42px;
    }

    .mhl-contrast-button {
        min-height: 84px;
    }

    .mhl-contrast-button small {
        font-size: 8px;
    }

    .mhl-fullscreen-option {
        grid-template-columns:
            45px minmax(0,1fr);

        min-height: 70px;
    }

    .mhl-fullscreen-option__action {
        display: none;
    }

    .mhl-display-reset {
        grid-template-columns:
            35px minmax(0,1fr);

        min-height: 54px;
    }

    .mhl-display-reset small {
        display: none;
    }
}


/* ============================================================
   MHL VIEW SCALE – TRANSPARENT FIX
   ============================================================ */

/*
 * Die Sliderbox selbst bekommt KEINEN eigenen Kasten.
 * Der gemeinsame Hintergrund des Ansicht-Panels bleibt erhalten.
 */
#display-panel .mhl-font-control,
#display-panel .mhl-view-scale {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* etwas kompakter und sauber in das Gesamtpanel integrieren */
#display-panel .mhl-font-control {
    width: 100% !important;
    margin: 0 !important;
    padding: 17px 10px 14px !important;
    box-sizing: border-box !important;
}

/* Kopf */
#display-panel .mhl-font-control__top {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

/* Slider-Bereich */
#display-panel .mhl-font-control__slider-row {
    width: 100% !important;
    margin-top: 17px !important;

    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) 45px !important;
    align-items: center !important;
    gap: 9px !important;
}

/* Keine zusätzliche Schiene um die Schiene */
#display-panel #mhl-view-scale {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* eigentliche Sliderbahn */
#display-panel #mhl-view-scale::-webkit-slider-runnable-track {
    height: 8px !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(69,190,218,.78),
            rgba(178,78,211,.70)
        ) !important;
}

#display-panel #mhl-view-scale::-moz-range-track {
    height: 8px !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(69,190,218,.78),
            rgba(178,78,211,.70)
        ) !important;
}

/* Thumb */
#display-panel #mhl-view-scale::-webkit-slider-thumb {
    width: 21px !important;
    height: 21px !important;

    margin-top: -6.5px !important;

    border: 3px solid #fff !important;
    border-radius: 50% !important;

    background: #fff !important;

    box-shadow:
        0 2px 9px rgba(0,0,0,.36),
        0 0 0 3px rgba(91,202,229,.18) !important;
}

#display-panel #mhl-view-scale::-moz-range-thumb {
    width: 17px !important;
    height: 17px !important;

    border: 3px solid #fff !important;
    border-radius: 50% !important;

    background: #fff !important;

    box-shadow:
        0 2px 9px rgba(0,0,0,.36) !important;
}

/* Prozent-Buttons ebenfalls ohne zusätzliche Box */
#display-panel .mhl-font-control__presets {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap: 8px !important;

    margin-top: 15px !important;
}

#display-panel .mhl-font-preset {
    width: 100% !important;
    min-height: 36px !important;

    border-radius: 9px !important;

    background:
        rgba(3,37,51,.32) !important;

    border: 1px solid rgba(105,210,234,.23) !important;

    color: rgba(238,248,250,.88) !important;

    font-size: 10px !important;
    font-weight: 900 !important;
}

#display-panel .mhl-font-preset:hover {
    background:
        rgba(18,91,110,.48) !important;

    border-color:
        rgba(110,214,237,.55) !important;
}

#display-panel .mhl-font-preset.is-active,
#display-panel .mhl-font-preset[aria-pressed="true"] {
    background:
        linear-gradient(
            180deg,
            rgba(39,145,171,.80),
            rgba(16,88,108,.78)
        ) !important;

    border-color:
        rgba(101,216,241,.82) !important;

    color: #fff !important;
}

/* Hinweis */
#display-panel .mhl-font-control__hint {
    margin-top: 10px !important;

    color:
        rgba(208,232,238,.48) !important;

    font-size: 8.5px !important;
    line-height: 1.35 !important;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {

    #display-panel .mhl-font-control {
        padding:
            15px 7px 13px !important;
    }

    #display-panel .mhl-font-control__presets {
        gap: 6px !important;
    }

    #display-panel .mhl-font-preset {
        min-height: 34px !important;
        font-size: 9px !important;
    }
}


/* ============================================================
   MHL CONTRAST ENGINE
   ============================================================ */

/*
 * Standard
 */
html[data-mhl-contrast="normal"],
html[data-contrast="normal"] {
    --mhl-contrast-text:
        rgba(239,248,250,.92);

    --mhl-contrast-muted:
        rgba(210,232,237,.70);

    --mhl-contrast-border:
        rgba(111,211,233,.24);
}

/*
 * Sanft
 */
html[data-mhl-contrast="soft"],
html[data-contrast="soft"] {
    --mhl-contrast-text:
        rgba(224,239,242,.78);

    --mhl-contrast-muted:
        rgba(198,221,226,.58);

    --mhl-contrast-border:
        rgba(111,211,233,.16);
}

html[data-mhl-contrast="soft"] body {
    --mhl-contrast-filter:
        saturate(.94);
}

html[data-mhl-contrast="soft"] .site-main,
html[data-mhl-contrast="soft"] main {
    color:
        var(--mhl-contrast-text);
}

/*
 * Hoch
 */
html[data-mhl-contrast="high"],
html[data-contrast="high"] {
    --mhl-contrast-text:
        #ffffff;

    --mhl-contrast-muted:
        rgba(241,249,251,.86);

    --mhl-contrast-border:
        rgba(126,224,246,.62);
}

html[data-mhl-contrast="high"] body {
    --mhl-contrast-filter:
        contrast(1.07);
}

html[data-mhl-contrast="high"] .site-main,
html[data-mhl-contrast="high"] main {
    color:
        var(--mhl-contrast-text);
}

html[data-mhl-contrast="high"] p,
html[data-mhl-contrast="high"] li,
html[data-mhl-contrast="high"] label,
html[data-mhl-contrast="high"] small {
    color:
        var(--mhl-contrast-muted);
}

/*
 * Generelle UI-Kanten
 */
html[data-mhl-contrast="high"]
.panel,
html[data-mhl-contrast="high"]
.glass-card,
html[data-mhl-contrast="high"]
.top-panel,
html[data-mhl-contrast="high"]
.card {
    border-color:
        var(--mhl-contrast-border) !important;
}

/* ============================================================
   KONTRASTBUTTONS
   ============================================================ */

#display-panel .mhl-contrast-button.active,
#display-panel .mhl-contrast-button.is-active,
#display-panel .mhl-contrast-button[aria-pressed="true"] {
    border-color:
        rgba(89,217,243,.92) !important;

    background:
        linear-gradient(
            145deg,
            rgba(35,139,167,.88),
            rgba(12,80,100,.88)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 0 0 1px rgba(94,214,238,.16),
        0 7px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}

/* ============================================================
   SCHRIFTGRÖSSEN-BUTTONS – GRÖSSER
   ============================================================ */

#display-panel .mhl-font-control__presets {
    gap: 10px !important;
    margin-top: 17px !important;
}

#display-panel .mhl-font-preset {
    min-height: 45px !important;

    padding:
        0 8px !important;

    border-radius: 10px !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    letter-spacing: .01em !important;
}

#display-panel .mhl-font-preset:hover {
    transform: translateY(-2px) !important;
}

#display-panel .mhl-font-preset.is-active,
#display-panel .mhl-font-preset[aria-pressed="true"] {
    border-width: 1px !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}


/* ============================================================
   MHL DISPLAY PANEL – FINAL V6
   ============================================================ */

#display-panel {
    width: min(470px, calc(100vw - 24px)) !important;
    max-width: 470px !important;

    box-sizing: border-box !important;

    padding: 10px !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,80,98,.78),
            rgba(3,35,49,.88)
        ) !important;

    border: 1px solid rgba(111,213,236,.34) !important;

    box-shadow:
        0 22px 58px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.045) !important;

    backdrop-filter: blur(15px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(115%) !important;
}

.mhl-display {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   HEADER
   ============================================================ */

.mhl-display__header {
    width: 100%;
    min-height: 82px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 15px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(3,42,58,.94),
            rgba(1,28,41,.95)
        );

    border: 1px solid rgba(104,207,232,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.mhl-display__header-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.mhl-display__header-icon {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    color: #f4fafc;

    font-size: 21px;
}

.mhl-display__header-text {
    min-width: 0;
}

.mhl-display__header-text strong {
    display: block;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.12;

    font-weight: 900;
}

.mhl-display__header-text small {
    display: block;

    margin-top: 4px;

    color: rgba(205,230,236,.65);

    font-size: 9px;
    line-height: 1.3;
}

.mhl-display__close {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(108,211,236,.24);
    border-radius: 50%;

    background: rgba(3,37,52,.58);

    color: rgba(240,249,251,.85);

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease;
}

.mhl-display__close:hover {
    transform: scale(1.06);

    background: rgba(10,65,82,.78);

    border-color:
        rgba(109,213,236,.54);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.mhl-display__section {
    width: 100%;

    box-sizing: border-box;

    margin-top: 19px;
}

.mhl-display__section-title {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(119,216,238,.86);

    font-size: 10px;
    line-height: 1;

    letter-spacing: .15em;
    font-weight: 900;
}

.mhl-display__section-title::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(111,211,233,.26),
            rgba(111,211,233,.05)
        );
}

/* ============================================================
   FESTE SEITENGRÖSSE
   ============================================================ */

.mhl-display__fixed {
    box-sizing: border-box;

    width: 100%;

    margin-top: 10px;
    padding: 15px 15px 14px;

    border:
        1px solid rgba(107,210,232,.22);

    border-radius: 13px;

    background:
        rgba(9,59,75,.31);
}

.mhl-display__fixed strong {
    display: block;

    color: #f5fbfc;

    font-size: 15px;
    line-height: 1.15;

    font-weight: 900;
}

.mhl-display__fixed p {
    margin: 8px 0 0;

    color:
        rgba(210,232,237,.76);

    font-size: 10px;
    line-height: 1.52;
}

/* ============================================================
   FONT CONTROL
   ============================================================ */

.mhl-display__font {
    width: 100%;

    box-sizing: border-box;

    margin-top: 14px;
    padding: 15px 14px 13px;

    border: 0;

    border-radius: 13px;

    background:
        rgba(5,48,63,.22);
}

.mhl-display__font-head {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.mhl-display__font-head span {
    display: block;

    color:
        rgba(104,211,236,.83);

    font-size: 9px;
    line-height: 1;

    font-weight: 900;
    letter-spacing: .15em;
}

.mhl-display__font-head strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 15px;
    line-height: 1;

    font-weight: 950;

    letter-spacing: .05em;
}

.mhl-display__percent {
    min-width: 60px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 9px;

    border:
        1px solid rgba(103,211,235,.38);

    border-radius: 9px;

    background:
        rgba(2,29,41,.58);

    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}

.mhl-display__slider-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        36px minmax(0,1fr) 42px;

    align-items: center;

    gap: 8px;

    margin-top: 16px;
}

.mhl-display__slider-row > span {
    color:
        rgba(220,240,244,.70);

    font-size: 9px;
    font-weight: 900;
}

.mhl-display__slider-row > span:last-child {
    text-align: right;
}

#mhl-view-scale {
    display: block;

    width: 100%;
    height: 8px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(73,190,218,.79),
            rgba(168,76,207,.76)
        );

    cursor: pointer;
}

#mhl-view-scale::-webkit-slider-runnable-track {
    height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(73,190,218,.79),
            rgba(168,76,207,.76)
        );
}

#mhl-view-scale::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;

    margin-top: -6px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 8px rgba(0,0,0,.33),
        0 0 0 3px rgba(80,200,227,.15);

    cursor: grab;
}

#mhl-view-scale::-webkit-slider-thumb:active {
    cursor: grabbing;
}

#mhl-view-scale::-moz-range-track {
    height: 8px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(73,190,218,.79),
            rgba(168,76,207,.76)
        );
}

#mhl-view-scale::-moz-range-progress {
    height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(73,190,218,.79),
            rgba(168,76,207,.76)
        );
}

#mhl-view-scale::-moz-range-thumb {
    width: 17px;
    height: 17px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #ffffff;

    cursor: grab;
}

.mhl-display__font-presets {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 8px;

    margin-top: 14px;
}

.mhl-display__font-button {
    min-width: 0;
    min-height: 39px;

    border:
        1px solid rgba(104,208,232,.24);

    border-radius: 9px;

    background:
        rgba(3,38,52,.38);

    color:
        rgba(237,248,250,.88);

    font: inherit;
    font-size: 10px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.mhl-display__font-button:hover {
    transform: translateY(-1px);

    border-color:
        rgba(103,213,237,.58);

    background:
        rgba(15,78,97,.58);
}

.mhl-display__font-button.is-active,
.mhl-display__font-button[aria-pressed="true"] {
    border-color:
        rgba(94,214,240,.85);

    background:
        linear-gradient(
            180deg,
            rgba(35,141,168,.82),
            rgba(15,83,104,.81)
        );

    color: #ffffff;
}

.mhl-display__font-note {
    margin-top: 10px;

    color:
        rgba(210,232,237,.48);

    font-size: 8.5px;
    line-height: 1.35;
}

/* ============================================================
   KONTRAST – IMMER 3 SAUBERE GLEICH GROSSE KARTEN
   ============================================================ */

.mhl-display__contrast {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 8px;

    margin-top: 11px;
}

.mhl-display__contrast-button {
    min-width: 0;
    min-height: 91px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 9px 5px;

    border:
        1px solid rgba(105,209,233,.23);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(7,52,67,.38),
            rgba(3,31,44,.47)
        );

    color:
        rgba(235,247,249,.87);

    font: inherit;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.mhl-display__contrast-button:hover {
    transform: translateY(-1px);

    border-color:
        rgba(106,212,235,.54);

    background:
        linear-gradient(
            145deg,
            rgba(17,86,105,.54),
            rgba(5,43,58,.61)
        );
}

.mhl-display__contrast-button.active,
.mhl-display__contrast-button.is-active,
.mhl-display__contrast-button[aria-pressed="true"] {
    border-color:
        rgba(85,214,240,.88);

    background:
        linear-gradient(
            145deg,
            rgba(32,132,159,.80),
            rgba(11,77,97,.80)
        );

    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 15px rgba(0,0,0,.16);
}

.mhl-display__contrast-icon {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 3px;

    font-size: 22px;
    line-height: 1;
}

.mhl-display__contrast-button strong {
    font-size: 11px;
    line-height: 1.1;

    font-weight: 900;
}

.mhl-display__contrast-button small {
    margin-top: 5px;

    font-size: 7.8px;
    line-height: 1.25;

    text-align: center;

    opacity: .67;
}

/* ============================================================
   VOLLBILD
   ============================================================ */

.mhl-display__fullscreen {
    width: 100%;

    min-height: 72px;

    display: grid;

    grid-template-columns:
        46px minmax(0,1fr) auto;

    align-items: center;

    gap: 11px;

    box-sizing: border-box;

    margin-top: 11px;
    padding: 9px 10px;

    border:
        1px solid rgba(245,78,215,.66);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(106,21,94,.23),
            rgba(4,39,54,.51)
        );

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.mhl-display__fullscreen:hover {
    border-color:
        rgba(255,102,226,.92);

    box-shadow:
        0 5px 18px rgba(0,0,0,.16),
        0 0 17px rgba(239,58,203,.16);
}

.mhl-display__fullscreen-icon {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(246,79,216,.68);

    border-radius: 10px;

    background:
        rgba(117,22,102,.30);

    color: #ff75df;

    font-size: 21px;

    box-shadow:
        0 0 12px rgba(239,59,202,.18);
}

.mhl-display__fullscreen-copy strong {
    display: block;

    font-size: 12px;
    line-height: 1.1;

    font-weight: 900;
}

.mhl-display__fullscreen-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(218,238,243,.60);

    font-size: 8.5px;
}

.mhl-display__fullscreen-action {
    min-width: 114px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 0 9px;

    border:
        1px solid rgba(245,77,214,.68);

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(140,27,121,.82),
            rgba(79,17,81,.78)
        );

    color: #ffffff;

    font-size: 8.5px;
    font-weight: 900;

    white-space: nowrap;
}

.mhl-display__fullscreen-action b {
    font-size: 16px;
}

/* ============================================================
   RESET
   ============================================================ */

.mhl-display__reset {
    width: 100%;

    min-height: 51px;

    display: grid;

    grid-template-columns:
        31px minmax(0,1fr);

    align-items: center;

    gap: 9px;

    box-sizing: border-box;

    margin-top: 13px;
    padding: 8px 11px;

    border:
        1px solid rgba(105,205,228,.22);

    border-radius: 10px;

    background:
        rgba(4,37,51,.40);

    color: #ffffff;

    text-align: left;

    cursor: pointer;
}

.mhl-display__reset:hover {
    border-color:
        rgba(106,211,234,.48);

    background:
        rgba(12,70,88,.55);
}

.mhl-display__reset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    font-size: 21px;
}

.mhl-display__reset-copy strong {
    display: block;

    font-size: 10px;
    line-height: 1.1;

    font-weight: 900;
}

.mhl-display__reset-copy small {
    display: block;

    margin-top: 3px;

    color:
        rgba(213,234,239,.52);

    font-size: 7.5px;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    #display-panel {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
    }

    .mhl-display__header {
        min-height: 74px;
        padding: 12px;
    }

    .mhl-display__header-text strong {
        font-size: 14px;
    }

    .mhl-display__header-text small {
        font-size: 8px;
    }

    .mhl-display__fixed {
        padding: 14px;
    }

    .mhl-display__font {
        padding-inline: 11px;
    }

    .mhl-display__contrast {
        gap: 6px;
    }

    .mhl-display__contrast-button {
        min-height: 82px;
    }

    .mhl-display__contrast-button small {
        font-size: 7px;
    }

    .mhl-display__fullscreen {
        grid-template-columns:
            42px minmax(0,1fr);
    }

    .mhl-display__fullscreen-action {
        display: none;
    }
}


/* ============================================================
   MHL CONTRAST FINAL
   ============================================================ */

/* SANFT */
html[data-mhl-contrast="soft"],
html[data-contrast="soft"] {
    --mhl-contrast-main:
        rgba(226,239,243,.82);

    --mhl-contrast-muted:
        rgba(202,222,227,.61);

    filter: none;
}

html[data-mhl-contrast="soft"] body {
    color:
        var(--mhl-contrast-main);
}

/* STANDARD */
html[data-mhl-contrast="normal"],
html[data-contrast="normal"] {
    --mhl-contrast-main:
        rgba(240,248,250,.94);

    --mhl-contrast-muted:
        rgba(211,232,237,.74);

    filter: none;
}

/* HOCH */
html[data-mhl-contrast="high"],
html[data-contrast="high"] {
    --mhl-contrast-main:
        #ffffff;

    --mhl-contrast-muted:
        rgba(247,252,253,.92);

    filter: contrast(1.04);
}

html[data-mhl-contrast="high"] body {
    color: #ffffff;
}

html[data-mhl-contrast="high"] p,
html[data-mhl-contrast="high"] li,
html[data-mhl-contrast="high"] small,
html[data-mhl-contrast="high"] label {
    color:
        var(--mhl-contrast-muted);
}

/*
 * Sichtbarer aktiver Zustand der Kontrastbuttons.
 */
#display-panel
[data-contrast].active,
#display-panel
[data-contrast].is-active,
#display-panel
[data-contrast][aria-pressed="true"] {
    border-color:
        rgba(93,215,241,.92) !important;

    background:
        linear-gradient(
            145deg,
            rgba(30,132,161,.86),
            rgba(11,77,98,.84)
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 0 1px rgba(93,215,241,.14),
        0 6px 16px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/*
 * Normale nicht aktive Buttons.
 */
#display-panel
[data-contrast]:not(.active):not(.is-active) {
    opacity: .86;
}

/*
 * Font-Presets ebenfalls klar aktiv.
 */
#display-panel
[data-mhl-view-scale-preset][aria-pressed="true"] {
    border-color:
        rgba(96,216,241,.92) !important;

    background:
        linear-gradient(
            180deg,
            rgba(36,143,169,.84),
            rgba(15,83,105,.82)
        ) !important;

    color:
        #ffffff !important;
}

/*
 * Hover
 */
#display-panel
[data-mhl-view-scale-preset]:hover,
#display-panel
[data-contrast]:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(112,216,238,.60) !important;
}


/* ============================================================
   MHL CONTRAST FINAL V7
   ============================================================ */

/* ------------------------------------------------------------
   Grundwerte
   ------------------------------------------------------------ */

html[data-mhl-contrast="soft"],
html[data-contrast="soft"] {
    --mhl-c-text:
        rgba(225,239,243,.80);

    --mhl-c-muted:
        rgba(199,220,226,.61);

    --mhl-c-border:
        rgba(112,198,220,.18);

    --mhl-c-panel:
        rgba(5,38,51,.30);

    --mhl-c-button:
        rgba(5,48,63,.32);

    --mhl-c-button-hover:
        rgba(15,77,93,.46);
}

html[data-mhl-contrast="normal"],
html[data-contrast="normal"] {
    --mhl-c-text:
        rgba(239,248,250,.94);

    --mhl-c-muted:
        rgba(211,233,238,.75);

    --mhl-c-border:
        rgba(112,211,233,.25);

    --mhl-c-panel:
        rgba(5,38,51,.42);

    --mhl-c-button:
        rgba(5,48,63,.44);

    --mhl-c-button-hover:
        rgba(16,82,101,.57);
}

html[data-mhl-contrast="high"],
html[data-contrast="high"] {
    --mhl-c-text:
        #ffffff;

    --mhl-c-muted:
        rgba(248,252,253,.94);

    --mhl-c-border:
        rgba(126,225,247,.68);

    --mhl-c-panel:
        rgba(3,31,44,.58);

    --mhl-c-button:
        rgba(3,40,54,.62);

    --mhl-c-button-hover:
        rgba(18,94,115,.72);
}

/* ------------------------------------------------------------
   Haupttext
   ------------------------------------------------------------ */

html[data-mhl-contrast="soft"] body {
    color: var(--mhl-c-text);
}

html[data-mhl-contrast="normal"] body {
    color: var(--mhl-c-text);
}

html[data-mhl-contrast="high"] body {
    color: #ffffff;
}

html[data-contrast="soft"] p,
html[data-contrast="soft"] li,
html[data-contrast="soft"] label,
html[data-contrast="soft"] small,
html[data-contrast="soft"] figcaption {
    color: var(--mhl-c-muted);
}

html[data-contrast="normal"] p,
html[data-contrast="normal"] li,
html[data-contrast="normal"] label,
html[data-contrast="normal"] small,
html[data-contrast="normal"] figcaption {
    color: var(--mhl-c-muted);
}

html[data-contrast="high"] p,
html[data-contrast="high"] li,
html[data-contrast="high"] label,
html[data-contrast="high"] small,
html[data-contrast="high"] figcaption {
    color: var(--mhl-c-muted);
}

/* ------------------------------------------------------------
   Links
   ------------------------------------------------------------ */

html[data-contrast="soft"] a {
    text-decoration-color:
        rgba(116,208,230,.36);
}

html[data-contrast="high"] a {
    text-decoration-thickness: 1.5px;
    text-decoration-color:
        rgba(145,229,247,.82);
}

/* ------------------------------------------------------------
   Cards / Panels / Glaskarten
   ------------------------------------------------------------ */

html[data-contrast="soft"] .glass-card,
html[data-contrast="soft"] .top-panel,
html[data-contrast="soft"] .card,
html[data-contrast="soft"] .panel {
    border-color:
        var(--mhl-c-border) !important;
}

html[data-contrast="normal"] .glass-card,
html[data-contrast="normal"] .top-panel,
html[data-contrast="normal"] .card,
html[data-contrast="normal"] .panel {
    border-color:
        var(--mhl-c-border) !important;
}

html[data-contrast="high"] .glass-card,
html[data-contrast="high"] .top-panel,
html[data-contrast="high"] .card,
html[data-contrast="high"] .panel {
    border-color:
        var(--mhl-c-border) !important;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

html[data-contrast="soft"] .site-header {
    filter: saturate(.94);
}

html[data-contrast="high"] .site-header {
    border-bottom-color:
        rgba(126,225,247,.48) !important;
}

/* ------------------------------------------------------------
   Buttons / Controls außerhalb des Ansichtspanels
   ------------------------------------------------------------ */

html[data-contrast="soft"] button,
html[data-contrast="soft"] .header-tool {
    border-color:
        rgba(110,199,221,.17);
}

html[data-contrast="high"] button,
html[data-contrast="high"] .header-tool {
    border-color:
        rgba(126,225,247,.42);
}

html[data-contrast="high"] button:hover,
html[data-contrast="high"] .header-tool:hover {
    box-shadow:
        0 0 0 1px rgba(126,225,247,.16),
        0 4px 13px rgba(0,0,0,.18);
}

/* ------------------------------------------------------------
   Ansichtspanel – Kontrastbuttons
   ------------------------------------------------------------ */

#display-panel [data-contrast] {
    color:
        var(--mhl-c-text) !important;

    border-color:
        var(--mhl-c-border) !important;

    background:
        var(--mhl-c-button) !important;
}

#display-panel [data-contrast]:hover {
    background:
        var(--mhl-c-button-hover) !important;
}

#display-panel [data-contrast].active,
#display-panel [data-contrast].is-active,
#display-panel [data-contrast][aria-pressed="true"] {
    border-color:
        rgba(91,216,242,.92) !important;

    background:
        linear-gradient(
            145deg,
            rgba(31,132,159,.88),
            rgba(10,78,98,.88)
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 0 1px rgba(94,214,238,.17),
        0 7px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}

/* ------------------------------------------------------------
   Tabellen / Formularfelder / Inputs
   ------------------------------------------------------------ */

html[data-contrast="soft"] input,
html[data-contrast="soft"] textarea,
html[data-contrast="soft"] select {
    border-color:
        rgba(110,199,221,.17) !important;
}

html[data-contrast="high"] input,
html[data-contrast="high"] textarea,
html[data-contrast="high"] select {
    border-color:
        rgba(126,225,247,.53) !important;
}

/* ------------------------------------------------------------
   Logbuch
   ------------------------------------------------------------ */

html[data-contrast="soft"]
.mhl-story-copy-r197 {
    color:
        rgba(64,46,28,.72) !important;
}

html[data-contrast="normal"]
.mhl-story-copy-r197 {
    color:
        rgba(51,37,24,.92) !important;
}

html[data-contrast="high"]
.mhl-story-copy-r197 {
    color:
        rgba(31,23,15,1) !important;
}

/*
 * Logbuch-Metadaten
 */
html[data-contrast="soft"]
.mhl-story-meta-r197 {
    color:
        rgba(65,48,31,.62) !important;
}

html[data-contrast="normal"]
.mhl-story-meta-r197 {
    color:
        rgba(51,38,25,.82) !important;
}

html[data-contrast="high"]
.mhl-story-meta-r197 {
    color:
        rgba(29,21,14,.96) !important;
}

/* ------------------------------------------------------------
   Zustandsvisualisierung – gesamte Seite
   ------------------------------------------------------------ */

html[data-contrast="soft"] body {
    text-shadow: none;
}

html[data-contrast="high"] body {
    text-shadow: none;
}

html[data-contrast="high"] strong,
html[data-contrast="high"] h1,
html[data-contrast="high"] h2,
html[data-contrast="high"] h3,
html[data-contrast="high"] h4,
html[data-contrast="high"] h5,
html[data-contrast="high"] h6 {
    font-weight: 800;
}

/* ------------------------------------------------------------
   Accessibility: Zustand sichtbar machen
   ------------------------------------------------------------ */

html[data-mhl-contrast="soft"]
#display-panel [data-contrast="soft"],
html[data-mhl-contrast="normal"]
#display-panel [data-contrast="normal"],
html[data-mhl-contrast="high"]
#display-panel [data-contrast="high"] {
    outline:
        0;
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    #display-panel [data-contrast] {
        min-height: 78px;
    }
}