/* ============ SeelenMagie-Bibliothek — Static CSS ============ */
:root{
  --bg:#120a1c;
  --bg-2:#1a1029;
  --card:#1d1330;
  --border:#2d1f47;
  --text:#ece4f5;
  --muted:#a899c2;
  --mystic:#b069e8;
  --mystic-deep:#5a3a8c;
  --gold:#dfb24a;
  --gold-soft:#ecd58c;
  --danger:#d94f4f;
  --radius:.2rem;
  --shadow:0 10px 40px -15px rgba(176,105,232,.5);
  --shadow-glow:0 0 30px rgba(176,105,232,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:15px}
body{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3,h4{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
  font-weight: 300; /* die elegante dünne Variante */
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.italic-accent {
  font-style: italic;
  font-weight: 400;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}

.container{max-width: 100%;;margin:0 auto;  padding:0 clamp(1rem, 5vw, 3rem);}

.container-index {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 clamp(2rem, 6vw, 8rem) 4rem;
  box-sizing: border-box;
  
}

@media (max-width: 900px) {
  .container-index {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container-index{
  padding-left:8rem; padding-right:8rem;
}
@media (max-width: 900px){
  .container-index{ padding-left:2rem; padding-right:2rem; }
}

/* Mobile: weniger Padding auf Index-Sektionen */
@media (max-width: 640px){
  body[data-page="home"] .container,
  body[data-page="home"] .container-index{
    padding-left: 2rem!important;
    padding-right: 2rem!important;
  }
}

.eyebrow{
  color:var(--gold);
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:.75rem;
  margin-bottom:.75rem;
}
.text-mystic{color:var(--mystic)}
.text-gold{color:var(--gold)}
.text-muted{color:var(--muted)}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:var(--radius);
  font-size:.95rem;font-weight:500;
  transition:all .2s;cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(135deg,var(--mystic),var(--gold));
  color:#1a0f2e;font-weight:600;
  box-shadow:var(--shadow);
}
.btn-primary:hover{opacity:.92;transform:translateY(-1px)}
.btn-outline{
  border:1px solid var(--gold);
  color:var(--text);
}
.btn-outline:hover{background:rgba(223,178,74,.1)}
.btn-lg{padding:.95rem 2rem;font-size:1rem}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}

/* ============ Header ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(18,10,28,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;max-width:1280px;margin:0 auto;
  gap:1rem;
}
.brand{
  display:flex;align-items:center;gap:.75rem;
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;letter-spacing:.04em;
}
.logo{
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--gold),var(--mystic) 70%,var(--mystic-deep));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;color:#1a0f2e;font-weight:600;
  box-shadow:var(--shadow-glow);
  flex-shrink:0;
}
.brand-text .secondary{color:rgba(236,228,245,.55);font-size:.9em}

.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{
  font-size:.9rem;color:rgba(236,228,245,.8);
  transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}

.nav-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{
  width:42px;height:42px;border-radius:var(--radius);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:all .2s;color:var(--text);
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.cart-count{
  position:absolute;top:-6px;right:-6px;
  background:var(--gold);color:#1a0f2e;
  font-size:.7rem;font-weight:700;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* Search bar (slide-in) */
.search-form{
  position:absolute;top:110%;right:-110%;
  width:min(35rem,90vw);height:3.5rem;
  background:var(--border);
  display:flex;align-items:center;
  padding:0 1rem;
  border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  overflow:hidden;
  transition:right .4s linear;
}
.search-form.active{right:1.5rem}
.search-form input{
  height:100%;width:100%;background:none;border:none;outline:none;
  font-size:1.1rem;color:var(--text);padding:0 1rem;
}
.search-form label{
  font-size:1.2rem;padding:0 1rem;color:var(--gold);cursor:pointer;
  display:flex;align-items:center;
}

.mobile-toggle{display:none}

/* ============ Hero ============ */
.hero{
  position:relative;min-height:92vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin-top:0;padding-top:80px;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,10,28,.4) 0%,rgba(18,10,28,.92) 100%);
  z-index:1;
}
.hero-content{
  position:relative;z-index:2;text-align:center;
  max-width:900px;padding:2rem 1.5rem;
}
.hero-eyebrow{
  color:var(--gold);letter-spacing:.4em;text-transform:uppercase;
  font-size:.8rem;margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.hero h1{
  font-size:clamp(2.5rem,6vw,5rem);
  margin-bottom:2rem;font-weight:300;
}
.hero h1 em{color:var(--mystic);font-style:italic}
.hero-sub{
  font-size:1.1rem;color:var(--muted);max-width:600px;
  margin:0 auto 2.5rem;
}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============ Sections ============ */
section{padding:5rem 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem;
}
.section-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:300}

/* Values / feature grid */
.feature-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}
.feature-card{
  border:1px solid var(--border);
  padding:2rem;border-radius:var(--radius);
  transition:border-color .2s,transform .2s;
}
.feature-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.feature-icon{
  width:48px;height:48px;color:var(--gold);
  margin-bottom:1.25rem;
}
.feature-card h3{font-size:1.5rem;margin-bottom:.75rem}
.feature-card p{color:var(--muted);font-size:.95rem}

