/* Umlaut Ä für UTF-8-Zwang */

/* Smartphone-Modus aktiv?
@media (max-width: 768px) {
  .MainMenuSubMenuToggle {
    display: inline;
  }
}
*/

/* ==========================================================================
   Colors & Variables
   ========================================================================== */

:root {
    /* Colors */
    --color-henrys: #807040; /*#CCB173;*/
    --color-henrys-rgb: 204, 177, 115;
    --color-black: #0D1321;
    --color-black-rgb: 13, 19, 33;
    --color-gray-dark: #344458; /*#546478;*/
    --color-gray-dark-rgb: 84, 100, 120;
    --color-gray: #DBE0E6;
    --color-gray-light: #F3F5F7;
    --color-red: #BD1E1E;
    --color-red-rgb: 189, 30, 30;
    --color-blue: #49598B;
    --color-blue-rgb: 73, 89, 139;
    --color-green: #008b1b;
    --color-white: #ffffff;

    /* Shadows */
    --shadow-color: 0deg 0% 0%;
    --shadow-md:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
        0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.11),
        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.11),
        5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.11);
    --shadow-lg:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
        1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.1),
        2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.1),
        4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.1),
        7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.1),
        11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.1),
        17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.1),
        25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.1);
}

/* ==========================================================================
   Font Faces
   ========================================================================== */

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/inter-v18-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/inter-v18-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/inter-v18-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-v18-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
    box-sizing: border-box;
}

html, body {
    font-size: 15px;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 100;
    line-height: 1.5;
    background: var(--color-gray-light);
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Layout
   ========================================================================== */

#PageWrapper {
    background: var(--color-white);
    padding: 2rem 0;
    margin: 0 1rem;
}

.container {
    margin: 0 1rem;
}

.block {
    display: block;
    width: 100%;
}

.flex {
    display: flex;
}

.flex > div {
    flex: 1;
    padding: 1rem;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type=text],
input[type=password] {
    padding: .5rem;
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray);
    border-radius: .25rem;
    font-size: 1rem;
    width: 100%;
    outline-color: var(--color-henrys);
    outline-offset: 1px;
}

input[type=text]:focus,
input[type=password]:focus {
    background: var(--color-white);
    border: 1px solid var(--color-henrys);
}

input[type=checkbox] {
    border: 1px solid var(--color-gray);
}

label {
    font-size: .85rem;
    font-weight: 500;
    padding: 1rem 0 0 0;
    display: inline-block;
}

input[type=checkbox] + label,
input[type=radio] + label {
    display: inline;
    padding: 0;
}

input[type="button"] {
    padding: .5rem 1rem;
    border: none;
    cursor: pointer;
    background: var(--color-black);
    border: 1px solid var(--color-black);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    border-radius: .25rem;
    transition: all 120ms ease-in-out;
}

input[type="button"]:hover {
    background: var(--color-henrys);
    border-color: var(--color-henrys);
}

.FormField textarea,
.LocationMail textarea {
    padding: .5rem;
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray);
    border-radius: .25rem;
    font-size: 1rem;
    max-width: 100%;
    min-height: 6rem;
    outline-color: var(--color-henrys);
    outline-offset: 1px;
}

.LocationMail textarea {
    width: 100%;
}

.FormField select {
    padding: .5rem;
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray);
    border-radius: .25rem;
    font-size: 1rem;
    max-width: 100%;
    outline-color: var(--color-henrys);
    outline-offset: 1px;
}

.FormField.inline {
    display: flex;
    gap: .25rem;
    flex-direction: column;
    align-items: baseline;
}

.FormField.inline input {
    width: auto;
}

.FormField.inline .Narrow {
    flex: 1;
    font-style: italic;
}

.FormularWrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.FormularWrapper.shadow {
    background-color: var(--color-white);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.FormInline {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.FormInline label {
    display: block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.FormInline button {
    flex: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
.PosBidBuyBtn {
    padding: .5rem 1rem;
    cursor: pointer;
    background: var(--color-black);
    border: 1px solid var(--color-black);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    border-radius: .25rem;
    transition: all 120ms ease-in-out;
    text-align: center;
    display: inline-block;
}

.btn:hover,
.PosBidBuyBtn:hover {
    background: var(--color-henrys);
    border-color: var(--color-henrys);
    text-decoration: none;
}

.btn.btn-ghost {
    background-color: transparent;
    border: 1px solid var(--color-gray);
    color: var(--color-henrys);
    font-weight: 500;
}

.btn.btn-ghost:hover {
    background: rgba(var(--color-henrys-rgb), 0.125);
    border-color: var(--color-henrys);
}

a.ListBidBtn {
    padding: .5em 2rem;
    font-weight: 500;
    background: var(--color-black);
    border-radius: 2rem;
    color: var(--color-white);
    display: inline-block;
    transition: all 120ms ease-in-out;
}

a.ListBidBtn:hover {
    background: var(--color-henrys);
    text-decoration: none;
}

.ListGridCell a.ListBuyBtn {
    padding: .5em 1rem;
    font-weight: 500;
    background: var(--color-black);
    border-radius: 2rem;
    color: var(--color-white);
    display: block;
    text-align: center;
    transition: all 120ms ease-in-out;
}

.ListGridCell a.ListBuyBtn:hover {
    background: var(--color-henrys);
    text-decoration: none;
}

/* ==========================================================================
   Helper Classes
   ========================================================================== */

ul.inline {
    display: inline;
}

.spacer {
    display: block;
    height: 1rem;
    margin: .5rem 0;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.Narrow {
    font-size: .85em;
}

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

.text-center,
.Center {
    text-align: center;
}

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

.PgBody {
    padding: 1rem 0;
    color: var(--color-gray-dark);
}

.PgBody > h1:first-child {
    margin-top: 0;
}

.PgBody h1,
.PgBody h2 {
    color: var(--color-black);
}

.Gold {
    color: var(--color-henrys);
    font-weight: 700;
    padding: 0 0.1em;
}

.BigStrong {
    font-size: 1.2rem;
    font-weight: bold;
}

.FullWidthImgDiv {
    flex: 1;
}

.FullWidthImgDiv img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Message Boxes
   ========================================================================== */

.OkDiv,
.MessageDiv,
.ErrorDiv {
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid;
    text-align: center;
}

.OkDiv {
    background: #F1F8E9;
    border-color: var(--color-green);
}

.MessageDiv {
    background: #E3F2FD;
    border-color: #1E88E5;
}

.ErrorDiv {
    background: #FFEBEE;
    border-color: #F44336;
}

.OkDiv h2,
.MessageDiv h2,
.ErrorDiv h2 {
    font-weight: 100;
}

.OkDiv > h2:first-child,
.MessageDiv > h2:first-child,
.ErrorDiv > h2:first-child {
    margin-top: 0;
}

.WarnDiv {
    margin-top: 2rem;
    padding: 1rem;
    background: #FFEBEE;
    color: #D32F2F;
    border-radius: 1rem;
    font-size: .85rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.WarnDiv a {
    padding: .125rem .75rem;
    background: #D32F2F;
    color: var(--color-white);
    border-radius: .25rem;
    font-weight: 500;
    white-space: nowrap;
}

.WarnDiv a:hover {
    background: #F44336;
    text-decoration: none;
}

/* ==========================================================================
   Page Rows & CTAs
   ========================================================================== */

.PgRow {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.PgRow.two > div {
    flex: 1 1 calc(50% - 2rem);
}

.PgRow.three > div {
    flex: 1 1 calc(33.33% - 2rem);
}

.PgRow.four > div {
    flex: 1 1 calc(25% - 2rem);
}

.PgCTA {
    margin: 2rem 0;
    background: var(--color-henrys);
    color: var(--color-white);
    border-radius: 1rem;
    overflow: hidden;
}

.PgCTA img {
    display: inline-block;
    vertical-align: bottom;
}

.PgCTA.blue {
    background: var(--color-blue);
}

.PgCTAPic {
    display: inline-block;
    position: relative;
}

.PgCTA.blue .PgCTAPic:before {
    content: '';
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
}

.PgCTA.blue.text-right .PgCTAPic:before {
    background: linear-gradient(90deg, rgba(var(--color-blue-rgb),1) 1%, rgba(var(--color-blue-rgb),0) 100%);
    left: 0;
}

.PgCTA.blue.text-left .PgCTAPic:before {
    background: linear-gradient(90deg, rgba(var(--color-blue-rgb),0) 0%, rgba(var(--color-blue-rgb),1) 99%);
    right: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
    position: relative;
    padding-bottom: 1rem;
}

header #HeaderLogo {
    position: relative;
    width: 210px;
    margin-left: 50%;
    transform: translate(-124px, 0px);
    text-align: center;
}

header #HeaderLogo img {
  width: 248px;
  height: 130px;
}

@media (max-width: 1600px) {
  header #HeaderLogo img {
    width: 229px;
    height: 120px;
  }
}

/* Meta Menu */
#HeaderTop {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

#HeaderTopLeft {
    display: flex;
    padding-bottom: 3rem;
    gap: .5rem;
    width: 300px;
}

#HeaderTopRight ul {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

#HeaderTopRight ul li {
    margin: 0;
}

#HeaderTopRight ul li a {
    color: var(--color-henrys);
    font-weight: 500;
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .25rem;
    margin-right: 1px;
}

#HeaderTopRight ul li a:hover {
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--color-henrys);
}

#HeaderTopRight ul li button {
    color: var(--color-henrys);
    background: transparent;
    border: none;
    font-weight: 500;
    display: inline-block;
    padding: .45rem .5rem;
    border-radius: .25rem;
    margin-right: 1px;
}

#HeaderTopRight ul li button:hover {
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--color-henrys);
}

#HeaderTopRight ul li #LoginError a,
#HeaderTopRight ul li #LoginSpanLoggedOut a {
    padding: .25rem 1rem;
    border-radius: 2rem;
    transition: all 120ms ease-in;
    margin-left: 5px;
}

#HeaderTopRight ul li #LoginError a {
    color: var(--color-red);
    background: rgba(var(--color-red-rgb),.3);
}

#HeaderTopRight ul li #LoginError a:hover {
    color: var(--color-white);
    background: rgba(var(--color-red-rgb),1);
}

#HeaderTopRight ul li #LoginSpanLoggedIn {
    display: inline-block;
    padding: .25rem .5rem;
    color: var(--color-white);
    background-color: var(--color-green);
    font-weight: 500;
    border-radius: .25rem;
}

#HeaderTopRight ul li #LoginSpanLoggedOut a {
    background: var(--color-black);
    color: var(--color-white);
}

#HeaderTopRight ul li #LoginSpanLoggedOut a:hover {
    background: var(--color-henrys);
    color: var(--color-white);
}

#HeaderTopRight #LoginDiv {
    display: none;
    width: 320px;
    font-size: .85rem;
    position: absolute;
    right: 0;
    z-index: 100;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border-radius: 1rem;
    margin: 0 1rem;
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.9);
}

#HeaderTopRight #LoginDiv input[type="button"] {
    display: block;
    width: 100%;
}

/* Main Menu */
.HeaderBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

#MainMenu {
    width: 100%;
}

#MainMenu a {
    padding: .5rem .75rem;
    display: inline-block;
}

#MainMenu a:hover {
    text-decoration: none;
}

#MainMenu span {
    font-size: .85em;
    display: block;
    padding: .75rem;
    font-weight: 700;
}

#MainMenu ul {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
}

#MainMenu ul ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    opacity: 0;
    height: 0;
    transition: all 120ms ease-in;
    background: var(--color-henrys);
    box-shadow: none;
    overflow: hidden;
    z-index: 100;
}

#MainMenu ul li {
    margin: 0 0 .25rem 0;
    overflow: hidden;
}

#MainMenu ul ul li {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

#MainMenu ul ul li:last-child {
    padding-bottom: 0;
}

#MainMenu > ul > li > a {
    font-weight: 700;
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: .5rem;
    transition: all 120ms ease-in;
    display: block;
}

#MainMenu > ul > li > a:hover,
#MainMenu > ul > li:hover > a {
    background-color: var(--color-henrys);
    border-radius: .5rem .5rem 0 0;
}

@media (min-width: 768px) {
 #MainMenu > ul > li:hover ul {
     opacity: 1;
     height: auto;
     box-shadow: var(--shadow-lg);
 }
}

/* --- Dropdown bei Klick (per Klasse .open) --- */
#MainMenu > ul > li.open ul {
    opacity: 1;
    height: auto;
    box-shadow: var(--shadow-lg);
}

