/*  (c) by www.wyss4web.ch – bereinigt fuer .NET-Version (Inline-Styles in Klassen ueberfuehrt) */

:root {
    --text-base: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --text-size-xxs: 12px;
    --text-size-xs: 14px;
    --text-size-sm: 16px;
    --text-size-base: 18px;
    --text-size-md: 22px;
    --text-size-lg: 28px;
    --text-size-xl: 32px;

    --text-color-base: #414141;
    --text-color-header: #1b1b1b;
    --text-color-navigation: #414141;
    --text-color-drawer: #414141;
    --text-color-card: #414141;
    --text-color-content: #414141;
    --text-color-content-second: #84745d;
    --text-color-footer: #414141;
    --text-color-button: #050505;
    --text-color-label: #a9a9a9;

    --bg-color-base: #ffffff;
    --bg-color-header: #ffffff;
    --bg-color-navigation: #ffffff;
    --bg-color-drawer: #F0EFEB;
    --bg-color-card: #F0EFEB;
    --bg-color-content: #ffffff;
    --bg-color-footer: #ffffff;
    --bg-color-button: #c1b7ad;

    --xxs: 4px;
    --xs: 8px;
    --sm: 12px;
    --md: 16px;
    --lg: 32px;
    --xl: 48px;
    --xxl: 64px;
    --xxxl: 128px;
}

/*  BEGIN CSS RESET */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text-color-base);
    background-color: var(--bg-color-base);
    text-align: center;
    font-family: var(--text-base);
    font-size: var(--text-size-base);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

strong {
    font-weight: 500;
}

/* --------------- END CSS RESET -------------- */


/* --------------- GENERIC STYLES -------------- */
h1 {
    font-size: var(--text-size-lg);
    font-weight: 400;
    padding: var(--xxs) 0 var(--xxs) 0;
    color: var(--text-color-content-second);
}

h2 {
    font-size: var(--text-size-md);
    font-weight: 500;
    padding: var(--xs) 0 var(--xxs) 0;
}

h3 {
    font-size: var(--text-size-md);
    font-weight: 500;
    padding: var(--xs) 0 var(--xxs) 0;
}

ul {
    list-style-type: square;
}

li {
    padding-top: var(--xs);
}

a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    color: var(--text-color-content-second);
}

.a-cnt {
    color: var(--text-color-content-second);
}

.a-cnt::before,
.a-cnt--dark::before,
.naviItem::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: var(--text-color-content-second);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.a-cnt:hover {
    border-bottom: none;
}

.a-cnt:hover::before,
.a-cnt--dark:hover::before,
.naviItem:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.a-cnt--dark {
    color: var(--text-color-button);
}

.a-cnt--dark:hover {
    border-bottom: none;
    color: var(--text-color-content-second);
}

.button {
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: var(--xxs) var(--md);
    border-radius: var(--xs);
    color: var(--text-color-button);
    background-color: var(--bg-color-button);
    cursor: pointer;
}

.button:focus {
    outline: none;
}

.inputSearch {
    border-radius: var(--xs);
    padding-left: var(--xs);
    border: 1px solid var(--bg-color-drawer);
    background-color: var(--bg-color-drawer);
}

