/* ===============  Layout-Variablen  =============== */
:root{
    --container-max: 1200px;
    --container-pad: 24px;
    --accent: #6b46c1;
}

/* ===============  Basis / Typo  =============== */
html, body {
    background:#f7f7f7;
}
body{
    font-family:'Open Sans', Arial, sans-serif;
    font-size:15px;
    line-height:1.6;
    color:#555;
}
h1,h2,h3,h4,h5,h6{
    font-weight:600;
    color:#333;
    letter-spacing:.02em;
}
a{
    color:darkslategrey;
    text-decoration:none;
    transition:color .2s ease, background-color .2s ease;
}
a:hover{
    color:#444;
    text-decoration:none;
}

/* Einheitlicher Container für Topbar, Content, Footer */
.container{
    max-width:var(--container-max);
    margin:0 auto;
    padding:0 var(--container-pad);
}

/* ===============  Topbar  =============== */
.topbar{
    background:#fff;
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid #eee;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.topbar .bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0; /* horizontales Padding kommt vom .container */
}
.nav-left{
    display:flex;
    align-items:center;
    gap:18px;
}
.nav-right{
    display:flex;
    align-items:center;
    gap:12px;
}
.brand{
    font-weight:700;
    letter-spacing:.3px
}
.topbar .nav-link{
    color:#444;
    font-weight:500;
    text-decoration:none;
    padding:8px 14px;
    border-radius:6px;
}
.topbar .nav-link:hover,
.topbar .nav-link:focus{
    background:#efefef;
    color:#111;
    text-decoration:none;
}
.search-form input[type="search"]{
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:8px;
    min-width:280px;
}

/* ===============  Slider  =============== */
.hero-slider{
    padding-top:15px;
    position:relative;
    overflow:hidden;
    background:#f7f7f7;
}
.hero-slider .slider-track{
    display:flex;
    transition:transform .5s ease;
}
.hero-slider .slide{
    flex:0 0 100%;
    max-height:256px;
}
.hero-slider .slide img{
    width:100%;
    height:256px;
    object-fit:contain;
    display:block;
}
.hero-slider .slide-prev,
.hero-slider .slide-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:rgba(0,0,0,.35);
    color:#fff;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
}
.hero-slider .slide-prev{
    left:14px;
}
.hero-slider .slide-next{
    right:14px;
}
.hero-slider .slide-prev:hover, .hero-slider .slide-next:hover{
    background:rgba(0,0,0,.55);
}
.hero-slider + *{
    margin-top:24px;
}

/* ===============  Produktliste / Karten  =============== */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:16px;
}
.card{
    border:1px solid #eee;
    border-radius:12px;
    padding:12px;
    background:#fff;
}
.thumb{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:10px;
}
.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.flags{
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    top:8px;
    left:8px;
    display:flex;
    gap:6px;
}
.flag{
    padding:6px 18px;
    border-radius:6px;
    font-size:1.7rem;
    color:#fff;
    font-weight:700;
}
.flag.new{
    background:#2ecc71;
    color:black
}
.flag.sale{
    background:#e74c3c;
}
.flag.sold{
    background:#555;
}
.price .old{
    text-decoration:line-through;
    margin-right:8px;
    color:#888;
}
.price .reduced{
    color:#e63946;
    font-weight: bold;
    font-size: 2.5rem;
}
.price .now{
    text-decoration:none;
    margin-right:8px;
    color:lightseagreen;
    font-weight: bold;
    font-size: 2.5rem;
}

.product{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding-top: 25px;
}
.product .main-img{
    width:100%;
    border-radius:12px;
}
.product .thumbs{
    list-style:none;
    display:flex;
    gap:8px;
    margin:8px 0 0;
    padding:0;
}
@media (max-width:900px){
    .product{
        grid-template-columns:1fr;
    }
}

/* ===============  Seitenabstände (statische Seiten etc.)  =============== */
.page{
    padding:25px 0;
}        /* nur vertikal – horizontale Abstände kommen vom .container */

/* ===============  Footer  =============== */
.site-footer{
    background:#fff;
    border-top:1px solid #e2e2e2;
    padding:20px 0px;
    font-size:14px;
    color:#666;
    font-weight:400;
    margin-top: 50px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    /* KEINE eigene max-width/margins – nutzt .container */
}
.footer-col h4{
    margin:0 0 14px;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
    color:#222;
    line-height:1.3;
}

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}
.footer-col ul li{
    margin:6px 0;
}
.footer-col a{
    color:#666;
    text-decoration:none;
}
.footer-col a:hover{
    color:#333;
    text-decoration:none;
}
.operator-text{
    /*white-space:pre-line;*/
    color:#555;
    margin-bottom:6px;
}
.op-contact{
    margin-top:4px;
    color:#555;
}
@media (max-width:900px){
    .footer-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

/* ===============  Pagination  =============== */
nav.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:30px 0;
    list-style:none;
    padding:0;
}
nav.pagination a, nav.pagination span{
    display:inline-block;
    padding:6px 12px;
    color:#555;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
}
nav.pagination a:hover{
    background:#f2f2f2;
    border-color:#ccc;
    color:#000;
}
nav.pagination .active a, nav.pagination .active span{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}
nav.pagination .disabled span{
    opacity:.4;
    cursor:not-allowed;
}

