/* Bluetensekt modern styles - no inline styles used */
:root{
    --bg:#fffdfc;
    --primary:#8a3e6f; /* rose/plum */
    --primary-600:#6f3159;
    --accent:#d9b8c4; /* soft rose */
    --muted:#5a5a5a;
    --text:#1f1f1f;
    --surface:#ffffff;
    --border:#e9e4e1;
    --link:#8a3e6f;
    --link-hover:#6f3159;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:linear-gradient(180deg,var(--bg),#fff);
}
.container{max-width:1100px;margin-inline:auto;padding-inline:1rem}
.header{
    position:sticky;top:0;z-index:10;
    background-color:rgba(255,255,255,0.85);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}
.brand img{height:44px;width:auto;border-radius:6px;object-fit:cover}
.brand .title{font-weight:700;letter-spacing:.2px}
nav ul{list-style:none;display:flex;gap:.75rem;margin:0;padding:0;flex-wrap:wrap}
nav a{
    display:inline-block;padding:.5rem .75rem;border-radius:8px;
    color:var(--link);text-decoration:none;font-weight:600
}
nav a:hover{background-color:#f7f3f5;color:var(--link-hover)}
.hero{
    position:relative;isolation:isolate;
    padding:min(14vh,8rem) 0 3rem;
    background:
        radial-gradient(60rem 20rem at 20% -10%, #f6ecf0 30%, transparent 30%),
        radial-gradient(60rem 20rem at 80% -10%, #f3f6ef 30%, transparent 30%),
        linear-gradient(180deg,#fff, #fff);
}
.hero .content{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
@media (max-width:900px){.hero .content{grid-template-columns:1fr}}
h1{font-size:clamp(1.8rem, 2vw + 1.4rem, 2.6rem);margin:.25rem 0 .75rem;line-height:1.15}
.lead{font-size:clamp(1rem, .6vw + .9rem, 1.25rem);color:var(--muted);max-width:60ch}
.cta{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}
.cta1{display:flex;gap:.45rem;margin-top:1rem;flex-wrap:wrap}
.button{appearance:none;border:1px solid var(--primary);background:var(--primary);color:white;padding:.7rem 1rem;border-radius:10px;font-weight:700;text-decoration:none}
.button:hover{background:var(--primary-600);border-color:var(--primary-600)}
.button.secondary{background:transparent;color:var(--primary);border-color:var(--primary)}
.button.secondary:hover{background:#fbf7f9}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 18px -12px rgba(0,0,0,.15)}
.card img{display:block;width:100%;height:170px;object-fit:cover}
.card .body{padding:1rem}
.card .body h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.card .body p{margin:0;color:var(--muted);font-size:.95rem}
.section{padding:3rem 0;border-top:1px solid var(--border)}
.section h2{margin-top:0;margin-bottom:.5rem;font-size:1.6rem}
.section .muted{color:var(--muted)}
.list-links{display:flex;flex-wrap:wrap;gap:.5rem}
.link-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:999px;border:1px solid var(--border);background:#fff;text-decoration:none;color:var(--link);font-weight:600}
.link-pill:hover{border-color:#d6cbd1;background:#fdf7fb}
.footer{padding:2rem 0;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
@media (max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:#faf7f6}
.badges{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.badges img{height:64px;width:auto;border-radius:8px;border:1px solid var(--border);background:#fff}
.small{font-size:.9rem}
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.25rem}
.product-content {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
}

.product-image img {
    width: 400px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 30px;
}

.product-info {
    flex: 1; /* Beschreibung nimmt restliche Breite */
}

@media (max-width: 800px) {
    .product-content {
        flex-direction: column;
    }

    .product-image img {
        width: 100%;
    }
}