/* ============ Product cards ============ */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
}
.product-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .25s;
}
.product-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.product-image{
  aspect-ratio:4/5;overflow:hidden;position:relative;display:block;
}
.product-image img{
  width:100%;height:100%;object-fit:cover;
  transition:.5s;
}
.product-card:hover .product-image img{transform:scale(1.05);}
.product-badges{
  position:absolute;top:.75rem;left:.75rem;
  display:flex;gap:.4rem;
}
.badge{
  font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.3rem .6rem;border-radius:var(--radius);
  font-weight:600;
}
.badge-bestseller{background:var(--gold);color:#1a0f2e}
.badge-new{background:var(--mystic);color:#fff}

.product-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.product-cat{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--gold);margin-bottom:.4rem;
}
.product-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;margin-bottom:.4rem;
  transition:text-shadow .25s,color .25s;
}
.product-card:hover .product-title{
  color:var(--gold);
}
.product-short{font-size:.88rem;color:var(--muted);margin-bottom:1rem;flex:1}
.product-meta{
  display:flex;gap:.85rem;font-size:.78rem;color:var(--muted);
  margin-bottom:1rem;align-items:center;
}
.product-meta .meta-item{display:inline-flex;align-items:center;gap:.3rem}
.product-meta svg.star{color:var(--gold);fill:var(--gold)}
.product-foot{display:flex;align-items:center;justify-content:space-between}
.product-price{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;color:var(--gold);
}
.add-btn{
  width:38px;height:38px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--mystic),var(--gold));
  color:#1a0f2e;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:600;
  transition:opacity .2s;
}
.add-btn:hover{opacity:.85}

/* List view */
.product-list .product-card{flex-direction:row;max-height:200px}
.product-list .product-image{aspect-ratio:1;width:200px;flex-shrink:0}
.product-list .product-body{padding:1.25rem 1.5rem}

/* ============ Quote ============ */
.quote-section{
  background:rgba(29,19,48,.5);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.quote-box{
  max-width:780px;margin:0 auto;text-align:center;padding:0 1.5rem;
}
.quote-icon{
  width:64px;height:64px;border:1.5px solid var(--gold);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 2rem;color:var(--gold);
  background:rgba(223,178,74,.05);
}
.quote-text{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1.45;color:rgba(236,228,245,.95);
}
.quote-author{
  margin-top:1.5rem;color:var(--muted);
  letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;
}

/* ============ Shop layout ============ */
.shop-bar{
  display:flex;flex-wrap:wrap;gap:.75rem;
  align-items:center;
  margin-bottom:2rem;padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.search-input-wrap{position:relative;flex:1;min-width:240px}
.search-input-wrap svg{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--muted);width:18px;height:18px;
}
.input,.select,.textarea{
  width:100%;padding:.7rem 1rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}
.input{padding-left:2.5rem}
.input:focus,.select:focus,.textarea:focus,
.field-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(223,178,74,.15);
}
.select{padding-left:1rem;min-width:160px;width:auto;cursor:pointer}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.view-toggle button{padding:.55rem .7rem;color:var(--muted)}
.view-toggle button.active{background:var(--bg-2);color:var(--gold)}

.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:2.5rem}
.filter-sidebar h3{
  font-size:1.1rem;margin-bottom:.85rem;color:var(--text);
}
.filter-block{margin-bottom:2rem}
.filter-option{
  display:flex;align-items:center;gap:.6rem;
  padding:.4rem 0;font-size:.9rem;color:var(--muted);
  cursor:pointer;
}
.filter-option:hover{color:var(--text)}
.filter-option input{accent-color:var(--gold)}
.filter-count{margin-left:auto;font-size:.75rem;opacity:.7}

