:root{

    --gold:#b58a32;
    --dark:#1f2328;
    --light:#f6f3ef;

}

body{

    background:var(--light);
    font-family:Arial,Helvetica,sans-serif;
    color:#333;
}

#mainNav{

    background:transparent;
    transition:.35s;
}

.navbar-brand{

    font-size:1.6rem;
    font-weight:700;
    letter-spacing:1px;
}

.nav-link{

    color:#fff !important;
    margin-left:15px;
    font-weight:500;
}

.nav-link:hover{

    color:var(--gold)!important;
}

.hero{

    min-height:60vh;

    display:flex;

    align-items:center;

    background:
        linear-gradient(
            rgba(0,0,0,.55),
            rgba(0,0,0,.45)
        ),
        url("../img/hero.jpg");

    background-size:cover;

    background-position:center;

}

.hero h1{

    font-family:Georgia,serif;
color:#fff;
    font-size:5.2rem;

    font-weight:700;

}

.hero p{

    max-width:650px;

    font-size:1.35rem;

}

.btn-gold{

    background:var(--gold);

    color:white;

    border-radius:40px;

    padding:14px 35px;

    border:none;
}

.btn-gold:hover{

    background:#9d7527;

    color:white;
}

.welcome{

    background:white;
}

.welcome h2{

    font-family:Georgia,serif;

    margin-bottom:25px;
}

.site-footer{

    background:#faf9f6;

    border-top:3px solid #b58a32;

    padding:70px 0;

}

.site-footer a{

    color:#444;

}

.site-footer a:hover{

    color:#b58a32;

}
/* ==========================
   Navigation
========================== */

#mainNav{

    padding:20px 0;

    transition:.4s;

    background:rgba(20,20,20,.15);

    backdrop-filter:blur(12px);

}

.logo-title{

    color:white;

    font-size:1.5rem;

    font-weight:700;

    letter-spacing:2px;

}

.logo-subtitle{

    color:#d4af37;

    font-size:.78rem;

    letter-spacing:1px;

}

.nav-link{

    color:white !important;

    margin-left:1px;

    font-size:.95rem;

    letter-spacing:.5px;

}

.nav-link:hover{

    color:#d4af37 !important;

}
.section-about{

    background:white;

    padding:120px 0;

}

.section-small{

    color:#b58a32;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

}

.section-about h2{

    font-family:Georgia,serif;

    font-size:2.8rem;

    margin:15px 0 30px;

}

.collection{

    background:#f8f6f2;

    padding:120px 0;

}

.collection-box{

    background:white;

    border-radius:18px;

    padding:45px;

    transition:.35s;

    height:100%;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.collection-box:hover{

    transform:translateY(-10px);

}

.collection-box i{

    font-size:3rem;

    color:#b58a32;

}

.collection-box h3{

    margin-top:25px;

    font-family:Georgia,serif;

}
.categories{

    padding:120px 0;

    background:#f8f6f2;

}

.category-card{

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:20px;

    text-decoration:none;

}

.category-card{

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:18px;

    text-decoration:none;

    max-width:340px;
    margin:0 auto;

}

.category-card:hover img{

    transform:scale(1.08);

}
.category-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}
.category-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.10));

    display:;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

}

.category-overlay h3{

    color:white;

    font-family:Georgia,serif;

    font-size:2rem;

}

.category-overlay p{

    color:#d7b15c;

    margin:0;

}
.facts{

    background:white;

    padding:120px 0;

}

.fact-box{

    padding:30px;

}

.fact-number{

    font-size:3rem;

    font-weight:700;

    color:var(--gold);

    font-family:"Cormorant Garamond",serif;

    margin-bottom:15px;

}

.fact-box h4{

    margin-bottom:15px;

    font-weight:600;

}
.page-hero{

    padding:180px 0 100px;

    background:
        linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
        url("../img/history-header.jpg") center/cover;

    color:white;

}

.page-hero h1{

    font-size:4rem;

    margin-bottom:20px;

}
/* ===========================
   Hero Unterseiten
=========================== */

.page-hero{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

}

.page-hero-slot{

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/spielautomaten.jpg");

    background-size:cover;

    background-position:center;

}

.hero-content{

    max-width:600px;
        
}
.hero-content h1{

    font-size:4rem;
    line-height:1.1;

}

@media (max-width:768px){

    .hero-content h1{

        font-size:2.2rem !important;
        line-height:1.2;

    }

}

@media (max-width:480px){

    .hero-content h1{

        font-size:2.8rem !important;

    }

}

