@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Inter-VariableFont.woff2') format('woff2')}@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/GreatVibes-Regular.woff2') format('woff2')}body,header{display:flex}.card-img-container::before,.hero{background-size:cover;background-position:center}*,::after,::before,input,select,main,textarea{box-sizing:border-box}button,input,select,textarea{width:100%;padding:15px;min-height:52px}.card:hover,.pricing-card:hover{transform:translateY(-10px)}.footer-col ul li a,nav a{color:var(--muted);font-size:14px}.btn-cta,.footer-col ul li a,nav a{transition:.3s;text-decoration:none}.card,.modal{overflow:hidden}.btn-cta,.modal-close,button{cursor:pointer}.btn-cta,.btn-primary,.btn-secondary,.card,.footer-col ul li a,nav a{text-decoration:none}:root{--bg:#0a0a0a;--card-bg:#141414;--text:#ffffff;--accent:#d4af37;--muted:#888888;--border:#222222}body{background-color:var(--bg);color:var(--text);font-family:Inter,sans-serif;margin:0;-webkit-font-smoothing:antialiased;flex-direction:column;min-height:100vh}header{padding:30px 5%;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:rgba(10,10,10,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.logo{font-size:26px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--accent);line-height:1}.btn-cta,.logo-slogan{color:var(--accent);letter-spacing:1px}.logo-slogan{font-family:'Great Vibes',cursive;font-size:19px;text-transform:none;margin-top:5px}nav a{margin-left:30px}.hero span,nav a:hover{color:var(--accent)}.btn-cta{border:1px solid var(--accent);padding:10px 20px;border-radius:2px;text-transform:uppercase;font-size:12px;background-color:transparent}.btn-cta:hover{background-color:var(--accent);color:var(--bg)}main{padding:60px 5%;max-width:1400px;margin:0 auto;flex:1;width:100%}.hero{text-align:center;padding:150px 0;margin-bottom:80px;background-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('../img/headerbild.png');border-bottom:1px solid var(--accent)}.grid-four,.grid-large{display:grid;margin-bottom:60px}.card:hover,.pricing-card.popular,.pricing-card:hover{border-color:var(--accent)}.hero h1{font-size:4rem;font-weight:300;margin-bottom:20px;letter-spacing:-1px;text-shadow:0 2px 10px rgba(0,0,0,.5)}.hero p,form{max-width:600px;margin:0 auto}.hero p{font-size:1.2rem;color:#ccc;line-height:1.6}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px}.grid-large{grid-template-columns:1fr 1fr;gap:40px}.grid-four{grid-template-columns:repeat(4,1fr);gap:20px}.card{background:var(--card-bg);border:1px solid var(--border);transition:.4s cubic-bezier(.165, .84, .44, 1);color:inherit;display:block}.card-brand,.product-brand{color:var(--accent);letter-spacing:2px;text-transform:uppercase}.card-img-container{width:100%;height:300px;background-color:#000;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.pricing-card,form{background:var(--card-bg);border:1px solid var(--border)}.card-brand,.custom-checkbox-input:checked+.custom-checkbox-box::after{display:block}.card-img-container::before{content:"";position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;background-image:var(--bg-img);filter:blur(20px) brightness(.6);z-index:1}.card-large .card-img-container{height:380px}.card-small .card-img-container{height:200px}.card img{width:100%;height:100%;object-fit:contain;transition:transform .5s;position:relative;z-index:2;filter:drop-shadow(0 5px 15px rgba(0,0,0,.5))}.card:hover img{transform:scale(1.05)}.card-content{padding:25px}.card-brand{font-size:11px}.details-grid,.intro-grid{display:grid;grid-template-columns:1fr 1fr}.card-title{font-size:20px;margin:10px 0;font-weight:400}.card-price{font-family:Inter,sans-serif;font-weight:700;font-size:18px}.pricing-fee,.product-title{font-family:'Playfair Display',serif}form{padding:40px}input,select,textarea{background:#000;border:1px solid var(--border);margin:10px 0 25px;color:#fff;font-family:inherit}button{background:var(--accent);color:#000;border:none;font-weight:700;text-transform:uppercase}.details-grid{gap:60px;align-items:start}.details-img{height:auto!important;min-height:500px;border:1px solid var(--border);padding:20px}.details-img img{width:auto;height:auto;max-width:100%;object-fit:contain;max-height:500px}.product-brand{font-size:.9em}.product-title{margin:10px 0 20px;font-size:2.5rem}.product-price{font-size:1.8rem;margin-bottom:30px;font-weight:300}.product-description{margin-bottom:40px;line-height:1.8;color:#ccc;font-size:1.1rem}.intro-grid{gap:40px;margin-bottom:60px;align-items:start}.pricing-grid,.process-grid{display:grid;gap:30px;margin-bottom:60px}.process-grid{grid-template-columns:repeat(4,1fr)}.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.pricing-card{padding:40px 30px;position:relative;display:flex;flex-direction:column;transition:.4s}.pricing-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.5)}.pricing-card.popular{background:linear-gradient(180deg,rgba(212,175,55,.05) 0,var(--card-bg) 100%);transform:scale(1.05);z-index:1}.pricing-card.popular:hover{transform:scale(1.05) translateY(-10px);box-shadow:0 15px 40px rgba(212,175,55,.15)}.popular-badge{position:absolute;top:0;right:0;background:var(--accent);color:#000;font-size:.75rem;font-weight:700;text-transform:uppercase;padding:5px 15px;letter-spacing:1px}.footer-col h4,.pricing-value{text-transform:uppercase;letter-spacing:2px}.pricing-header{border-bottom:1px solid var(--border);padding-bottom:25px;margin-bottom:25px;text-align:center}.pricing-value{font-size:.85rem;color:var(--accent);margin-bottom:15px}.pricing-fee{font-size:3.5rem;color:#fff;font-weight:700;line-height:1;margin-bottom:5px}.pricing-fee-sub{font-size:.9rem;color:#666;font-style:italic}.pricing-features{list-style:none;padding:0;margin:0}.pricing-features li{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#ccc;font-size:.95rem;display:flex;justify-content:space-between;align-items:center}.pricing-features li:last-child{border-bottom:none}.pricing-features span{color:#888}.pricing-features strong{color:#fff;font-weight:600}.footer-col h4,.modal-list li .icon{color:var(--accent)}.pricing-hero-title{white-space:nowrap}@media (max-width:768px){.intro-grid,.pricing-grid,.process-grid{grid-template-columns:1fr}.pricing-grid{gap:40px}.pricing-card.popular{transform:none}.pricing-card.popular:hover{transform:translateY(-5px)}.pricing-hero-title{white-space:normal;font-size:2rem!important}}footer{border-top:1px solid var(--border);background:#050505;padding:60px 5% 30px;margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;max-width:1400px;margin:0 auto}.footer-col h4{font-size:12px;margin-bottom:20px}.footer-col ul{list-style:none;padding:0}.footer-col ul li{margin-bottom:10px}.footer-col ul li a:hover{color:#fff}.footer-bottom{text-align:center;border-top:1px solid #222;padding-top:30px;margin-top:50px;color:#444;font-size:12px}.custom-checkbox-box,.modal{border:1px solid var(--border)}@media (max-width:1024px){.grid-four,.process-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.details-grid,.grid-four,.grid-large,.intro-grid,.pricing-grid,.process-grid{grid-template-columns:1fr}.card-large .card-img-container{height:240px}.card-img-container{height:200px}header{flex-direction:column;gap:20px;padding:20px 5%;align-items:center;text-align:center}nav{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}nav a{margin-left:0}.hero{padding:80px 0}.hero h1{font-size:2.5rem}main{padding:30px 5%}.details-grid{gap:30px}.details-img{min-height:300px;padding:10px;display:flex;justify-content:center;align-items:center}.details-img img{max-height:300px;margin:0 auto}.product-title{font-size:1.8rem;margin:5px 0 15px}.product-price{font-size:1.4rem;margin-bottom:20px}.product-description{font-size:.95rem;line-height:1.6;margin-bottom:25px}footer{padding:40px 5% 20px}.footer-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px}.footer-col{width:100%}.footer-col h4{margin-bottom:15px}.footer-bottom{margin-top:30px;padding-top:20px}}@media (max-width:480px){.hero h1{font-size:2rem}}.custom-checkbox-container{display:flex;gap:15px;cursor:pointer;align-items:flex-start;color:var(--muted);font-size:.8em;line-height:1.5;transition:color .3s}.custom-checkbox-container:hover{color:var(--text)}.custom-checkbox-input{display:none}.custom-checkbox-box{width:20px;height:20px;background:var(--card-bg);display:flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0;margin-top:2px}.custom-checkbox-container:hover .custom-checkbox-box{border-color:var(--accent);box-shadow:0 0 10px rgba(212,175,55,.2)}.custom-checkbox-input:checked+.custom-checkbox-box{background:var(--accent);border-color:var(--accent)}.custom-checkbox-box::after{content:'';width:6px;height:10px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px;display:none}summary::marker{color:var(--accent)}summary::-webkit-details-marker{color:var(--accent)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}.modal-backdrop.show{display:flex;animation:.25s ease-out fadeIn}.modal{width:100%;max-width:760px;background:var(--card-bg);border-top:3px solid var(--accent);box-shadow:0 20px 60px rgba(0,0,0,.6);border-radius:12px;transform:translateY(10px);animation:.25s ease-out forwards slideUp}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}.modal-title{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:1.25rem;letter-spacing:.5px}.modal-close{background:0 0;border:none;color:#888;font-size:1.2rem}.modal-body{padding:22px 24px 10px;color:#ccc;line-height:1.7;font-size:1rem}.modal-body p{margin:0 0 12px}.modal-list{list-style:none;padding:0;margin:10px 0 0}.modal-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}.modal-actions{display:flex;gap:12px;padding:18px 24px 24px}.btn-primary{background:var(--accent);color:#000;border:none;padding:12px 18px;font-weight:700;letter-spacing:1px;border-radius:6px;cursor:pointer}.btn-secondary,.btn-share{color:#fff;padding:12px 18px;cursor:pointer}.btn-secondary{background:0 0;border:1px solid var(--border);border-radius:6px}.btn-share{background:rgba(255,255,255,.06);border:1px dashed var(--border);border-radius:6px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(10px)}to{transform:translateY(0)}}.switch{position:relative;display:inline-block;width:50px;height:24px;margin-right:10px;vertical-align:middle}.switch input{opacity:0;width:0;height:0;position:absolute;appearance:none;-webkit-appearance:none;margin:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#555;-webkit-transition:.4s;transition:.4s;border-radius:24px;border:1px solid #777}.slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--accent);border-color:var(--accent)}input:focus+.slider{box-shadow:0 0 1px var(--accent)}input:checked+.slider:before{-webkit-transform:translateX(24px);-ms-transform:translateX(24px);transform:translateX(24px)}
@media (max-width: 450px) { .grid { grid-template-columns: 1fr !important; } }
header{flex-direction:column;align-items:stretch}
.header-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.header-mobile-actions{display:none;width:100%}
@media (max-width:1024px){
header{padding-top:20px;padding-bottom:20px}
.header-mobile-actions{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}
}
@media (max-width:1100px) and (min-width:801px){
.header-top{flex-wrap:wrap;row-gap:10px}
header nav{flex-wrap:wrap;justify-content:flex-end}
.logo{font-size:22px;letter-spacing:3px}
nav a{margin-left:15px;font-size:13px}
.btn-cta{padding:8px 16px}
}

/* Custom Summary Arrow */
summary{list-style:none;cursor:pointer;outline:none;display:flex;align-items:center}summary::-webkit-details-marker{display:none}summary::before{content:'+';color:var(--accent);font-weight:700;font-size:1.5em;margin-right:10px;line-height:1;transition:transform .3s ease}details[open] summary::before{transform:rotate(45deg)}

/* Desktop Fix - Constant Width */
@media (min-width: 1025px) {
    main {
        max-width: 1400px;
        width: 100%;
        padding: 60px 40px; /* Fixed padding for stability */
        margin: 0 auto;
    }
    header {
        max-width: 1400px;
        margin: 0 auto;
        padding: 30px 40px;
        width: 100%;
        left: 0; 
        right: 0;
    }
    footer {
        padding-left: calc((100% - 1400px) / 2 + 40px);
        padding-right: calc((100% - 1400px) / 2 + 40px);
    }
    /* Force Grid Layout for Desktop */
    .grid-large {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .grid-four {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* Mobile Content Optimization */
@media (max-width: 768px) {
    /* Reduce Hero Padding & Font Size */
    .hero {
        padding: 40px 15px !important;
        margin-bottom: 40px !important;
    }
    .hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    .hero p {
        font-size: 0.9rem !important;
    }
    
    /* 2 Columns for Articles and Categories on Mobile */
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .grid-four {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    .grid-large {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Compact Cards for Mobile */
    .card {
        padding: 12px !important;
    }
    .card-content {
        padding: 10px !important;
    }
    
    /* Reduce Card Image Heights for Mobile */
    .card-small .card-img-container {
        height: 120px !important;
    }
    .card-img-container {
        height: 120px !important;
    }
    .card-large .card-img-container {
        height: 200px !important;
    }
    
    /* Reduce Font Sizes in Cards */
    .card-title {
        font-size: 14px !important;
        margin: 6px 0 !important;
        line-height: 1.3 !important;
    }
    .card-price {
        font-size: 14px !important;
    }
    .card-brand {
        font-size: 9px !important;
    }
    
    /* Compact Category Cards */
    .grid {
        margin-bottom: 30px !important;
    }
    .grid .card {
        padding: 12px !important;
    }
    .grid .card h3 {
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
        letter-spacing: 1px !important;
    }
    .grid .card p {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    /* Reduce Section Headings Spacing */
    h2 {
        margin-bottom: 20px !important;
        padding-bottom: 8px !important;
    }
    
    /* Reduce Main Padding */
    main {
        padding: 20px 5% !important;
    }
    
    /* Professional Footer for Mobile */
    footer {
        padding: 35px 20px 25px !important;
    }
    .footer-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px 20px !important;
        max-width: 100% !important;
    }
    
    /* Rating Section - Full Width */
    .footer-col:first-child {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        padding-bottom: 25px !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .footer-col:first-child > div {
        margin-bottom: 0 !important;
    }
    .footer-col:first-child > div > div:first-child {
        font-size: 2em !important;
        font-weight: 700 !important;
        color: var(--accent) !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    .footer-col:first-child > div > div:nth-child(2) {
        font-size: 0.85em !important;
        margin: 0 0 8px 0 !important;
        letter-spacing: 1px !important;
    }
    .footer-col:first-child > div > p {
        font-size: 0.75em !important;
        color: #999 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }
    
    /* Navigation Sections - Professional Vertical Layout */
    .footer-col:not(:first-child) {
        width: 100% !important;
        padding: 0 !important;
    }
    .footer-col h4 {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: var(--accent) !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
    .footer-col ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    .footer-col ul li {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .footer-col ul li:last-child {
        margin-bottom: 0 !important;
    }
    .footer-col ul li a {
        font-size: 0.875rem !important;
        color: #ccc !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        display: block !important;
        line-height: 1.5 !important;
    }
    .footer-col ul li a:hover {
        color: var(--accent) !important;
    }
    
    /* Footer Bottom - Professional */
    .footer-bottom {
        grid-column: 1 / -1 !important;
        margin-top: 25px !important;
        padding-top: 20px !important;
        border-top: 1px solid var(--border) !important;
        text-align: center !important;
        font-size: 0.75rem !important;
        color: #888 !important;
        line-height: 1.6 !important;
    }
    
    /* Touch Friendly Inputs & Buttons */
    input, select, textarea, button, .btn-primary {
        min-height: 48px;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* Image Sharpness Optimization - Better quality rendering */
.card img,
.details-img img,
.smart-fit-img,
.gallery-thumb {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent blur on hover scale */
.card:hover img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Improved Button Styles for Better Clarity */
.btn-cta, .btn-primary {
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.btn-cta:hover, .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

/* Better Card Hover Effects */
.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-color: var(--accent) !important;
}

/* Basis-Heading-Style (kein globaler Balken mehr, nur noch für spezielle Headlines über HTML-Spans) */
h2 {
    font-weight: 400;
    letter-spacing: -0.5px;
}

/* Headline mit integriertem Balken:
   bestimmte Überschriften (Preise, Vertrauen als Währung, Technik als Kulturgut, etc.)
   bekommen ihren vertikalen Strich direkt im HTML (Span).
   Hier wird nur sichergestellt, dass kein alter pseudo-Balken greift. */
.pricing-hero-title::before,
.headline-with-bar::before {
    content: none !important;
}

/* Better Visual Hierarchy for Product Info */
.product-info {
    position: relative;
}

.product-info::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 2px;
    opacity: 0.3;
}

/* Disable blur effect on detail page images */
.details-img::before {
    display: none !important;
}

/* Ensure sharp rendering for detail page main image */
.details-img img,
#mainImage {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Detail Page Typography - Reduced Sizes and Spacing */
.product-brand {
    font-size: 0.75rem !important;
    margin-bottom: 5px !important;
}

.product-title {
    font-size: 1.8rem !important;
    margin: 8px 0 12px 0 !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

.product-price {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
    font-weight: 300 !important;
}

.product-description {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

.product-description p {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

.product-description h3 {
    font-size: 1rem !important;
    margin: 15px 0 8px 0 !important;
    font-weight: 600 !important;
}

/* Reduce spacing in detail boxes */
.product-info > div[style*="margin-bottom"] {
    margin-bottom: 20px !important;
    padding: 15px !important;
}

.product-info > div[style*="margin-bottom"] > div {
    margin-bottom: 4px !important;
}

/* Reduce spacing in social proof box */
.product-info > div[style*="background: rgba"] {
    padding: 12px !important;
    margin-bottom: 15px !important;
}

.product-info > div[style*="background: rgba"] > div {
    margin-bottom: 6px !important;
    font-size: 0.9rem !important;
}

.proof-seal {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 25;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.proof-seal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
}
.proof-seal--lg {
    width: 56px;
    height: 56px;
}
@media (max-width: 768px) {
    .proof-seal {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }
    .proof-seal--lg {
        width: 46px;
        height: 46px;
    }
}