.product-slider {
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
}
.product-slider .slider-track {
    display:flex;
    transition:transform .5s ease;
    will-change:transform;
}
.product-slider .slide {
    flex:0 0 100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.product-slider .slide img {
    height:480px;
    width:auto;
    object-fit:contain;
    display:block;
}
@media (max-width:900px){
    .product-slider .slide img{
        height:340px;
    }
}
.product-slider .slide-prev,.product-slider .slide-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:rgba(0,0,0,.35);
    color:#fff;
    width:36px;
    height:36px;
    border-radius:50%;
}
.product-slider .slide-prev{
    left:12px;
}
.product-slider .slide-next{
    right:12px;
}
.product-slider .thumbs{
    display:flex;
    gap:8px;
    list-style:none;
    margin:10px 0 0;
    padding:0;
    overflow-x:auto;
}
.product-slider .thumb-btn{
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    border-radius:10px;
}
.product-slider .thumbs img{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #e5e5e5;
}
.product-slider .thumb-btn.active img{
    outline:2px solid #6b46c1;
    outline-offset:2px;
}
.product-slider {
    width: 100%;
}
.product-slider .slide {
    min-height: 320px;
} /* Sicherheitsnetz */
.product-slider .slide img {
    max-width: 100%;
}

.product-slider{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
}
.product-slider .slider-track{
    display:flex;
    transition:transform .5s ease;
    will-change:transform;
}
.product-slider .slide{
    display:flex;
    justify-content:center;
    align-items:center; /* keine width hier */
}
.product-slider .slide img{
    height:480px;
    width:auto;
    object-fit:contain;
    display:block;
}
@media (max-width:900px){
    .product-slider .slide img{
        height:340px;
    }
}



.info h1{
    font-size: 3rem;
    padding:5px;
}


.share-box{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:12px 0 4px;
}
.share-label{
    color:#666;
    margin-right:4px;
}
.share-btn{
    border:1px solid #ddd;
    background:#fff;
    color:#333;
    padding:6px 10px;
    border-radius:8px;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:background .2s, border-color .2s, color .2s;
}
.share-btn:hover{
    background:#f5f5f5;
    border-color:#ccc;
}
.share-btn.wa{
    color:#0a8f3f;
    border-color:#bfe6cb;
}
.share-btn.tg{
    color:#229ED9;
    border-color:#cdeafb;
}
.share-btn.fb{
    color:#1877F2;
    border-color:#cfe1ff;
}
.share-btn.x {
    color:#111;
    border-color:#ddd;
}
.share-btn.mail{
    color:#6b46c1;
    border-color:#dbcdf7;
}
.share-btn.copy{
    color:#444;
}

.share-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.share-label {
    font-weight: 600;
    color: #444;
    margin-right: 6px;
}
.share-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: white;
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
}
.share-icon svg {
    width: 20px;
    height: 20px;
}
.share-icon:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* Farben */
.share-icon.wa {
    background-color: #25D366;
}
.share-icon.fb {
    background-color: #1877F2;
}
.share-icon.x  {
    background-color: #000000;
}
.share-icon.mail {
    background-color: #6b46c1;
}
.share-icon.copy {
    background-color: #777;
}
.share-icon svg {
    display:block;
    width:20px;
    height:20px;
}

.footer-tax-note {
    font-size: 1rem;
    color: #777;            /* dezente graue Farbe */
    text-align: center;     /* mittig zentriert */
    margin-top: 1.5rem;
    padding-top: .5rem;
    border-top: 1px solid #eee; /* leichte Trennlinie optional */
}

.floating-logo {
    position: absolute;
    top: 10px;       /* Abstand von oben */
    left: 20px;      /* Abstand von links */
    z-index: 1000;   /* Damit es über der Navbar liegt */
}

.floating-logo-img {
    height: 125px;    /* Logo-Größe frei wählbar */
    width: auto;
    transition: transform 0.3s ease;
}

.floating-logo-img:hover {
    transform: scale(1.05); /* kleiner Hover-Effekt */
}
/* Topbar als Bezugspunkt für das absolute Logo */
.topbar { position: sticky; top: 0; z-index: 100; }
.topbar { position: relative; } /* zusätzlich, damit absolute Kind-Positionierung sicher ist */

/* Mindestens 150px Platz links für die Inhalte der Bar */
.topbar .bar {
    padding-left: 160px;  /* reserviert Platz für das floating Logo */
}

/* Floating-Logo bleibt absolut links oben */
.floating-logo {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 1000;
}

/* --- Mobil: Logo und Navbar untereinander --- */
@media (max-width: 720px) {
    /* Logo wieder in den normalen Fluss holen */
    .floating-logo {
        position: static;
        margin: 8px 20px;   /* optionaler seitlicher Abstand */
    }

    /* Kein linker Puffer nötig, weil Logo jetzt darüber steht */
    .topbar .bar {
        padding-left: 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}