.hero-kicker{

    color:#d4af37;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.9rem;

}

.page-hero h1{

    margin:20px 0;

    font-size:4rem;

}

.page-hero p{

    font-size:1.3rem;

}

/* ===========================
   Inhaltsnavigation
=========================== */

.article-nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;

}

.article-nav a{

    text-decoration:none;

    color:#555;

    padding:10px 18px;

    border:1px solid #ddd;

    border-radius:30px;

    transition:.3s;

}

.article-nav a:hover{

    background:#b58a32;

    color:#fff;

    border-color:#b58a32;

}
.article{

    text-align:;

}

.article-image{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:50px auto;

    padding:10px;

    width:fit-content;

    background:#fff;

    border-radius:12px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);
	
	-moz-opacity: 0.5; opacity: 0.5;

}

.article-image img{

    display:block;

    width:200px;

    height:auto;

    margin:0 auto;

    border-radius:8px;

}

.article-image figcaption{

    margin-top:15px;

    text-align:center;

    color:#666;

    font-style:italic;

}

.image-caption{

    text-align:center;

    font-size:.9rem;

    color:#666;

    margin-top:12px;

    font-style:italic;

}

/* ==========================
   Artikelseiten
========================== */

.article{

    padding:90px 0 120px;

}

.article h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2.8rem;

    margin-bottom:35px;

    color:#222;

}

.article p{

    font-size:1.08rem;

    line-height:1.9;

    color:#4d4d4d;

    margin-bottom:1.6rem;

}


.article-note{

    border-left:4px solid #b58a32;

    background:#faf8f3;

    padding:20px 25px;

    margin:40px 0;

    font-style:italic;

}
.page-hero-slot{

    min-height:55vh;

    display:flex;

    align-items:center;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/spielautomaten.jpg") center/cover;

    color:#fff;

}
.page-hero-restoration{

    min-height:55vh;

    display:flex;

    align-items:center;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/restaurierung.jpg") center/cover;

    color:#fff;

}

.hero-content{

    max-width:760px;

    margin:auto;

}

.hero-kicker{

    color:#c9a34e;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.9rem;

}

.page-hero h1{

    font-size:4rem;

    margin:20px 0;

}

.article{

    padding:80px 0 120px;

}

.article p{

    font-size:1.08rem;

    line-height:1.9;

    color:#444;

}


.article-image figcaption{

    margin-top:15px;

    color:#666;

    font-style:italic;

}
.page-hero-vending{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/warenautomaten.jpg")
    center center/cover no-repeat;

}
.page-hero-slotmachine{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/slotmachine.jpg")
    center center/cover no-repeat;

}
.page-hero-links{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/links.jpg")
    center center/cover no-repeat;

}
.page-hero-pinball{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/flipper.jpg")
    center center/cover no-repeat;

}
.page-hero-pez{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/pez.jpg")
    center center/cover no-repeat;

}
.page-hero-books{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/books.jpg")
    center center/cover no-repeat;

}

.book-cover{

    max-width:200px;
    width:100%;
    height:auto;

    border-radius:10px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}
.page-hero-contact{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/kontakt.jpg")
    center center/cover no-repeat;

}
.page-hero-imprint{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/impressum.jpg")
    center center/cover no-repeat;

}
.page-hero-privacy{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../img/hero/datenschutz.jpg")
    center center/cover no-repeat;

}
.page-hero-story{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
    url("../img/hero/story.jpg")
    center center/cover no-repeat;

}
.page-hero-members{

    min-height:55vh;

    display:flex;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
    url("../img/hero/members.jpg")
    center center/cover no-repeat;

}
.navbar .nav-link.active {
    color: #ffc107 !important;
    font-weight: 600;
}

.dropdown-item.active {
    background-color: #0d6efd;
    color: #fff;
}
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img {
    display: block;
    margin: 0 0;
}
/* ==========================================
   Back to Top
========================================== */

#toTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#b8860b;

    color:#fff;

    border-radius:50%;

    text-decoration:none;

    font-size:22px;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

#toTop:hover{

    background:#d4a017;

    color:#fff;

    transform:translateY(-3px);

}

#toTop.show{

    opacity:1;

    visibility:visible;

}
/* ==========================================
   Suchfeld Navbar
========================================== */

.navbar form input{

    min-width:220px;

}

.navbar form .btn{

    font-weight:600;

}
/* ==============================
   Nach-oben-Pfeil
============================== */

