/* Vorhandene Seitenfarben aus index.css; nur der Slider verwendet diese Variablen. */
#mainbox-shop-start { --slider-color: 110,110,110; --slider-text: 175,175,175; }
#body-turquoise #mainbox-shop-start { --slider-color: 91,138,155; --slider-text: 165,191,200; }
#body-violett #mainbox-shop-start { --slider-color: 129,121,155; --slider-text: 186,181,200; }
#body-blue #mainbox-shop-start { --slider-color: 119,128,157; --slider-text: 180,185,201; }
#body-pink #mainbox-shop-start { --slider-color: 148,119,141; --slider-text: 196,180,192; }
#body-green #mainbox-shop-start { --slider-color: 97,140,117; --slider-text: 168,192,179; }
#body-brown #mainbox-shop-start { --slider-color: 157,134,119; --slider-text: 201,188,180; }
#body-lightblue #mainbox-shop-start { --slider-color: 124,143,172; --slider-text: 183,193,209; }

/* NORNENTHAL | Startseite Edelsteinschmuck: Bildslider */
#start-slider {
    clear: both;
    margin: 0;
    background: #292929;
    color: #f5f5f5;
    overflow: hidden;
    border-top: 3px solid rgb(var(--slider-color));
}
#start-slider, #start-slider * {
    box-sizing: border-box;
}
#start-slider [hidden] {
    display: none !important;
}
#start-slider .start-slide {
    position: relative;
    min-height: 440px;
    isolation: isolate;
}
#start-slider .start-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 76% center;
    z-index: -2;
}
#start-slider .start-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,20,20,.94), rgba(24,24,24,.81) 35%, rgba(28,28,28,.34) 58%, transparent 80%);
    z-index: -1;
}
#start-slider .start-slide-copy {
    width: 60%;
    padding: 36px 16px 36px 28px;
    text-align: left;
}
#start-slider .start-slide-copy h2 {
    height: auto;
    padding: 0;
    margin: 0 0 20px;
    border: 0;
    background: none;
    text-shadow: none;
    color: #ffffff;
    font: normal 30px/1.18 Georgia, serif;
    text-align: left;
}
#start-slider blockquote, #start-slider .start-slide-text {
    color: #f5f5f5;
    margin: 0;
    padding: 0;
    font: normal 18px/1.6 Georgia, serif;
    text-align: left;
    overflow-wrap: anywhere;
}
#start-slider blockquote::before {
    content: open-quote;
}
#start-slider blockquote::after {
    content: close-quote;
}
#start-slider:lang(de) blockquote {
    quotes: "„" "“";
}
#start-slider:lang(en) blockquote {
    quotes: "“" "”";
}
#start-slider .start-slide-attribution {
    margin-top: 18px;
    color: #dddddd;
    font: 11px/1.55 Arial, sans-serif;
}
#start-slider .start-slide-attribution p {
    margin: 3px 0;
    text-align: left;
}
#start-slider .start-slide-author {
    font-weight: bold;
}
#start-slider .start-slide-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#start-slider .start-slide-original {
    margin-top: 12px;
    color: #dddddd;
    font: 11px/1.55 Arial, sans-serif;
}
#start-slider .start-slide-original summary {
    cursor: pointer;
}
#start-slider .start-slide-original p {
    margin: 9px 0 0;
    font: italic 13px/1.5 Georgia, serif;
    text-align: left;
}
#start-slider .start-slider-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(#494949, #303030);
}
#start-slider #start-slider-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
#start-slider #start-slider-selection a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 30px;
    color: #dddddd;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    font: 12px/1 Arial, sans-serif;
}
#start-slider #start-slider-selection a[aria-current="true"] {
    color: white;
    background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45)), rgb(var(--slider-color));
    border-bottom-color: rgb(var(--slider-color));
}
#start-slider .start-slider-transport {
    display: flex;
    align-items: center;
    gap: 6px;
}
#start-slider .start-slider-counter {
    margin-right: 6px;
    font: 11px/1 Arial, sans-serif;
    color: #dddddd;
}
#start-slider .start-slider-transport button {
    cursor: pointer;
    min-width: 30px;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #252525;
    border-radius: 0;
    background: linear-gradient(#626262, #393939);
    color: #fff;
    font: 11px/1 Arial, sans-serif;
    box-shadow: none;
}
#start-slider .start-slider-transport .start-slider-prev,
#start-slider .start-slider-transport .start-slider-next {
    position: relative;
    width: 30px;
    padding: 0;
    font-size: 0;
}
/* Geometrische Pfeile bleiben unabhängig von der Schriftgrundlinie mittig. */
#start-slider .start-slider-prev::before,
#start-slider .start-slider-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% - 2px);
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
#start-slider .start-slider-prev::before {
    left: calc(50% + 2px);
    transform: translate(-50%, -50%) rotate(-135deg);
}
#start-slider #start-slider-selection a:hover,
#start-slider .start-slider-transport button:hover {
    background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.35)), rgb(var(--slider-color));
}
#start-slider a:focus-visible, #start-slider button:focus-visible, #start-slider summary:focus-visible {
    outline: 2px solid rgb(var(--slider-color));
    outline-offset: 2px;
}
#start-slider .start-slider-fallback {
    display: inline-block;
    margin-top: 15px;
    color: #dddddd;
    font-size: 11px;
}
#start-slider.is-ready .start-slider-fallback {
    display: none;
}
#mainbox-shop-start .start-slider-shop {
    clear: both;
    padding: 15px 10px 20px;
    text-align: center;
}
#mainbox-shop-start .start-slider-shop a {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.50)), rgb(var(--slider-color));
    text-decoration: none;
    font: bold 13px/1.3 Arial, sans-serif;
}
#mainbox-shop-start .start-slider-shop a:hover {
    background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.40)), rgb(var(--slider-color));
}
@media (prefers-reduced-motion: no-preference) {
    #start-slider.is-ready .start-slide:not([hidden]) {
        animation: start-slider-reveal .45s ease;
    }
}
@keyframes start-slider-reveal {
    from { opacity: .65; }
    to { opacity: 1; }
}