.inputSearch:focus {
    outline: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* Such-Icon ist jetzt ein <button> (vorher <svg onclick>) -> Browser-Standardstil neutralisieren */
.iconSearch,
.iconSearchAZ,
.iconSearchMobile {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.iconSearch svg,
.iconSearchAZ svg,
.iconSearchMobile svg {
    width: 100%;
    height: 100%;
}

.iconSearch {
    width: 30px;
    position: absolute;
    top: 2px;
    height: 30px;
    vertical-align: middle;
    right: 0;
}

.iconSearchAZ {
    width: 30px;
    position: absolute;
    top: 50px;
    height: 30px;
    vertical-align: middle;
    right: 130px;
}

::placeholder {
    color: #a9a9a9;
    opacity: 1;
}

hr {
    border-top: 1px solid var(--bg-color-drawer);
}

.clear {
    clear: both;
}

.showDesktop {
    display: block;
}

.text-bold {
    font-weight: 500;
}

.font-xxs { font-size: var(--text-size-xxs); }
.font-xs  { font-size: var(--text-size-xs); }
.font-sm  { font-size: var(--text-size-sm); }
.font-base { font-size: var(--text-size-base); }
.font-md  { font-size: var(--text-size-md); }
.font-lg  { font-size: var(--text-size-lg); }
.font-xl  { font-size: var(--text-size-xl); }

.pb-xxs { padding-bottom: var(--xxs); }
.pb-xs  { padding-bottom: var(--xs); }
.pb-sm  { padding-bottom: var(--sm); }
.pb-md  { padding-bottom: var(--md); }
.pb-lg  { padding-bottom: var(--lg); }
.pb-xl  { padding-bottom: var(--xl); }
.pb-xxl { padding-bottom: var(--xxl); }

.pt-xxs { padding-top: var(--xxs); }
.pt-xs  { padding-top: var(--xs); }
.pt-sm  { padding-top: var(--sm); }
.pt-md  { padding-top: var(--md); }
.pt-lg  { padding-top: var(--lg); }
.pt-xl  { padding-top: var(--xl); }
.pt-xxl { padding-top: var(--xxl); }

.pl-xxs { padding-left: var(--xxs); }
.pl-xs  { padding-left: var(--xs); }
.pl-sm  { padding-left: var(--sm); }
.pl-md  { padding-left: var(--md); }
.pl-lg  { padding-left: var(--lg); }
.pl-xl  { padding-left: var(--xl); }
.pl-xxl { padding-left: var(--xxl); }

.pr-xxs { padding-right: var(--xxs); }
.pr-xs  { padding-right: var(--xs); }
.pr-sm  { padding-right: var(--sm); }
.pr-md  { padding-right: var(--md); }
.pr-lg  { padding-right: var(--lg); }
.pr-xl  { padding-right: var(--xl); }
.pr-xxl { padding-right: var(--xxl); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.border-radius-sm {
    border-radius: var(--sm);
}

.scroll-to {
    line-height: 1;
    scroll-margin-top: 30px;
}

/* ---- Hilfsklassen (vorher style="…" im CMS-Template) ---- */
.relative     { position: relative; }
.color-second { color: var(--text-color-content-second); }
.color-label  { color: var(--text-color-label); }
.color-base   { color: var(--text-color-base); }
.va-m         { vertical-align: middle; }
.pb-0         { padding-bottom: 0; }
.inline-flex  { display: inline-flex; }
.w-300        { width: 300px; max-width: 100%; }
.sold-pict    { filter: grayscale(0.8); }
.sold-pict img { width: 150px; }
.form-error   { color: #b00020; padding-top: var(--md); }
.hp-field     { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------- LAYOUT STYLES -------------- */
article {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

header {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid var(--text-color-content-second);
    padding-bottom: var(--md);
}

.header-logo {
    width: 200px;
}

main {
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
    text-align: left;
    padding: var(--xl);
}

footer {
    color: var(--text-color-footer);
    background-color: var(--bg-color-footer);
    border-top: 1px solid var(--text-color-content-second);
    padding: var(--lg) 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color: var(--text-color-content-second);
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
}

.footer-cell {
    padding-top: 96px;
}

/* -------- Content styles ----------- */

.detail-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--lg);
    padding-bottom: var(--xl);
}

.detail-container {
    display: grid;
    grid-template-columns: 540px auto;
    padding-bottom: var(--xxxl);
}

.detail-cnt {
    padding-left: var(--xl);
}

.detail-sold-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.home-image-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--xl);
    color: var(--text-color-base);
}

/* Startseite: links die Künstlerliste, rechts die neuen Werke in 2 Spalten */
.home-image-container.home-new {
    grid-template-columns: 1fr 2fr;
    align-items: start;
}

.home-works {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--xl);
}

.home-image-card {
    position: relative;
    overflow: hidden;
    padding: var(--lg);
    background-color: var(--bg-color-card);
    border-radius: var(--xs);
}

.image-card {
    text-align: center;
}

.image-card:hover .image-card--pict {
    transform: scale(1.08);
}

.image-card:hover .image-card--a {
    color: var(--text-color-content-second);
}

.image-card--pict {
    transition: transform .2s;
    border-radius: var(--xxs);
    padding: var(--sm);
}

.image-card--a {
    color: var(--text-color-base);
}

.home-image-link {
    position: absolute;
    bottom: 50px;
    right: 50px;
}

/* ---- Kuenstler A - Z ---- */
.reference:target {
    animation: highlightChar 3s ease-in-out;
}

@keyframes highlightChar {
    0%   { color: #c2aa88; }
    10%  { color: #b69f7f; }
    20%  { color: #a18c6f; }
    30%  { color: #8f7c62; }
    40%  { color: #7b6a53; }
    50%  { color: #70614c; }
    60%  { color: #5c4f3d; }
    70%  { color: #493f31; }
    80%  { color: #3b3327; }
    90%  { color: #242019; }
    100% { color: #000; }
}

.a-z-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--xxxl);
}

.a-z-char-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--md);
}

.a-z-list-container {
    display: grid;
    grid-template-columns: 60px auto;
    gap: var(--md);
}

.a-z-char-item {
    padding: var(--sm) 0 var(--md) 0;
    background-color: var(--bg-color-drawer);
    text-align: center;
    height: 60px;
    font-size: var(--text-size-md);
    border-radius: 4px;
}

.a-z-char-item:hover {
    background-color: var(--bg-color-button);
}

/* ---- Bildergalerie Detailseite ---- */
.grid-preview-images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding-top: var(--md);
    gap: var(--sm);
}

.preview-image-cnt {
    border: 0;
    cursor: pointer;
    height: 60px;
    overflow: hidden;
}

.preview-image-cnt--selected {
    border: 4px solid var(--text-color-content-second);
}

.preview-image {
    border: 1px solid #fff;
}

.image-fadeout {
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.image-fadein {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

.obj-image-screen-size {
    position: relative;
    cursor: zoom-in;
}

.next, .prev {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 43%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.next.onmodal, .prev.onmodal {
    opacity: 0.8;
    z-index: 100;
    cursor: pointer;
}

.next {
    right: -45px;
}

.prev {
    left: 25px;
}

.obj-image-screen-size:hover .next,
.obj-image-screen-size:hover .prev {
    opacity: 0.9;
    cursor: pointer;
}

.arrow {
    color: white;
    font-size: 40px;
    padding: 4px 24px;
    text-shadow: 6px 1px 0px rgba(0, 0, 0, 1);
    user-select: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal.is-open {
    display: block;
}

.modal-inner {
    margin: 50px;
    height: 90%;
}

.modal-content {
    margin: auto;
    display: block;
    max-height: 90vh;
    max-width: 90vw;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #bbb;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #f1f1f1;
    text-decoration: none;
}

/* ------ Navigation ------- */
.naviContainer {
    background: var(--bg-color-navigation);
    color: var(--text-color-navigation);
    display: grid;
    grid-template-columns: repeat(6, 1fr) 45px;
    gap: var(--md);
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
}

.naviItem {
    font-size: var(--text-size-base);
    color: var(--text-color-navigation);
    position: relative;
    text-decoration: none;
}

.naviItem.active {
    color: var(--text-color-content-second);
    font-weight: 500;
}

.drawerContainer {
    color: var(--text-color-content-second);
    display: none;
    position: absolute;
    right: 30px;
    top: 35px;
    width: 50px;
    height: 40px;
    cursor: pointer;
}

.drawer {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-color-drawer);
    padding-top: calc(100% - 180px);
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.25s linear;
}

.drawer.active {
    top: 0;
    transform: translate3d(0, 0, 0);
    z-index: 100;
}

.drawer > p > a {
    font-size: var(--xl);
}

#nav-icon2 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 50%;
    background: var(--text-color-content-second);
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
    left: 50%;
    border-radius: 0 var(--xxs) var(--xxs) 0;
}

#nav-icon2 span:nth-child(odd) {
    left: 0px;
    border-radius: var(--xxs) 0 0 var(--xxs);
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) { top: 0px; }
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) { top: 14px; }
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) { top: 28px; }

#nav-icon2.open span:nth-child(1), #nav-icon2.open span:nth-child(6) { transform: rotate(45deg); }
#nav-icon2.open span:nth-child(2), #nav-icon2.open span:nth-child(5) { transform: rotate(-45deg); }
#nav-icon2.open span:nth-child(1) { left: 5px; top: 10px; }
#nav-icon2.open span:nth-child(2) { left: calc(50% - 5px); top: 10px; }
#nav-icon2.open span:nth-child(3) { left: -50%; opacity: 0; }
#nav-icon2.open span:nth-child(4) { left: 100%; opacity: 0; }
#nav-icon2.open span:nth-child(5) { left: 5px; top: 25px; }
#nav-icon2.open span:nth-child(6) { left: calc(50% - 5px); top: 25px; }


/* *********************************************** DEVICE SETTINGS *********************************************** */
@media screen and (max-width: 1260px) {
    article {
        padding: 0 var(--lg);
    }
}

@media screen and (max-width: 767px) {

    :root {
        --text-nav-base: 18px;
        --text-size-xxs: 10px;
        --text-size-xs: 12px;
        --text-size-sm: 14px;
        --text-size-base: 16px;
        --text-size-md: 20px;
        --text-size-lg: 24px;
        --text-size-xl: 28px;

        --xxs: 2px;
        --xs: 4px;
        --sm: 8px;
        --md: 12px;
        --lg: 16px;
        --xl: 24px;
        --xxl: 40px;
    }

    .showDesktop {
        display: none;
    }

    .scroll-to {
        scroll-margin-top: 130px;
    }

    h1 {
        line-height: 1.3;
        font-size: 1.6rem;
    }

    main {
        padding: var(--md) var(--xl) var(--xxl) var(--xl);
        margin-top: 130px;
    }

    header {
        position: fixed;
        z-index: 100;
        background: var(--bg-color-navigation);
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-content > .text-right {
        text-align: center;
    }

    .footer-cell {
        padding-top: 24px;
    }

    .header-logo {
        width: 120px;
    }

    article {
        padding: 0;
    }

    .home-image-container,
    .home-image-container.home-new,
    .home-works {
        grid-template-columns: 1fr;
    }

    .home-image-link {
        bottom: 10px;
        right: 10px;
    }

    .detail-header {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: var(--lg);
    }

    .detail-container {
        grid-template-columns: 1fr;
        padding-bottom: var(--md);
    }

    .detail-cnt {
        padding-left: var(--md);
        padding-top: var(--lg);
        padding-bottom: var(--xxl);
    }

    .a-z-container {
        grid-template-columns: 1fr;
        gap: var(--xxl);
    }

    .a-z-char-item {
        padding: var(--md);
    }

    .iconSearchAZ {
        top: 25px;
        right: 130px;
    }

    .inputSearchMobile {
        border-radius: var(--xs);
        padding: var(--md);
        border: 1px solid var(--bg-color-drawer);
        width: 80vw;
        font-size: var(--text-size-md);
    }

    .inputSearchMobile:focus {
        outline: none;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }

    .iconSearchMobile {
        width: 40px;
        position: absolute;
        top: 30px;
        height: 40px;
        vertical-align: middle;
        right: 50px;
    }

    /* ------ Artist image paging and zoom ------- */
    .modal-content {
        height: auto;
        width: 90vw;
    }

    .close {
        top: 0;
    }

    .modal {
        z-index: 10000;
    }

    .next, .prev {
        opacity: 0.9;
    }

    .next.onmodal, .prev.onmodal {
        z-index: 100;
        top: 80%;
    }

    .modal-inner {
        margin: 80px 0;
    }

    /* ------ Navigation ------- */
    .naviContainer {
        display: none;
    }

    .drawerContainer {
        position: fixed;
        display: block;
        z-index: 1000;
    }
}