:root {
    --color-header: #0d0d0d;
    --color-header-alt: #1a1a1a;
    --color-accent: #ff6600;
    --color-accent-dark: #e35a00;
    --color-blue: #4E9BD4;
    --color-blue-dark: #3d84ba;
    --color-bg: #f3f5f8;
    --color-card: #ffffff;
    --color-text: #1c1c1c;
    --color-text-muted: #666;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
}
body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background: radial-gradient(circle at 15% 20%, rgba(78, 155, 212, 0.35), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(255, 102, 0, 0.25), transparent 40%),
        linear-gradient(135deg, var(--color-header) 0%, var(--color-header-alt) 100%);
    background-attachment: fixed;
    background-size: cover;
    color: var(--color-text);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.pagination a {
    padding: 10px 16px;
    background: #ff6600;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.2s ease;
    font-size: 14px;
    font-weight: 600;
    margin-left: 0;
}

.pagination a:hover {
    background: #333;
}

.pagination span {
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
    padding: 10px 14px;
}
.pagination .active {
    background: #e63946;
    color: white;
}
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e1e1e;
    color: white;
    padding: 15px;
    display: none;
    z-index: 9999;
}

.cookie-content {
    max-width: 900px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-buttons button {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-accept {
    background: #28a745;
    color: white;
}

.btn-reject {
    background: #dc3545;
    color: white;
}
h1 {
    text-align: center;
}
html {
    height: 100%;
    margin: 0;
}
.page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* content expands */
.content {
    flex: 1;
}

.quality-text {
    margin-top: 20px; /* Pulls the text lower below the slider */
    background: rgba(255, 255, 255, 0.05);
    color: #e8e8e8;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left; /* Make text left-aligned */
}

.quality-text ul {
    padding-left: 20px;
    margin: 0; /* Remove extra margins */
}

.quality-text li {
    margin-bottom: 8px;
}
.order-link {
    color: #007bff;
    font-weight: 600;
    text-decoration: none;
}

.order-link:hover {
    color: #0056b3;
    text-decoration: underline;
}
div a {
    color: white;
    margin-left: 20px;
    text-decoration: none;
}

div a:hover {
    text-decoration: underline;
}

nav a:hover {
    text-decoration: underline;
}

.container {
    padding: 30px;
    position: relative;
    z-index: 5;
}
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 8px 14px;
    margin-bottom: 15px;
    font-size: 14px;

    width: fit-content;
}

.breadcrumb a {
    text-decoration: none;
    color: #6cb2ff;
}

.breadcrumb span {
    color: #ccc;
}


.btn:hover {
    background: #4E9BD4;
    text-decoration: none;
}
.category-list {
    list-style: none;
    padding: 0;
    display: grid;
    margin: 0 20%;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.category-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.category-item:hover {
    transform: translateY(-5px);
}
.category-item img {
    width: 100%;
    max-width: 200px;   /* limits how wide it can be */
    height: 200px;      /* fixed height */
    object-fit: fill;  /* prevents stretching */
    border-radius: 8px;
    display: block;
    margin: 0 auto;     /* center image */
}
.category-item h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
    text-align: center;
    font-size: 20px;
}
.category-item a {
    text-decoration: none;  /* removes underline */
    color: inherit;         /* uses normal text color */
    display: block;
}
.product-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 0 20%;
}

.product-item {
    background: var(--color-card);
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.product-item:hover {
    transform: translateY(-5px);
}

.product-item-inactive {
    position: relative;
    opacity: 0.55;
}

.product-item-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e63946;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 2;
}

.product-item img {
    width: 100%;
    max-width: 220px;   /* limits how wide it can be */
    height: 220px;      /* fixed height */
    object-fit: fill;  /* prevents stretching */
    border-radius: 8px;
    display: block;
    margin: 0 auto;     /* center image */
}

.product-item h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
    font-size: 20px;
}
@media (max-width: 768px) {

    .product-list {

        /* TWO COLUMNS */
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin: 0;
        padding: 0 12px;
    }

    .product-item {
        padding: 10px;
        border-radius: 12px;
    }

    .product-item img {
        height: 150px;
        max-height: 10%;

        max-width: 90%;

        object-fit: fill;

        margin-bottom: 10px;
    }

    .product-item h2 {
        font-size: 14px;

        min-height: 38px;

        margin-bottom: 8px;
    }

    .product-item p {
        font-size: 12px;
        margin: 4px 0;
    }
}

/* EXTRA SMALL DEVICES */
@media (max-width: 420px) {

    .product-item img {
        height: 130px;
    }

    .product-item h2 {
        font-size: 13px;
    }

    .product-item p {
        font-size: 11px;
    }
}

