*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

/* body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.55;
    background:var(--shop-background);
    color:var(--shop-text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
} */
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.55;

    background:
        radial-gradient(
            circle at 5% 12%,
            rgba(89,185,78,.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 95% 20%,
            rgba(89,185,78,.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(89,185,78,.06),
            transparent 42%
        ),
        var(--shop-background);

    color:var(--shop-text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
}

.wrap{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
}


/* =========================================================
   Kopfbereich
   ========================================================= */

.site-header{
    background:var(--shop-header);
    color:#fff;
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.nav{
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    letter-spacing:-.02em;
    white-space:nowrap;
}

.brand-mark{
    display:inline-grid;
    place-items:center;
    background:#fff;
    color:var(--shop-header);
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:var(--shop-radius);
    font-weight:800;
}

.nav nav{
    display:flex;
    gap:5px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.nav nav a{
    color:#fff;
    text-decoration:none;
    padding:9px 11px;
    border-radius:var(--shop-radius);
    font-size:14px;
    font-weight:600;
    opacity:.94;
    transition:background .18s ease,opacity .18s ease,transform .18s ease;
}

.nav nav a:hover{
    background:rgba(255,255,255,.12);
    opacity:1;
}

.cart-link{
    background:var(--shop-button);
    color:var(--shop-button-text)!important;
    padding:10px 15px!important;
    border-radius:var(--shop-radius);
    margin-left:5px;
    opacity:1!important;
    box-shadow:var(--shop-shadow);
}

.cart-link:hover{
    background:var(--shop-primary-hover)!important;
    transform:translateY(-1px);
}


/* =========================================================
   Hero
   ========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    padding:70px 0 44px;
}

/*.hero::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-150px;
    top:-130px;
    border-radius:50%;
    background:var(--shop-primary);
    opacity:.07;
    pointer-events:none;
}*/

.hero h1{
    position:relative;
    z-index:1;
    margin:0 0 16px;
    white-space:nowrap;
    font-size:clamp(22px,4.25vw,58px);
    line-height:1.04;
    letter-spacing:-.045em;
    font-weight:850;
}

.hero p{
    position:relative;
    z-index:1;
    margin:0;
    white-space:nowrap;
    color:var(--shop-muted);
    font-size:clamp(7px,1.55vw,19px);
    line-height:1.65;
}


/* =========================================================
   Raster / Karten
   ========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.card{
    background:var(--shop-card);
    border:1px solid var(--shop-border);
    border-radius:var(--shop-radius);
    padding:28px;
    box-shadow:var(--shop-shadow);
}

.grid > .card{
    display:flex;
    flex-direction:column;
    transition:transform .18s ease,box-shadow .18s ease;
}

.grid > .card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.card h2{
    margin:0 0 10px;
    font-size:24px;
    line-height:1.2;
    letter-spacing:-.025em;
}

.card p{
    margin-top:0;
}

.grid > .card form{
    margin-top:auto;
}


/* =========================================================
   Preise / Texte
   ========================================================= */

.price{
    display:flex;
    align-items:baseline;
    gap:7px;
    font-size:30px;
    line-height:1.1;
    font-weight:850;
    letter-spacing:-.035em;
    margin:18px 0 20px;
    color:var(--shop-primary);
}

.price .small{
    color:var(--shop-muted);
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
}

.muted{
    color:var(--shop-muted);
}


/* =========================================================
   Buttons
   ========================================================= */

.btn{
    min-height:46px;
    border:0;
    border-radius:var(--shop-radius);
    padding:12px 17px;
    background:var(--shop-button);
    color:var(--shop-button-text);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    font:inherit;
    font-weight:700;
    line-height:1.2;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.btn:hover{
    background:var(--shop-primary-hover);
    transform:translateY(-1px);
    box-shadow:var(--shop-shadow);
}

.btn:active{
    transform:translateY(0);
}

.btn.secondary{
    background:var(--shop-border);
    color:var(--shop-text);
    box-shadow:none;
}

.btn.secondary:hover{
    background:var(--shop-primary);
    color:var(--shop-button-text);
}

.btn.full{
    width:100%;
}


/* =========================================================
   Formulare
   ========================================================= */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.field.full{
    grid-column:1/-1;
}

label{
    font-weight:650;
    line-height:1.35;
}

input,
select,
textarea{
    width:100%;
    min-height:46px;
    padding:11px 13px;
    border:1px solid var(--shop-border);
    border-radius:var(--shop-radius);
    font:inherit;
    background:var(--shop-card);
    color:var(--shop-text);
    transition:border-color .18s ease,box-shadow .18s ease;
}

input:hover,
select:hover,
textarea:hover{
    border-color:var(--shop-primary);
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--shop-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--shop-primary) 14%,transparent);
}

input[type="checkbox"],
input[type="radio"]{
    width:auto;
    min-height:0;
    accent-color:var(--shop-primary);
}

textarea{
    min-height:110px;
    resize:vertical;
}


/* =========================================================
   Datei-Upload
   ========================================================= */

input[type="file"]{
    padding:8px;
    cursor:pointer;
}

input[type="file"]::file-selector-button{
    margin-right:10px;
    padding:8px 12px;
    border:0;
    border-radius:calc(var(--shop-radius) - 2px);
    background:var(--shop-primary);
    color:var(--shop-button-text);
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

input[type="file"]::file-selector-button:hover{
    background:var(--shop-primary-hover);
}

.drop{
    border:2px dashed var(--shop-border);
    padding:25px;
    border-radius:var(--shop-radius);
    background:color-mix(in srgb,var(--shop-primary) 4%,var(--shop-card));
}


/* =========================================================
   Bereiche / Summen
   ========================================================= */

.section{
    margin:26px 0;
}

.total{
    font-size:23px;
    font-weight:800;
    letter-spacing:-.02em;
}


/* =========================================================
   Hinweise
   ========================================================= */

.notice{
    padding:14px 17px;
    border:1px solid var(--shop-border);
    border-radius:var(--shop-radius);
    background:color-mix(in srgb,var(--shop-primary) 5%,var(--shop-card));
    margin:18px 0;
}

.error{
    background:color-mix(in srgb,var(--shop-error) 8%,var(--shop-card));
    color:var(--shop-error);
    border-color:color-mix(in srgb,var(--shop-error) 25%,var(--shop-border));
}

.success{
    background:color-mix(in srgb,var(--shop-success) 8%,var(--shop-card));
    color:var(--shop-success);
    border-color:color-mix(in srgb,var(--shop-success) 25%,var(--shop-border));
}


/* =========================================================
   Tabellen
   ========================================================= */

.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--shop-card);
    border:1px solid var(--shop-border);
    border-radius:var(--shop-radius);
    overflow:hidden;
}

.table th,
.table td{
    padding:12px 13px;
    border-bottom:1px solid var(--shop-border);
    text-align:left;
    vertical-align:top;
}

.table th{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--shop-muted);
    background:color-mix(in srgb,var(--shop-primary) 4%,var(--shop-card));
}

.table tr:last-child td{
    border-bottom:0;
}


/* =========================================================
   Footer
   ========================================================= */

/* .site-footer{
    margin-top:80px;
    padding:32px 0;
    background:var(--shop-header);
    color:rgba(255,255,255,.78);
}

.site-footer a{
    color:#fff;
} */

.site-footer{
    margin-top:80px;
    padding:28px 0 32px;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--shop-primary) 4%,
                var(--shop-background)
            ),
            var(--shop-background)
        );

    border-top:1px solid var(--shop-border);

    color:var(--shop-muted);

    font-size:14px;
}

