:root{--bg:#fffaf6;--surface:#fff;--text:#3f3430;--muted:#766862;--accent:#a86b55;--accent-dark:#87513f;--line:#eaded7;--success:#5d8a63;--warning:#b98235;--danger:#a04d4d;--radius:18px;--shadow:0 10px 35px rgba(63,52,48,.08);--max:1120px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);line-height:1.5}img{max-width:100%;display:block}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 32px),var(--max));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.is-hidden{display:none!important}.muted{color:var(--muted)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,calc((100vw - var(--max))/2));background:rgba(255,250,246,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;flex:0 0 58px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);line-height:0}.brand img{display:block;width:100%;height:100%;object-fit:cover}.main-nav{display:flex;align-items:center;gap:14px;font-size:.95rem}.main-nav a{padding:7px 0}.cart-link{display:flex;align-items:center;gap:6px}.cart-badge{min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:var(--accent);color:white;font-size:.75rem}.language-switch{border:1px solid var(--line);background:white;border-radius:99px;padding:6px 10px;color:var(--text)}
.hero{padding:64px 0 32px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:700;color:var(--accent);margin:0 0 10px}.hero h1,.page-section h1{font-family:Georgia,serif;font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;margin:.2em 0}.hero-text{max-width:600px;color:var(--muted);font-size:1.05rem}.page-section{padding:40px 0 80px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:80px}.product-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.product-image-wrap{position:relative;aspect-ratio:1/1;background:#f2e9e2;overflow:hidden}.product-card-image{width:100%;height:100%;object-fit:cover;transition:opacity .2s}.photo-toggle{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:5px;border:0;border-radius:999px;background:rgba(255,255,255,.94);padding:8px 11px;color:var(--text);box-shadow:0 4px 15px rgba(0,0,0,.12);font-weight:700}.photo-toggle span:first-child{min-width:17px;text-align:center}.product-card-body{padding:18px}.product-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.product-card h3{margin:0;font-family:Georgia,serif;font-size:1.35rem}.product-card-heading strong{white-space:nowrap}.availability{display:inline-flex;align-items:center;gap:7px;margin:9px 0 16px;color:var(--muted);font-size:.9rem}.availability-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.availability-available .availability-dot{background:var(--success)}.availability-limited .availability-dot{background:var(--warning)}.availability-unavailable .availability-dot{background:var(--danger)}.product-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid transparent;font-weight:700;text-align:center;transition:.15s}.button:disabled{opacity:.45;cursor:not-allowed}.button-primary{background:var(--accent);color:white}.button-primary:hover:not(:disabled){background:var(--accent-dark)}.button-secondary{background:transparent;border-color:var(--line)}.button-large{min-height:50px;width:100%}.back-link{display:inline-block;color:var(--muted);margin-bottom:20px}.state-message{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:white}
.product-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:60px;padding:30px 0 80px}.detail-main-image{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:#f2e9e2}.detail-main-image img{width:100%;height:100%;object-fit:cover}.detail-thumbnails{display:flex;gap:10px;margin-top:12px}.detail-thumb{width:74px;height:74px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:white}.detail-thumb.is-active{border-color:var(--accent)}.detail-thumb img{width:100%;height:100%;object-fit:cover}.detail-copy{padding-top:12px}.detail-copy h1{font-family:Georgia,serif;font-size:clamp(2.3rem,6vw,4rem);line-height:1;margin:.1em 0 .2em}.detail-price{font-size:1.35rem;font-weight:800;margin-bottom:4px}.detail-specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0;padding:18px 0;gap:18px}.detail-specs div{display:grid;gap:3px}.detail-specs span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.detail-description h2{font-family:Georgia,serif;font-size:1.35rem}.detail-description{margin-bottom:28px}
.cart-layout,.checkout-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:28px;align-items:start}.cart-items{display:grid;gap:14px}.cart-item{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:14px;background:white;border:1px solid var(--line);border-radius:var(--radius)}.cart-item>a img{width:120px;height:120px;object-fit:cover;border-radius:12px}.cart-item-title{display:flex;justify-content:space-between;gap:12px}.cart-item h2{font-family:Georgia,serif;font-size:1.3rem;margin:0}.text-button{border:0;background:none;color:var(--muted);text-decoration:underline;padding:0}.quantity-control{display:flex;align-items:center;gap:10px;margin-top:18px}.quantity-control button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:white}.quantity-control output{min-width:22px;text-align:center}.order-summary-card{position:sticky;top:90px;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.order-summary-card h2{font-family:Georgia,serif;margin-top:0}.summary-total{font-size:1.5rem;font-weight:800;margin:8px 0 22px}.summary-line{display:flex;justify-content:space-between;gap:12px;margin:10px 0}.summary-divider{height:1px;background:var(--line);margin:18px 0}.summary-total-line{font-size:1.15rem;font-weight:800}.empty-cart{text-align:center;padding:70px 20px;background:white;border:1px dashed var(--line);border-radius:var(--radius)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}.form-grid label{display:grid;gap:7px;font-weight:650}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid textarea{width:100%;border:1px solid var(--line);background:white;border-radius:12px;padding:12px 14px;color:var(--text);outline:none}.form-grid input:focus,.form-grid textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,107,85,.12)}.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin:20px 0;font-size:.9rem}.checkbox-row input{margin-top:4px}.honeypot{position:absolute;left:-10000px;opacity:0}.form-status{min-height:24px;color:var(--muted)}.form-status.is-error{color:var(--danger)}
.site-footer{border-top:1px solid var(--line);padding:26px 0;margin-top:auto}.footer-inner{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.85rem}.footer-inner nav{display:flex;gap:18px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--text);color:white;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;inset:0;z-index:100;background:rgba(63,52,48,.45);display:grid;place-items:center;padding:20px}.modal-card{position:relative;width:min(100%,460px);background:var(--bg);border-radius:24px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.2)}.modal-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:1.8rem;color:var(--muted)}