/* --- Kleine Formatierung für den Toggle-Button --- */
.MainMenuSubMenuToggle {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 0.8rem;
  margin-left: 0.25rem;
  margin-right: 1rem;
  cursor: pointer;
  display: none;
}

/* Smartphone-Modus aktiv? */
@media (max-width: 768px) {
  .MainMenuSubMenuToggle {
    display: inline;
  }
}

#MainMenu > ul ul a {
    font-size: .85em;
    color: var(--color-black);
    opacity: .6;
    transition: all 120ms ease-in;
    margin-top: 1px;
}

#MainMenu > ul ul a:hover {
    font-size: .85em;
    background-color: rgba(255,255,255,0.1);
    color: var(--color-black);
    transition: all 120ms ease-in;
    margin-top: 1px;
    opacity: 1;
}

/* Search */
#SearchDiv {
    color: var(--color-gray-dark);
}

#SearchDiv .SearchDivWrapper {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 1rem;
    margin: 1rem 0;
}

#SearchDiv .SearchCatNumber,
#SearchDiv .SearchRegSearch {
    display: flex;
    font-size: .85rem;
    align-items: center;
}

#SearchDiv .SearchCatNumber > span {
    display: flex;
    align-items: center;
}

#SearchDiv .SearchCatNumber img {
    display: block;
    width: 24px;
    height: auto;
    margin: 0 4px;
}

#SearchDiv .SearchCatNumber input,
#SearchDiv .SearchRegSearch input {
    width: auto;
    font-size: 13px;
    padding: .125rem .25rem;
    margin: 0 2px;
}

#SearchDiv .SearchCatNumber .SearchEnter {
    cursor: pointer;
}

#SearchDiv .SearchCatNumber .SearchEnter:hover {
    opacity: .7;
}

#SearchDiv .SearchRegSearch img {
    display: block;
    width: 18px;
    height: auto;
    margin: 0 4px;
}

#SearchDiv .SearchRegSearch img:hover {
    opacity: .7;
}

#SearchDiv #SearchDivOptions {
    position: relative;
}

#SearchDiv #SearchDivOptions {
    position: absolute;
    right: 0;
    display: none;
    width: 320px;
    font-size: .85rem;
    z-index: 100;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border-radius: 1rem;
    margin: 0 1rem;
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.9);
}

#SearchDiv #SearchDivOptions .SearchOptionGroup.flex {
    display: flex;
    align-items: center;
}

#SearchDiv #SearchDivOptions .SearchOptionGroup.flex span {
    white-space: nowrap;
}

/* ==========================================================================
   Navigation & Breadcrumbs
   ========================================================================== */

#LanguageDiv {
    text-align: left;
    margin-bottom: 10px;
}

#LanguageDiv + #IFrame {
    margin-top: -9px;
}

#LanguageDiv a {
    display: inline-block;
    background: #f3f5f7;
    border: 1px solid #dbe0e6;
    border-bottom: 0;
    padding: .5rem .75rem;
    color: #546578;
    font-size: .85rem;
    font-weight: 400;
    border-radius: .5rem .5rem 0 0;
    vertical-align: bottom;
    cursor: pointer;
}

#LanguageDiv a:hover {
    color: #0d1321;
    background: var(--color-white);
    text-decoration: none;
}

#LanguageDiv img {
    height: 12px;
    width: auto;
    margin-right: .25rem;
}

#MainBreadCrumb {
    padding: .25rem .5rem;
    background: var(--color-gray-light);
    font-size: .55rem;
    color: rgba(var(--color-gray-dark-rgb), 1);
    margin-bottom: 1rem;
    border-radius: 2rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

#MainBreadCrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#MainBreadCrumb ul li {
    display: inline;
    padding: .25rem 0;
}

#MainBreadCrumb ul li a {
    font-weight: 600;
    color: var(--color-gray-dark);
    display: inline-block;
}

#MainBreadCrumb li:after {
    content: '›';
    display: inline-block;
    font-size: 1.2em;
    margin-left: .5rem;
}

#MainBreadCrumb li:last-child:after {
    content: '';
}


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    text-align: center;
}

footer h3 {
    margin: 0;
    padding: 0 0 .5rem 0;
    border-bottom: 1px solid var(--color-gray);
}

footer h3 a {
    text-decoration: none;
    color: var(--color-black);
}

footer ul {
    padding: 0;
    list-style: none;
}

#BottomSitemap {
    padding: 2rem 0;
}

#BottomSitemap.flex {
    flex-direction: column;
}

#BottomSitemap > div {
    padding-bottom: 1rem;
}

#BottomSitemap > div:last-child {
    padding-bottom: 0;
}

#BottomSitemap li a {
    color: var(--color-gray-dark);
}

#BottomSitemap li a:hover {
    color: var(--color-black);
}

/* ==========================================================================
   Catalog (List)
   ========================================================================== */

#MainContentRows {
    display: block;
}

#LeftNavi strong {
    font-weight: 500;
}

#LeftNaviEntries ul {
    margin: 1.5rem 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}

#LeftNaviEntries li.Main a h1 {
    font-size: 2rem;
    color: var(--color-gray-dark);
    letter-spacing: -0.02em;
    font-weight: 400;
}

#LeftNaviEntries li.Main a h1 strong {
    font-size: 2rem;
    color: var(--color-black);
    font-weight: 700;
    text-transform: uppercase;
}

#LeftNaviEntries li.First a h2 {
    font-size: 1.4rem;
    color: var(--color-gray-dark);
    letter-spacing: -0.02em;
    font-weight: 400;
}

#LeftNaviEntries li.First a h2 strong {
    color: var(--color-black);
    font-weight: 700;
    text-transform: uppercase;
}

#LeftNaviEntries li a h3 {
    font-size: 0.8rem;
    color: var(--color-gray-dark);
    letter-spacing: -0.02em;
    font-weight: 400;
}

#LeftNaviEntries li a h3 strong {
    color: var(--color-gray-dark);
    font-weight: 700;
    text-transform: uppercase;
}

#LeftNaviEntries li a h4 {
    font-size: 0.6rem;
    color: var(--color-gray-dark);
    letter-spacing: -0.02em;
    font-weight: 400;
}

#LeftNaviEntries li a h4 strong {
    color: var(--color-gray-dark);
    font-weight: 700;
    text-transform: uppercase;
}