.buy-now-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    background: #007bff;
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.buy-now-button:hover {
    background: #0056b3;
}
.product-item p {
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* max 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-item a {
    margin: 0;
    text-decoration: none;
    /* removes underline */
    color: inherit;
    /* uses normal text color */
    display: block;
}
.product-detail {
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    gap: 250px;
    align-items: start;
    margin-top: 30px;
}
.main-detail {
    width: 700px;
    height: 200px;
    display: flex;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 100px;
    align-items: center;
    margin: auto;
    /*background: linear-gradient(135deg, #2d1b4e 0%, #7a3a6a 50%, #e06a92 100%);*/

}
.main-detail img{
    width: 150px;
    height: 100px;
    margin: auto;
    object-fit: contain;
}

.product-image img {
    width: 100%;
    max-width: 400px;
    height: 500px;
    border-radius: 10px;
    object-fit: fill;
}
.product-info {
    background: var(--color-card);
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 16px;
    padding: 10% 0;
}

.cat-info {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 16px;
    padding: 1% 1%;
    margin: 1% 20%;
    text-align: center;
}
.cat-info h1 {

    margin: 0;
}
@media (max-width: 768px) {
    .cat-info {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        color: white;
        border-radius: 16px;
        padding: 5% 1%;
        margin: 1% 0;
        text-align: center;
    }
    .cat-info h1 {

        margin: 0;
    }
}
.product-info h1 {

    margin-top: 0;
}
.product-info p {

    text-align: center;
}

.category {
    color: #cfcfcf;
    font-size: 14px;
}

.ean {
    font-size: 14px;
    color: #bbb;
}

.description {
    margin: 20px 0;
    line-height: 1.5;
}

.back-btn {
    display: flex;
    justify-content: center;
    padding: 10px 15px;
    background: #4E9BD4;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    margin: 0 45%;
    transition: all 0.35s ease;
}
.back-btn2 {
    display: flex;
    justify-content: center;
    padding: 10px 15px;
    background: #4E9BD4;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    margin: 0 20%;
    transition: all 0.35s ease;
}
.back-btn2:hover {
    background: #555;
    text-decoration: none;
}
.back-btn:hover {
    background: #555;
    text-decoration: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



.faq-section {
    max-width: 700px;
    margin: 40px auto 0;
}

.faq-title {
    text-align: center;
    color: white;
    font-size: 28px;
    margin-bottom: 20px;
}

.faq-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    padding: 18px 22px;
    cursor: pointer;
}

.faq-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer-inner {
    padding: 0 22px 20px;
    color: #d8d8d8;
    line-height: 1.6;
    font-size: 15px;
}

.faq-answer-inner ul {
    padding-left: 20px;
    margin: 10px 0;
}

.faq-answer-inner li {
    margin-bottom: 6px;
}

.faq-answer-inner a {
    color: #6cb2ff;
}

@media (max-width: 768px) {
    .faq-section {
        margin: 30px 15px 0;
    }

    .faq-question {
        font-size: 15px;
        padding: 14px 16px;
    }

    .faq-answer-inner {
        padding: 0 16px 16px;
        font-size: 14px;
    }
}

.product-quality,
.product-quality_funko {
    max-width: 500px;
    margin: 30px auto;
    font-family: Arial, sans-serif;
    background: var(--color-card);
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 16px;
    width: 100%;
    text-align: center;
    position: relative;
}

.product-quality input[type="range"] {
    -webkit-appearance: none;
    width: 85%;
    height: 20px;
    background: transparent;
    margin: 20px 0;
}
.product-quality_funko input[type="range"] {
    -webkit-appearance: none;
    width: 55%;
    height: 20px;
    background: transparent;
    margin: 20px 0;
}

/* Track for Webkit */
.product-quality input[type="range"]::-webkit-slider-runnable-track,
.product-quality_funko input[type="range"]::-webkit-slider-runnable-track {
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(to right,
    #007bff 0%, #007bff 0%, #ddd 0%, #ddd 100%);
}

/* Track for Firefox */
.product-quality input[type="range"]::-moz-range-track,
.product-quality_funko input[type="range"]::-moz-range-track{
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(to right,
    #007bff 0%, #007bff 0%, #ddd 0%, #ddd 100%);
}

/* Thumb for Webkit */
.product-quality input[type="range"]::-webkit-slider-thumb,
.product-quality_funko input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 35px;
    height: 35px;
    background: #ff6600;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #555;
    margin-top: -7.5px;
}
.product-quality input[type="range"]::-webkit-slider-thumb:hover,
.product-quality_funko input[type="range"]::-webkit-slider-thumb:hover{
    background: #4E9BD4;
}

/* Thumb for Firefox */
.product-quality input[type="range"]::-moz-range-thumb,
.product-quality_funko input[type="range"]::-moz-range-thumb{
    width: 35px;
    height: 35px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #555;
}

.quality-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-weight: bold;
    font-size: 16px;
    padding: 0 10px;

}

.quality-labels span {
    text-align: center;
    width: 25%;
}
@media(max-width: 768px) {
    .quality-labels {
        gap: 10px;
    }
}

@media (max-width: 768px) {

    .product-detail {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 0 16px;

        margin-top: 20px;
    }

    .product-image img {

        max-width: 100%;

        height: auto;

        max-height: 380px;
    }

    .product-info {
        order: 3;

    }

    .product-quality {
        order: 2;

        width: 100%;

        margin: 0 auto;
    }

    .product-info h1 {

        font-size: 26px;

        text-align: center;
    }

    .product-info p {
        text-align: center;
    }

    .description {
        font-size: 15px;
    }

    .price {

        font-size: 28px;

        text-align: center;
    }

    .quality-labels {

        font-size: 11px;
        padding: 0;
        gap: 0;
    }
    .quality-labels span {
        text-align: center;
        word-wrap: break-word;
        word-break: break-all;
        width: 14%;
    }
    .quality-text {

        font-size: 14px;

        padding: 16px;
    }

    .squishy {
        width: 100%;
    }

    .product-quality input[type="range"] {

        width: 100%;
    }

    .main-detail {
        width: 100%;

        height: auto;

        flex-wrap: wrap;

        gap: 20px;
    }

    .main-detail img {

        width: 100px;

        height: 80px;
    }
}
.ry-link {
    text-decoration: underline;
    text-underline-offset: .125rem;
    border-radius: .25rem;
}
.ry-link--default {
    color: #1f2b38;
}
.main-text {
    margin: 0 20%;
}
.modal {
    display: block;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

/* Modal box */
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    margin: 15% auto;
    text-align: center;
    position: relative;
}

/* Close button */
.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}
.company-form {
    max-width: 700px;
    margin: 30px auto;
    padding: 25px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* labels */
.form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    color: white;
    text-align: center;
}