.price-range{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.price-range input[type=range]{flex:1;accent-color:var(--gold)}
.price-display{font-size:.85rem;color:var(--muted);margin-top:.5rem;display:flex;justify-content:space-between}

/* ============ Drawer (cart) ============ */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:90;opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.drawer-backdrop.active{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:-100%;
  width:min(420px,100vw);height:100%;
  background:var(--bg-2);
  z-index:100;
  display:flex;flex-direction:column;
  padding:1.5rem;
  border-left:1px solid var(--border);
  transition:right .3s ease;
  overflow-y:auto;
}
.drawer.active{right:0}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.drawer-head h2{
  font-size:1.6rem;display:flex;align-items:center;gap:.6rem;
}
.drawer-close{font-size:1.5rem;color:var(--muted)}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.cart-item{
  display:flex;gap:.85rem;padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.cart-item img{
  width:64px;height:64px;border-radius:var(--radius);object-fit:cover;
  flex-shrink:0;
}
.cart-item-body{flex:1;min-width:0}
.cart-item-title{font-weight:500;font-size:.95rem;margin-bottom:.25rem}
.cart-item-meta{font-size:.75rem;color:var(--muted);margin-bottom:.5rem}
.cart-item-foot{display:flex;align-items:center;justify-content:space-between}
.qty-ctrl{display:flex;border:1px solid var(--border);border-radius:var(--radius)}
.qty-ctrl button{padding:.25rem .55rem;color:var(--muted)}
.qty-ctrl span{padding:.25rem .6rem;font-size:.85rem}
.cart-total{
  margin-top:auto;padding-top:1rem;
  border-top:1px solid var(--border);
}
.cart-total .row{
  display:flex;justify-content:space-between;
  font-size:1.1rem;margin-bottom:1rem;
}
.cart-total .row .price{color:var(--gold);font-weight:600}

/* ============ Forms (Checkout / Contact) ============ */
.form-section{margin-bottom:2.5rem}
.form-section h2{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;margin-bottom:1rem;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.95rem;color:var(--text)}
.field-input{
  padding:.75rem 1rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);font-size:1rem;
  transition:border-color .2s,box-shadow .2s;
  width:100%;
}
.textarea{min-height:120px;resize:vertical;font-family:inherit}

/* radio group payment */
.pay-option{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem;border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;
  margin-bottom:.75rem;
  transition:border-color .2s;
}
.pay-option:hover{border-color:var(--gold)}
.pay-option input{accent-color:var(--gold)}
.pay-option .pay-label{font-weight:500}
.pay-option .pay-hint{font-size:.8rem;color:var(--muted)}

/* Checkout layout */
.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:2.5rem;align-items:start}
.summary-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  background:var(--card);
  position:sticky;top:100px;
}
.summary-card h2{font-size:1.3rem;margin-bottom:1rem;font-family:'Cormorant Garamond',serif}
.summary-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);margin:.4rem 0}
.summary-total{
  display:flex;justify-content:space-between;
  font-size:1.15rem;margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--border);
}
.summary-total .price{color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.5rem}

/* ============ Reviews ============ */
.reviews-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
}
.review-card{
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:1.5rem;
  background:var(--card);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.review-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--mystic),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  color:#1a0f2e;font-weight:600;
  margin-bottom:.75rem;
}
.review-name{font-weight:600;margin-bottom:.15rem}
.review-reading{font-size:.78rem;color:var(--gold);margin-bottom:.5rem;letter-spacing:.05em}
.review-stars{color:var(--gold);margin-bottom:.75rem;font-size:.95rem;letter-spacing:.05em}
.review-text{
  font-size:.92rem;color:var(--muted);line-height:1.55;
  font-style:italic;
}

/* ============ About — diagonal image ============ */
.about-wrap{position:relative;padding:0;min-height:90vh}
.about-content{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  align-items:center;
  padding:4rem 1.5rem;
  max-width:1700px;margin:0 auto;
  position:relative;z-index:2;
}
.about-image{
  position:relative;
  height:100%;min-height:500px;
}
.about-image .skewed{
  position:absolute;inset:0;
  transform:skewX(-8deg);
  overflow:hidden;
  border:1px solid var(--gold);
  box-shadow:var(--shadow);
}
.about-image .skewed img{
  width:120%;height:120%;object-fit:cover;
  transform:skewX(8deg) scale(1.15);
}