#LeftNaviEntries ul a {
    display: block;
    padding: .5rem;
    font-size: .95rem;
    color: var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray);
}

#LeftNaviEntries ul.Main a {
    display: block;
    padding: .5rem;
    font-size: .95rem;
    color: var(--color-gray-dark);
    border: none; /*1px solid var(--color-blue);*/
}

#LeftNaviEntries ul ul a {
    padding-left: 1.5rem;
}

#LeftNaviEntries ul a:hover,
#LeftNaviEntries ul a.Sel {
    color: var(--color-black);
    background: var(--color-gray-light);
    text-decoration: none;
}

#LeftNaviEntries ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#LeftNaviEntries .AuctionTermin {
    font-size: .8em;
    padding: 0 .5em;
    border-left: 2px solid var(--color-henrys);
    border-radius: 0;
    margin: .25rem 0 0 .5rem;
}

#LeftNaviEntries .AuctionTermin span {
    display: block;
    padding-left: 1rem;
}

#LeftNaviEntries .AuctionTermin span.date {
    background: url('../../Images/icon-list-auction-date.png') no-repeat left;
}

#LeftNaviEntries .AuctionTermin span.time {
    background: url('../../Images/icon-list-auction-time.png') no-repeat left;
}

#RightContent {
    flex: auto;
}

/* List Items */
.ListTabPos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: .5rem 0;
    border-top: 1px solid var(--color-gray);
}

.ListTabPosImg {
    flex: 1 0 auto;
    width: 100%;
    height: auto;
}

.ListTabPosImg img {
    display: block;
    width: 100%;
    height: auto;
}

.ListTabPosInfo {
    padding: 1rem;
    font-size: 1rem;
    color: var(--color-gray-dark);
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.ListTabPosInfo .ListTabPosTitle {
    font-weight: 700;
    color: var(--color-black);
    font-size: 1.2em;
    letter-spacing: -0.02em;
}

.ListTabPosPriceWrapper {
    flex: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ListGridNewWare {
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color-gray);
    padding: .25rem 1rem 0.25rem 1rem;
    color: var(--color-gray-dark);
    font-weight: 700;
    font-size: .7rem;
    border-radius: 0 0 0 0.5rem;
    margin-top: -0.5rem;
}

.ListGridPriceDiv {
    display: flex;
    justify-content: space-around;
    flex: 1 0 auto;
    align-items: flex-end;
}

.ListGridBtn {
    align-self: flex-end;
}

.ListTabPosPrice,
.ListGridPrice {
    font-size: 0.85rem;
    font-weight: 500;
    flex: 1;
}

.ListTabPosPrice .Price,
.ListGridPrice .Price {
    font-size: 1.5rem;
    color: var(--color-black);
    font-weight: 700;
    display: block;
}

.ListTabPosTxt {
    padding: 1rem 0;
    font-weight: 400;
    font-size: 1rem;
}

.ListTabPosTxt a {
    color: var(--color-gray-dark);
}

.ListTabPosTxt a:hover {
    text-decoration: none;
}

.ListTabPosNo {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
}

span.ListTermin {
    width: auto;
}

span.ListOrgaNo {
    font-weight: 500;
    color: var(--color-henrys);
}

span.ListId {
    flex: auto;
    font-weight: 500;
}

/* List Pagination */
.ListPager {
    display: flex;
    margin: 1rem 0;
    font-size: .85rem;
}

.ListPagerPages {
    flex: auto;
}

.ListPagerPages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ListPagerPages ul li {
    margin: 0;
    padding: 0;
    display: inline;
}

.ListPagerPages ul li a {
    padding: .25rem .75rem;
    display: inline-block;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: .25em;
    transition: all 120ms ease-in-out;
}

.ListPagerPages ul li.Sel a,
.ListPagerPages ul li a:hover {
    background: var(--color-henrys);
    text-decoration: none;
}

.ListPagerPages ul li.Next a,
.ListPagerPages ul li.Back a {
    color: var(--color-black);
    background: transparent;
}

.ListPagerPages ul li.Next a:hover,
.ListPagerPages ul li.Back a:hover {
    color: var(--color-henrys);
    background: transparent;
}

.ListPagerOptions {
    display: flex;
    align-items: center;
}

.ListPagerOptions label.Lab {
    padding: 0 .125rem 0 0;
}

.ListPagerOptions input.Direct {
    width: 2rem;
    font-size: 13px;
    padding: .125rem .25rem;
    margin: 0 2px;
}

.ListPagerOptions .enter,
.ListPagerOptions .change-view {
    cursor: pointer;
}

.ListPagerOptions .enter {
  margin: 0 1rem 0 .25rem;
  width: 19px;
  height: 19px;
}

.ListPagerOptions .change-view {
  margin-left: .25rem;
  width: 19px;
  height: 19px;
}

/* Smartphone-Modus aktiv? */
@media (max-width: 600px) {
  .ListPager {
    display: block;
    font-size: .50rem;
    text-align: center;
  }

  .ListPagerOptions {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding: 0;
  }
  .ListPagerOptions label.Lab {
    position: relative;
    top: -4px;
  }
  .ListPagerOptions input.Direct {
    position: relative;
    top: -4px;
    padding: 0;
  }
}



/* List Headers */
.ListHeader {
    background: var(--color-black);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.ListHeader img {
    display: block;
}

#ListHeadTitle,
#PosTitle {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    background: linear-gradient(77deg, var(--color-henrys) 0%, var(--color-black) 100%);
    border-radius: 1rem 1rem 0 0;
}

#ListHeadTitle #ListHeadTitleCategory,
#PosTitle #PosTitleCategory {
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

/* Smartphone-Modus aktiv? */
@media (max-width: 768px) {

#ListHeadTitle #ListHeadTitleCategory,
#PosTitle #PosTitleCategory {
    font-size: 1rem;
}

}

#ListHeadTitle #ListHeadTitleHitsBegin,
#PosTitle #PosTitleHitsBegin {
    color: var(--color-henrys);
    font-size: .85rem;
}

#ListJewellerySearchPanelShow {
    display: none;
}

#ListJewellerySearchPanel {
    padding: 2rem;
    background-color: rgba(var(--color-henrys-rgb),0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 1rem;
    text-align: center;
}