/* Variante 2: Themenzeile, farbige Überschriften und benannte Reiter. */
#start-slider .start-slider-label {
    display: none;
}
#start-slider.start-slider-variant-2 .start-slide-topic {
    color: rgb(var(--slider-text));
    margin: 0 0 14px;
    font: bold 10px/1.5 Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
}
#start-slider.start-slider-variant-2 .start-slide-copy h2 {
    color: rgb(var(--slider-text));
}
#start-slider.start-slider-variant-2 .start-slider-controls {
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 64px;
    padding: 0;
    gap: 0;
    /* Oben 52 px Bedienzeile; darunter 12 px dunkle Basis in voller Breite. */
    background: linear-gradient(#494949, #303030) top / 100% 52px no-repeat, #202020;
}
#start-slider.start-slider-variant-2 #start-slider-selection {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 0;
    height: 63px;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--slider-color)) #202020;
}
#start-slider.start-slider-variant-2 #start-slider-selection a {
    flex: 0 0 auto;
    width: auto;
    height: 52px;
    padding: 0 12px;
    gap: 8px;
    white-space: nowrap;
    color: rgb(var(--slider-text));
}
#start-slider.start-slider-variant-2 .start-slider-label {
    display: inline;
}
#start-slider.start-slider-variant-2 .start-slider-number {
    font-size: 9px;
    opacity: .8;
    font-variant-numeric: tabular-nums;
    transform: translateY(1px);
}
#start-slider.start-slider-variant-2 #start-slider-selection a[aria-current="true"] .start-slider-label {
    font-weight: bold;
}
#start-slider.start-slider-variant-2 .start-slider-transport {
    flex: 0 0 auto;
    height: 52px;
    margin: 0 10px;
}

#start-slider .start-slide-page { margin-top: 16px; font: 12px Verdana, Arial, sans-serif; }
#start-slider .start-slide-page a { display: inline-block; padding: 8px 12px; border: 1px solid #222; background: #343434; color: rgb(var(--slider-text)); text-decoration: none; }
#start-slider .start-slide-page a:hover, #start-slider .start-slide-page a:focus-visible { background: #454545; text-decoration: underline; }