/* inputs */
.form-group input,
.form-group textarea {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    transition: 0.2s;
}

/* focus effect */
.form-group input:focus,
.form-group textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* textarea */
textarea {
    min-height: 120px;
}

/* file input */
input[type="file"] {
    border: none;
}

/* submit button */
.btn-submit {
    margin-top: 15px;
    padding: 12px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: #ff6600;
    color: white;
    font-size: 16px;
    cursor: pointer;

    transition: all 0.35s ease;
}

.btn-submit:hover {
    background: #4E9BD4;
}
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }
}

.req-info h1,h2{
    text-align: center;
}
.req-info p{
    text-align: center;
}
.table-container {
    max-width: 900px;
    margin: 30px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}
.table-container2 {
    max-width: 500px;
    margin: 30px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: center;
}
.orders-table-list,
.orders-table {
    width: 100%;
    border-collapse: collapse;
}
.orders-table-list th,
.orders-table-list td,
.orders-table th,
.orders-table td {
    padding: 18px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* MOBILE */
@media (max-width: 768px) {
    .orders-table-list,
    .orders-table-list thead,
    .orders-table-list tbody,
    .orders-table-list th,
    .orders-table-list td,
    .orders-table-list tr,
    .orders-table,
    .orders-table thead,
    .orders-table tbody,
    .orders-table th,
    .orders-table td,
    .orders-table tr {
        display: block;
        width: 97%;
    }
    .orders-table-list thead,
    .orders-table thead {
        display: none;
    }
    .orders-table-list tr,
    .orders-table tr {
        background: white;
        margin-bottom: 18px;
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }
    .orders-table-list td,
    .orders-table td {
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        font-size: 14px;
    }
    .orders-table-list td::before,
    .orders-table td::before {
        font-weight: bold;
        color: #666;
    }

    .orders-table td:nth-child(1)::before {
        content: "Produkt";
    }

    .orders-table td:nth-child(2)::before {
        content: "Zustand";
    }

    .orders-table td:nth-child(3)::before {
        content: "Menge";
    }

    .orders-table td:nth-child(4)::before {
        content: "Preis";
    }

    .orders-table td:nth-child(5)::before {
        content: "Details";
    }
    .orders-table-list td:nth-child(1)::before {
        content: "Bestellnummer";
    }

    .orders-table-list td:nth-child(2)::before {
        content: "Datum";
    }

    .orders-table-list td:nth-child(3)::before {
        content: "Summe";
    }

    .orders-table-list td:nth-child(4)::before {
        content: "Status";
    }

    .orders-table-list td:nth-child(5)::before {
        content: "Details";
    }
    .btn-view {
        width: 30%;
        text-align: center;
        margin-top: 10px;
    }
}

/* header */
.orders-table-list thead,
.orders-table thead {
    background: #f8f9fa;
}
.orders-table-list th,
.orders-table th {
    background: #f8f9fb;
    font-size: 14px;
    color: #555;
    text-align: left;
    padding: 14px;
    font-weight: 600;
}

/* rows */
.orders-table-list td,
.orders-table td {
    font-size: 14px;
    color: #222;
    padding: 14px;
    border-top: 1px solid #eee;
}

/* hover effect */
.orders-table-list tbody tr:hover,
.orders-table tbody tr:hover {
    background: #f5f7fa;
}

/* button */
.btn-view {
    display: inline-block;
    padding: 6px 12px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.2s;
    font-size: 13px;
}

.btn-view:hover {
    background: #0056b3;
}
.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* pending */
.status-pending {
    background: #fff3cd;
    color: #856404;
}

/* label sent */
.status-label_sent {
    background: #d1ecf1;
    color: #0c5460;
}

/* received */
.status-received {
    background: #d4edda;
    color: #155724;
}

/* paid */
.status-paid {
    background: #c3e6cb;
    color: #155724;
}
@media (max-width: 600px) {
    .orders-table-list thead,
    .orders-table thead {
        display: none;
    }
    .orders-table-list tr,
    .orders-table tr {
        display: block;
        margin: 15px;
    }
    .orders-table-list td,
    .orders-table td {
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
}

/* condition badges */
.condition {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* condition colors */
.condition-1 { background: #d4edda; color: #155724; } /* Neu */
.condition-2 { background: #c3e6cb; color: #155724; }
.condition-3 { background: #fff3cd; color: #856404; }
.condition-4 { background: #ffeeba; color: #856404; }
.condition-5 { background: #f8d7da; color: #721c24; }

/* status line */
.order-status {

    margin: 20px auto;
    max-width: 900px;
    font-size: 16px;
    color: #f0f0f0;
}
.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th,
.cart-table td {
    padding: 14px;
    border-top: 1px solid #eee;
    text-align: left;
}

.cart-table thead {
    background: #f8f9fa;
}

.cart-table tbody tr:hover {
    background: #f5f7fa;
}

/* product */
.product-name {
    font-weight: 600;
}

/* price */
.price {
    color: #28a745;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Placeholder shown in place of the price while it is being refreshed
   from Keepa on page load. Sized to roughly match the price text it
   replaces so the surrounding layout doesn't jump when it swaps in. */
.price-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The product-info column gets narrow on smaller desktops, so let the
       label drop under the spinner rather than squashing it. */
    flex-wrap: wrap;
    gap: 8px;
    vertical-align: middle;
}

/* An author `display` value beats the browser's built-in
   `[hidden] { display: none }`, so without this the spinner stays visible
   even after the JS sets its `hidden` attribute -- the price and the
   "wird aktualisiert" label end up showing at the same time. Applies to
   the price value span too, for the same reason it might grow a `display`
   rule later. */
.price-loading[hidden],
#price-value[hidden] {
    display: none;
}

.price-loading-text {
    font-size: 16px;
    font-weight: 500;
    color: #6c757d;
}

.price-spinner {
    display: inline-block;
    /* flex-shrink would otherwise squash it into an oval in a narrow column */
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(40, 167, 69, 0.25);
    border-top-color: #28a745;
    border-radius: 50%;
    animation: price-spin 0.7s linear infinite;
}

@keyframes price-spin {
    to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: keep the indicator visible, just
   stop it spinning. */
@media (prefers-reduced-motion: reduce) {
    .price-spinner {
        animation: none;
    }
}

/* The submit button is disabled until the refreshed price arrives, so a
   customer can't add an item to the box at a price we're about to change. */
.warenkorb-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.qty-btn:hover {
    background: #ced4da;
}

/* remove button */
.btn-remove {
    background: transparent;
    border: none;
    color: red;
    font-size: 18px;
    cursor: pointer;
}
/* cart adjustment for mobile */
@media (max-width: 768px) {

    .table-container {
        box-shadow: none;
        background: transparent;
    }

    .cart-table,
    .cart-table thead,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td {

        display: block;


    }

    .cart-table thead {
        display: none;
    }

    .cart-table tr {

        background: white;

        margin-bottom: 18px;

        padding: 16px;

        border-radius: 14px;

        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }

    .cart-table td {

        border: none;

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 10px 0;

        font-size: 14px;
    }

    .cart-table td::before {

        font-weight: bold;

        color: #666;

        margin-right: 20px;
    }

    .cart-table td:nth-child(1)::before {
        content: "Produkt";
    }

    .cart-table td:nth-child(2)::before {
        content: "Zustand";
    }

    .cart-table td:nth-child(3)::before {
        content: "Menge";
    }

    .cart-table td:nth-child(4)::before {
        content: "Preis";
    }

    .cart-table td:nth-child(5)::before {
        content: "Gesamt";
    }

    .cart-table td:nth-child(6)::before {
        content: "Entfernen";
    }

    .product-name {

        max-width: 180px;

        text-align: right;
    }


    .quantity-box {

        gap: 8px;
    }

    .btn-remove {

        width: 28px;
        height: 28px;
    }
}
.quantity-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-input {
    width: 55px;
    height: 34px;

    text-align: center;

    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 15px;
}

.qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #2563eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    color: white;
}
@media (max-width: 768px) {
    .product-name2 {
        overflow: visible;
        text-overflow: unset;
        text-align: right;
        word-break: break-word;
    }
}
/* MOBILE */
@media (max-width: 768px) {

    .quantity-input {
        width: 45px;
        height: 30px;

        font-size: 14px;
    }

    .qty-btn {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }
}
/* summary box */
.cart-summary {
    max-width: 350px;
    margin: 25px auto;
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: right;
}

.cart-summary h4{
    text-align: center;
    color: red;
}
.cart-summary p{
    text-align: center;
    color: white;
}

/* checkout button */
.btn-checkout {

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 12px 20px;
    background: #28a745;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;

    transition: all 0.35s ease;
}
.btn-checkout-fake {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 12px 20px;
    background: #b3b3b3;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
.btn-checkout:hover {
    background: #4E9BD4;
}

/* empty cart */
.empty-cart {
    max-width: 420px;
    margin: 40px auto;
    padding: 50px 30px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    text-align: center;
    color: #f0f0f0;
}
.empty-cart img {
    width: 110px;
    height: auto;
    margin-bottom: 20px;
    opacity: 0.9;
}
.empty-cart h4 {
    margin: 0 0 10px;
    font-size: 22px;
    color: #f0f0f0;
}
.empty-cart p {
    color: #f0f0f0;
    margin-bottom: 25px;
    font-size: 15px;
}
.navbar {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* button */
.dropbtn {
    cursor: pointer;
}

.dropdown-content a:hover {
    background: #f5f5f5;
}
.auth-form {
    max-width: 400px;
    margin: 40px auto;
    padding: 25px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* title */
.form-title {
    text-align: center;
    margin-top: 30px;
}

/* inputs from Django form */
.auth-form input {
    width: 95%;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* focus effect */
.auth-form input:focus {
    border-color: #007bff;
    outline: none;
}
.auth-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 25px;
}

.checkout-title {
    text-align: center;
    margin-bottom: 20px;
}

.checkout-summary {
    text-align: center;
    font-size: 18px;
    margin-bottom: 0;
    background: transparent;
    padding: 12px;
    border-radius: 10px;
}

/* sections */
.form-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.form-section p{
    color: #f0f0f0;
}

/* layout */
.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.small {
    flex: 0.4;
}

/* inputs */
.form-group input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.form-group input:focus {
    border-color: #007bff;
    outline: none;
}
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}
/* payment radios */
.payment-options {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

/* button */
.btn-submit.big {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    background: #ff6600;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-submit.big:hover {
    background: #28a745;
}

/* hidden sections */
.hidden {
    display: none;
}
.user-panel {
    display: flex;
    align-items: center;   /* 🔥 KEY FIX */
    gap: 20px;
}

/* make ALL items same height */
.user-panel a,
.user-panel button,
.user-panel span {
    display: flex;
    align-items: center;
    height: 50px;   /* 🔥 same height */
}

/* welcome text */
.welcome {
    color: #ff6600;
    font-size: 18px;
}

/* links */
.nav-link {
    color: #000;
    font-size: 18px;
    text-align: center;
    padding: 0;
}

.nav-link:hover {
    color: #ff6600;
    border-radius: 6px;
}

/* logout button fix */
.logout-form {
    margin: 0;
    display: flex;
    justify-content: center;
}

.logout-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    background: #ff6600;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    margin: 0;

    transition: all 0.35s ease;
}
.warenkorb-btn {
    display: flex;
    justify-content: center;
    padding: 10px 5px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.35s ease;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin: 0 31%;
}
.warenkorb-btn:hover {
    background: #4E9BD4;
}
@media (max-width: 768px) {
    .back-btn {
        width: 50%;
        text-align: center;
        transition: all 0.35s ease;
        box-sizing: border-box;
    }
}
.logout-btn:hover {
    background: #4E9BD4
}

/* register button */
.btn-register {
    padding: 6px 14px;
    background: #ff6600;
    color: black;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.btn-register:hover {
    background: #4E9BD4;
    text-decoration: none;
}
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111;
    padding: 15px 25px;
    color: white;
}

/* LEFT */
.header-left {
    flex: 1;
}

/* CENTER (search stays centered!) */
.header-center {
    flex: 2;
    display: flex;
    justify-content: center;
}

/* RIGHT */
.header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}




header h1 {
    margin: 0;
    font-size: 20px;
    color: #ff6600;
}
nav a {
    color: #333;
    text-decoration: none;
    margin: 0;
    font-weight: 500;
    gap: 0px;
}

.btn {
    display: inline-block;
    padding: 10px 18px;
    background: #ff6600;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 10px;
    margin: 0;
    transition: all 0.35s ease;
}


header {
    background: var(--color-header);
    color: white;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    position: relative;
}

nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
}

.nav-link {
    text-decoration: none;
    color: #222;
    font-size: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-toggle {
    text-decoration: none;
    color: #e8e8e8;
    font-size: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

/* DROPDOWN */
.dropdown {
    padding: 0;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
    z-index: 1000;
    top: 35px;
    left: 0;
}

.dropdown-content a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* MOBILE MENU BUTTON */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
}

/* MOBILE */
@media (max-width: 768px) {

    header {
        padding: 20px;
    }

    .mobile-menu-btn {
        display: block;
        z-index: 1002;
        color: #ff6600;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;

        background: var(--color-header-alt);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px;
        gap: 25px;
        transition: 0.35s ease;
        box-shadow: -6px 0 25px rgba(0,0,0,0.25);
        z-index: 1001;
    }

    nav.active {
        right: 0;
        border-radius: 10px;
    }

    .nav-link,
    .dropdown-toggle {
        font-size: 18px;
    }

    .dropdown {
        width: 100%;
        transition: all 0.35s ease;
    }

    .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        background: #f8f9fb;
        margin-top: 12px;
        width: 100%;
        transition: all 0.35s ease;
    }

    .dropdown.active .dropdown-content {
        display: block;
    }


}
.cart-link {
    display: flex;
    max-width: 160px;
    height: 50px;
    flex-direction: column;
    padding: 20px;
    align-items: center;
    transition: all 0.35s ease;
    justify-content: center;

    text-decoration: none;

    gap: 2px;
}

.cart-link p {
    margin: 0;

    font-size: 14px;

    color: #222;

    font-weight: 500;
}
/* MOBILE */
@media (max-width: 768px) {

    .cart-link svg {
        width: 40px !important;
        height: 40px !important;
    }

    .cart-link p {
        font-size: 12px;
    }
    .cart-link img {
        width: 34px;
        height: 34px;
    }
    .cart-link {
        display: flex;
        justify-content: center;
        width: 240px;
        max-width: 240px;
    }
}
.main-logo a {
    width: 180px;
    height: auto;

    display: block;
}
.main-logo img {
    width: 180px;
    height: auto;

    display: block;
}

/* MOBILE */
@media (max-width: 768px) {

    .main-logo img {
        width: 120px;
    }
    .main-logo a {
        width: 120px;
    }
}
html {
    background: var(--color-header-alt);
}



/* main wrapper */
.page-bg {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

/* MAIN CONTENT */
.main-container {
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin: 30px auto;
    background: white;
    border-radius: 28px;
    padding: 35px;
    box-shadow:
    0 15px 50px rgba(0,0,0,0.12);
}

/* LEFT BLOB */
.page-bg::before {
    content: "";
    position: fixed;
    left: -120px;
    top: 120px;
    width: 320px;
    height: 320px;
    background:
    radial-gradient(circle,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0));
    border-radius: 50%;
    z-index: 0;
    animation: floatBlob 8s ease-in-out infinite;
}

/* RIGHT BLOB */
.page-bg::after {
    content: "";
    position: fixed;
    right: -120px;
    bottom: 80px;
    width: 360px;
    height: 360px;
    background:
    radial-gradient(circle,
    rgba(255,255,255,0.20),
    rgba(255,255,255,0));
    border-radius: 50%;
    z-index: 1;
    animation: floatBlob2 10s ease-in-out infinite;
}

.decor-1 {
    width: 120px;
    height: 120px;
    left: 40px;
    bottom: 140px;
    background: rgba(255,255,255,0.10);
    animation: floatSlow 7s infinite ease-in-out;
}

.decor-2 {
    width: 70px;
    height: 70px;
    right: 70px;
    top: 160px;
    background: rgba(255,255,255,0.18);
    animation: floatSlow 9s infinite ease-in-out;
}

.decor-3 {
    width: 40px;
    height: 40px;
    right: 120px;
    bottom: 260px;
    background: rgba(255,255,255,0.16);
    animation: floatSlow 6s infinite ease-in-out;
}

/* animations */
@keyframes floatBlob {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-25px);
    }
}

@keyframes floatBlob2 {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}

@keyframes floatSlow {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
.decor-1,
.decor-2,
.decor-3 {
    position: fixed;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* shipping info box (cart page) */
.django-messages {
    list-style: none;
    max-width: 700px;
    margin: 20px auto 0;
    padding: 0;
}

.django-message {
    padding: 14px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #1c1c1c;
}

.django-message-success {
    background: #eafaf0;
    border: 1px solid #28a745;
}

.django-message-error {
    background: #fdecea;
    border: 1px solid #e63946;
}

.django-message-warning {
    background: #fff8e1;
    border: 1px solid #f0ad4e;
}

.django-message-info,
.django-message-debug {
    background: #eaf4fd;
    border: 1px solid #4E9BD4;
}

.shipping-info-box {
    max-width: 340px;
    margin: 15px auto;
    padding: 16px 20px;
    border-radius: 10px;
}

.shipping-info-box.is-ok {
    background: #eafaf0;
    border: 1px solid #28a745;
}

.shipping-info-box.is-warn {
    background: #fdecea;
    border: 1px solid #e63946;
}

.shipping-info-box h4 {
    margin: 0 0 8px;
    font-size: 16px;
}

.shipping-info-box.is-ok h4 {
    color: #1e7e34;
}

.shipping-info-box.is-warn h4 {
    color: #c0392b;
}

.shipping-info-box p {
    margin: 4px 0;
    font-size: 14px;
    color: #333;
}

.shipping-info-box strong {
    white-space: nowrap;
}

.shipping-info-box .free-shipping-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #555;
}

/* two-tier condition slider labels (Funko Pop etc.) -- deliberately separate
   from .quality-labels (used by the 5-tier games slider) so tuning one can
   never accidentally misalign the other. */
.funko-quality-labels {
    display: flex;
    justify-content: space-between;
    margin: 5px auto 0;
    width: 55%; /* matches .product-quality input[type="range"] width */
    font-weight: bold;
    font-size: 16px;
}

.funko-quality-labels span:first-child {
    text-align: right;
}

.funko-quality-labels span:last-child {
    text-align: right;
}

@media (max-width: 768px) {
    .funko-quality-labels {
        width: 100%; /* matches the mobile slider's width:100% */
        font-size: 13px;
    }
}
/*============================================*/
/*============================================*/
/*============================================*/
/*============================================*/
/*============================================*/
/*============================================*/
/*============================================*/
/*============================================*/
/*============================================*/


* { box-sizing: border-box; }

html {
    background: var(--color-header-alt);
}



/* ===== DECORATIVE BLOBS (brand colors, echoes the original site's
   blurred-circle motif so the new theme still feels like TopAnkauf) ===== */
.decor-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.decor-blob.blue { background: rgba(78, 155, 212, 0.30); }
.decor-blob.orange { background: rgba(255, 102, 0, 0.22); }

section, .search-box, .firmen-anfrage, .coupon-banner { position: relative; }
section > *, .search-box > *, .firmen-anfrage > *, .coupon-banner > * { position: relative; z-index: 1; }

a { text-decoration: none; }

/* ===== PREVIEW BANNER ===== */
.preview-banner {
    background: var(--color-accent);
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
}

/* ===== HEADER ===== */
header {
    background: var(--color-header);
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.main-logo img { width: 200px; height: auto; display: block; }

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 32px;
    color: white;
    cursor: pointer;
}

nav { display: flex; align-items: center; gap: 25px; }

.cart-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 20px 10px;
    color: #e8e8e8;
    font-size: 20px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.cart-link:hover { color: var(--color-accent); }
.cart-link svg { width: 22px; height: 22px; }

.cart-badge {
    position: absolute;
    top: 5px;
    right: 0px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--color-accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--color-header);
}
@media (max-width: 768px) {
    .cart-badge {
        right: 50px;
    }
}
.dropdown { position: relative; }
.dropdown-toggle {
    background: none;
    border: none;
    color: #e8e8e8;
    font-size: 20px;
    cursor: pointer;
    font-family: inherit;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    background: white;
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 1000;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a {
    display: block;
    padding: 12px 16px;
    color: #222;
}
.dropdown-content a:hover { background: #f5f5f5; color: var(--color-accent); }

/* On touch / small screens the category dropdown is opened and closed by JS
   via the .active class. The :hover rules above must NOT apply here: a tap on
   a touch device leaves a sticky :hover on .dropdown, which would keep the menu
   open even after JS removes .active (so tapping the toggle couldn't close it).
   Placed last so it wins over the earlier :hover rules by source order. */
@media (max-width: 768px) {
    .dropdown:hover .dropdown-content { display: none; }
    .dropdown.active .dropdown-content { display: block; }
}

select {
    background: var(--color-header-alt);
    color: white;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px;
}

/* ===== HERO (dark, bookended with header) ===== */
.hero {
    background: transparent;
    color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 60px 8% 30px;
    gap: 40px;
    overflow: hidden;
    text-align: left;
}
.hero-text { max-width: 600px; text-align: center;}
.hero h2 { font-size: 34px; margin-bottom: 15px; color: white; text-align: left; }
.hero p { font-size: 17px; color: #cfcfcf; margin-bottom: 0; }
.hero img { width: 300px; height: auto; }
@media(nax-width: 768px){}
    .hero h2 {
        text-align:center;
    }




.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    width: 30%;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    padding: 8px 16px 8px 8px;
    font-size: 14px;
    color: #f0f0f0;
}
.trust-badge .icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trust-badge .icon-circle img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.trust-badge.orange .icon-circle { background: var(--color-accent); }
.trust-badge.blue .icon-circle { background: var(--color-blue); }

@media (max-width: 900px) {
    .hero { flex-direction: column; text-align: center; padding: 40px 6% 30px; }
    .hero img { width: 220px; }
    .trust-badges { justify-content: center; margin: 0;}
}

/* ===== SEARCH BOX ===== */
.search-box {
    background: var(--color-card);
    margin: 1% 30% 0;
    position: relative;
    z-index: 2;
    border-radius: 16px;
    padding: 25px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
}
@media(max-width: 768px) {
    .search-box {
        margin: 1% 10% 0;
    }
}
.search-box2 h3 { margin: 0; text-align: center; color: #f0f0f0; }
.search-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto; width: 100%; }
.search-form input {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.search-form button {
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    background: var(--color-accent);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
@media(max-width: 768px) {
    .search-form button {
        padding: 12px 18px;
    }
    .search-form input {
        padding: 12px;
    }
}
.search-form button:hover { background: var(--color-accent-dark); }

/* ===== SECTION TITLE UNDERLINE ===== */
.section-title-bar {
    width: 70px;
    height: 4px;
    margin: 0 auto 30px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-blue), var(--color-accent));
}

/* ===== STEPS ===== */
.steps-section { padding: 60px 8% 20px; overflow: hidden; background: transparent;}
.steps-title {
    text-align: center;
    font-size: 34px;
    color: white;
    margin-bottom: 10px;
    margin-top: 0;
}
.steps-title strong { color: var(--color-accent); }
.steps-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}
.step-card {
    background: var(--color-card);
    padding: 35px 28px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    color: white;
}
.step-number {
    width: 50px;
    height: 50px;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.step-card:nth-child(1) .step-number { background: var(--color-accent); }
.step-card:nth-child(2) .step-number { background: var(--color-blue); }
.step-card:nth-child(3) .step-number { background: var(--color-accent); }
.step-card h3 { font-size: 22px; margin-bottom: 12px; color: white; }
.step-card p { font-size: 15px; line-height: 1.6; color: white; }

/* ===== CATEGORY GRID ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    background: transparent;
    padding: 20px 8% 60px;
}
.card {
    background: var(--color-card);
    padding: 25px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-top: 4px solid var(--color-accent);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    color: white;
}

.card:hover { transform: translateY(-8px); box-shadow: 0 14px 34px rgba(0,0,0,0.14); }
.card img { height: 90px; margin-bottom: 12px; }
.card h3 { margin: 8px 0; color: white; }
.card p { color: white; font-size: 14px; min-height: 40px; }
.btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: var(--color-accent);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.btn_blue {
    display: inline-block;
    margin-top: 10px;
    margin-left: 0;
    padding: 10px 20px;
    background: var(--color-blue);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.btn:hover { background: var(--color-accent-dark); }
.btn_blue:hover { background: var(--color-blue-dark); }

/* ===== FEATURES ROW ===== */
.grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 0 8% 60px;
    background: transparent;
}
.card2 {
    background: var(--color-header);
    color: white;
    padding: 25px 15px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    color: white;
}
.card2 .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.card2:nth-child(1) .icon-circle { background: var(--color-accent); }
.card2:nth-child(2) .icon-circle { background: var(--color-blue); }
.card2:nth-child(3) .icon-circle { background: var(--color-accent); }
.card2 img { height: 28px; filter: brightness(0) invert(1); }
.card2 h4 { margin: 0; font-size: 15px; }

/* ===== COMPANY CTA ===== */
.firmen-anfrage {
    background: var(--color-card);
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 35px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    color: white;
}
.firmen-anfrage h4 { margin-top: 0; }
.firmen-anfrage p { color: white; }
.btn2 {
    display: inline-block;
    margin-top: 10px;
    margin-left: 0;
    padding: 12px 26px;
    background: var(--color-accent);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.btn2:hover { background: var(--color-accent-dark); }

/* ===== ABOUT US ===== */
.about-us { padding: 0 8% 60px; overflow: hidden; background: transparent; }
.about-us .container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-card);
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    color: white;
}
@media (max-width: 768px){
    .about-us .container{
        padding: 15px;
        text-align: center;
    }
    .about-us {
        padding: 0;
    }
}
.about-us h1 { text-align: center; }
.about-us p { line-height: 1.7; }
.about-us strong { color: orange; }

/* ===== FOOTER (matches header exactly) ===== */
footer {
    background: var(--color-header);
    color: #bbb;
    padding: 40px 8% 20px;
    opacity: 1;
    z-index: 1;
}
.features2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .features2 {
        justify-content: space-around;
    }
}

.feature h3 { color: white; margin-top: 0; }
.feature a, .feature strong { color: #bbb; margin-left: 0; }
.feature div { margin-bottom: 8px;}
.feature p { margin: 4px 0; }
footer > p { text-align: center; border-top: 1px solid #333; padding-top: 15px; font-size: 13px; }

@media (max-width: 768px) {
    header { padding: 15px 20px; }
    .mobile-menu-btn { display: block; }
    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 260px;
        height: 100%;
        background: var(--color-header-alt);
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 25px 25px;
        transition: right 0.35s ease;
        z-index: 999;
    }
    nav.active { right: 0; }
}

/* ---- Coupon promo banner (home page) — matches .firmen-anfrage ---- */
.coupon-banner {
    max-width: 860px;
    margin: 40px auto 20px;
    padding: 22px 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    color: white;
}
.coupon-banner h4 { margin: 8px 0 6px; font-size: 18px; }
.coupon-banner p { color: white; margin: 0; font-size: 16px; }
.coupon-banner-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ---- Coupon box (cart) ---- */
.coupon-box { max-width: 320px; margin: 14px auto; }
.coupon-form { display: flex; gap: 8px; }
.coupon-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-transform: uppercase;
}
.coupon-apply {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.coupon-apply:hover { background: var(--color-accent-dark); }
.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #e8f5e9;
    border: 1px solid #b6dfbb;
    color: #1b5e20;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 600;
}
.coupon-remove {
    border: none;
    background: transparent;
    color: #1b5e20;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.coupon-remove:hover { color: #b71c1c; }