#ListJewellerySearchPanel a.btn-search {
    font-weight: 500;
    color: var(--color-black);
    background-color: rgba(var(--color-henrys-rgb),0.25);
    border: 1px solid rgba(var(--color-henrys-rgb),1);
    font-size: .9rem;
    padding: .5rem 1rem;
    border-radius: 2rem;
    margin: 1rem auto 0 auto;
    display: block;
    width: 50%;
    cursor: pointer;
}

#ListJewellerySearchPanel a.btn-search:hover {
    background: var(--color-white);
    text-decoration: none;
}

#ListJewellerySearchPanel #SrchLoupeImg {
    width: 15px;
    height: auto;
    vertical-align: middle;
}

.ListHead,
.PgHead {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

#ListHeadCtrl,
.PosPager {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 1rem .5rem;
    background-color: var(--color-gray-light);
}

#ListHeadCtrl label,
.PosPager label {
    padding: 0;
    color: var(--color-gray-dark);
}

.ListHeadCell,
.PgHeadCell {
  flex: 1;
  padding: 2rem;
  /*color: #edf1a3;*/
  color: var(--color-white);
  background: var(--color-black);
}

.ListHeadCell strong,
.PgHeadCell strong {
    color: var(--color-white);
    font-weight: 400;
    /*text-transform: uppercase;*/
    opacity: .7;
}

.PgHead .PgHeadCell {
    background: var(--color-black);
}

.PgHead .PgHeadCellPic,
.ListHeadCellPic {
    position: relative;
}

.PgHead .PgHeadCellPic:before,
.ListHeadCellPic:before {
    content: '';
    background: linear-gradient(90deg, rgba(var(--color-black-rgb),1) 1%, rgba(var(--color-black-rgb),0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30%;
}

.PgHead.blue .PgHeadCell {
    background: var(--color-blue);
}

.PgHead.blue .PgHeadCellPic:before {
    background: linear-gradient(90deg, rgba(var(--color-blue-rgb),1) 1%, rgba(var(--color-blue-rgb),0) 100%);
}

.ListHeadCell h1,
.PgHeadCell h1 {
    margin: 0 0 3rem 0;
    line-height: 1;
    font-size: 3rem;
    font-weight: 100;
    color: var(--color-white) !important;
}

/* Smartphone-Modus aktiv? */
@media (max-width: 480px) {
 .ListHeadCell h1,
 .PgHeadCell h1 {
    font-size: 1rem;
    font-weight: 600;
  }
}

.PgHeadCell a {
  color: var(--color-gray-light) !important;
}

#ListHeadCalendar {
    font-size: .85rem;
}

#ListHeadCalendar a {
    font-weight: 500;
    color: var(--color-black);
}

#ListHeadCalendar img {
    width: 18px;
    height: auto;
    vertical-align: middle;
}

.ListHeadCellPic img,
.PgHeadCellPic img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Grid Layout */
.ListGridCells {
    display: flex;
    flex-wrap: wrap;
}

.ListGridCell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 2rem 0;
    color: var(--color-gray-dark);
}

.ListGridCell img {
    width: 100%;
    height: auto;
}

.ListGridCell .ListGridPosNo {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    flex: 1 1 auto;
    padding-top: 1rem;
}

.ListGridCell .ListGridTxt {
    padding: 1rem 0;
    font-weight: 400;
    font-size: 1rem;
}

.ListGridCell .ListGridTxt a {
    color: var(--color-gray-dark);
}

.ListGridCell .ListGridTxt a:hover {
    text-decoration: none;
}

/* ==========================================================================
   Detail View
   ========================================================================== */

.PosPagerUL {
    font-size: .85rem;
    margin: .5rem 0;
}

.PosPagerUL ul {
    margin: 0;
    padding: 0;
}

.PosPagerUL ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

.PosPagerUL ul li a {
    color: var(--color-gray-dark);
}

.PosPagerUL ul li a:hover {
    color: var(--color-black);
    text-decoration: none;
}

.PosPagerUL ul li.Back a {
    background: url('../../Images/icon-left.png') no-repeat left;
    background-size: 15px;
    padding-left: 20px;
    margin-right: .25rem;
}

.PosPagerUL ul li.Next a {
    background: url('../../Images/icon-right.png') no-repeat right;
    background-size: 15px;
    padding-right: 20px;
    margin-left: .25rem;
}

.PosPagerRight {
    font-size: .85rem;
}

.PosPagerRight a {
    color: var(--color-gray-dark);
}

/* Position Info */
.PosInfoWrapper {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.PosInfoWrapper #PosThumbs {
    flex: auto;
}

#PosThumbsMainPicRef {
    display: block;
    padding: 0 .25rem 1rem .25rem;
    width: 100%;
}

#PosThumbsMainPicRef img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: var(--shadow-md);
}

.PosInfoWrapper #PosImages .PosThumbsDiv {
    display: flex;
    flex-wrap: wrap;
}

.PosInfoWrapper #PosImages .PosThumbsPicDiv {
    width: 33%;
    padding: .25rem;
    cursor: pointer;
    transition: all 120ms ease-in-out;
}

.PosInfoWrapper #PosImages .PosThumbsPicDiv:hover {
    background: var(--color-henrys);
}

.PosInfoWrapper #PosImages .PosThumbsPicDiv img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--color-white);
    transition: all 120ms ease-in-out;
}

.PosInfoWrapper #PosImages .PosThumbsPicDiv:hover img {
    -webkit-filter: brightness(1.25);
    filter: brightness(1.25);
}

.PosInfoWrapper #PosImages #OrgImages {
    padding: 1rem 0;
}

.PosInfoWrapper #PosImages a.OrgImage {
    display: inline-block;
    padding: .25rem 1rem;
    background: var(--color-gray-light);
    border-radius: 1rem;
    margin-bottom: .5rem;
    font-size: .85rem;
    color: var(--color-gray-dark);
}

.PosInfoWrapper #PosImages a.OrgImage:hover {
    background: var(--color-henrys);
    color: var(--color-white);
    text-decoration: none;
}

.PosInfoHeadWrapper {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--color-gray-dark);
}

#PosInfoTitle {
    margin: 1rem 0;
    font-weight: 700;
    font-size: 2rem;
}

#PosInfoTxt {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.FormerSalePriceSpan {
    text-decoration: line-through;
}

p.CurrPrice {
    text-align: right;
}