/* Haargummi-Varianten: Auswahl direkt in der Produktkachel */
.variant-product-card .product-image-link { cursor: default; }
.variant-product-card .variant-image-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.variant-product-card .variant-image-button .product-image-wrap { pointer-events: none; }
.variant-product-card .variant-choice-label { display: block; margin: .85rem 0 .45rem; font-size: .9rem; font-weight: 600; }
.variant-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 0 0 .85rem; }
.variant-option { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .45rem .2rem; border: 1px solid var(--border, #eadbd2); border-radius: 12px; background: #fff; color: inherit; cursor: pointer; font: inherit; }
.variant-option[aria-pressed="true"] { border: 2px solid var(--accent, #a96c55); background: #fff8f4; padding: calc(.45rem - 1px) calc(.2rem - 1px); }
.variant-option:focus-visible { outline: 3px solid rgba(169,108,85,.35); outline-offset: 2px; }
.variant-swatch { width: 34px; height: 34px; display: block; border-radius: 50%; border: 1px solid rgba(65,45,38,.16); box-shadow: inset 0 0 0 3px rgba(255,255,255,.42); }
.variant-option-name { width: 100%; font-size: .72rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.variant-selected-label { min-height: 1.3em; margin: 0 0 .65rem; font-size: .82rem; color: var(--muted, #796b64); }
.variant-option:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.variant-product-card .product-card-actions { margin-top: .25rem; }
.variant-product-card .variant-price { white-space: nowrap; }
@media (max-width: 480px) {
  .variant-options { gap: .3rem; }
  .variant-swatch { width: 30px; height: 30px; }
  .variant-option { padding: .4rem .12rem; }
  .variant-option-name { font-size: .68rem; }
}

/* Haargummi-Detailseite: Bildkacheln aller Farbvarianten unter dem Hauptbild */
.variant-detail-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.variant-detail-tile{min-width:0;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);text-align:center;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.variant-detail-tile.is-active{border:2px solid var(--accent);padding:5px;background:#fff8f4}
.variant-detail-tile:focus-visible{outline:3px solid rgba(168,107,85,.35);outline-offset:2px}
.variant-detail-tile:disabled{opacity:.45;cursor:not-allowed}
.variant-detail-tile-image{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:#f2e9e2}
.variant-detail-tile-image img{width:100%;height:100%;object-fit:contain}
.variant-detail-tile-name{font-size:.82rem;line-height:1.2;overflow-wrap:anywhere}
@media(max-width:480px){.variant-detail-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.variant-detail-tile{padding:4px;border-radius:9px}.variant-detail-tile.is-active{padding:3px}.variant-detail-tile-name{font-size:.7rem}}

/* Miniatur-Galerie aller Haargummi-Varianten unter dem Hauptbild */
.variant-thumbnail-gallery{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:flex-start}
.variant-gallery-thumb{width:86px;height:auto;min-height:86px;flex:0 0 86px;padding:3px 3px 5px;border:2px solid transparent;display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:11px;overflow:hidden}
.variant-gallery-thumb img{display:block;width:100%;height:70px;object-fit:contain;border-radius:7px;background:#f8f1ec}
.variant-gallery-thumb.is-active{border-color:var(--accent);background:#fff8f4}
.variant-thumb-label{font-size:.72rem;line-height:1.1;overflow-wrap:anywhere;text-align:center;color:var(--text)}
.variant-gallery-thumb:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:480px){.variant-thumbnail-gallery{gap:7px}.variant-gallery-thumb{width:68px;flex-basis:68px;min-height:70px}.variant-gallery-thumb img{height:52px}.variant-thumb-label{font-size:.65rem}}


/* Produktbilder: Kuscheltiere sind Standard; Haargummis bleiben unverändert.
   Neue Kuscheltiersorten werden automatisch erfasst, solange sie nicht haargummis-001 heißen. */
.product-card:not([data-product-id="haargummis-001"]) .product-image-wrap {
  background: #f2e9e2;
}
.product-card:not([data-product-id="haargummis-001"]) .product-card-image {
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
}

/* Detailseite: vollständiges Motiv mit etwas Luft zum Rand. */
.product-detail:not([data-product-id="haargummis-001"]) .detail-main-image img {
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
}
.product-detail:not([data-product-id="haargummis-001"]) .detail-thumb img {
  padding: 4px;
  object-fit: contain;
}

/* Varianten-Miniaturen auf Kuscheltier-Detailseiten, sofern vorhanden. */
.product-detail:not([data-product-id="haargummis-001"]) .variant-gallery-thumb img,
.product-detail:not([data-product-id="haargummis-001"]) .variant-detail-tile-image img {
  padding: 4px;
  object-fit: contain;
}


/* Warenkorb: Kuscheltierbilder wie auf den Produktkarten vollständig einpassen.
   Haargummis bleiben unverändert. */
.cart-item:not([data-product-id="haargummis-001"]) > a img {
  padding: 4px;
  object-fit: contain;
  background: #f2e9e2;
}
/* --- Ecken-Banner (Ribbon) Steuerung --- */
.product-card {
  position: relative; /* Basis für die absolute Positionierung des Banners */
}

.product-ribbon {
  position: absolute;
  top: 18px;
  right: -32px;
  transform: rotate(45deg);
  width: 140px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 10;
  pointer-events: none; /* Verhindert Störungen beim Klicken auf die Karte */
}

/* Farbvarianten basierend auf dem Badge-Typ */
.product-ribbon-bestseller {
  background: var(--accent, #a86b55);
}

.product-ribbon-limited-edition {
  background: var(--warning, #b98235);
}

.product-ribbon-promo {
  background: var(--danger, #a04d4d);
}