﻿    :root { --primary: #007bff; --accent: #dc3545; --success: #28a745; --bg: #f4f7f6; --warning: #ffc107; }
    body { font-family: 'Segoe UI', sans-serif; background: var(--bg); padding: 20px; margin: 0; }
    .container { max-width: 1200px; margin: auto; background: white; padding: 40px; border-radius: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
    
    .header { text-align: center; margin-bottom: 40px; }
    .header h1 { color: #c82333; font-size: 38px; margin-bottom: 10px; font-weight: 800; }
    .header p { color: #555; font-size: 18px; margin-top: 0; font-weight: 500; }
    
    .search-container { max-width: 600px; margin: 0 auto 40px auto; }
    #searchInput { width: 100%; padding: 18px 25px; border-radius: 50px; border: 2px solid #eee; font-size: 18px; outline: none; transition: 0.3s; box-sizing: border-box; }
    #searchInput:focus { border-color: var(--primary); box-shadow: 0 4px 20px rgba(0,123,255,0.15); }
    
    .search-section { margin: 30px 0; }
    .search-section h3 { margin-bottom: 15px; color: #333; }
    
    .offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px; }
    .card { border: 1px solid #f0f0f0; border-radius: 18px; padding: 25px; position: relative; background: white; transition: 0.3s ease; cursor: pointer; }
    .card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
    .badge { position: absolute; top: -12px; right: -12px; background: var(--accent); color: white; padding: 8px 12px; font-weight: bold; border-radius: 50px; font-size: 16px; z-index: 5; }
    
    .single-article { max-width: 800px; margin: 0 auto; }
    .article-header { margin-bottom: 30px; }
    .article-title { font-size: 32px; color: #333; margin-bottom: 10px; }
    .article-meta { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
    .article-brand { background: #2c3e50; color: white; padding: 5px 15px; border-radius: 25px; font-size: 14px; }
    .article-nummern { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 20px 0; font-size: 16px; }
    
    .original-titel-box { 
        background: #fff3cd; 
        padding: 20px; 
        border-radius: 8px; 
        margin: 20px 0; 
        font-size: 15px; 
        border-left: 4px solid #ffc107;
        word-wrap: break-word;
        line-height: 1.5;
    }
    .original-titel-box strong { 
        display: block; 
        margin-bottom: 10px; 
        color: #856404;
        font-size: 16px;
    }
    .original-titel-box .full-titel {
        background: white;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ffeeba;
        font-family: monospace;
        font-size: 13px;
        max-height: 150px;
        overflow-y: auto;
    }
    
    .price-box { background: #f0f7ff; padding: 20px; border-radius: 10px; margin: 20px 0; }
    .old-price { color: #888; text-decoration: line-through; font-size: 16px; }
    .offer-price { font-size: 48px; color: var(--accent); font-weight: 800; }
    .savings { color: var(--success); font-size: 18px; }
    .ebay-link { display: inline-block; margin: 10px 0; color: var(--primary); text-decoration: none; }
    .ebay-link:hover { text-decoration: underline; }
    
    .brand-badge { display: inline-block; background: #2c3e50; color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; margin-bottom: 10px; }
    .nummern-box { background: #f8f9fa; padding: 8px; border-radius: 8px; margin: 10px 0; font-size: 12px; color: #e67e22; }
    .price-normal { font-size: 14px; color: #666; }
    .price-special { font-size: 24px; color: var(--accent); font-weight: 800; }
    .add-btn { background: var(--primary); color: white; padding: 15px; border-radius: 12px; border: none; width: 100%; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 20px; }
    .add-btn:hover { background: #0056b3; }
    
    .cart-sidebar { position: fixed; top: 20px; right: 20px; width: 300px; z-index: 1000; }
    .timer-sticker { background: var(--warning); padding: 8px; border-radius: 10px 10px 0 0; text-align: center; font-weight: bold; border: 2px solid var(--success); border-bottom: none; }
    .cart-main { background: white; border-radius: 0 0 10px 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 12px; border: 2px solid var(--success); max-height: 400px; overflow-y: auto; }
    .send-btn { width: 100%; padding: 10px; background: var(--success); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin-top: 10px; }
    .cart-item { font-size: 11px; padding: 4px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
    .remove-btn { background: #fff0f0; color: var(--accent); border: none; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; }
    .total-box { font-size: 16px; font-weight: 800; text-align: right; margin: 10px 0; color: var(--success); }
    
    .back-link { display: inline-block; margin-bottom: 20px; color: var(--primary); text-decoration: none; }
    .back-link:hover { text-decoration: underline; }
    
    #shippingModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
    .modal-content { background: white; padding: 30px; border-radius: 20px; max-width: 400px; margin: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
    .shipping-option { display: flex; align-items: center; padding: 15px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 10px; cursor: pointer; }
    .shipping-option:hover { background: #f0f7ff; }
    .shipping-price { font-weight: bold; color: var(--success); font-size: 18px; margin-left: auto; }
    .modal-btn { width: 100%; padding: 15px; background: var(--success); color: white; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; margin-top: 10px; }
    .modal-btn-secondary { width: 100%; padding: 12px; background: #f8f9fa; color: #666; border: none; border-radius: 10px; margin-top: 10px; cursor: pointer; }
    
    @media (max-width: 768px) {
        .cart-sidebar { width: 250px; }
        .article-title { font-size: 24px; }
        .offer-price { font-size: 36px; }
    }