p.CurrPrice span {
    font-size: 2rem;
    margin-left: .25rem;
    font-weight: 700;
}

span.ListValPrice {
    color: var(--color-green);
}

span.ListExPrice {
    color: var(--color-black);
}

span.ListGridStateRed {
    color: var(--color-red);
    text-transform: uppercase;
    font-weight: 700;
}

#PosInfoMenu .OrderByPhone {
    font-size: 1.5rem;
    text-align: center;
}

ul.PosInfoMenuFeatures {
    display: flex;
    margin: 1rem 0;
    padding: 1rem 0;
    list-style: none;
    justify-content: space-between;
    border-top: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
}

ul.PosInfoMenuFeatures li {
    margin-left: 1rem;
}

ul.PosInfoMenuFeatures li:first-child {
    margin-left: 0;
    flex: auto;
}

ul.PosInfoMenuFeatures li .Loupe,
ul.PosInfoMenuFeatures li span {
    background-position: left;
    background-repeat: no-repeat;
    background-size: 16px;
    padding: .25rem .25rem .25rem 1.5rem;
}

ul.PosInfoMenuFeatures li .Loupe {
    flex: auto;
    background-image: url('../../Images/icon-zoom-img.png?x');
    color: var(--color-black);
    font-weight: 500;
}

ul.PosInfoMenuFeatures li span {
    color: var(--color-gray-dark);
}

ul.PosInfoMenuFeatures li .Clicks {
    background-image: url('../../Images/icon-clicks.png?x');
}

ul.PosInfoMenuFeatures li .Monitor {
    background-image: url('../../Images/icon-monitor.png?x');
}

#PosInfoMenu ul.links {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding: 0;
    font-size: 0.85rem;
    justify-content: center;
    font-weight: 400;
}

#PosInfoMenu ul.links li {
    display: inline;
    margin: 0 .5em;
    padding: 0;
}

#PosInfoMenu ul.links li a {
    color: var(--color-blue);
}

/* ==========================================================================
   Content Cards
   ========================================================================== */

.ContentSectionCards {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
}

.ContentSectionCards.gallery {
    flex-direction: column;
}

.ContentSectionCards.gallery .CardImage {
    width: 100%;
}

.ContentSectionCards .ContentCard {
    flex: 1;
    border-radius: 1rem;
    overflow: hidden;
}

.ContentSectionCards .ContentCard.double {
    min-width: 75%;
}

.ContentSectionCards .ContentCard h2 {
    font-weight: 100;
}

.ContentSectionCards .ContentCard h2:first-child {
    margin-top: 0;
}

.ContentSectionCards .ContentCard .CardImage img {
    width: 100%;
    height: auto;
    display: block;
}

.ContentSectionCards .ContentCard .CardBody {
    padding: 2rem;
    background-color: rgba(var(--color-henrys-rgb), 0.25);
}

.ContentSectionCards .ContentCard.blue .CardBody {
    padding: 2rem;
    background-color: rgba(var(--color-blue-rgb), 0.125);
}

.ContentCard > a {
    display: block;
    width: 100%;
}

.ContentCard > a > img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.CardBody p {
    color: rgba(0,0,0,.6);
}

.CardBody strong {
    color: rgba(0,0,0,1);
}

@media (max-width: 768px) {
  .CardBody h2 {
    font-size: 1.5em;
  }
}

.CardBody h3 {
    font-weight: 400;
    border-bottom: 1px solid rgba(0,0,0, .15);
}

.CardBody a {
    color: #0c1321;
    text-decoration: underline;
}

.CardBody a.btn {
    color: var(--color-white);
    text-decoration: none;
}

/* ==========================================================================
   Contact Persons
   ========================================================================== */

.ContactPersons {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    color: var(--color-gray-dark);
}

.ContactPersons > div {
    flex-direction: row;
}

.ContactPersons > div img {
    flex: 0 0 60%; /* 40% der Breite für das Bild */
    height: auto;
}

.ContactPersons > div {
    flex: 1 1 auto;
    display: flex;
    align-content: flex-start;
    justify-items: flex-start;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--color-gray-light);
    box-shadow: var(--shadow-md);
    flex-direction: column;
}

.ContactPersons > div img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.ContactPersons h3 {
    border-bottom: 1px solid var(--color-gray);
    color: var(--color-black);
}

.ContactPersons > div h4 {
  font-size: 1rem;
}


/* ==========================================================================
   Accordion
   ========================================================================== */

.question {
    padding: 1rem 2rem;
}

.question h2 {
    font-size: 1rem;
    margin: 0;
}

.accordion .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 2rem;
}

.accordion .question {
    cursor: pointer;
    padding: 1rem 2rem;
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray);
    margin-top: 5px;
    border-radius: .25rem;
}

.accordion .question:hover {
    border: 1px solid var(--color-gray-dark);
}

/* ==========================================================================
   Home Tiles
   ========================================================================== */

.HomeTileNaviDiv {
    margin-top: 2rem;
}

.HomeTileNaviDivAlternative {
    margin-top: 3rem;
    font-size: 1rem;
}

.HomeTileNaviDivAlternative .HomeTile {
    background: transparent;
}

.HomeTileNaviDivAlternative .HomeTile a {
    display: block;
    padding: .25rem .5rem;
    color: var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray);
}

.HomeTileNaviDivAlternative .HomeTile a:hover {
    text-decoration: none;
    font-weight: 500;
    color: var(--color-black);
}

.HomeTileDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.HomeTileDiv .HomeTile {
    display: flex;
    flex: 1 1 100%;
    background: transparent;
}

.HomeTile {
    background: var(--color-blue);
}

.HomeTile span {
    display: flex;
}

.HomeTile a {
    text-decoration: none;
    color: var(--color-white);
    padding: 1rem;
    background: var(--color-gray-light);
    display: block;
    flex: 1;
    transition: all 200ms;
}

.HomeTileDiv .HomeTile a {
    border-radius: 1rem;
}

.HomeTile a:hover {
    background: var(--color-black);
}

.HomeTile img {
    width: 32px;
    height: 32px;
}

.HomeTile h3 {
    font-size: 1.2rem;
    margin: 0 0 0 8px;
    color: var(--color-black);
    text-transform: uppercase;
    font-weight: 400;
}

.HomeTile a:hover h3 {
    color: var(--color-henrys);
}