.footer-content{
    text-align:center;
    line-height:1.6;
}

.site-footer a{
    color:var(--shop-text);
    text-decoration:none;
    font-weight:600;
}

.site-footer a:hover{
    color:var(--shop-primary);
}

/* =========================================================
   Admin-Navigation
   ========================================================= */

.admin-nav{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:20px 0;
}

.admin-nav a{
    padding:9px 12px;
    background:var(--shop-card);
    border:1px solid var(--shop-border);
    border-radius:var(--shop-radius);
    text-decoration:none;
    color:var(--shop-text);
}


/* =========================================================
   Hilfsklassen
   ========================================================= */

.small{
    font-size:13px;
}

.right{
    text-align:right;
}


/* =========================================================
   Versand und Abholung
   ========================================================= */

.delivery-options{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
    margin:7px 0 13px;
}

.delivery-options label{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0;
    cursor:pointer;
}


/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:900px){

    .nav{
        gap:16px;
    }

    .nav nav{
        gap:3px;
    }
}

@media(max-width:760px){

    .wrap{
        padding:0 18px;
    }

    .grid,
    .form-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:48px 0 34px;
    }

    /*
       Die beiden Hero-Texte bleiben bewusst in jeweils
       einer Zeile. Die Schrift skaliert mit der Breite.
    */
    .hero h1{
        font-size:clamp(16px,8.8vw,36px);
    }

    .hero p{
        font-size:clamp(7px,2.9vw,17px);
    }

    .nav{
        min-height:auto;
        align-items:flex-start;
        flex-direction:column;
        padding-top:14px;
        padding-bottom:14px;
    }

    .nav nav{
        width:100%;
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:2px;
    }

    .nav nav a{
        flex:0 0 auto;
    }

    .nav nav .cart-link{
        margin-left:0;
    }

    .card{
        padding:22px;
    }

    .table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

/*    .hero::after{
        width:220px;
        height:220px;
        right:-130px;
        top:-100px;
    }*/
}

@media(max-width:480px){

    .hero{
        padding-top:38px;
    }

    .hero h1{
        font-size:clamp(14px,8.8vw,30px);
    }

    .hero p{
        font-size:clamp(7px,2.7vw,14px);
    }

    .price{
        font-size:28px;
    }

    .brand{
        font-size:18px;
    }
}