#toTop{

    position:fixed;

    right:20px;

    bottom:20px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#ffc107;

    color:#222;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

    box-shadow:0 4px 10px rgba(0,0,0,.3);

}

#toTop.show{

    opacity:1;

    visibility:visible;

}

#toTop:hover{

    transform:translateY(-3px);

    background:#ffca2c;

}

/* Handy */

@media (max-width:768px){

    #toTop{

        width:42px;

        height:42px;

        right:15px;

        bottom:15px;

        font-size:20px;

    }

}
/* =========================
   Footer responsive
========================= */

footer .row > div{
    margin-bottom:25px;
}

@media (max-width:768px){

    footer{
        text-align:center;
    }

    footer h4{
        margin-bottom:15px;
    }

    footer ul{
        padding-left:0;
    }

    footer ul li{
        margin-bottom:8px;
    }

    footer .text-lg-end{
        text-align:center !important;
    }

    footer .text-md-start,
    footer .text-md-end{
        text-align:center !important;
    }

    footer .display-6,
    footer .fs-5,
    footer h5{
        margin-bottom:5px;
    }

}
/* ==========================
   Responsive Überschriften
========================== */

.page-hero h1{
    font-size:3rem;
    font-weight:700;
}

@media (max-width:768px){

    .page-hero h1{
        font-size:2.9rem;
        line-height:1.2;
        word-break:break-word;
    }

}
@media (max-width:768px){

    .hero{

        min-height:40vh;

        padding:60px 0;

    }

}
.hero .lead{

    color:#ffc107;

    font-size:1.25rem;

    font-weight:500;

    text-shadow:1px 1px 6px rgba(0,0,0,.7);

}
.navbar-brand img{
    height:60px;
    width:auto;
    transition:0.3s ease;
}

.navbar-brand img:hover{
    transform:scale(1.05);
}

@media (max-width:768px){
    .navbar-brand img{
        height:45px;
    }
}
.btn-primary{

    background:#ffc107 !important;

    border-color:#ffc107 !important;

    color:#222 !important;

    border-radius:30px;

    font-weight:600;

    box-shadow:0 4px 10px rgba(0,0,0,.25);

    transition:.3s;

}

.btn-primary:hover{

    background:#ffca2c !important;

    border-color:#ffca2c !important;

    color:#222 !important;

    transform:translateY(-3px);

    box-shadow:0 6px 15px rgba(0,0,0,.30);

}
.btn-outline-primary{

    color:#222 !important;

    border:2px solid #ffc107 !important;

    background:#ffc107 !important;

    border-radius:30px;

    font-weight:600;

    box-shadow:0 4px 10px rgba(0,0,0,.25);

    transition:.3s;

}

.btn-outline-primary:hover{

    background:#ffca2c !important;

    border-color:#ffca2c !important;

    color:#222 !important;

    transform:translateY(-3px);

    box-shadow:0 6px 15px rgba(0,0,0,.30);

}
.search-btn{

    background:transparent;
    border:none;
    color:#d4af37;
    padding:0 8px;
    font-size:1.2rem;

}

.search-btn:hover{

    background:transparent;
    color:#fff;

}

.search-btn:focus,
.search-btn:active{

    background:transparent !important;
    border:none;
    box-shadow:none !important;
    color:#fff;

}
/* ======================================
   Neuer Header
====================================== */

.site-header{

    position:relative;

    height:200px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:      
        url("../img/header/header-bg.jpg") center center;

    border-bottom:4px solid #c7a34d;

    box-shadow:
        inset 0 -40px 80px rgba(0,0,0,.35);

}

.header-overlay{

    position:absolute;

    inset:5;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.15),
        rgba(0,0,0,.45)
    );

}