#LeftNavi .HomeTile h3 {
    font-size: 1rem;
}

.HomeTile p {
    font-size: .85rem;
    color: var(--color-gray-dark);
}

.HomeTile a:hover p {
    color: var(--color-white);
}

#LeftNavi .HomeTile {
    display: flex;
    background: transparent;
    margin: 0 0 1px 0;
    flex: 1;
    min-width: 24%;
}

#LeftNavi .HomeTile:first-child a {
    border-radius: 1rem 1rem 0 0;
}

#LeftNavi .HomeTile:last-child a {
    border-radius: 0 0 1rem 1rem;
}

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

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: .5rem;
    left: 1rem;
    /*right: .5rem;*/
    z-index: 1001;
    padding: 10px;
    background-color: var(--color-black);
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.menu-toggle:hover {
    background-color: var(--color-henrys);
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background-color: var(--color-white);
    border-radius: 3px;
    transform-origin: center;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.menu-toggle span:last-child {
    margin-bottom: 0;
}

.menu-toggle.active span:first-child {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:last-child {
    transform: translateY(-8px) rotate(-45deg);
}

.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.menu-overlay.active {
    display: block;
}

/* ==========================================================================
   Sliders
   ========================================================================== */

.image-slider {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
    z-index: 1;
}

.image-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 1s ease-in-out;
}

.image-slider img.active {
    opacity: 1;
    z-index: 1;
}

.image-slider .dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
    padding: 4px 8px;
}

.image-slider .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s ease;
}

.image-slider .dot.active {
    background: rgba(255, 255, 255, 1);
}

.custom-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: height 0.3s ease;
    margin-bottom: 1rem;
    border-radius: 1rem;
}

.custom-slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.custom-slider .slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.custom-slider .slide-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
}

.custom-slider .slide-content {
    flex: 1;
    max-width: 40%;
    padding: 0px 2rem;
    text-align: center;
}

.custom-slider .slide-content h2 {
    margin-bottom: 0.5em;
    font-size: 2.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 100;
    opacity: 0.9;
}

.custom-slider .slide-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5em;
    font-weight: 400;
    opacity: 0.9;
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--color-gray-dark);
    padding: 10px 20px;
    border-radius: 10px;
}

.custom-slider .slide-content p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.custom-slider .product-image {
    flex: 1;
    /*max-width: 32%;*/ /* Wirkt sich auf Slider-Höhe aus */
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.custom-slider .product-image img {
    max-width: 100%;
    height: auto;
}

.custom-slider .pagination {
    padding: 15px 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.custom-slider .pagination button {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-slider .pagination button:hover {
    transform: scale(1.2);
}

/* ==========================================================================
   Location & Contact
   ========================================================================== */

#LocationContact > a {
    margin-bottom: 1rem;
    display: block;
    font-weight: 700;
}

.LocationPartner img,
.LocationPerson img {
    width: 100%;
    height: auto;
}

.LocationPerson table td {
    margin: 0;
    padding: 0;
}

.LocationMail input,
.LocationMail textarea {
    margin: .25rem 0;
    font-family: sans-serif;
}

/* ==========================================================================
   Top Results
   ========================================================================== */

.TopResultsPos {
    display: flex;
    flex-direction: column;
}

.TopResultsPosLeft img {
    width: 100%;
    height: auto;
}

.TopResultsPosRight {
    flex: 1;
    padding: 0 0 0 2rem;
}

/* ==========================================================================
   Misc Elements
   ========================================================================== */

#IFrame {
    display: block;
    border: 1px solid #dbe0e6;
    width: 100%;
    min-height: 400px;
    min-width: 200px;
}

#LiveAuctionIFrame {
    display: block;
    border: 1px solid #dbe0e6;
    width: 100%;
    min-height: 900px;
}

object#BiddingOrder {
    width: 100%;
    min-height: 50vh;
}

iframe.fullheight {
    height: 100%;
    width: 100%;
    border: none;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (min-width: 768px) {
    html, body {
        font-size: 16px;
    }
    
    .flex {
        display: flex;
    }
    
    .flex > div {
        flex: 1;
        padding: 1rem;
    }

    #MainMenu ul {
        flex-direction: row;
        justify-content: center;
    }

    #MainMenu ul li {
        flex: 1;
        text-align: center;
        margin: 0 .25rem 0 0;
    }

    #MainMenu > ul > li > a {
        display: block;
    }

    .ListGridCell {
        width: 50%;
        padding: 0 0 2rem 0;
    }

    .ListGridCell:nth-child(odd) {
        padding: 0 2rem 2rem 0;
    }

    .ListGridImg {
        flex: 0 1 auto;
        display: flex;
        overflow: hidden;
        align-items: flex-start;
        justify-content: center;
    }

    .ListGridImg a {
        display: flex;
        flex: 1 1 auto;
    }

    .ListGridImg a img {
        flex: 1 1 auto;
        height: 360px;
        width: auto !important;
        max-width: 100%;
        object-fit: contain;
    }    

    .ListTabPos {
        flex-direction: row;
    }

    .ListTabPosImg {
        width: 25%;
        max-width: 250px;
    }

    footer {
        text-align: left;
    }

    .ContentSectionCards.two,
    .ContentSectionCards.three,
    .ContentSectionCards.four {
        flex-direction: row;
    }

    .ContentSectionCards.two .ContentCard {
        flex: 1 1 calc(50% - 2rem);
    }

    .ContentSectionCards.three .ContentCard {
        flex: 1 1 calc(50% - 2rem);
    }

    .ContentSectionCards.four .ContentCard {
        flex: 1 1 calc(50% - 2rem);
    }

    .ContentSectionCards .ContentCard {
        display: flex;
    }

    .ContentSectionCards .ContentCard .CardImage {
        width: 200px;
    }

    .ContentSectionCards .ContentCard .CardImage img {
        height: 100%;
        object-fit: cover;
    }

    .ContentSectionCards .ContentCard .CardBody {
        flex: 1;
    }

    .ContentSectionCards.gallery {
        flex-direction: row;
    }

    .ContentSectionCards.gallery .CardImage {
        width: 100%;
    }

    .ContactPersons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ContactPersons > div {
        flex: 1 1 calc(50% - 1rem);
    }

    .HomeTileDiv .HomeTile {
        flex: 1 1 calc(50% - 1rem);
    }

    .TopResultsPos {
        flex-direction: row;
    }

    .TopResultsPosLeft {
        width: 300px;
    }

    .custom-slider .slide-content h1 {
        font-size: 2rem;
    }

    .custom-slider .slide-content p {
        font-size: 1rem;
    }
}