/* ============ Contact ============ */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:2.5rem; width: 100%}
.contact-info-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  background:var(--card);
  margin-bottom:2rem;
  min-height: 7rem;
  display:flex;align-items:flex-start;gap:.85rem;

}
.contact-info-card svg{color:var(--gold);flex-shrink:0;margin-top:.2rem}
.contact-info-card .label{font-weight:500;margin-bottom:.2rem}
.contact-info-card .value{font-size:.88rem;color:var(--muted)}
.contact-info-card a:hover{color:var(--gold)}





/* ============ Footer ============ */
.site-footer{
  border-top:1px solid var(--border);
  background:rgba(29,19,48,.4);
  margin-top:auto;
}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2.5rem;padding:4rem 0 2rem;
}
.footer-grid h4{font-size:1.1rem;margin-bottom:1rem}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:.5rem;font-size:.9rem;color:var(--muted)}
.footer-grid li a:hover{color:var(--gold)}
.socials{display:flex;gap:.6rem;margin-top:.5rem}
.social-icon{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .2s;
}
.social-icon:hover{border-color:var(--gold);color:var(--gold)}
.footer-bottom{
  border-top:1px solid var(--border);
  padding:1.5rem 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  font-size:.78rem;color:var(--muted);
}

/* ============ Toast ============ */
.toast{
  position:fixed;bottom:2rem;right:2rem;
  background:var(--bg-2);border:1px solid var(--gold);
  padding:1rem 1.25rem;border-radius:var(--radius);
  box-shadow:var(--shadow);
  z-index:200;
  transform:translateY(150%);transition:transform .3s;
  max-width:320px;
}
.toast.active{transform:translateY(0)}
.toast strong{color:var(--gold);display:block;margin-bottom:.2rem}

/* ============ Responsive ============ */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-links.active{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg-2);
    padding:1.5rem;gap:1rem;
    border-bottom:1px solid var(--border);
  }
  .mobile-toggle{display:flex}
  .shop-layout{grid-template-columns:1fr}
  .filter-sidebar{display:none}
  .filter-sidebar.active{display:block}
  .checkout-grid{grid-template-columns:1fr}
  .summary-card{position:static}
  .contact-grid{grid-template-columns:1fr}
  .about-content{grid-template-columns:1fr}
  .about-image{min-height:400px}
  .product-list .product-card{flex-direction:column;max-height:none}
  .product-list .product-image{width:100%;aspect-ratio:4/3}
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .hero h1{font-size:2.5rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  section{padding:3rem 0}
}

main{padding-top:80px;flex:1}
.page-head{padding:3rem 0 2rem}
.page-head h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:300;margin-bottom:.5rem}
.page-head p{color:var(--muted);max-width:640px}

/* Stars utility */
.stars{display:inline-flex;gap:.1rem;color:var(--gold)}

/* ============ Custom overrides (latest pass) ============ */

/* Header: Brand weiter links, Actions weiter rechts */
.site-header .nav{
  max-width: none;
  padding-left: clamp(1rem, 4vw, 8rem);
  padding-right: clamp(1rem, 4vw, 8rem);
}

/* Bestseller auf der Startseite (PC): grösser & breiter, gap 3rem.
   Mobil & andere Seiten unverändert. */
@media (min-width: 901px){
  body[data-page="home"] #featured-grid{
    grid-template-columns: repeat(4, 1fr)!important;
    gap: 3rem;
  }
}

/* Warenkorb-Drawer: Buttons (Weiter stöbern / Zur Kasse) ganz nach unten */
.drawer{ overflow: hidden; }
#cart-body{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.cart-total{
  flex-shrink: 0;
  margin-top: auto;
}

/* Kasse + Kontakt: Fläche ausnutzen (PC & iPad) bis 8rem L/R Padding,
   damit nicht alles in der Mitte zusammengequetscht ist. */
body[data-page="checkout"] main.container,
body[data-page="contact"] main.container{
  max-width: none;
  width: 100%;
  padding-left: clamp(1.5rem, 6vw, 8rem);
  padding-right: clamp(1.5rem, 6vw, 8rem);
}
body[data-page="contact"] main.container{
  padding-bottom: 3rem;
}

/* Auf grossen Screens den inneren Grids auch wirklich Platz geben */
@media (min-width: 901px){
  body[data-page="checkout"] .checkout-grid{
    grid-template-columns: 1fr 420px;
    gap: 3rem;
  }
  body[data-page="contact"] .contact-grid{
    grid-template-columns: 1fr 360px;
    gap: 3rem;
  }
}

/* Mobile: Header wieder schmal */
@media (max-width: 900px){
  .site-header .nav{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}