.header-logo-0{

    position:relative;

    z-index:2;

    text-align:center;

    padding-top:35px;

}
.header-logo{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo{

    max-height:150px;

}

.bajazoo{

    position:relative;

    left:20px;

    top:30px;

    max-height:120px;

}

.header-logo img{

    max-width:500px;

    width:100%;

    height:auto;

    filter:
        drop-shadow(0 5px 15px rgba(0,0,0,.7));

}

.header-subtitle{

    margin-top:15px;

    color:#e6c56d;

    letter-spacing:2px;

    font-size:1rem;

    

}
/* ==========================================
   Vintage Navbar
========================================== */

.vintage-navbar{

    background:
        linear-gradient(rgba(45,26,10,.95),rgba(30,15,5,.95)),
        url("../img/header/wood-nav.jpg") center/cover;

    border-top:0px solid #e0c77b;
    border-bottom:2px solid #6b471e;

    box-shadow:
        0 4px 15px rgba(0,0,0,.35);

    min-height:72px;

}

.vintage-navbar .navbar-brand img{

    height:75px;

}

.vintage-navbar .navbar-nav{

    gap:8px;

}

.vintage-navbar .nav-link{

    color:#d9b46c !important;

    font-family:Georgia,serif;

    font-size:1.05rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    padding:12px 18px !important;

    border-radius:30px;

    transition:.3s;

    text-shadow:
        0 1px 1px #000,
        0 0 6px rgba(255,215,120,.25);

}

.vintage-navbar .nav-link:hover{

    color:#fff8df !important;

    background:rgba(212,175,55,.12);

}

.vintage-navbar .nav-link.active{

    color:#fff !important;

    background:
        linear-gradient(
            to bottom,
            #f2d894,
            #d0a257,
            #8f5d22
        );

    box-shadow:

        inset 0 2px rgba(255,255,255,.45),

        0 3px 8px rgba(0,0,0,.45);

}

.dropdown-menu{

    background:#2d1a0d;

    border:1px solid #b78b3d;

    border-radius:15px;

    padding:8px;

}

.dropdown-item{

    color:#d9b46c;

    border-radius:8px;

    transition:.25s;

}

.dropdown-item:hover{

    background:#b58a32;

    color:white;

}
/* =====================================
   Navigation zentrieren
===================================== */

.vintage-navbar .container{
    justify-content:center;
}

.vintage-navbar .navbar-collapse{
    justify-content:center;
}

.vintage-navbar .navbar-nav{
    align-items:center;
}
/* ==========================================
   Vintage Navigation
========================================== */

.vintage-navbar{

    background:
        linear-gradient(
            to bottom,
            rgba(90,55,20,.15),
            rgba(0,0,0,.25)
        ),
        url("../img/header/wood-nav.jpg") center center/cover no-repeat;

    border-top:0px solid #e0c77b;
    border-bottom:3px solid #5a3416;

    box-shadow:
        inset 0 1px rgba(255,255,255,.20),
        0 6px 18px rgba(0,0,0,.35);

    min-height:70px;
}
.navbar input{

    background:#f4efe6;

    border:2px solid #b58a32;

    border-radius:25px;

}

/* ==========================================
   Suchfeld
========================================== */

.navbar .form-control{

    background:#f5f2ea;
    border:1px solid #b58a32;
    color:#333;
    border-radius:25px;

}

.navbar .form-control:focus{

    background:#fff;
    border-color:#c8a24d;
    box-shadow:none !important;
    outline:none;

}
/* Suchfeld Browser-X entfernen */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
    -webkit-appearance:none;
    appearance:none;
    display:none;
}

input[type="search"]{
    appearance:textfield;
    -webkit-appearance:textfield;
}
/* ==========================================
   Suchpanel
========================================== */

.search-panel{

    max-height:0;

    overflow:hidden;

    background:#2c1b0d;

    transition:.35s;

}

.search-panel.open{

    max-height:80px;

}

.search-panel form{

    padding:18px 0;

}

.search-panel input{

    width:100%;

    background:#f8f4ec;

    border:2px solid #b58a32;

    border-radius:30px;

    padding:12px 20px;

    outline:none;

}

.search-toggle{

    font-size:1.15rem;

    color:#d4af37 !important;

}

.search-toggle:hover{

    color:#fff !important;

}
@media (max-width:991px){

    .navbar-nav{

        text-align:center;
        padding:15px 0;

    }

    .navbar-nav .nav-link{

        font-size:1.2rem;
        padding:14px 0 !important;

    }

}
/* ==========================================
   Mobile Navbar
========================================== */

.navbar-toggler{

    border:2px solid #c8a24d;
    border-radius:12px;
    padding:10px 14px;
    background:rgba(40,25,10,.75);

}

.navbar-toggler i{

    font-size:2.8rem;
    color:#d4af37;
    line-height:1;

}

.navbar-toggler:hover{

    background:rgba(212,175,55,.15);

}

.navbar-toggler:focus{

    box-shadow:none;

}
.site-footer{

    background:
        url("../img/header/header-bg.jpg") center top repeat;

    border-top:4px solid var(--gold);

    color:#eee;

    padding:70px 0 30px;

    margin-top:0px;

    position:relative;

}
.card-img-top {
    height: 100px;
    width: auto;
    object-fit: contain;
    padding: 20px;
    display: block;
    margin: 0 auto;
}