@media (max-width: 1023px) {
    #LeftNavi {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--color-white);
        z-index: 1000;
        overflow-y: auto;
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        padding: 1rem;
        padding-top: 3.5rem;
    }

    #LeftNavi.active {
        left: 0;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle.active {
        position: fixed;
    }
}

@media (min-width: 1024px) {
    header #HeaderLogo {
        position: absolute;
    }

    #MetaMenuWrapper {
        flex-direction: row-reverse;
        gap: 0;
        min-height: 130px;
    }

    #HeaderTopRight ul {
        margin: 0;
    }

    .HeaderBottom {
        flex-direction: row;
    }

    #MainMenu {
        width: auto;
    }

    #MainMenu ul li {
        flex: auto;
        text-align: left;
    }

    #SearchDiv .SearchDivWrapper {
        flex-direction: row;
        gap: 0;
        margin: 0;
    }

    #MainBreadCrumb {
        padding: .25rem 1rem;
        font-size: .85rem;
    }

    #MainContentRows {
        display: flex;
    }

    #RightContent {
        flex: auto;
        margin-left: 2rem;
    }

    #LeftNavi {
        min-width: 320px;
        width: 20%;
    }

    .PosInfoWrapper {
        flex-direction: row;
    }

    .PosInfoWrapper #PosThumbs {
        width: 400px;
    }

    .PosInfoWrapper #PosInfo {
        margin-left: 1rem;
        padding: 1rem;
    }

    #PosInfoMenu .OrderByPhone {
        text-align: left;
    }

    .ListHead,
    .PgHead {
        flex-direction: row;
    }

    #ListHeadCtrl,
    .PosPager {
        flex-direction: row;
        padding: .5rem 1.5rem;
    }

    .PosPagerUL {
        margin: 0;
    }

    .PageWrapper {
        width: 960px;
        margin: 0 auto;
    }

    #BottomSitemap.flex {
        flex-direction: row;
    }

    #BottomSitemap > div {
        padding-bottom: 0;
    }

    .FormField.inline {
        gap: 1rem;
        flex-direction: row;
    }

    .FormField.inline label {
        flex: 1 1 12rem;
        max-width: 12rem;
        padding-top: 0;
        text-align: right;
    }

    .newsletter-opt-in .FormField.inline {
        gap: 0;
        flex-direction: column;
        padding-left: 13rem;
        margin-bottom: 1rem;
    }
    .newsletter-opt-in .FormField.inline label {
        width: auto;
        text-align: left;
        flex: 1 1 auto;
    }    

    .FormMarkup.inline {
        padding-left: 13rem;
    }
}

@media (min-width: 1280px) {
    .PageWrapper {
        width: 1200px;
    }

    #MetaMenuWrapper {
        min-height: auto;
    }

    .ListGridCell {
        width: 33%;
        padding: 0 2rem 2rem 0;
    }

    .ContentSectionCards {
        flex-direction: row;
    }

    .ContentSectionCards.two .ContentCard {
        flex: 1 1 calc(50% - 2rem);
    }

    .ContentSectionCards.three .ContentCard {
        flex: 1 1 calc(33.33% - 2rem);
    }

    .ContentSectionCards.four .ContentCard {
        flex: 1 1 calc(25% - 2rem);
    }

    .ContentSectionCards .ContentCard {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .ContentSectionCards .ContentCard .CardImage {
        width: 100%;
    }

    .ContactPersons h3 {
        border-color: transparent;
    }

    .ContactPersons > div {
        flex-direction: row;
        gap: 1.5rem;
        border-radius: 0;
        border-top: 2px solid var(--color-gray);
        box-shadow: none;
    }

    .ContactPersons > div img {
        width: 220px;
    }

    .ContactPersons > div > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: space-between;
        padding: 0;
    }

    .HomeTileDiv .HomeTile {
        flex: 1 1 calc(25% - 1rem);
    }

    .TopResultsPosLeft {
        width: 500px;
    }
}

@media (min-width: 1440px) {
    .PageWrapper {
        width: 1500px;
    }
}

@media (min-width: 1600px) {
    html, body {
        font-size: 18px;
    }
    .PageWrapper {
        width: 1500px;
    }
}

@media (min-width: 1920px) {
    .PageWrapper {
        width: 90%;
    }

    .ListTabPosImg {
        max-width: 400px;
    }

    .ListGridCell {
        width: 25%;
    }
}

@media (min-width: 2200px) {
    .ListGridCell {
        width: 20%;
    }
    .ListGridImg a img {
        height: 460px;
    }        
}

@media (max-width: 992px) {
    .custom-slider .slide-content h1 {
        font-size: 2rem;
    }

    .custom-slider .slide-content h2 {
        font-size: 1.3rem;
    }

    .custom-slider .slide-content p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .custom-slider .slide-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .custom-slider .slide-content,
    .custom-slider .product-image {
        max-width: 100%;
        margin: 10px 0;
    }

    .custom-slider .product-image {
        order: -1;
        margin-bottom: 20px;
    }

    .custom-slider .slide-content h1 {
        font-size: 1.8rem;
    }

    .custom-slider .pagination {
        bottom: 10px;
    }

    .custom-slider .slide-content {
        padding: 15px;
        margin: 0;
    }

    .custom-slider .slide-content h1 br {
        display: inline;
    }
}

@media (max-width: 480px) {

 #HeaderTop {
   display: block;
   margin: 0;
   padding: 0;
 }
 
 #HeaderTopLeft
 {
   margin-top: 10px;
   margin-left: 70px;
   height: 30px;
   text-align: center;
 }

 #HeaderTopRight ul {
   margin: 0;
   padding: 0;
   padding-bottom: 10px;
 }



    .custom-slider .slide-content h1 {
        font-size: 1.5rem;
    }

    .custom-slider .slide-content h2 {
        font-size: 1.1rem;
    }

    .custom-slider .slide-background {
        opacity: 0.7 !important;
    }

    .custom-slider .slide-content {
        padding: 12px;
    }

    .custom-slider .pagination {
        bottom: 5px;
    }
}