/* LoopBro shop, forms and consent UI */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

button,
a,
label,
input,
select,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.cart-toggle,
.account-link {
  min-height: 44px;
}

input,
select,
textarea {
  font-size: 16px;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

:where(button, .btn, .cart-toggle):active {
  transform: scale(.97);
}

[hidden] {
  display: none !important;
}

.account-link,
.cart-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: 600 .86rem/1 var(--sans);
  white-space: nowrap;
}

.cart-toggle {
  gap: 7px;
  padding: 0 4px;
  cursor: pointer;
}

.cart-count {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .72rem;
}

body.page-home .site-header:not(.scrolled):not(.open) .cart-toggle,
body.page-home .site-header:not(.scrolled):not(.open) .account-link {
  color: #fff;
}

body.page-home .site-header:not(.scrolled):not(.open) .cart-count {
  background: #fff;
  color: var(--ink);
}

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(30px, 6vw, 84px);
  align-items: start;
  padding-block: clamp(28px, 5vw, 72px);
}

.product-page__media {
  min-height: min(72vh, 760px);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.product-page__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-page__details {
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

.product-page__title {
  margin-top: 8px;
}

.product-page__price {
  margin: 16px 0 0;
  font: 700 1.15rem/1.2 var(--sans);
}

.product-buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  margin-block: 28px 18px;
}

.product-field {
  display: grid;
  gap: 7px;
  font-size: .88rem;
  font-weight: 700;
}

.product-field select,
.product-field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.product-buy .form-status,
.product-buy__actions {
  grid-column: 1 / -1;
}

.product-buy__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-buy__actions .btn {
  width: 100%;
}

.shop-unconfigured {
  padding: 10px 12px;
  border-left: 3px solid var(--yellow);
  background: #f6f8fb;
  color: #4d3b00;
}

.form-status {
  min-height: 1.5em;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.form-status.is-error,
.cart-line__availability {
  color: #9f2517;
  font-weight: 700;
}

.form-status.is-success {
  color: #176b55;
  font-weight: 700;
}

.form-success {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #8bc9b8;
  border-radius: 10px;
  background: #edf8f4;
  color: #135544;
  font-weight: 700;
}

form.is-success > :not([data-form-success]):not([data-form-status]) {
  display: none;
}

.newsletter__form [data-form-status],
.newsletter__form [data-form-success] {
  flex: 1 0 100%;
}

.form button[disabled],
[data-checkout-submit][disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .48;
}

.file-preview {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.file-preview img {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
}

.file-preview small {
  color: var(--muted);
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  border: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}

.cart-backdrop.is-open {
  visibility: visible;
  background: rgba(20, 20, 20, .42);
  opacity: 1;
}

.cart-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 190;
  width: min(470px, 94vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: max(20px, env(safe-area-inset-top)) clamp(18px, 4vw, 30px) max(22px, env(safe-area-inset-bottom));
  border-left: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(102%);
  transition: transform .24s ease, opacity .2s ease;
}

.cart-sheet.is-open {
  border-left-color: var(--line);
  background: #fff;
  box-shadow: -24px 0 70px -35px rgba(0, 0, 0, .55);
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.cart-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.cart-sheet__head h2 {
  font: 600 clamp(1.45rem, 4vw, 2rem)/1 var(--disp);
}

.cart-sheet__head [data-cart-close] {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;   /* ohne grauen Kreis (Celina 25.10.2026) */
  color: var(--ink);
  font-size: 1.75rem;
  cursor: pointer;
}

.cart-sheet__items,
[data-cart-page-items],
[data-checkout-items] {
  min-width: 0;
}

.cart-sheet__items {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.cart-sheet__foot {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.cart-sheet__foot .btn {
  width: 100%;
  padding-inline: 16px;
  text-align: center;
}

.cart-empty {
  padding-block: 22px;
  color: var(--muted);
}

.cart-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-block: 17px;
  border-bottom: 1px solid var(--line);
}

.cart-line__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cart-line__name {
  overflow-wrap: anywhere;
  font-family: var(--disp);
  line-height: 1.2;
}

.cart-line__size,
.cart-line__price,
.cart-line__fixed-quantity,
.cart-line__availability {
  font-size: .86rem;
}

.cart-line__size,
.cart-line__fixed-quantity {
  color: var(--muted);
}

.cart-line__controls {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.cart-quantity {
  display: grid;
  grid-template-columns: 44px minmax(34px, auto) 44px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.cart-quantity__button,
.cart-line__remove {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 700 1rem/1 var(--sans);
}

.cart-quantity output {
  min-width: 34px;
  text-align: center;
  font-weight: 700;
}

.cart-line__remove {
  width: auto;
  color: var(--muted);
  font-size: .8rem;
  text-decoration: underline;
}

body.cart-is-open {
  overflow: hidden;
  overscroll-behavior-y: none;
}

.cart-page,
.checkout-page {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: start;
  padding-block: 32px clamp(60px, 8vw, 110px);
}

.cart-page__lines,
.checkout-page__items,
.order-summary {
  min-width: 0;
}

.order-summary {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

.order-summary h2,
.checkout-page__items h2 {
  font-family: var(--disp);
  font-size: 1.4rem;
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 12px;
  border-block: 1px solid var(--line);
}

.order-summary .btn {
  width: 100%;
  text-align: center;
}

.checkout-head .link-arrow--back {
  display: inline-block;
  margin-bottom: 24px;
}

[data-express-slot] {
  min-height: 0;
}

[data-express-slot]:not([hidden]) {
  min-height: 48px;
  width: 100%;
}

.analytics-consent {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  z-index: 210;
  max-width: 680px;
  margin-left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: center;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .2s ease, transform .2s ease;
}

.analytics-consent.is-visible {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 24px 70px -34px rgba(0, 0, 0, .62);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.analytics-consent h2 {
  font-family: var(--disp);
  font-size: 1.2rem;
}

.analytics-consent p {
  margin: 7px 0 0;
  font-size: .9rem;
}

.analytics-consent__actions {
  display: flex;
  gap: 8px;
}

.analytics-consent__actions .btn {
  padding: 10px 18px;
}

.analytics-consent > .form-status {
  grid-column: 1 / -1;
  margin: 0;
}

[data-analytics-settings] {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .account-link {
    display: none;
  }

  .site-header__actions {
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .product-page,
  .cart-page,
  .checkout-page {
    grid-template-columns: 1fr;
  }

  .product-page__media {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .product-page__details,
  .order-summary {
    position: static;
  }
}

@media (max-width: 700px) {
  .cart-toggle > span:first-of-type {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .cart-sheet {
    inset: auto 0 0;
    width: 100%;
    max-height: min(86dvh, 760px);
    border: 1px solid transparent;
    border-radius: 18px 18px 0 0;
    padding: 28px 18px max(18px, env(safe-area-inset-bottom));
    transform: translateY(102%);
  }

  .cart-sheet::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: transparent;
    transform: translateX(-50%);
  }

  .cart-sheet.is-open {
    border-color: var(--line);
    box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .58);
    transform: translateY(0);
  }

  .cart-sheet.is-open::before {
    background: #c9c6bd;
  }

  .analytics-consent {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  .analytics-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .site-header__actions .lang-switch {
    display: none;
  }

  .site-header__actions {
    gap: 6px;
  }

  .site-header__bar {
    gap: 12px;
  }
}

@media (max-width: 460px) {
  .product-buy,
  .product-buy__actions {
    grid-template-columns: 1fr;
  }

  .product-buy .form-status,
  .product-buy__actions {
    grid-column: 1;
  }

  .cart-line {
    grid-template-columns: 1fr;
  }

  .cart-line__controls {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }

  .analytics-consent__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-backdrop,
  .cart-sheet,
  .analytics-consent {
    transition: none;
  }
}

/* =========================================================================
   Nischen-Shop (03.10.2026): Kategorien, Personalisierung, Kasse, Rechtliches
   ========================================================================= */
body.has-catbar { --header-h: calc(var(--bar-h) + 46px); }
.catbar { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.catbar__track {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  max-width: var(--wrap-hero); margin-inline: auto; padding: 7px var(--side);
  -webkit-overflow-scrolling: touch;
}
.catbar__track::-webkit-scrollbar { display: none; }
.catbar__link {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 100px; font-size: .86rem; font-weight: 600; white-space: nowrap;
  background: #fff; transition: border-color .2s, background .2s;
}
.catbar__link:hover, .catbar__link.is-current { border-color: var(--ink); }
.catbar__link.is-current { background: var(--ink); color: #fff; }
.catbar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.catbar__dot--yellow { background: var(--yellow); } .catbar__dot--pink { background: var(--pink); }
.catbar__dot--green { background: var(--green); } .catbar__dot--blue { background: var(--blue); }
.catbar__dot--sky { background: var(--sky); } .catbar__dot--taupe { background: var(--taupe); }
.mobile-nav__label { margin: 14px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mobile-nav .nav__link--cat { display: flex; align-items: center; gap: 10px; font-size: 1rem; }

.analysis-link {
  position: fixed; bottom: 18px; left: 18px; z-index: 50; padding: 11px 16px; border: 1px solid #adb69d;
  background: #f0f2f5; color: #263328; font: 12px Arial, sans-serif; border-radius: 4px; box-shadow: 0 3px 15px #0001;
}

.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; }

/* Raster */
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .product-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .product-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.card__media { position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 100px; font-size: .74rem;
  font-weight: 700; letter-spacing: .02em; background: #fff; color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.badge--custom::before { content: "✎ "; }
@media (max-width: 560px) {
  .card__body { padding: 12px 12px 14px; }
  .card__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .card__name { font-size: 1rem; }
  .card__kind { font-size: .82rem; }
  .badge { top: 6px; left: 6px; font-size: .68rem; padding: 3px 8px; }
}

/* Kategorie-Kacheln */
.home-cats, .collection-teaser { padding-block: clamp(36px, 6vw, 72px); }
.niche-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 980px) { .niche-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .niche-tiles { grid-template-columns: 1fr; } }
.niche-tile {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: #fff; transition: transform .2s, box-shadow .2s;
}
.niche-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .4); }
.niche-tile__media { display: block; aspect-ratio: 3 / 2; background: #edeff2; overflow: hidden; }
.niche-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.niche-tile__body { display: grid; gap: 4px; padding: 16px 18px 18px; border-top: 4px solid var(--red); }
.niche-tile--yellow .niche-tile__body { border-top-color: var(--yellow); }
.niche-tile--pink .niche-tile__body { border-top-color: var(--pink); }
.niche-tile--green .niche-tile__body { border-top-color: var(--green); }
.niche-tile--blue .niche-tile__body { border-top-color: var(--blue); }
.niche-tile--sky .niche-tile__body { border-top-color: var(--sky); }
.niche-tile__name { font-family: var(--disp); font-size: 1.35rem; }
.niche-tile__line { color: #3a3a3a; font-size: .95rem; line-height: 1.4; }
.niche-tile__count { margin-top: 6px; font-size: .85rem; font-weight: 700; }

/* Shop- und Nischenseiten */
.shop-sections { padding-bottom: clamp(30px, 5vw, 60px); }
.shop-section, .niche-block, .perso-group { margin-top: clamp(36px, 5vw, 64px); }
.shop-section .section-head, .niche-block .section-head, .perso-group .section-head { margin-bottom: 20px; }
.section-head a:hover { text-decoration: underline; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; font-size: .86rem; color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }
/* Produktseite: Pfad oben links bis zur Kategorie (Celina 07.11.2026), die Kategorie selbst kräftiger */
.breadcrumbs--produkt { gap: 6px; padding-top: 16px; line-height: 1.4; }
.breadcrumbs--produkt a, .breadcrumbs--produkt span { padding-block: 4px; }
.breadcrumbs--produkt .breadcrumbs__ziel { color: var(--ink); font-weight: 600; }
.breadcrumbs--produkt + .product-page { padding-top: 8px; }
.niche-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(18px, 3vw, 36px);
}
.niche-hero__copy .lede { max-width: 56ch; }
.niche-hero__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: #edeff2; }
.niche-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .niche-hero { grid-template-columns: 1fr; } .niche-hero__media { order: -1; } }
.niche-how, .niche-faq, .niche-more, .related { padding-block: clamp(32px, 5vw, 64px); }
.faq { display: grid; gap: 10px; margin-top: 22px; max-width: 860px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.faq__item summary { cursor: pointer; padding: 16px 18px; font-weight: 600; list-style: none; position: relative; padding-right: 44px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0; padding: 0 18px 18px; color: #333; }
.faq-page { max-width: 900px; padding-bottom: 60px; }
.faq-group { margin-top: 40px; }
/* Hilfe & Kontakt (Celina 26.10.2026): Kopf knapp, damit Kontaktwege und Formular gleich oben stehen; die Fragen folgen
   unter einer eigenen Überschrift, die Kategorien darin eine Stufe kleiner. */
.page-head.hilfe-kopf { padding-top: clamp(24px, 3.5vw, 48px); }
.hilfe-kopf .lede a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.hilfe-kopf + .kontakt { padding-top: clamp(20px, 3vw, 36px); }
.faq-page { scroll-margin-top: calc(var(--header-h, 120px) + 12px); }
.faq-page__titel { padding-top: clamp(12px, 2vw, 24px); }
.faq-page .faq-group { margin-top: clamp(24px, 3vw, 36px); }
.faq-page .faq-group h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip-row--center { justify-content: center; }
.chip { border: 1.5px solid var(--ink); border-radius: 100px; padding: 9px 18px; font-weight: 600; font-size: .92rem; background: #fff; }
.chip:hover { background: var(--ink); color: #fff; }
.collection-h1 { margin-top: 10px; }
.filter-group__h { margin: 0 0 10px; font-weight: 700; font-size: .95rem; }

/* Produktseite */
.product-page__media { position: relative; }
.product-page__tax { font-size: .82rem; font-weight: 500; color: var(--muted); }
.product-field--hidden { display: none; }
.perso {
  display: grid; gap: 14px; margin: 6px 0 4px; padding: 18px; border: 1.5px solid var(--ink); border-radius: var(--r-lg);
  background: #fafcff;
}
.perso legend { padding: 0 8px; font-family: var(--disp); font-weight: 600; font-size: 1.1rem; }
.perso__note { margin: 0; font-size: .88rem; color: #3a3a3a; }
.req { color: var(--red); }
.product-field__count, .product-field__hint { font-size: .78rem; font-weight: 500; color: var(--muted); }
.product-field__count { justify-self: end; }
.product-field input[type="file"] { padding: 10px; border: 1.5px dashed #bbb; border-radius: var(--r); background: #fff; }
.product-field [aria-invalid="true"] { border-color: var(--red); outline: 2px solid rgba(226, 74, 43, .25); }
.upload-preview { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.perso__preview { margin: 0; padding: 12px 14px; border-radius: var(--r); background: #f3f6ff; font-size: .92rem; overflow-wrap: anywhere; }
.perso__preview span { color: var(--muted); }
.product-info { margin-top: 26px; border-top: 1px solid var(--line); }
.product-info details { border-bottom: 1px solid var(--line); }
.product-info summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.product-info p { margin: 0 0 16px; color: #333; }
.product-info a { text-decoration: underline; }

/* Warenkorb und Kasse */
.cart-line__perso { list-style: none; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: #f2f4f7; font-size: .82rem; color: #333; display: grid; gap: 2px; }
.checkout-form fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; margin: 0; }
.checkout-form legend { padding: 0 8px; font-weight: 700; }
.checkout-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .checkout-form .form-row { grid-template-columns: 1fr; } }
.checkout-form [aria-invalid="true"] { border-color: var(--red); }
.checkout-legal a, .legal a { text-decoration: underline; }
.order-summary__row--total { font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 12px; }
.custom-request { max-width: 760px; padding-block: clamp(30px, 5vw, 60px); }
.custom-request .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .custom-request .form-row { grid-template-columns: 1fr; } }
.form-file em { font-style: normal; font-weight: 500; color: var(--muted); font-size: .8rem; }

/* Garnfarben */
.thread-row--named { gap: 18px; }
.thread-swatch { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; }
.thread--white { background: #fff; } .thread--black { background: #141414; } .thread--gold { background: #c9a227; }
.thread--navy { background: #1f2f5a; } .thread--sage { background: #8fae94; } .thread--sky { background: var(--sky); }
.perso-all { padding-block: clamp(20px, 4vw, 40px); }
.perso-custom { padding-block: clamp(40px, 6vw, 80px); }

/* Rechtliches */
.legal { padding-bottom: 60px; }
.legal h2 { font-family: var(--disp); font-size: 1.25rem; margin: 28px 0 10px; }
.legal-note { padding: 10px 14px; border-radius: 8px; background: #fff4c7; }
.todo { background: #fff4c7; outline: 1px dashed #d7b94e; padding: 0 3px; border-radius: 3px; }
.product-buy > .perso, .product-buy > .form-status, .product-buy > .product-buy__actions { grid-column: 1 / -1; }
.product-buy > .product-field:not(.product-field--quantity) { align-self: start; }
.product-buy:has(> .perso) > .product-field:not(.product-field--quantity):not(.product-field--hidden) { grid-column: 1 / -1; }
.product-buy:has(> .perso) > .product-field--quantity { grid-column: 1 / 2; max-width: 140px; }
.perso .product-field { align-self: start; }
.product-field__label { display: inline; }

/* Mobiles Menü: eigener Scrollbereich unterhalb des fixierten Kopfes (alle Einträge erreichbar). */
.mobile-nav { max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.site-header.open { z-index: 220; }  /* geöffnetes Menü liegt über dem Analyse-Hinweis */

/* =========================================================================
   Bildschirmgrößen (03.10.2026): kleine Laptops, normale und große Desktops
   ========================================================================= */
/* Niedrige Laptop-Bildschirme (z. B. 1280×720, 1366×768): kompakterer Kopf, weniger Leerraum */
@media (min-width: 901px) and (max-height: 820px) {
  :root { --bar-h: 60px; }
  .catbar__track { padding-block: 5px; }
  .catbar__link { padding: 5px 12px; font-size: .82rem; }
  body.has-catbar { --header-h: calc(var(--bar-h) + 42px); }
  .page-head { padding-top: clamp(24px, 4vh, 48px); }
  .niche-hero { padding-block: 12px 20px; }
  .home-cats, .collection-teaser, .niche-how, .niche-faq, .niche-more, .related { padding-block: clamp(24px, 4.5vh, 48px); }
}
/* Handy: Banner nicht höher als nötig */
@media (max-width: 900px) {
  .hero-inner { height: clamp(460px, 78svh, 640px); }
}
/* Große Desktops: Inhalte nicht in die Breite ziehen, Raster ruhig halten */
@media (min-width: 1800px) {
  .niche-hero { gap: 72px; }
  .product-page { grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr); }
}
.niche-tile__name { font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem); }
.order-summary h2, .checkout-page__items h2 { font-size: var(--fs-h3); }
.legal h2 { font-size: var(--fs-h3); }
.niche-hero__copy .lede + .lede { margin-top: 10px; }
.product-page__kind { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
/* Keine Eyebrows: kleine Großbuchstaben-Zeilen über Überschriften werden nicht verwendet */
.eyebrow, .hero-kicker, .mobile-nav__label { display: none !important; }

/* Startbanner bündig mit Kopfzeile und Inhalt (große Desktops nicht breiter als der Inhalt) */
.hero-shell { max-width: var(--wrap-inner); }
/* Sehr große Desktops: Schrift wächst leicht mit (Breite siehe --wrap-inner) */
@media (min-width: 2000px) {
  :root {
    --fs-body: 18px;
    --fs-lede: 1.25rem;
    --fs-h3: 1.35rem;
    --fs-h2: 2.5rem;
    --fs-h1: 3.3rem;
    --fs-hero: 4rem;
  }
  .hero-inner { height: clamp(560px, calc(100svh - var(--header-h) - 32px), 980px); }
}

/* Shared, uninterrupted mega navigation (desktop + touch). */
body .site-header.site-header--mega {
  background: #fff; border-bottom: 1px solid var(--line); backdrop-filter: none;
}
body.page-home main { padding-top: var(--header-h); }
body .site-header--mega :is(.logo__text, .lang-switch, .lang-switch .is-active, .nav__link, .cart-toggle) {
  color: var(--ink) !important;
}
body .site-header--mega .cart-count { background: var(--ink) !important; color: #fff !important; }
body .site-header--mega .burger span { background: var(--ink) !important; }
.site-header--mega .site-header__bar { gap: clamp(12px, 1.5vw, 28px); }
.site-header--mega .logo { flex: 0 0 auto; }
.site-header--mega .nav { gap: clamp(2px, .6vw, 12px); align-self: stretch; align-items: center; }
.nav__item { display: flex; align-items: center; border-radius: 100px; color: var(--ink); }
.site-header--mega .nav__link { padding: 10px 2px 10px 14px; white-space: nowrap; font-size: clamp(.82rem, .95vw, .94rem); }
.site-header--mega .nav__link.is-current::after { left: 14px; bottom: 7px; }
.nav__toggle { display: grid; place-items: center; width: 30px; height: 40px; padding: 0 8px 0 2px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 100px; }
body .site-header--mega .nav__item.is-open { background: var(--ink); color: white; }
body .site-header--mega .nav__item.is-open .nav__link { color: white !important; }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
.site-header--mega :is(a, button, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.site-header--mega.mega-open, .site-header--mega.open { border-radius: 0 0 24px 24px; box-shadow: 0 18px 30px -25px rgba(0,0,0,.3); }
.mega-menu { border-radius: 0 0 24px 24px; background: white; }
.mega-menu__inner {
  max-width: var(--wrap-content); margin-inline: auto;
  padding: 12px var(--side) 30px;
  height: clamp(290px, 43vh, 410px);
  max-height: calc(100dvh - var(--bar-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
}
.mega-menu__panel { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: clamp(18px, 2.5vw, 40px); height: 100%; }
.mega-menu__panel--feature { grid-template-columns: 1.05fr 2.1fr; }
.mega-menu__panel--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mega-menu__links { display: flex; flex-direction: column; align-items: stretch; padding: 12px 24px 8px 0; }
.mega-menu__title { font-family: var(--disp); font-size: clamp(1.2rem, 1.5vw, 1.6rem); font-weight: 600; line-height: 1.2; margin: 0 0 18px; max-width: 20ch; }
.mega-menu__links > a { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: .93rem; line-height: 1.4; }
.mega-menu__links > a:hover { text-decoration: underline; text-underline-offset: 5px; }
.mega-menu__links > a > span { color: var(--muted); }
.mega-menu__panel--text { grid-template-columns: 1fr; }
.mega-menu__panel--text .mega-menu__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 70px; max-width: 900px; }
.mega-menu__panel--text .mega-menu__title { grid-column: 1 / -1; max-width: none; }
.mega-menu__panel--text .mega-menu__links > a { border-bottom: 1px solid var(--line); padding-block: 18px; }
.menu-card { display: flex; flex-direction: column; position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 14px; background: #eff1f4; }
.menu-card > img { width: 100%; height: 0; min-height: 0; flex: 1 1 auto; object-fit: cover; }
.menu-card__caption { display: flex; flex-direction: column; gap: 4px; padding: 16px 40px 16px 18px; background: #f1f3f6; }
.menu-card__caption strong { font-size: clamp(.98rem, 1.2vw, 1.2rem); font-weight: 600; line-height: 1.2; }
.menu-card__caption > span { font-size: .8rem; color: #555; line-height: 1.4; }
.menu-card__arrow { position: absolute; right: 16px; bottom: 22px; font-size: 1.3rem; }
.menu-card:hover .menu-card__caption strong { text-decoration: underline; text-underline-offset: 4px; }
.menu-backdrop { position: fixed; inset: var(--bar-h) 0 0; z-index: 90; background: rgba(20,20,20,.2); }
.site-header--mega .mobile-nav { border: 0; border-radius: 0 0 24px 24px; }
.mobile-menu__section { border-bottom: 1px solid var(--line); }
.mobile-menu__section summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 1.05rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__section summary::-webkit-details-marker { display: none; }
.mobile-menu__section summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; }
.mobile-menu__section[open] summary::after { content: "−"; }
.mobile-menu__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 20px; }
.mobile-menu__all, .mobile-menu__content .mega-menu__links { grid-column: 1 / -1; }
.mobile-menu__all { font-size: .92rem; text-decoration: underline; text-underline-offset: 4px; padding-bottom: 4px; }
.mobile-menu__content .mega-menu__title { display: none; }
.mobile-menu__content .mega-menu__links { padding: 0 0 6px; }
.mobile-menu__content .menu-card > img { flex: none; height: auto; aspect-ratio: 1.35; }
.mobile-menu__content .menu-card__caption { padding: 12px; }
.mobile-menu__content .menu-card__caption strong { font-size: .9rem; }
.mobile-menu__content .menu-card__caption > span { font-size: .76rem; }
.mobile-menu__content .menu-card__arrow { display: none; }
@media (max-width: 1100px) {
  .site-header--mega .nav, .site-header--mega .mega-menu { display: none; }
  .site-header--mega .burger { display: flex; }
  .site-header--mega.open .mobile-nav { display: flex; }
}
@media (min-width: 1101px) {
  .site-header--mega .mobile-nav, .site-header--mega .burger { display: none; }
}

/* Shop refinement: calm opening motion and direct, readable choices. */
@keyframes menu-reveal {
  from { clip-path: inset(0 0 calc(100% - var(--bar-h)) 0 round 0 0 24px 24px); }
  to { clip-path: inset(0 0 0 0 round 0 0 24px 24px); }
}
@keyframes menu-settle {
  from { opacity: .65; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-dim { from { opacity: 0; } to { opacity: 1; } }
.site-header--mega.mega-open { animation: menu-reveal 320ms cubic-bezier(.22,1,.36,1); }
.mega-menu__panel:not([hidden]) { animation: menu-settle 220ms cubic-bezier(.22,1,.36,1); }
.menu-backdrop:not([hidden]) { animation: menu-dim 240ms ease-out; }
.site-header--mega.open .mobile-nav { animation: menu-settle 240ms ease-out; }
.mega-menu__panel--shop { grid-template-columns: 1.45fr 1fr 1fr; gap: clamp(16px,2vw,30px); }
.mega-menu__panel--shop .mega-menu__links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; align-content: start; padding: 6px 4px 0 0; }
.mega-menu__panel--shop .mega-menu__title { grid-column: 1 / -1; max-width: none; margin-bottom: 12px; }
.mega-menu__links > a { font-size: 1rem; padding: 9px 0; }
.mega-menu__links > a > .mega-menu__linktext { position: relative; color: var(--ink); width: 100%; padding-right: 20px; font-weight: 550; }
.mega-menu__linktext small { display: block; font-size: .76rem; line-height: 1.35; color: var(--muted); font-weight: 400; margin-top: 3px; }
.mega-menu__linkarrow { position: absolute; right: 0; top: 0; color: var(--muted); font-size: .85rem; }
.mega-menu__panel--shop .mega-menu__links > a { font-size: .9rem; padding: 8px 0; border-bottom: 1px solid #eef0f3; line-height: 1.3; }
.mega-menu__panel--shop .menu-card__caption { padding: 14px 28px 14px 14px; }
.mega-menu__panel--shop .menu-card__caption strong { font-size: 1.05rem; }
.mobile-menu__content .mega-menu__links > a { padding-block: 11px; }
/* Compact category introduction: the collection is the main event. */
.niche-hero { grid-template-columns: minmax(0,1fr) minmax(220px,320px); gap: 32px; padding-block: 22px 12px; }
.niche-hero .h-display { font-size: clamp(1.5rem,1.05rem + 1.1vw,2.1rem); max-width: 30ch; }
.niche-hero__copy .lede { font-size: 1rem; line-height: 1.5; margin-top: 10px; max-width: 64ch; }
.niche-hero__media { height: 158px; aspect-ratio: auto; border-radius: 18px; }
.niche-products { scroll-margin-top: calc(var(--bar-h) + 20px); }
.niche-products .niche-block:first-child { margin-top: 22px; }
.niche-products .section-head { margin-bottom: 14px; }
.niche-products .section-head .h-display { font-size: 1.25rem; }
.niche-products .section-head .fine-note { margin-bottom: 0; margin-top: 6px; font-size: .9rem; }
.niche-story { padding-block: 44px 12px; }
.niche-story .lede { font-size: 1rem; max-width: 82ch; }
.niche-story .h-display { font-size: 1.5rem; }
.niche-quicklinks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .86rem; font-weight: 600; }
.niche-quicklinks a { text-decoration: underline; text-underline-offset: 4px; }
.business-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px,4vw,60px); padding-block: 56px 20px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.business-feature__image { border-radius: 20px; overflow: hidden; }
.business-feature__image img { width: 100%; height: auto; }
.business-feature__copy p { color: #535353; line-height: 1.6; margin: 16px 0 20px; }
.business-feature__copy .btn { padding: 13px 22px; font-size: .94rem; }
.business-volume { padding-top: 24px; margin-top: 26px; border-top: 1px solid var(--line); }
.business-volume h3 { font-size: 1.1rem; }
.product-business-link { display: block; margin-block: 16px; padding: 16px 18px; background: #f0f4f8; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.product-business-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Product configuration: native radios retain keyboard and form semantics. */
.product-page { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); padding-top: 24px; }
.product-page__media { position: sticky; top: calc(var(--bar-h) + 24px); min-height: 0; max-height: calc(100svh - var(--bar-h) - 48px); aspect-ratio: 4 / 5; border-radius: 20px; background: #f3f5f8; }
.product-page__media picture { position: absolute; inset: 0; display: block; height: 100%; width: 100%; }
.product-page__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.product-page__details { position: static; min-width: 0; }
.product-page__title { font-size: clamp(1.5rem,1rem + 1.15vw,2rem); line-height: 1.14; letter-spacing: -.025em; }
.product-page__kind { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }
.product-page__price { margin-top: 16px; font-size: 1.25rem; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.product-page__description { font-size: .96rem; margin-top: 16px; line-height: 1.55; }
.product-buy { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.product-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.product-choices legend { font: 600 .92rem/1.4 var(--sans); padding: 0; margin-bottom: 10px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chip { position: relative; cursor: pointer; min-width: 0; }
.choice-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.choice-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 46px; padding: 10px 14px; border: 1px solid #dadcdf; background: #fff; border-radius: 10px; font-size: .86rem; line-height: 1.3; font-weight: 500; transition: border-color .15s, background .15s, color .15s; }
.choice-chip:hover .choice-label { border-color: #656565; }
.choice-chip input:checked + .choice-label { background: var(--ink); color: white; border-color: var(--ink); }
.choice-chip input:focus-visible + .choice-label { outline: 2px solid var(--ink); outline-offset: 3px; }
.choice-chip input[aria-invalid="true"] + .choice-label { border-color: var(--red); }
.choice-swatch { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1px solid #0002; box-shadow: inset 0 0 0 1px #fff5; }
.thread--pink { background: #e7a6c4; } .thread--red { background: #e24a2b; } .thread--yellow { background: #f2c94c; }
.perso { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 0; margin: 0; gap: 20px; min-width: 0; }
.perso legend { float: left; padding: 0; margin: 0 0 2px; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em; }
.perso__note { clear: both; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.product-field { min-width: 0; font-weight: 600; font-size: .92rem; position: relative; }
.product-field input:not([type="file"]), .form :is(input, select, textarea) { border: 1px solid #dadcdf; border-radius: 12px; padding: 13px 14px; font: 400 16px/1.4 var(--sans); background: #f7f9fc; color: var(--ink); }
.product-field input:focus-visible, .form :is(input, select, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; background: white; }
.product-field input::placeholder { color: #8a8a87; }
.product-field__count { position: absolute; right: 12px; bottom: 12px; font-size: .7rem; pointer-events: none; }
.product-field:has(.product-field__count) input { padding-right: 70px; }
.product-field--upload { border: 1px dashed #bfc6c3; border-radius: 14px; padding: 16px; background: #f8faf8; }
.product-field--upload > input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; z-index: 1; }
.product-field--upload:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.upload-prompt { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: center; margin-top: 8px; }
.upload-prompt__icon { grid-row: 1 / 3; display: grid; place-items: center; height: 36px; border: 1px solid #d7dcd8; border-radius: 10px; font-size: 1.35rem; background: white; }
.upload-prompt strong { font-size: .9rem; font-weight: 600; }
.upload-prompt [data-upload-name] { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.product-field__hint { font-size: .76rem; line-height: 1.4; font-weight: 400; }
.product-field--upload > .product-field__label { font-size: .88rem; }
.upload-preview { margin-top: 6px; width: 68px; height: 68px; }
.perso__preview { background: #f3f5f2; border: 1px solid #e6ebe4; font-size: .84rem; font-weight: 400; line-height: 1.5; }
.product-buy:has(> .perso) > .product-field--quantity { max-width: 140px; }
.quantity-picker { display: flex; border: 1px solid #dadcdf; border-radius: 10px; overflow: hidden; width: 136px; }
.quantity-picker button { width: 40px; border: 0; background: white; font: 20px var(--sans); cursor: pointer; }
.quantity-picker button:hover { background: #eff1f4; }
.quantity-picker input[type="number"] { width: 54px; min-height: 44px; text-align: center; border: 0; border-radius: 0; padding: 8px 0; background: white; appearance: textfield; -moz-appearance: textfield; }
.quantity-picker input::-webkit-inner-spin-button, .quantity-picker input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.product-buy .form-status:empty { display: none; }
.product-buy__actions .btn { padding: 15px 12px; border-radius: 12px; font-size: .92rem; }
.product-buy__actions .btn--ghost { border-color: #d5d7da; }
.product-info summary { list-style: none; display: flex; justify-content: space-between; font-size: .92rem; }
.product-info summary::-webkit-details-marker { display: none; }
.product-info summary::after { content: "+"; font-size: 1.1rem; font-weight: 400; }
.product-info details[open] summary::after { content: "−"; }
.product-info p { font-size: .88rem; line-height: 1.6; color: #555; }
#anfrage { scroll-margin-top: calc(var(--bar-h) + 22px); }
@media (max-width: 820px) {
  .product-page { grid-template-columns: 1fr; gap: 22px; padding-top: 18px; }
  .product-page__media { position: static; max-height: 52svh; width: 100%; aspect-ratio: 1; }
  .business-feature { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .niche-hero { grid-template-columns: minmax(0,1fr) 100px; gap: 14px; align-items: start; padding-block: 18px 0; }
  .niche-hero .h-display { font-size: 1.4rem; line-height: 1.1; }
  .niche-hero__copy .lede { font-size: .88rem; line-height: 1.45; }
  .niche-hero__media { order: initial; height: 116px; border-radius: 12px; }
  .niche-products .section-head .h-display { font-size: 1.12rem; }
  .niche-quicklinks { font-size: .78rem; }
  .product-buy { gap: 20px; }
  .choice-label { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header--mega, .mega-menu__panel, .menu-backdrop, .mobile-nav { animation: none !important; }
}

/* Compact product dropdowns and measured-product guide. */
.tpl-product { overflow-anchor: none; }
.product-page { overflow-anchor: none; }
.product-page__visual { min-width: 0; align-self: start; }
.product-page__media { position: relative; top: auto; width: 100%; height: auto; }
.product-page__media img { display: block; }
.product-field.product-sizes, .product-field.product-thread { display: grid; gap: 9px; }
.product-select { position: relative; display: block; }
.product-select::after { content: ""; position: absolute; right: 19px; top: 20px; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.product-select select { appearance: none; display: block; width: 100%; height: 50px; padding: 0 44px 0 15px; border: 1px solid #d9dcd7; border-radius: 10px; background: #fff; color: var(--ink); font: 500 .94rem var(--sans); cursor: pointer; }
.product-select select:hover { border-color: #8e978e; }
.product-select select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.size-guide { margin-top: 10px; }
.size-guide > summary { cursor: pointer; font-size: .81rem; text-decoration: underline; text-underline-offset: 3px; padding-block: 4px; list-style: none; }
.size-guide > summary::after { content: " +"; text-decoration: none; }
.size-guide[open] > summary::after { content: " −"; }
.size-guide__body { margin-top: 12px; padding: 18px; background: #f2f4f7; border-radius: 12px; }
.size-guide__body p { font-size: .83rem; line-height: 1.6; margin: 0 0 16px; }
.size-sketch { display: block; width: 190px; max-width: 100%; margin: 0 auto 14px; font: 600 14px var(--sans); }
.size-guide__table { overflow-x: auto; }
.size-guide table { border-collapse: collapse; width: 100%; font-size: .79rem; text-align: left; }
.size-guide caption { text-align: left; font-weight: 600; margin-bottom: 10px; }
.size-guide th, .size-guide td { border-bottom: 1px solid #dfe3db; padding: 10px 7px; }
.size-guide thead th { font-weight: 600; }
.size-guide tbody th { font-weight: 500; }
.product-fit > span { display: block; margin-bottom: 9px; font-size: .92rem; font-weight: 600; }
.product-fit a[aria-current] { background: var(--ink); color: white; border-color: var(--ink); }
.pet-examples { margin-top: 22px; }
.pet-examples h2 { font-size: 1rem; margin: 0 0 12px; }
.pet-examples__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pet-examples figure { margin: 0; }
.pet-examples img { width: 100%; height: auto; border-radius: 10px; }
.pet-examples figcaption { font-size: .8rem; margin-top: 7px; text-align: center; }

.niche-pet-examples { margin-block: 34px 48px; }
.niche-pet-examples .pet-examples__grid { max-width: 850px; gap: 18px; }
.niche-pet-examples > a { display: inline-block; margin-top: 18px; }
/* Keep nested option legends above their options, including the full wedding crew. */
.perso .product-choices legend { float: none; padding: 0; margin: 0 0 10px; font: 600 .92rem/1.4 var(--sans); }
[data-choice-group="role"] .choice-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
[data-choice-group="role"] .choice-label { width: 100%; height: 100%; text-align: center; }

/* Search is available on every page; the index and search code load only on its page. */
.header-search { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 40px; min-height: 44px; color: var(--ink); font-size: .9rem; font-weight: 600; flex-shrink: 0; border-radius: 10px; }
.header-search:hover { background: #eff1f4; }
.mobile-search { display: flex; gap: 8px; margin: 6px 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mobile-search input { min-width: 0; width: 100%; padding: 12px; border: 1px solid #d9dcd7; border-radius: 10px; background: white; color: var(--ink); font: inherit; }
.mobile-search button { flex-shrink: 0; border: 0; background: var(--ink); color: white; border-radius: 10px; padding: 10px 14px; font: 600 .9rem var(--sans); cursor: pointer; }
.search-page { padding-block: 42px 72px; min-height: 65vh; }
.search-page > h1 { font-size: clamp(1.9rem,3vw,3rem); margin: 0 0 24px; }
.search-form { display: flex; gap: 12px; max-width: 850px; }
.search-input-wrap { display: flex; flex: 1; min-width: 0; border: 1px solid #adb5ac; border-radius: 12px; background: white; overflow: hidden; }
.search-input-wrap:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.search-input-wrap input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 16px; font: 1rem var(--sans); outline: 0; }
.search-input-wrap input { -webkit-appearance: none; appearance: none; }
.search-input-wrap input::-webkit-search-cancel-button, .search-input-wrap input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search-input-wrap button { border: 0; background: transparent; padding: 0 17px; font-size: 1.5rem; color: var(--muted); cursor: pointer; }
.search-form > button { border-radius: 12px; padding-inline: 24px; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.search-suggestions .chip { font-size: .83rem; padding: 7px 13px; background: white; border-color: #d8dcd5; cursor: pointer; }
.search-suggestions .chip:hover { background: #f0f3ed; }
.search-status { margin-block: 28px; font-size: .94rem; color: var(--muted); }
.search-section { margin-top: 36px; }
.search-section > h2 { font-size: 1.5rem; margin: 0 0 12px; }
.search-products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 20px; }
.search-result { display: block; min-width: 0; border-radius: 14px; }
.search-result:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.search-result img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #eff1f4; border-radius: 14px; }
.search-result__media { position: relative; }
.search-result__copy { padding: 13px 0; }
.search-result h3 { font-size: 1rem; line-height: 1.4; margin: 0; }
.search-result:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.search-result p { font-size: .85rem; line-height: 1.5; color: var(--muted); margin-block: 7px; }
.search-result__price, .search-result__link { display: block; margin-top: 8px; font-size: .9rem; font-weight: 600; }
.search-pages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.search-pages .search-result { border: 1px solid var(--line); padding: 6px 20px; }
.search-empty { background: #f2f4ef; padding: 24px; border-radius: 14px; }
.search-empty h2 { font-size: 1.2rem; margin-top: 0; }
.search-empty > a { display: inline-block; margin-right: 22px; margin-top: 12px; }
@media(max-width:1400px) { .header-search span { display: none; } }
@media(max-width:900px) { .search-products { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
 .search-page { padding-top: 28px; }
 .search-products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
 .search-pages { grid-template-columns: 1fr; }
 .search-form { gap: 8px; }
 .search-form > button { padding: 12px; font-size: .9rem; }
 .search-input-wrap input { padding: 13px 10px; font-size: 1rem; }
 .search-input-wrap button { padding-inline: 10px; }
 .search-result h3 { font-size: .92rem; }
 .header-search { min-width: 36px; }
 .site-header--mega .site-header__actions { gap: 6px; }
}
/* Handy: Lupe, Warenkorb-Tasche und Menü als gleich große, mittig ausgerichtete Symbole */
.cart-toggle__icon { display: none; }
@media (max-width: 700px) {
  .site-header--mega .site-header__actions { gap: 2px; }
  .header-search, .cart-toggle, .burger { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; }
  .cart-toggle { position: relative; }
  .cart-toggle__icon { display: block; }
  .cart-toggle .cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding-inline: 4px; font-size: .64rem; }
}


/* Native dropdown with visible thread samples, including without JavaScript. */
.product-thread > span { font-weight: 600; font-size: .92rem; }
.thread-picker { position: relative; }
.thread-picker__trigger, .thread-picker__option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; color: var(--ink); font: 500 .94rem var(--sans); cursor: pointer;
}
.thread-picker__trigger {
  position: relative; min-height: 50px; padding: 12px 44px 12px 15px;
  border: 1px solid #d9dcd7; border-radius: 10px; list-style: none;
}
.thread-picker__trigger::-webkit-details-marker { display: none; }
.thread-picker__trigger::after {
  content: ""; position: absolute; right: 19px; top: 19px; width: 7px; height: 7px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.thread-picker[open] .thread-picker__trigger::after { transform: rotate(225deg); top: 23px; }
.thread-picker__trigger:hover { border-color: #8e978e; }
.thread-picker__trigger:focus-visible, .thread-picker__option:has(input:focus-visible) {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.thread-picker__list {
  position: absolute; z-index: 20; inset: calc(100% + 6px) 0 auto;
  max-height: min(390px, 50vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: #fff; border: 1px solid #d9dcd7; border-radius: 12px;
  box-shadow: 0 12px 30px #1b251b1a;
}
.thread-picker__option { position: relative; min-height: 44px; padding: 10px; border-radius: 7px; }
.thread-picker__option input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.thread-picker__option:hover, .thread-picker__option:focus-within { background: #f1f3ee; }
.thread-picker__option:has(input:checked) { background: #eef2ec; font-weight: 650; }
.thread-picker__option:has(input:checked)::after { content: "✓"; margin-left: auto; }
.thread-picker .choice-swatch { display: block; width: 22px; height: 22px; }
.thread-picker .thread--white { border-color: #bdc3bb; }
.thread-picker__value { display: none; align-items: center; gap: 12px; }
.thread-picker:has(input[value="white"]:checked) [data-thread-value="white"] { display: flex; }
.thread-picker:has(input[value="black"]:checked) [data-thread-value="black"] { display: flex; }
.thread-picker:has(input[value="gold"]:checked) [data-thread-value="gold"] { display: flex; }
.thread-picker:has(input[value="yellow"]:checked) [data-thread-value="yellow"] { display: flex; }
.thread-picker:has(input[value="pink"]:checked) [data-thread-value="pink"] { display: flex; }
.thread-picker:has(input[value="red"]:checked) [data-thread-value="red"] { display: flex; }
.thread-picker:has(input[value="sky"]:checked) [data-thread-value="sky"] { display: flex; }
.thread-picker:has(input[value="navy"]:checked) [data-thread-value="navy"] { display: flex; }
.thread-picker:has(input[value="sage"]:checked) [data-thread-value="sage"] { display: flex; }

/* Keep the document anchored at its scroll boundaries. */
html, body { overscroll-behavior-y: none; }
.cart-line { grid-template-columns: 82px minmax(0, 1fr) auto; align-items: start; }
.cart-line__product { display: block; border-radius: 10px; overflow: hidden; background: #eff1f4; }
.cart-line__product img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; }
.cart-line__copy { grid-column: 2; }
.cart-line__controls, .cart-line__fixed-quantity { grid-column: 3; }
.cart-line__upload { display: block; width: fit-content; max-width: 100%; margin: 6px 0; border-radius: 7px; overflow: hidden; background: #fff; border: 1px solid #d9dcd7; }
.cart-line__upload img { display: block; width: 144px; max-width: 100%; height: 108px; object-fit: contain; }
.cart-line__upload:focus-visible, .cart-line__product:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cart-sheet .cart-line { grid-template-columns: 76px minmax(0, 1fr); }
.cart-sheet .cart-line__controls { grid-column: 2; display: flex; justify-content: space-between; flex-wrap: wrap; }
@media(max-width:600px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .cart-line__controls, .cart-line__fixed-quantity { grid-column: 2; }
  .cart-line__controls { display: flex; justify-content: space-between; flex-wrap: wrap; }
}

.gift-discovery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 40px; }
.gift-link { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: #f1f3f6; }
.gift-link strong { font-size: 1.15rem; }
.gift-link span { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.gift-link:hover { border-color: var(--ink); }
.gift-head { padding-bottom: 32px; }
.gift-notes { margin-block: 48px 70px; }
.gift-notes p { max-width: 760px; line-height: 1.7; }
@media(max-width:600px) { .gift-discovery { grid-template-columns: 1fr; gap: 12px; } }

#mega-occasions { grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); gap: 18px; }
#mega-occasions .mega-menu__links { padding-right: 4px; }
#mega-occasions .mega-menu__links > a { font-size: .94rem; }
#mega-occasions .menu-card__caption { padding: 14px 30px 14px 14px; }
#mega-occasions .menu-card__caption strong { font-size: 1rem; }

/* Product and uploaded design have distinct space in the drawer and full bag. */
.cart-sheet .cart-line { grid-template-columns: 138px minmax(0,1fr); }
.cart-sheet .cart-line--personalized { grid-template-columns: 100px minmax(0,1fr); }
[data-cart-page-items] .cart-line { grid-template-columns: 190px minmax(0,1fr) auto; gap:24px; }
[data-cart-page-items] .cart-line__upload img { width:210px; height:158px; }
@media (max-width: 600px) {
  .cart-sheet .cart-line { grid-template-columns: 112px minmax(0,1fr); }
  .cart-sheet .cart-line--personalized { grid-template-columns: 88px minmax(0,1fr); }
  [data-cart-page-items] .cart-line { grid-template-columns: 128px minmax(0,1fr); gap:14px; }
  [data-cart-page-items] .cart-line__upload img { width:170px; height:128px; }
}
.campaign-note { padding:16px 18px; border:1px solid #dce0d5; border-radius:12px; background:#f3f5ee; margin:18px 0; }
.campaign-note strong { display:block; margin-bottom:4px; }
.campaign-card-note { display:block; font-size:13px; color:#38644e; margin-top:8px; }
.drop-discovery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:30px auto; }
.drop-link { padding:24px; border-radius:16px; background:#ecf0e7; display:grid; gap:10px; text-decoration:none; }
.drop-link:nth-child(2) { background:#eeedf6; }
.drop-link:nth-child(3) { background:#eaecef; }
.drop-link strong { font-size:23px; }
.drop-link span { line-height:1.5; }
@media(max-width:680px) { .drop-discovery { grid-template-columns:1fr; } }

/* The new category previews use complete product photographs. */
.niche-tile__media img[src*="/products/"], .niche-hero__media img[src*="/products/"] { object-fit:contain; }

/* Shop navigation: equally legible groups, one feature image, stable shell. */
.mega-menu__inner { height: clamp(390px, 48vh, 460px); }
.mega-menu__panel { grid-template-rows: minmax(0, 1fr); }
.mega-menu__panel--shop { grid-template-columns: 1fr 1.12fr 1.1fr 1.15fr; gap: clamp(18px, 2vw, 32px); }
.shop-menu-group { min-width: 0; align-self: start; padding: 16px 0; }
.shop-menu-group h2 { font-family: var(--disp); font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.15; margin: 0 0 18px; }
.shop-menu-group a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 1rem; line-height: 1.4; border-bottom: 1px solid #e5e7ea; }
.shop-menu-group a > span:last-child { flex-shrink: 0; font-size: .8rem; }
.shop-menu-group a:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.shop-menu-group--specials { padding: 18px; border-radius: 14px; background: #eeedf7; }
.shop-menu-group--specials h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.shop-menu-group--specials a { border-color: #dcd9e9; }
.shop-menu-group a:last-child { border-bottom: 0; }
.mega-menu__panel > .menu-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.mega-menu__panel > .menu-card > img { height: 100%; width: 100%; min-height: 0; }
.menu-card__caption { flex-shrink: 0; }
.mega-menu__panel--shop > .menu-card > img { object-fit: contain; background: #d9e4ed; }
.mega-menu__panel--shop .menu-card__caption { padding: 18px 32px 18px 16px; }
.mega-menu__panel--shop .menu-card__caption strong { font-size: 1.15rem; }
.mega-menu__panel--shop .menu-card__caption > span { font-size: .86rem; line-height: 1.5; }
.mobile-menu__content .shop-menu-group { grid-column: 1 / -1; padding: 16px 0 8px; }
.mobile-menu__content .shop-menu-group--specials { padding: 20px; margin-block: 8px; }
.mobile-menu__content .shop-menu-group h2 { font-size: 1.6rem; margin-bottom: 10px; }
.mobile-menu__content:has(.shop-menu-group) > .menu-card { grid-column: 1 / -1; }
.mobile-menu__content:has(.shop-menu-group) > .menu-card > img { max-height: 220px; }
@media (min-width: 1101px) and (max-height: 650px) {
  .mega-menu__panel { min-height: 345px; }
}

/* Specials are a destination, with complete photographs and visible conditions. */
.specials { margin-block: 22px 64px; }
.specials__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; border-top: 2px solid var(--ink); padding-top: 24px; }
.specials__head h2 { font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1; margin: 0; }
.specials__head > p { max-width: 400px; font-size: 1rem; line-height: 1.6; margin: 0; }
.specials__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.special-card { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: #eaecef; border: 1px solid transparent; }
.special-card:hover { border-color: var(--ink); }
.special-card--weihnachten { background: #e8eee5; }
.special-card--orbit-edition { background: #e8eafa; }
.special-card__media { aspect-ratio: 1; background: #eef0f3; overflow: hidden; }
.special-card__media picture { display: block; width: 100%; height: 100%; }
.special-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.special-card__copy { flex: 1; display: flex; flex-direction: column; padding: 22px; }
.special-card__copy h3 { font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.2; margin: 0 0 12px; }
.special-card__copy p { font-size: .95rem; line-height: 1.6; margin: 0 0 16px; }
.special-card__copy .campaign-card-note { color: #383d38; font-size: .82rem; line-height: 1.5; margin-top: auto; }
.special-card__cta { display: block; padding-top: 18px; font-weight: 600; font-size: .9rem; line-height: 1.4; text-decoration: underline; text-underline-offset: 4px; }
.specials__preview { font-size: .8rem; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
.shop-gifts { margin-block: 0 56px; }
.shop-gifts > h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); margin-bottom: 24px; }
.shop-gifts .gift-discovery { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.shop-gifts .gift-link { padding: 24px 20px; align-content: start; }
@media(max-width:1000px) {
  .specials__grid, .shop-gifts .gift-discovery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:680px) {
  .specials__head { display: block; }
  .specials__head > p { margin-top: 16px; }
  .specials__grid, .shop-gifts .gift-discovery { grid-template-columns: 1fr; }
  .special-card__media { aspect-ratio: 1.2; }
  .special-card__copy { padding: 24px; }
  .special-card__copy h3 { font-size: 1.6rem; }
}

/* =========================================================================
   Überarbeitung 20.10.2026: mehr LoopBro, weniger Erklärtext (Vorbild celinasuchy.com)
   ========================================================================= */
:root { --loop: #0a4fd6; --loop-soft: #eef3ff; }

/* Kopf: größeres Logo, Warenkorb als Tasche mit Zahl, Menüpunkte grauen beim Zeigen aus */
@media (min-width: 901px) and (min-height: 821px) { :root { --bar-h: 84px; } }
.logo__img { height: 64px; }
@media (min-width: 901px) and (max-height: 820px) { .logo__img { height: 50px; } }
@media (max-width: 560px) { .logo__img { height: 52px; } }
.cart-toggle { position: relative; width: 44px; min-width: 44px; height: 44px; padding: 0; }
.cart-toggle > span:first-of-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cart-toggle__icon { display: block; width: 24px; height: 24px; }
.cart-toggle .cart-count { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding-inline: 4px; font-size: .64rem; }
.cart-count[data-count="0"] { display: none; }
body .site-header--mega .nav__link { transition: color .2s ease; }
body .site-header--mega .nav:hover .nav__item:not(:hover):not(.is-open) .nav__link,
body .site-header--mega .nav:has(.nav__item.is-open) .nav__item:not(.is-open):not(:hover) .nav__link { color: #a8a8a8 !important; }
/* Text und Bilder grauen unabhängig voneinander aus: Zeigen auf einen Link graut die anderen Links aus,
   Zeigen auf ein Bild die anderen Bilder; Bildunterschriften bleiben schwarz. */
.mega-menu__panel :is(.shop-menu-group, .mega-menu__links) a, .mega-menu__linktext { transition: color .2s ease; }
.mega-menu__panel:has(:is(.shop-menu-group, .mega-menu__links) a:hover) :is(.shop-menu-group, .mega-menu__links) a:not(:hover),
.mega-menu__panel:has(:is(.shop-menu-group, .mega-menu__links) a:hover) :is(.shop-menu-group, .mega-menu__links) a:not(:hover) .mega-menu__linktext { color: #b3b3b3; }
.menu-card img { transition: opacity .2s ease; }
.mega-menu__panel:has(.menu-card:hover) .menu-card:not(:hover) img { opacity: .4; }
/* Größere Schrift im Kopf und im Menü */
body .site-header--mega .nav__link { font-size: clamp(.95rem, .82rem + .3vw, 1.08rem); }
.shop-menu-group a, .mega-menu__links > a { font-size: 1.12rem; }
.mega-menu__panel .menu-card__caption strong { font-size: clamp(1.05rem, .95rem + .3vw, 1.2rem); }
.mega-menu__linktext small, .menu-card__caption > span { display: none; }

/* Links ohne Pfeile */
.link-arrow::after { content: none; }

/* Startbanner: Maskottchen groß auf warmem Sand, daneben kurze Zeile, Slogan und zwei Knöpfe */
.hero--loop { padding: 0 var(--side); }
.loop-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(20px, 4vw, 72px); min-height: clamp(420px, 38vw, 680px); padding: clamp(36px, 4.5vw, 84px) var(--edge);
  border-radius: var(--r-lg); background: #e7e9ec; color: var(--ink);
}
.loop-hero__copy { min-width: 0; }
.loop-hero__h1 { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(2.4rem, 1.2rem + 3.9vw, 5.6rem); line-height: .95; letter-spacing: -.03em; color: var(--ink); }
.loop-hero__slogan { margin: clamp(16px, 1.8vw, 24px) 0 0; font-family: var(--disp); font-style: italic; font-size: clamp(1rem, .92rem + .35vw, 1.25rem); color: #3a3a3a; }
.loop-hero .hero-cta { margin-top: clamp(24px, 2.8vw, 40px); }
.loop-hero .btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.loop-hero .btn--solid:hover { background: #000; }
.loop-hero .btn--ghost { color: var(--ink); border-color: var(--ink); }
.loop-hero .btn--ghost:hover { background: var(--ink); color: #fff; }
.loop-hero__mascot { justify-self: center; width: min(100%, 620px); }
.loop-hero__mascot picture, .loop-hero__mascot img { display: block; width: 100%; height: auto; }
.loop-hero__mascot img { transform: rotate(-4deg); filter: drop-shadow(0 22px 28px rgba(40, 30, 10, .18)); }
@media (max-width: 900px) {
  .loop-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .loop-hero__mascot { order: -1; width: min(82%, 360px); }
}

/* Startseite abwechslungsreich: großes Bild neben zwei kleinen, Produktreihen, zwei und vier Bilder, ein breites Bild */
.home-mosaic, .home-duo, .home-quad, .home-wide { display: grid; gap: clamp(12px, 1.4vw, 22px); }
.home-mosaic { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
section.home-mosaic { margin-top: clamp(28px, 4vw, 56px); }
.home-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
section:is(.home-duo, .home-gifts, .home-wide, .home-row) { margin-top: clamp(44px, 5.5vw, 84px); }
.edit-tile { position: relative; display: block; min-width: 0; border-radius: var(--r); overflow: hidden; background: #edeff2; color: var(--ink); }
.edit-tile__media { display: block; aspect-ratio: 3 / 2; }
.edit-tile__media picture, .edit-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edit-tile__media img { transition: transform .6s ease; }
.edit-tile:hover .edit-tile__media img { transform: scale(1.03); }
.edit-tile__label { position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); padding: 9px 16px; border-radius: 999px; background: #fff; font-family: var(--disp); font-weight: 600; font-size: clamp(.95rem, .9rem + .25vw, 1.15rem); line-height: 1.2; }
.edit-tile:hover .edit-tile__label { background: var(--ink); color: #fff; }
.edit-tile--big { grid-row: span 2; }
.edit-tile--big .edit-tile__media { aspect-ratio: auto; height: 100%; }
.home-duo .edit-tile__media { aspect-ratio: 16 / 10; }
.home-quad .edit-tile__media { aspect-ratio: 4 / 5; }
.home-quad .edit-tile__media img[src*="/products/"] { object-fit: cover; }
.edit-tile--wide .edit-tile__media { aspect-ratio: 21 / 8; }
.edit-tile--wide .edit-tile__media img { object-position: 50% 30%; }
.home-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-gifts .product-group__title { margin-bottom: 16px; }
@media (max-width: 900px) {
  .home-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edit-tile--big { grid-column: 1 / -1; grid-row: auto; }
  .edit-tile--big .edit-tile__media { aspect-ratio: 4 / 3; height: auto; }
  .home-duo { grid-template-columns: 1fr; }
  .home-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edit-tile--wide .edit-tile__media { aspect-ratio: 4 / 3; }
  .home-mosaic .edit-tile:not(.edit-tile--big) .edit-tile__media { aspect-ratio: 1; }
  .edit-tile__label { padding: 7px 12px; font-size: .88rem; }
}

/* Kategorie-Kacheln: Bild und Name */
.niche-tile__body { padding: 14px 18px 16px; }

/* Produktkarten wie bei celinasuchy.com: Bild, darunter Name und Preis */
.card { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.card:hover { transform: none; box-shadow: none; }
.card__media { border-radius: var(--r); overflow: hidden; }
.card__media img { transition: transform .35s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body, .product-grid .card__body { padding: 12px 2px 0; }
.card__row { flex-direction: column; align-items: flex-start; gap: 3px; }
.card__price { font-weight: 500; color: #3a3a3a; }

/* Newsletter: heller Kasten statt schwarzem Band */
.newsletter { background: transparent; color: var(--ink); padding-inline: var(--side); }
.newsletter .newsletter__inner { max-width: var(--wrap-inner); }
.newsletter__inner { background: var(--loop-soft); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 56px); }
.newsletter .h-display { color: var(--ink); }
.newsletter .lede { color: #3d3d3d; }
.newsletter__form input { background: #fff; border-color: #c9d4ee; color: var(--ink); }
.newsletter__form input::placeholder { color: #7d8394; }
.newsletter__form .btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.lbf { margin-top: clamp(40px, 5vw, 64px); }

/* Filtern & Sortieren: Leiste läuft unter dem Kopf mit, Panel von rechts (assets/js/shop-filter.js) */
.filter-bar { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
.filter-bar__in { display: flex; align-items: center; gap: 12px 28px; min-height: 58px; }
.filter-bar__open { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: 600 .98rem var(--sans); cursor: pointer; }
.filter-bar__open:hover span { text-decoration: underline; text-underline-offset: 4px; }
.filter-bar__open.is-active::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--loop); }
.filter-bar__count { margin: 0 0 0 auto; font-size: .9rem; color: #555; white-space: nowrap; }
@media (max-width: 760px) { .filter-bar__in { min-height: 52px; } }
.filter-panel { padding: 0; width: min(440px, 100vw); visibility: hidden; box-shadow: none; transition: transform .38s cubic-bezier(.33,0,.1,1), visibility 0s .38s; }
.filter-panel.open { visibility: visible; box-shadow: -24px 0 70px -34px rgba(0,0,0,.5); transition: transform .38s cubic-bezier(.33,0,.1,1); }
.filter-panel__head { margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.filter-panel__head h2 { margin: 0; font-family: var(--sans); font-size: 1.2rem; font-weight: 600; }
.filter-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.filter-scroll { margin: 0; padding: 8px 24px 20px; }
.filter-label { margin: 22px 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.filter-sort { width: 100%; padding: 13px 14px; border: 1px solid #d3d5d8; border-radius: 0; background: #fff; font: 500 .98rem var(--sans); color: var(--ink); }
.filter-group { padding: 0; border-top: 0; border-bottom: 1px solid var(--line); }
.filter-group > summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after { content: "+"; font-weight: 400; font-size: 1.2rem; }
.filter-group[open] > summary::after { content: "−"; }
.filter-group[open] { padding-bottom: 10px; }
.filter-opt { padding: 7px 0; font-size: .98rem; }
.filter-opt__n { margin-left: auto; color: #8a8a8a; font-size: .86rem; }
.filter-actions { flex-direction: column; gap: 10px; padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); }
.filter-actions .btn { border-radius: 0; padding: 16px; }

/* Alle Produkte mit kleinen Zwischentiteln links */
.product-groups { padding-block: clamp(22px, 3vw, 40px) clamp(32px, 4vw, 56px); }
.product-group + .product-group { margin-top: clamp(38px, 4.5vw, 64px); }
.product-group__title { margin: 0 0 16px; font-family: var(--disp); font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); font-weight: 600; }
.product-group__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.product-groups__empty { padding: 40px 0; font-size: 1rem; }

/* Kategorieseiten ohne Banner (Celina 25.10.2026): nur die Überschrift (.area-head), bei Business die Einstiege darunter */
.area-head .niche-quicklinks { margin: -6px 0 18px; }

/* Bereichsseiten (Specials, Anlässe): Überschrift und Bildkacheln */
.area-head { padding-top: 10px; }
.area-head__title { margin: 6px 0 18px; font-family: var(--disp); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); letter-spacing: -.02em; }
.area-head .specials__grid { margin-bottom: clamp(20px, 3vw, 36px); }
.area-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-bottom: clamp(20px, 3vw, 36px); }
.area-tile { display: block; color: var(--ink); }
.area-tile__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #edeff2; }
.area-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.area-tile:hover .area-tile__media img { transform: scale(1.03); }
.area-tile__name { display: block; margin-top: 10px; font-family: var(--disp); font-weight: 600; font-size: 1.02rem; }
@media (max-width: 900px) { .area-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.area-head__text { margin: -6px 0 18px; max-width: 60ch; font-size: clamp(1rem, .95rem + .2vw, 1.12rem); }
.about-mascot { display: block; width: min(70%, 360px); margin: 0 auto 18px; }
.about-mascot img { display: block; width: 100%; height: auto; transform: rotate(-4deg); }
.tpl-personalisation .area-head { padding-top: clamp(22px, 3vw, 44px); }

/* Kopf: Herz (Merkzettel) und Konto wie bei celinasuchy.com; das Konto-Menü klappt beim Zeigen auf */
.header-icon { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.header-icon svg { width: 24px; height: 24px; }
.header-count { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding-inline: 4px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 .64rem/1 var(--sans); }
.header-count[data-count="0"] { display: none; }
.account-menu { position: relative; }
.account-menu__panel { position: absolute; top: calc(100% + 6px); right: -60px; z-index: 120; width: 290px; padding: 24px; border: 1px solid #e3e5e8; border-radius: 12px; background: #fff; box-shadow: 0 24px 50px -28px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.account-menu::after { content: ""; position: absolute; top: 100%; left: -20px; right: -20px; height: 10px; }
.account-menu:hover .account-menu__panel, .account-menu:focus-within .account-menu__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.account-menu__login { display: block; padding: 12px; border-radius: 4px; background: var(--ink); color: #fff; font-weight: 600; text-align: center; }
.account-menu__login:hover { background: #000; }
.account-menu__register { margin: 10px 0 16px; text-align: center; font-size: .98rem; }
.account-menu__register a { text-decoration: underline; text-underline-offset: 4px; }
.account-menu__list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.account-menu__list a { display: flex; align-items: center; gap: 14px; padding: 11px 6px; font-size: .98rem; color: var(--ink); }
.account-menu__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) { .account-menu__panel { display: none; } }

/* =========================================================================
   Kopf wie celinasuchy.com (20.10.2026): links Suchen, Logo mittig, rechts Sprache, Merkzettel, Konto, Warenkorb;
   Navigation in eigener Zeile darunter. Menü: Linkgruppen und Bildkarten in einem Raster, große Schrift.
   ========================================================================= */
@media (min-width: 1101px) { :root { --nav-h: 48px; --header-h: calc(var(--bar-h) + var(--nav-h)); } }
.site-header--mega .site-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.site-header__start { display: flex; align-items: center; justify-self: start; min-width: 0; }
.site-header--mega .logo { justify-self: center; }
.site-header--mega .site-header__actions { justify-self: end; gap: clamp(2px, .5vw, 8px); }
.site-header--mega .lang-switch { margin-right: 8px; }
.header-search { gap: 10px; padding-inline: 0; font-weight: 500; font-size: 1rem; }
.header-search:hover { background: none; }
.header-search:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 701px) { .header-search span { display: inline; } }
.site-header__navrow { display: flex; justify-content: center; height: var(--nav-h); max-width: var(--wrap-content); margin-inline: auto; padding-inline: var(--side); }
@media (max-width: 1100px) { .site-header__navrow { display: none; } }
.site-header--mega .nav { gap: clamp(8px, 1.6vw, 28px); }
body .site-header--mega .nav__item.is-open { background: none; color: var(--ink); }
body .site-header--mega .nav__item.is-open .nav__link { color: var(--ink) !important; }
body .site-header--mega .nav__item.is-open .nav__link::after { content: ""; position: absolute; left: 14px; right: 2px; bottom: 7px; height: 1.5px; background: currentColor; }
.menu-backdrop { inset: var(--header-h) 0 0; }
@keyframes menu-reveal {
  from { clip-path: inset(0 0 calc(100% - var(--header-h)) 0 round 0 0 24px 24px); }
  to { clip-path: inset(0 0 0 0 round 0 0 24px 24px); }
}
.mega-menu__inner { height: auto; padding: 26px var(--side) 36px; max-height: calc(100dvh - var(--header-h) - 24px); }
.mega-menu__panel { gap: clamp(24px, 3vw, 56px); height: auto; align-items: start; }
.mega-menu__panel .shop-menu-group { padding: 0; }
.mega-menu__panel .shop-menu-group h2 { margin: 0 0 12px; font-family: var(--sans); font-size: 1.05rem; font-weight: 700; }
.mega-menu__panel .shop-menu-group a { padding: 8px 0; border: 0; font-size: 1.2rem; line-height: 1.35; }
.shop-menu-group--specials { padding: 0; background: none; }
.mega-menu__panel .menu-card { background: none; border-radius: 0; overflow: visible; }
.mega-menu__panel .menu-card > img { flex: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.mega-menu__panel .menu-card__caption { padding: 10px 0 0; background: none; }
.mega-menu__panel .menu-card__caption strong { font-size: 1.15rem; font-weight: 600; }
.mobile-menu__content .shop-menu-group { grid-column: 1 / -1; padding: 4px 0; }
.mobile-menu__content .shop-menu-group h2 { margin: 0 0 4px; font-size: .95rem; }
.mobile-menu__content .shop-menu-group a { padding: 8px 0; font-size: 1.05rem; border: 0; }
.mobile-menu__content .menu-card { background: none; }
.mobile-menu__content .menu-card__caption { padding: 8px 0 0; background: none; }

/* Ruhigere Flächen statt Lila, Blau, Rosa: überall warmes Sand */
.special-card, .special-card--weihnachten, .special-card--halloween { background: #eaecef; }
.special-card:hover { border-color: transparent; }
.special-card:hover h2, .special-card:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
:root { --loop-soft: #eaecef; }
.newsletter__form input { border-color: #ddd5c8; }

/* Startseite (Celina 25.10.2026): Bei Hochzeit, Familie, Haustiere, Quotes und Business steht der Name im Bild unten links,
   ohne Kasten, in der Schrift der Zwischentitel („Christmas Specials“); bei „Für wen suchst du?“ darunter. Kein schwarzes Hover. */
.edit-tile { display: flex; flex-direction: column; background: none; border-radius: 0; overflow: visible; }
.edit-tile__media { position: relative; border-radius: var(--r); overflow: hidden; background: #edeff2; }
.edit-tile--big .edit-tile__media { flex: 1 1 auto; min-height: 0; }
.edit-tile__label { position: absolute; left: clamp(14px, 1.6vw, 24px); bottom: clamp(12px, 1.4vw, 20px); max-width: calc(100% - 28px);
  padding: 0; border-radius: 0; background: none; color: var(--ink);
  font-family: var(--disp); font-weight: 600; font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); line-height: 1.2; }
.home-quad .edit-tile__label { position: static; max-width: none; padding: 12px 0 0; }
.edit-tile:hover .edit-tile__label { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
/* Hochzeit groß links, so hoch wie Familie und Haustiere zusammen: Bild füllt die Kachel, bestimmt aber nicht ihre Höhe */
@media (min-width: 901px) {
  .home-mosaic .edit-tile--big { align-self: stretch; }
  .home-mosaic .edit-tile--big .edit-tile__media { aspect-ratio: auto; height: auto; }
  .home-mosaic .edit-tile--big .edit-tile__media picture, .home-mosaic .edit-tile--big .edit-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.shop-menu-group a > span:last-child, .shop-menu-group a > span { font-size: inherit; }
.loop-hero { overflow: hidden; }
/* Handy wie bei Celina: links Menü und Suche, mittig Logo, rechts Merkzettel, Konto, Warenkorb */
@media (max-width: 1100px) {
  .site-header--mega .site-header__bar { position: relative; }
  .site-header--mega .burger { position: absolute; left: var(--side); top: 50%; transform: translateY(-50%); }
  .site-header__start { padding-left: 46px; }
  .site-header--mega .lang-switch { display: none; }
}
@media (max-width: 700px) {
  .site-header--mega .header-icon, .site-header--mega .cart-toggle, .site-header--mega .burger, .site-header--mega .header-search { width: 40px; min-width: 40px; height: 44px; }
  .site-header--mega .site-header__actions { gap: 0; }
  .site-header__start { padding-left: 42px; }
}
.tpl-wishlist .area-head { padding-top: clamp(22px, 3vw, 44px); }

/* Menü (Überarbeitung): Gruppen links, Bildkarten rechts; Überschriften am größten, Links etwas kleiner */
.mega-menu__panel { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(32px, 4vw, 80px); }
.mega-menu__groups { display: flex; flex-wrap: wrap; gap: 24px clamp(36px, 5vw, 110px); }
.mega-menu__groups .shop-menu-group { min-width: 160px; }
.mega-menu__panel .shop-menu-group h2 { margin: 0 0 14px; font-family: var(--disp); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; }
.mega-menu__panel .shop-menu-group a { padding: 6px 0; font-size: 1.02rem; line-height: 1.4; }
.mega-menu__cards { display: flex; flex: 0 1 auto; gap: clamp(14px, 1.4vw, 24px); }
.mega-menu__cards .menu-card { width: clamp(220px, 20vw, 360px); }
.menu-card--maskottchen > img { object-fit: contain !important; padding: 8% 12%; background: #e7e9ec; }
.mobile-menu__content .mega-menu__groups { grid-column: 1 / -1; display: block; }
.mobile-menu__content .mega-menu__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile-menu__content .mega-menu__cards .menu-card { width: auto; }
/* Menü-Inhalt mittig gebündelt statt ganz links und ganz rechts */
.mega-menu__panel { justify-content: center; gap: clamp(48px, 6vw, 120px); }

/* =========================================================================
   Maskottchen an festen Stellen (20.10.2026)
   ========================================================================= */
/* Startbanner: Garnrolle mit Nadel, ohne Drehung (das Bild ist schon in Bewegung) */
.loop-hero__mascot img { transform: none; filter: none; }
.loop-hero__mascot { width: min(100%, 560px); }

/* Garnrolle schaut über eine Linie: Hände liegen auf der Linie */
.lb-peek { position: absolute; z-index: 2; height: auto; pointer-events: none; }
.cart-sheet__foot { position: relative; }
.lb-peek--korb { bottom: calc(100% - 3px); left: 6px; width: 100px; }
.cart-sheet__items { padding-bottom: 104px; }   /* Platz für die Garnrolle, die über den Fuß schaut: deckt das letzte Bild nicht zu */
.cart-sheet:has([data-cart-empty]:not([hidden])) .lb-peek--korb { display: none; }
.lb-peek--summe { bottom: calc(100% - 3px); left: 18px; width: 110px; }
.order-summary:has(.lb-peek--summe) { margin-top: 70px; }
@media (min-width: 821px) { .order-summary:has(.lb-peek--summe) { margin-top: 0; } .cart-page, .checkout-page { padding-top: 70px; } }

/* Danke-Seite: Garnrolle mit Kleidung, sobald die Bestellnummer da ist */
.thanks-page__maskottchen { display: none; }
.thanks-page:has([data-order-reference]:not([hidden])) .thanks-page__maskottchen { display: block; width: 220px; margin: 0 auto 8px; animation: lb-hopp .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.thanks-page__maskottchen img { display: block; width: 100%; height: auto; }
@keyframes lb-hopp { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }

/* Merkzettel: leer = Hinweis, darunter die Garnrolle mittig; mit Inhalt = Garnrolle klein neben dem Titel */
.wishlist { padding-top: clamp(22px, 3vw, 44px); }
.wishlist__head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2.4vw, 32px); }
.wishlist__maskottchen img { display: block; width: 84px; height: auto; }
.wishlist__title { margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); letter-spacing: -.02em; }
.wishlist__empty { display: grid; justify-items: center; gap: 12px; text-align: center; }
.wishlist__empty[hidden] { display: none; }
.wishlist__empty-title { margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -.01em; }
.wishlist__empty-text { margin: 0 0 8px; font-size: 1.05rem; color: #3d3d3d; }
.wishlist:has(.wishlist__empty:not([hidden])) { display: flex; flex-direction: column; align-items: center; padding-block: clamp(32px, 5vw, 72px); }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__head { order: 2; flex-direction: column; margin: 0; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__maskottchen img { width: min(300px, 62vw); margin: 18px 0 10px; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty { order: 1; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty .btn { order: 3; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__more { display: none; }
.wishlist:has(.wishlist__empty:not([hidden])) [data-wishlist-grid] { order: 4; }
/* Zusammenfassung bleibt Bezugspunkt für die Garnrolle, auch wo sie nicht mitläuft (Handy) */
.order-summary:has(.lb-peek--summe) { position: relative; }
@media (min-width: 821px) { .order-summary:has(.lb-peek--summe) { position: sticky; } }
/* Warenkorb-Leiste: nur eine Linie unter der Garnrolle */
.cart-sheet__foot > .order-summary__row { border-top: 0; padding-top: 4px; }
/* Leerer Merkzettel: Hinweis, darunter die Garnrolle, dann Text und Knopf */
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty:not([hidden]) { display: contents; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty-title { order: 1; text-align: center; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__head { order: 2; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty-text { order: 3; margin: 0 0 18px; text-align: center; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty .btn { order: 4; }
.wishlist:has(.wishlist__empty:not([hidden])) [data-wishlist-grid] { order: 5; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__maskottchen img { margin: 22px 0 18px; }

/* Startbanner: ruhiges Hellgrau, blasser Kreis hinter der Garnrolle, weicher Bodenschatten */
.loop-hero { background: #f3f5f8; }
.loop-hero__mascot { position: relative; isolation: isolate; }
.loop-hero__mascot::before { content: ""; position: absolute; inset: 4% 6% 6% 4%; border-radius: 50%; background: #e4ebfa; z-index: -1; }
.loop-hero__mascot::after { content: ""; position: absolute; left: 14%; right: 18%; bottom: 1.5%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 30, 90, .22), transparent); z-index: -1; }
.loop-hero__mascot picture { position: relative; }

/* Bilder, die beim Start noch laden, blenden sanft ein (merkzettel.js, konto.js) */
.lb-fade { opacity: 0; transition: opacity .45s ease; }
.lb-fade.is-da { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lb-fade { transition: none; } }

/* Keine farbigen Ringe um Knöpfe: Fokus nur bei Tastaturbedienung, dunkel; Felder zeigen den Fokus über den Rahmen */
:where(button, a, summary, input, select, textarea):focus:not(:focus-visible) { outline: none; }
:where(button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .08); }

.home-mosaic { align-items: start; }
.edit-tile--big { grid-row: span 2; }
.edit-tile--big .edit-tile__media, .edit-tile__media { aspect-ratio: 3 / 2; height: auto; }
.home-duo .edit-tile__media { aspect-ratio: 3 / 2; }
.home-quad .edit-tile__media { aspect-ratio: 4 / 5; }
.edit-tile--wide .edit-tile__media { aspect-ratio: 16 / 9; }
.edit-tile--wide .edit-tile__media img { object-position: center; }
.area-tile__media { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .edit-tile--big .edit-tile__media, .home-mosaic .edit-tile:not(.edit-tile--big) .edit-tile__media { aspect-ratio: 3 / 2; }
  .edit-tile--wide .edit-tile__media { aspect-ratio: 16 / 9; }
}
/* Startseite: Kollektion als Bild (16:9, ungeschnitten) neben kurzem Text */
.home-feature { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; border-radius: var(--r-lg); overflow: hidden; background: #f3f5f8; color: var(--ink); }
.home-feature__media { display: block; aspect-ratio: 16 / 9; }
.home-feature__media picture, .home-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-feature__copy { display: grid; justify-items: start; gap: 12px; padding: clamp(24px, 3.5vw, 56px); }
.home-feature__title { font-family: var(--disp); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem); letter-spacing: -.02em; line-height: 1; }
.home-feature__text { font-size: clamp(1rem, .95rem + .2vw, 1.12rem); line-height: 1.5; }
.home-feature .btn { margin-top: 6px; }
.home-feature:hover .btn { background: #000; }
@media (max-width: 900px) { .home-feature { grid-template-columns: 1fr; } }

/* Kontakt (Celina 25.10.2026): Formular als ruhige Karte, Themen als Auswahlknöpfe, Sicherheitsprüfung (Cloudflare
   Turnstile) mit fester Höhe, damit beim Laden nichts springt; rechts die anderen Wege als kleine Karten. Die Wege stehen
   im Quelltext vor dem Formular (Celina 26.10.2026: „direkt ganz oben, wie man uns kontaktieren kann“), am Handy also oben. */
.kontakt { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start;
  max-width: 1180px; margin-inline: auto; padding-block: clamp(24px, 4vw, 48px) clamp(36px, 5vw, 64px); }
.kontakt-form { grid-column: 1; grid-row: 1; }
.kontakt-wege { grid-column: 2; grid-row: 1; }
.kontakt-form { gap: 18px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: #fff;
  box-shadow: 0 30px 60px -48px rgba(20, 20, 20, .45); }
.kontakt-form label { gap: 8px; font-size: .92rem; }
.kontakt-form input, .kontakt-form textarea { border: 1px solid #d9dce1; border-radius: 12px; background: #fff; padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.kontakt-form input::placeholder, .kontakt-form textarea::placeholder { color: #9a9ea6; }
.kontakt-form input:hover, .kontakt-form textarea:hover { border-color: #b9bdc4; }
.kontakt-form input:focus, .kontakt-form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20, 20, 20, .07); }
.kontakt-form textarea { min-height: 150px; resize: vertical; }
.kontakt-themen { margin: 0; padding: 0; border: 0; min-width: 0; }
.kontakt-themen legend { margin-bottom: 10px; padding: 0; font-weight: 600; font-size: .92rem; }
.kontakt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kontakt-form .kontakt-chip { position: relative; display: block; }
.kontakt-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.kontakt-chip span { display: block; padding: 10px 16px; border: 1px solid #d9dce1; border-radius: 999px; background: #fff;
  font-weight: 500; font-size: .95rem; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.kontakt-chip:hover span { border-color: var(--ink); }
.kontakt-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.kontakt-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.kontakt-optional { font-weight: 400; color: var(--muted); }
/* Produkt und Menge nur bei Custom- und Business-Anfragen */
.kontakt-form:has(input[name="topic"][value="order"]:checked) .kontakt-produkt,
.kontakt-form:has(input[name="topic"][value="other"]:checked) .kontakt-produkt { display: none; }
.kontakt-pruefung { min-height: 65px; }
.kontakt-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.kontakt-senden .btn { margin: 0; padding: 15px 28px; }
.kontakt-hinweis { flex: 1 1 220px; margin: 0; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.kontakt-hinweis a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.kontakt-form .form-status:empty { display: none; }
.kontakt-danke { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; font-weight: 400; }
.kontakt-danke svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-danke p { margin: 0; line-height: 1.5; }
.kontakt-wege { display: grid; gap: 12px; }
.kontakt-karte { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 16px; background: #f3f4f6; }
.kontakt-karte svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-karte div { min-width: 0; }
.kontakt-karte__titel { margin: 0 0 2px; font-size: .82rem; color: var(--muted); }
.kontakt-karte a, .kontakt-karte span { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.kontakt-karte a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s ease; }
.kontakt-karte a:hover { text-decoration-color: currentColor; }
.custom-request .kontakt-pruefung { margin-top: 2px; }
@media (max-width: 860px) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt-form, .kontakt-wege { grid-column: auto; grid-row: auto; }
  .kontakt-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Handy: die Wege kompakt zwei nebeneinander, Symbol über dem Text, damit das Formular gleich darunter beginnt */
@media (max-width: 520px) {
  .kontakt-form { padding: 18px; border-radius: 16px; }
  .kontakt-wege { gap: 8px; }
  .kontakt-karte { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 14px; }
  .kontakt-karte svg { width: 20px; height: 20px; }
  .kontakt-karte a, .kontakt-karte span { font-size: .92rem; line-height: 1.3; }
  .kontakt-senden .btn { width: 100%; }
}

/* Startbanner nach Celinas Entwurf (25.10.2026, zweite Fassung): links Überschrift mit „Stickerei.“ in blauer Sprechblase,
   dunkler Knopf und Textlink; rechts das Stickvideo (3:2) mit rundem Knopf zum Anhalten; das Maskottchen steht
   unten links am Video vor einem Punkteraster. Breite aus der Spalte, Höhe aus dem Seitenverhältnis. */
.stick-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  margin-top: clamp(12px, 2vw, 28px); border-radius: 20px; background: #eaf3fd; }
.wrap.stick-hero { width: calc(100% - 2 * var(--side)); max-width: calc(var(--wrap-content) - 2 * var(--side));
  padding: clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px) clamp(24px, 5vw, 80px); }
.stick-hero__copy { min-width: 0; position: relative; z-index: 2; }
.stick-hero__title { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(2rem, .9rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.035em; color: var(--ink); }
/* Sprechblase: Celinas Bild (deutsch), etwa so breit wie die Zeile darüber, die Striche ragen links heraus */
.stick-hero__blase-bild { position: relative; display: block; width: min(9.2em, 100% + .4em); margin: .1em 0 0 -.4em; }
.stick-hero__blase-bild img { display: block; width: 100%; height: auto; }
/* Englisch: dieselbe Form in CSS, blau wie das Maskottchen, schwarzer Rand, gedreht, Spitze nach rechts unten */
.stick-hero__blase { position: relative; display: inline-block; margin: .14em 0 .12em .3em; padding: .08em .34em .14em .26em; font-size: 1.22em;
  border: .07em solid #111; border-radius: .32em; background: #0a62f2; transform: rotate(-6deg); }
.stick-hero__blase > span { display: inline-block; color: #fff; font-weight: 900; letter-spacing: -.02em; }
.stick-hero__blase::after { content: ""; position: absolute; right: .9em; bottom: -.34em; width: .5em; height: .5em; background: #0a62f2;
  border-right: .07em solid #111; border-bottom: .07em solid #111; transform: rotate(32deg) skewX(-18deg); }
.stick-hero__blase::before { content: ""; position: absolute; left: -.7em; top: .02em; width: .66em; height: .66em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke-linecap='round' stroke-width='6'%3E%3Cpath d='M30 8 L40 24' stroke='%230a62f2'/%3E%3Cpath d='M10 24 L30 32' stroke='%230a62f2'/%3E%3Cpath d='M8 46 L26 44' stroke='%23111'/%3E%3C/svg%3E") no-repeat center / contain; }
.stick-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(16px, 2vw, 30px); margin-top: clamp(24px, 3vw, 44px); }
.stick-hero .stick-hero__btn { margin: 0; padding: clamp(11px, .9vw, 14px) clamp(18px, 1.6vw, 26px); border-radius: 10px;
  border-color: #222; background: #222; color: #fff; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); }
.stick-hero .stick-hero__btn:hover { background: #000; border-color: #000; }
.stick-hero__link { font-weight: 600; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); color: var(--ink); }
.stick-hero__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.stick-hero__media { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; background: #cfe0ef; }
.stick-hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
/* Maskottchen hängt an der Sprechblase und „sagt“ das Wort: Die Spitze (91,5 % / 88 % des Blasenbilds) zeigt auf die linke
   Seite der Garnrolle (16 % / 43 % des Maskottchens). Bei 34 % Blasenbreite: links 86,1 %, oben 48,4 %. Steht vor dem Video.
   Englisch (CSS-Blase): Spitze bei 100 % − .65em / 100 % + .22em, dort derselbe Punkt des Maskottchens. */
.stick-hero__maskottchen { position: absolute; z-index: 3; left: 86.1%; top: 48.4%; width: 34%; pointer-events: none; }
.stick-hero__blase .stick-hero__maskottchen { left: calc(100% - .65em); top: calc(100% + .22em); width: 2.6em; transform: translate(-4%, -40%) rotate(6deg); }
.stick-hero__maskottchen::before { content: ""; position: absolute; z-index: -1; left: -14%; top: 12%; width: 70%; height: 80%;
  background: radial-gradient(circle, #9cc3f3 1.6px, transparent 2px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%); }
.stick-hero__maskottchen img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(20, 40, 80, .2)); }
.stick-hero__play { position: absolute; right: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); display: grid; place-items: center;
  width: clamp(46px, 4vw, 60px); height: clamp(46px, 4vw, 60px); padding: 0; border: 0; border-radius: 50%;
  background: rgba(40, 40, 40, .72); color: #fff; cursor: pointer; transition: background .15s ease; }
.stick-hero__play:hover { background: rgba(20, 20, 20, .88); }
.stick-hero__play[hidden] { display: none; }
.stick-hero__play svg { width: 44%; height: 44%; fill: currentColor; }
.stick-hero__icon-pause { display: none; }
.stick-hero__play[data-spielt] .stick-hero__icon-play { display: none; }
.stick-hero__play[data-spielt] .stick-hero__icon-pause { display: block; }
@media (max-width: 820px) {
  .stick-hero { grid-template-columns: 1fr; }
  .wrap.stick-hero { padding: 24px 16px 16px; }
  .stick-hero__copy { padding-inline: 6px 0; }
  .stick-hero__title { font-size: clamp(2rem, 1rem + 5vw, 3rem); }
  /* Handy nach Celinas Entwurf: Blase zwei Drittel breit, Maskottchen groß rechts daneben (Spitze zeigt auf seine linke
     Seite, 16 % / 43 % des Maskottchens), darunter Knopf und Link in einer Zeile, Video breiter */
  .stick-hero__blase-bild { width: 76%; margin-left: -.3em; }
  .stick-hero__blase-bild .stick-hero__maskottchen { left: 83.8%; top: 32%; width: 48%; }
  .stick-hero__blase { font-size: .92em; }
  .stick-hero__cta { gap: 10px 18px; margin-top: clamp(64px, 19vw, 96px); }
  .stick-hero .stick-hero__btn { padding: 13px 18px; font-size: 1.02rem; }
  .stick-hero__link { font-size: 1.02rem; }
  .stick-hero__media { aspect-ratio: 7 / 4; }
}

/* =========================================================================
   Celina 25.10.2026 abends: weniger Rand am Handy, aufgeräumtes Handy-Menü, Banner-Knöpfe mittig,
   „Für wen suchst du?“ wie das Mosaik, Merkzettel mit Maskottchen in einer Karte
   ========================================================================= */
/* Handy: Texte 12 px vom Rand, Bilder, Raster und Kacheln nur 6 px; der Text unter den Karten steht wieder auf der Textkante */
@media (max-width: 600px) {
  :root { --side: 12px; --media-side: 6px; }
  .wrap .product-grid { margin-inline: calc(var(--media-side) - var(--side)); }
  .product-grid--4 { gap: 22px 6px; }
  .wrap .product-grid .card__body { padding: 10px 6px 0; }
  .related--cross { padding-inline: var(--media-side); }
  .wrap:is(.home-mosaic, .home-duo, .home-wide) { padding-inline: var(--media-side); }
  .home-gifts .home-mosaic { margin-inline: calc(var(--media-side) - var(--side)); }
  .home-mosaic, .home-duo, .home-wide { gap: 6px; }
  .wrap.stick-hero { width: calc(100% - 2 * var(--media-side)); }
  .newsletter { padding-inline: var(--media-side); }
}

/* Startbanner am Handy: „Zum Shop“ als weißer Knopf mit schwarzer Schrift, beide Knöpfe mittig */
@media (max-width: 820px) {
  .stick-hero__cta { justify-content: center; gap: 10px; }
  .stick-hero__link { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 10px; background: #fff; color: var(--ink);
    box-shadow: 0 1px 2px rgba(20, 40, 80, .1), inset 0 0 0 1px rgba(20, 20, 20, .08); }
  .stick-hero__link:hover { text-decoration: none; background: #f7f9fc; }
}

/* „Für wen suchst du?“: gespiegeltes Mosaik, große Kachel rechts (am Handy oben über die volle Breite) */
.home-mosaic--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.home-mosaic--rev .edit-tile--big { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 901px) {
  .home-mosaic--rev .edit-tile--big { align-self: stretch; }
  .home-mosaic--rev .edit-tile--big .edit-tile__media { aspect-ratio: auto; height: auto; }
  .home-mosaic--rev .edit-tile--big .edit-tile__media picture, .home-mosaic--rev .edit-tile--big .edit-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 900px) {
  .home-mosaic--rev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-mosaic--rev .edit-tile--big { grid-column: 1 / -1; grid-row: auto; }
}

/* Handy-Menü: volle Höhe unter dem Kopf, jede Kategorie einmal als Kachel, darunter Gestalten, Hilfe, Konto und Sprache;
   Schrift wie im alten Menü mindestens 16 px, helle Kacheln mit feiner Linie statt grauer Flächen und Kapseln */
@media (max-width: 1100px) {
  .site-header--mega.open { border-radius: 0; }
  .site-header--mega .mobile-nav { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); max-height: none;
    padding: 14px var(--side) calc(24px + env(safe-area-inset-bottom)); border-radius: 0; }
}
.mobile-nav .mobile-search { margin: 0 0 6px; padding-bottom: 0; border-bottom: 0; }
.mobile-nav:focus { outline: none; }
.mnav-title { margin: 22px 0 10px; font-family: var(--disp); font-size: 1rem; font-weight: 600; color: var(--ink); }
.mnav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mnav-tile { display: flex; align-items: center; gap: 10px; min-height: 62px; height: 100%; padding: 6px 8px 6px 6px; border: 1px solid #e6e8eb; border-radius: 12px;
  background: #fff; color: var(--ink); font-size: 1.04rem; font-weight: 500; line-height: 1.22; }
.mnav-tile img, .mnav-tile__icon { flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.mnav-tile__icon { display: grid; place-items: center; background: #f7f8fa; }
.mnav-tile span { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.mnav-tile.is-current { border-color: var(--ink); }
.mnav-tile:active { border-color: #b9bdc3; }
.mnav-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mnav-list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 1.06rem; color: var(--ink); }
.mnav-list a::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid #8a8d92; border-right: 1.5px solid #8a8d92; transform: rotate(45deg); }
.mnav-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; }
.mnav-foot a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 1.02rem; font-weight: 500; color: var(--ink) !important; }
@media (min-width: 601px) and (max-width: 1100px) { .mnav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Leerer Merkzettel: hellblaue Karte wie der Startbanner, oben die Garnrolle mit dem Notizblock auf weißem Kreis mit
   Punkteraster, darunter Überschrift, Text und Knopf */
.wishlist:has(.wishlist__empty:not([hidden])) { width: calc(100% - 2 * var(--media-side, var(--side))); max-width: 620px;
  margin: clamp(16px, 3vw, 40px) auto clamp(24px, 4vw, 56px); padding: 28px 22px 34px; border-radius: 20px; background: #eaf3fd; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__head { order: 0; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty-title { order: 1; margin-top: 6px; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty-text { order: 2; max-width: 30ch; margin: 8px 0 20px; color: #3a3f47; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__empty .btn { order: 3; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__maskottchen { position: relative; display: block; isolation: isolate; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__maskottchen::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%;
  width: 92%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 58%, transparent 59%), radial-gradient(circle, #9cc3f3 1.6px, transparent 2px) 0 0 / 9px 9px; }
.wishlist:has(.wishlist__empty:not([hidden])) .wishlist__maskottchen img { width: min(210px, 56vw); margin: 4px 0 12px;
  filter: drop-shadow(0 12px 14px rgba(20, 40, 80, .18)); transform: rotate(-3deg); }

/* Produktkarten (Celina 25.10.2026): Das Foto füllt immer die ganze Kachel. Vorher bestimmte sizes (46vw) seine Breite,
   bei breiteren Karten schaute der farbige Kartenhintergrund als Rahmen durch. */
.card__media picture { display: block; width: 100%; height: 100%; }
/* Titel einer Reihe gleich hoch: Bricht ein Name auf zwei Zeilen um, bekommen alle Karten dieser Reihe zwei Zeilen und
   die Preise stehen auf einer Linie (Subgrid: Bild, Name, Preis, „Personalisierbar“). Ohne Subgrid immer zwei Zeilen. */
@supports (grid-template-rows: subgrid) {
  .product-grid { row-gap: 0; }
  .product-grid > .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-bottom: clamp(22px, 2.6vw, 32px); }
  .product-grid > .card > .card__link { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .product-grid .card__body, .product-grid .card__row { display: contents; }
  .product-grid .card__name { padding: 12px 2px 0; }
  .product-grid .card__price { padding: 3px 2px 0; }
  .product-grid .card__note { margin: 0; padding: 5px 2px 0; }
}
@supports not (grid-template-rows: subgrid) {
  .product-grid .card__name { min-height: 2.4em; line-height: 1.2; }
}
@media (max-width: 600px) {
  .wrap .product-grid :is(.card__name, .card__price, .card__note) { padding-inline: 6px; }
  .wrap .product-grid .card__name { padding-top: 10px; }
}

/* Alle Knöpfe als echte Pills (Celina 25.10.2026), auch die bisher leicht abgerundeten und eckigen; :root hebt die Regel
   über die Einzelregeln in produkt.css und konto.css. Eingabefelder (Größe, Garnfarbe) bleiben Rechtecke. */
:root :is(.btn, .konto-btn, .stick-hero__link, .mobile-search button, .quantity-picker) { border-radius: 999px; }
:root .quantity-picker input[type="number"] { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

/* Celina 25.10.2026, später Abend --------------------------------------------------------------------------------- */
/* Farbpunkte auf den Karten: zeigen schon in der Übersicht, dass es mehrere Farben gibt (eigene Subgrid-Zeile) */
.card__farben { display: flex; align-items: center; gap: 4px; padding: 6px 2px 0; }
.card__farben i { width: 12px; height: 12px; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .2); }
.card__farben > span[aria-hidden] { margin-left: 3px; font-size: .82rem; color: #55595f; }
@supports (grid-template-rows: subgrid) {
  .product-grid > .card { grid-row: span 5; }
  /* feste Zeilen: ohne Farbpunkte bleibt Zeile 4 leer, „Personalisierbar“ steht in jeder Karte einer Reihe gleich hoch */
  .product-grid .card__media { grid-row: 1; } .product-grid .card__name { grid-row: 2; } .product-grid .card__price { grid-row: 3; }
  .product-grid .card__farben { grid-row: 4; } .product-grid .card__note { grid-row: 5; }
}
@media (max-width: 600px) { .wrap .product-grid .card__farben { padding-inline: 6px; } }

/* Wärmeres Grau statt Blaugrau: Fußzeile, Newsletter, Kollektion, Kontaktkarte, Personalisierung im Warenkorb */
:root { --loop-soft: #efebe6; }
.lbf { background: #f6f4f0; }
.home-feature, .kontakt-karte { background: #f4f1ec; }
.cart-line__perso { background: #f5f2ed; }
.mnav-tile__icon { background: #f6f4f0; }

/* Handy-Menü: Business ganz oben über beide Spalten, Name links, Bild als Streifen rechts */
.mnav-grid__breit { grid-column: 1 / -1; }
.mnav-tile--breit { position: relative; min-height: 112px; padding: 0 0 0 18px; overflow: hidden; font-size: 1.2rem; font-weight: 600; }
.mnav-tile--breit span { position: relative; z-index: 1; }
.mnav-tile--breit img { position: absolute; top: 0; right: 0; width: 66%; height: 100%; border-radius: 0; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }

/* Startseite am Handy: Namen bei „Für wen suchst du?“ etwas kleiner (Celina 25.10.2026) */
@media (max-width: 600px) {
  .home-gifts .edit-tile__label { font-size: .92rem; }
  .home-gifts .edit-tile--big .edit-tile__label { font-size: 1.02rem; }
}

/* Warenkorb und Kasse: enthaltene MwSt. unter der Zwischensumme bzw. Gesamtsumme (Celina 25.10.2026) */
.order-summary__row.order-summary__row--mwst { margin-top: -8px; padding-top: 0; border-top: 0; font-size: .92rem; color: #5a5e64; }

/* Hilfe ist ein kurzer Servicelink; die vier Shop-Bereiche sind auf allen Geräten gleich. */
.header-help { padding: 10px 8px; font-size: .86rem; font-weight: 600; }
.mnav-section .mnav-title a { color: inherit; }
.mnav-help { margin-top: 24px; }
@media (max-width: 1100px) { .header-help { display: none; } }

.mnav-tile span { hyphens: auto; }

/* =========================================================================
   Startbanner nach Celinas Entwurf vom 01.11.2026: Sprechblase „Sticken ohne Ende“ mit Maskottchen (Bild), ein Satz,
   schwarzer und blauer Knopf. Computer: links Bild, Satz, Knöpfe, rechts das Video. Handy: untereinander, Video unten.
   ========================================================================= */
.stick-hero { background: #e2effc; }
.wrap.stick-hero { padding: clamp(18px, 2.2vw, 34px); }
.stick-hero__banner { display: block; width: 100%; max-width: 640px; }
.stick-hero__banner img { display: block; width: 100%; height: auto; }
.stick-hero__text { margin: clamp(10px, 1.2vw, 18px) 0 0; max-width: 30ch; font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  line-height: 1.3; font-weight: 500; color: var(--ink); }
.stick-hero__cta { justify-content: flex-start; gap: 10px; margin-top: clamp(16px, 2vw, 28px); }
.stick-hero .stick-hero__btn { border-radius: 999px; border-color: #1c1c1b; background: #1c1c1b; color: #fff; }
.stick-hero .stick-hero__btn:hover { border-color: #000; background: #000; }
.stick-hero .stick-hero__btn--blau { border-color: #0435c2; background: #0435c2; }
.stick-hero .stick-hero__btn--blau:hover { border-color: #032a9c; background: #032a9c; }
@media (max-width: 820px) {
  .wrap.stick-hero { padding: 14px 14px 16px; }
  .stick-hero__copy { padding-inline: 0; }
  .stick-hero__banner { max-width: none; }
  .stick-hero__text { padding-inline: 6px; font-size: 1.3rem; }
  .stick-hero__cta { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; margin-top: 18px; padding-inline: 6px; }
  .stick-hero .stick-hero__btn { padding: 14px 17px; font-size: 1rem; white-space: nowrap; }
}
@media (max-width: 370px) { .stick-hero__cta { flex-wrap: wrap; } }
/* Satz in der freien Fläche des Bildes: unter der Sprechblase (endet bei 64 % Höhe), links vom Maskottchen (beginnt bei 61 %
   Breite); Schriftgröße wächst mit der Bildbreite (Celina 01.11.2026, zweite Grafik mit tiefer gesetzter Blase). */
.stick-hero__bild--banner { position: relative; max-width: 640px; container-type: inline-size; }
.stick-hero__bild--banner .stick-hero__banner { max-width: none; }
.stick-hero__bild--banner .stick-hero__text { position: absolute; left: 4%; top: 67%; width: 55%; max-width: none; margin: 0; padding: 0;
  font-size: clamp(13px, 1.8vw, 28px); font-size: clamp(13px, 4.3cqw, 28px); line-height: 1.2; font-weight: 600; }
@media (max-width: 820px) { .stick-hero__bild--banner { max-width: none; } }
/* Bild „Sticken ohne Ende“ größer (Celina 01.11.2026): Computer gut die Hälfte der Breite für das Bild, Video daneben kleiner;
   Handy mit schmalerem Innenrand, damit das Bild fast bis an die Kante der Fläche reicht. */
@media (min-width: 821px) {
  .stick-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2.2vw, 36px); }
  .wrap.stick-hero { padding: clamp(14px, 1.6vw, 26px); }
  .stick-hero__bild--banner { max-width: 900px; }
  .stick-hero__bild--banner .stick-hero__text { width: 50%; }
}
@media (max-width: 820px) {
  .wrap.stick-hero { padding: 8px 8px 16px; }
  .stick-hero__bild--banner .stick-hero__cta { padding-inline: 10px; }
  .stick-hero__cta { padding-inline: 10px; }
  .stick-hero__media { margin-inline: 4px; }
}
/* Handy nach Celinas Entwurf (01.11.2026, dritte Fassung): blaue Karte mit Bild und Satz unter der Sprechblase, darunter ein
   breiter blauer Pill-Knopf „Jetzt personalisieren“ und „Zum Shop →“ als Link; das Video als eigene Karte darunter. */
@media (max-width: 820px) {
  .wrap.stick-hero { gap: 18px; padding: 10px 10px 12px; border-radius: 20px; background: #e2effc; }   /* Video bleibt in der blauen Fläche (Celina) */
  .stick-hero__copy { padding: 0; border-radius: 0; background: none; }
  .stick-hero__bild--banner .stick-hero__text { position: absolute; left: 4%; top: 67.5%; width: 55%; margin: 0; padding: 0;
    font-size: clamp(14px, 4.5cqw, 22px); line-height: 1.2; font-weight: 600; }
  .stick-hero__cta, .stick-hero__bild--banner .stick-hero__cta { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px;
    margin-top: 16px; padding-inline: 4px; }
  .stick-hero .stick-hero__btn { display: flex; justify-content: center; text-align: center; width: 100%; padding: 15px 20px; border-radius: 999px; border-color: #0435c2;
    background: #0435c2; font-size: 1.08rem; }
  .stick-hero .stick-hero__btn:hover { border-color: #032a9c; background: #032a9c; }
  .stick-hero .stick-hero__btn--blau { align-self: center; width: auto; padding: 4px 8px; border: 0; background: none; color: #0435c2;
    font-weight: 700; }
  .stick-hero .stick-hero__btn--blau::after { content: "\2192"; margin-left: .35em; }
  .stick-hero .stick-hero__btn--blau:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
  .stick-hero__media { margin-inline: 0; }
}
/* Computer im Stil der Handy-Fassung (Celina 01.11.2026): links Bild mit Satz, blauer Pill-Knopf und „Zum Shop →“,
   rechts das Video so hoch wie die linke Seite, alles in der blauen Fläche. */
@media (min-width: 821px) {
  .stick-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: clamp(20px, 2.6vw, 40px); }
  .wrap.stick-hero { padding: clamp(18px, 2vw, 32px); }
  .stick-hero__copy { display: flex; flex-direction: column; justify-content: center; }
  .stick-hero__bild--banner { max-width: 680px; }
  .stick-hero__bild--banner .stick-hero__text { width: 52%; }
  .stick-hero__cta { align-items: center; gap: 24px; margin-top: clamp(18px, 2vw, 28px); }
  .stick-hero .stick-hero__btn { padding: 15px 34px; border-radius: 999px; border-color: #0435c2; background: #0435c2; font-size: 1.08rem; }
  .stick-hero .stick-hero__btn:hover { border-color: #032a9c; background: #032a9c; }
  .stick-hero .stick-hero__btn--blau { padding: 4px 6px; border: 0; background: none; color: #0435c2; font-weight: 700; }
  .stick-hero .stick-hero__btn--blau::after { content: "\2192"; margin-left: .35em; }
  .stick-hero .stick-hero__btn--blau:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
  .stick-hero__media { aspect-ratio: auto; min-height: 340px; }
}
/* Computer: Knöpfe und Satz (01.11.2026) */
/* Computer (Celina 01.11.2026): Knöpfe direkt unter der Sprechblase (Blase endet bei 64 % Höhe, Maskottchen ab 62 % Breite),
   der Satz als unterste Zeile unter dem Bild; Satz und Knöpfe auf der linken Kante der Sprechblase. */
@media (min-width: 821px) {
  .stick-hero__bild--banner .stick-hero__cta { position: absolute; left: 1.5%; top: 39.5cqw; flex-direction: row; flex-wrap: nowrap;
    align-items: center; gap: 3cqw; margin: 0; }
  .stick-hero .stick-hero__bild--banner .stick-hero__btn { padding: .85em 1.9em; font-size: clamp(13px, 2.4cqw, 17px); }
  .stick-hero .stick-hero__bild--banner .stick-hero__btn--blau { padding: .3em .2em; }
  .stick-hero__bild--banner .stick-hero__text { position: static; width: auto; margin: clamp(14px, 1.6vw, 24px) 0 0 1.5%;
    font-size: clamp(1.05rem, .8rem + .6vw, 1.35rem); line-height: 1.3; }
}
/* Handy: Satz an der Bildbreite ausrichten (67,5 % der Bildhöhe = 35,4 % der Breite), weil die Hülle jetzt auch die Knöpfe enthält */
@media (max-width: 820px) { .stick-hero__bild--banner .stick-hero__text { top: 35.4cqw; } }
/* Satz unter dem Video (Computer), im Bild (Handy) */
.stick-hero__rechts { min-width: 0; }
.stick-hero__text-unten { display: none; }
@media (min-width: 821px) {
  .stick-hero__rechts { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
  .stick-hero__rechts .stick-hero__media { flex: 1 1 auto; min-height: 240px; aspect-ratio: auto; }
  .stick-hero__text-unten { display: block; margin: 0; font-size: clamp(1.05rem, .8rem + .6vw, 1.35rem); line-height: 1.3; font-weight: 600; color: var(--ink); }
  .stick-hero__bild--banner .stick-hero__text { display: none; }
}
/* Satz überall unter dem Video und mittig (Celina 01.11.2026); im Bild nicht mehr */
.stick-hero .stick-hero__bild--banner .stick-hero__text { display: none; }
.stick-hero__text-unten { display: block; margin: 0; text-align: center; font-size: 1.1rem; line-height: 1.3; font-weight: 600; color: var(--ink); }
@media (max-width: 820px) {
  .stick-hero__rechts { display: flex; flex-direction: column; gap: 12px; }
  .stick-hero__text-unten { padding: 0 8px 4px; font-size: .97rem; }   /* etwas kleiner (Celina) */
}
@media (min-width: 821px) { .stick-hero__text-unten { font-size: clamp(1.05rem, .8rem + .6vw, 1.35rem); } }

/* Apple Pay Express (01.11.2026): Apples eigener Knopf (nur Safari), als Pill wie unsere Knöpfe */
.applepay-express { display: grid; gap: 6px; margin-top: 10px; }
.applepay-knopf { display: block; width: 100%; height: 50px; border: 0; border-radius: 999px; cursor: pointer;
  -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black; }
.applepay-hinweis { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--muted); text-align: center; }
.applepay-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.applepay-status { margin: 0; font-size: .9rem; color: var(--red, #b3261e); text-align: center; }
.applepay-status:empty { display: none; }
.cart-sheet .applepay-express { margin: 0 0 10px; }

/* =========================================================================
   Kopf (Celina 02.11.2026): Logo auf dem Computer 30 % größer. Handy und Tablet: oben ist der Kopf größer (--kopf-extra),
   sobald man scrollt, wird er klein (html.kopf-klein, main.js) und erst ganz oben wieder groß. Der Inhalt behält seinen
   Abstand (--kopf-plus), damit nichts springt; alles, was am Kopf klebt, rechnet mit dem kleinen Kopf.
   ========================================================================= */
:root { --kopf-plus: 0px; --kopf-extra: 0px; }
@media (min-width: 901px) and (min-height: 821px) { :root { --bar-h: 104px; } .logo__img { height: 84px; } }
@media (min-width: 901px) and (max-height: 820px) { :root { --bar-h: 76px; } .logo__img { height: 65px; } }
@media (max-width: 900px) {
  :root { --kopf-plus: 24px; --kopf-extra: 24px; }
  html.kopf-klein { --kopf-extra: 0px; }
  main, body.page-home main { padding-top: calc(var(--header-h) + var(--kopf-plus)); }
  .site-header__bar { height: calc(var(--bar-h) + var(--kopf-extra)); transition: height .25s ease; }
  .logo__img { height: 84px; transition: height .25s ease; }
  html.kopf-klein .logo__img { height: 64px; }
  .site-header--mega .mobile-nav { height: calc(100vh - var(--header-h) - var(--kopf-extra)); height: calc(100dvh - var(--header-h) - var(--kopf-extra)); }
}
@media (max-width: 560px) {
  .logo__img { height: 76px; }
  html.kopf-klein .logo__img { height: 52px; }
  .site-header--mega .site-header__bar { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .site-header__bar, .logo__img { transition: none; } }

/* Business-Kategorie (Celina 02.11.2026): Maskottchen mit Geldscheinen zeigt auf den Mengenrabatt. Computer: rechts neben
   dem Satz, der Finger (34 % der Bildhöhe) auf Höhe der ersten Zeile; Handy: unten rechts neben den Einstiegen, zeigt schräg
   nach oben auf den Text, der die volle Breite behält. */
.business-kopf { display: grid; grid-template-columns: minmax(0, max-content) auto; column-gap: 10px; align-items: start; justify-content: start; }
.business-kopf .business-preise { grid-column: 1; grid-row: 1; }
.business-kopf .niche-quicklinks { grid-column: 1; grid-row: 2; }
.business-kopf__maskottchen { display: block; grid-column: 2; grid-row: 1 / span 2; margin-top: -42px; }
.business-kopf__maskottchen img { display: block; width: auto; height: 150px; max-width: none; }
@media (max-width: 1100px) { .business-kopf__maskottchen { margin-top: -36px; } .business-kopf__maskottchen img { height: 130px; } }
@media (max-width: 700px) {
  .business-kopf { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .business-kopf .business-preise { grid-column: 1 / -1; }
  .business-kopf__maskottchen { grid-row: 2; margin-top: -6px; margin-right: -4px; }
  .business-kopf__maskottchen img { height: 88px; }   /* Handy kleiner (Celina) */
}
/* Computer animiert seit 08.11.2026 (Celina: Wurf „so wie davor“, statt des Standbilds; seit 18:50 Nr. 6, weil bei Nr. 5 ein
   Schein oben aus dem Video flog): Bild 0 liegt deckungsgleich auf dem alten maskottchen-geld-links.png (360 × 358, Höhe
   --geld-h). Der Rahmen behält die alte Größe, damit sich nichts verschiebt; das Bild darin ist 442 × 494 alte Pixel groß und
   beginnt bei (-14,20 | -132,03): nach oben und zu den Seiten fliegen die Scheine, rechts öffnet sich die Hand
   (brand-source/maskottchen-geld-wurf-zusammensetzen.py). Handy: weiter das Standbild maskottchen-geld-oben (andere Pose). */
@media (min-width: 701px) {
  .business-kopf__maskottchen { --geld-h: 150px; position: relative; width: calc(var(--geld-h) * 360 / 358); height: var(--geld-h); }
  .business-kopf__maskottchen img { position: absolute; left: calc(var(--geld-h) * -14.2 / 358); top: calc(var(--geld-h) * -132.03 / 358); width: auto; height: calc(var(--geld-h) * 494 / 358); pointer-events: none; }
}
@media (min-width: 701px) and (max-width: 1100px) { .business-kopf__maskottchen { --geld-h: 130px; } }
/* Celina 08.11.2026: Die Scheine fliegen über die Kopfleiste statt dahinter (z-index über .site-header = 100). Nur ganz
   oben auf der Seite und ohne offenes Menü: beim Scrollen (html.kopf-klein ab 12 px) und bei offenem Menü liegt die Figur
   wieder unter der Kopfleiste, sonst schwebte sie beim Scrollen über der Leiste oder über dem aufgeklappten Menü.
   Ohne :has() (ältere Browser) gilt die ganze Regel nicht, dann fliegen die Scheine wie vorher dahinter. */
@media (min-width: 701px) {
  html:not(.kopf-klein) body:not(:has(.site-header.mega-open, .site-header.open)) .business-kopf__maskottchen img { z-index: 101; }
}

/* Startseite (Celina 02.11.2026): Maskottchen sitzt auf der Oberkante der Millennial-Kachel. Die Unterkante des Spulenrands
   liegt bei 67 % der Bildhöhe genau auf der Kante; darüber bekommt der Abschnitt so viel Abstand, wie das Maskottchen braucht. */
section.home-duo--sitz { --sitz-h: clamp(100px, 11vw, 165px); margin-top: calc(var(--sitz-h) * .67 + 16px); }
.sitz-kachel { position: relative; min-width: 0; }
.sitz-kachel > .edit-tile { height: 100%; }
/* Animation mit transparentem Rand für die Beine (Celina 05.11.2026): sichtbare Figur so groß und so sitzend wie vorher. Unterkante Teller auf der Kachelkante, gleiche Tellerbreite, gleiche Mitte (gemessen am alten Bild). */
.sitz-kachel__maskottchen { position: absolute; z-index: 2; left: calc(7% - var(--sitz-h) * .0936); top: calc(var(--sitz-h) * -.8394); height: calc(var(--sitz-h) * 1.3557); pointer-events: none; }
.sitz-kachel__maskottchen img { display: block; width: auto; height: 100%; max-width: none; }

/* Kategorie Millennial (Celina 02.11.2026): Maskottchen mit Eiskaffee rechts neben der Überschrift, auf ihrer Höhe. Negative
   Ränder, damit der Kopfbereich kaum höher wird. */
.area-head__kopf { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); }
.area-head__kopf .area-head__title { min-width: 0; }
.area-head__maskottchen { flex: none; display: block; margin-block: 4px 8px; }   /* unten nicht negativ: sonst deckt die Filterleiste die Füße ab */
.area-head__maskottchen img { display: block; width: auto; height: clamp(86px, 8.5vw, 128px); max-width: none; }


/* Haustiere (Celina 02.11.2026): breites Bild, Maskottchen misst den Dackel, daneben Hase, Katze, Meerschweinchen.
   Rechtsbündig in einer Zeile mit der Überschrift; am Handy schrumpft es auf den Platz neben dem Wort (Seitenverhältnis 3,08). */
.area-head__kopf--breit .area-head__title { flex: none; }
.area-head__kopf--breit .area-head__maskottchen { flex: 0 1 calc(clamp(96px, 8.5vw, 124px) * 3.077); min-width: 0; margin-left: auto; }
.area-head__kopf--breit .area-head__maskottchen img { width: 100%; height: auto; }
@media (max-width: 700px) { .area-head__kopf--breit .area-head__maskottchen { flex-basis: 172px; } }   /* Handy: 158 px war zu klein, voll war zu groß (Celina) */

/* Sternzeichen und Hochzeit: Maskottchen schaut nach rechts, am Handy rechtsbündig (Celina 02.11./03.11.2026) */
@media (max-width: 700px) { :is(.area-head__kopf--sternzeichen, .area-head__kopf--hochzeit) .area-head__maskottchen { margin-left: auto; } }

/* Startseite (Celina 02.11.2026): Maskottchen hängt mit einer Hand an der Unterkante der Business-Kachel, Gegenstück zum
   sitzenden auf der Quotes-Kachel. Bild mit Fingern über der Kante (Celina 02.11.2026): die Kante liegt bei 5,4 % der Bildhöhe auf der gezeichneten Linie unter den Fingern, die Hand bei 72 % der Bildbreite
   (Bild 829 × 1420); darunter bekommt der Abschnitt so viel Platz, wie die Beine brauchen. */
section.home-duo--sitz { --haeng-h: clamp(130px, 12vw, 180px); padding-bottom: max(0px, calc(var(--haeng-h) * .95 + 14px - clamp(44px, 5.5vw, 84px))); }
.haeng-kachel { position: relative; min-width: 0; }
.haeng-kachel > .edit-tile { height: 100%; }
/* Animation seit 08.11.2026 (Celina: „einfach ersetzen mit dem statischen Bild“): Bild 0 liegt deckungsgleich auf dem alten
   maskottchen-haengt.png (340 × 399, Höhe --haeng-h). Die Leinwand ist 372 × 406 alte Pixel groß und beginnt bei (-16,02 | -1,70),
   damit die pendelnden Beine Platz haben: Höhe ·406/399, oben und links um den Ursprung verschoben (brand-source/maskottchen-haengend-zusammensetzen.py). */
.haeng-kachel__maskottchen { position: absolute; z-index: 2; top: calc(100% - var(--haeng-h) * .054 - var(--haeng-h) * .00426); left: calc(68% - var(--haeng-h) * .8515 * .7964 - var(--haeng-h) * .04015); height: calc(var(--haeng-h) * 1.01754); pointer-events: none; }
.haeng-kachel__maskottchen img { display: block; width: auto; height: 100%; max-width: none; }

/* Warenkorb-Zahl wie auf celinasuchy.com (Celina 02.11.2026): unten rechts an der Tüte, 5 px rechts und 4 px unter dem Symbol */
.site-header .cart-toggle .cart-count { top: auto; right: calc(50% - 17px); bottom: calc(50% - 16px); min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; font-weight: 600; line-height: 1; }

/* Celina 03.11.2026: Maskottchen drückt eine Produktreihe auseinander (Anlässe & Geschenke, Gruppe Haustiere). Die Reihe
   ist ein eigenes Raster über die ganze Breite: zwei Karten, Maskottchen, zwei Karten; die Paare stehen enger (--eng) als
   die Reihen darunter. Jede Karte ist wie im übrigen Raster ein Subgrid mit fünf Zeilen (Bild, Name, Preis, Farben,
   „Personalisierbar“), damit alles auf einer Linie steht. Das Maskottchen steht in der Bildzeile unten (Füße auf der
   Bildkante), die Hände liegen 3 px auf den Bildern. Bild 1377 × 1014 mit den Händen ganz außen.
   Handy: eine Karte links, eine rechts, darunter zwei normal breite Karten (Spalten 1fr, mw/2, mw/2, 1fr).
   Blendet der Filter eine Karte der Reihe aus, wird sie ein normales Raster ohne Maskottchen. */
.schieb-reihe { --mw: clamp(100px, 12%, 166px); --eng: 3px; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr var(--mw) 1fr 1fr; grid-template-rows: repeat(5, auto); column-gap: var(--eng); row-gap: 0; }
.schieb-reihe > .card { min-width: 0; grid-row: 1 / span 5; margin-bottom: clamp(22px, 2.6vw, 32px); }
.schieb-reihe > :nth-child(1) { grid-column: 1; } .schieb-reihe > :nth-child(2) { grid-column: 2; }
.schieb-reihe > :nth-child(5) { grid-column: 4; } .schieb-reihe > :nth-child(6) { grid-column: 5; }
.schieb-reihe__maskottchen { grid-column: 3; grid-row: 1; align-self: end; position: relative; z-index: 2; display: block; pointer-events: none; margin-inline: calc(-1 * var(--eng) - 3px); }
.schieb-reihe__maskottchen img { display: block; width: 100%; height: auto; }
.schieb-reihe__umbruch { display: none; }
@supports (grid-template-rows: subgrid) {
  .schieb-reihe > .card { display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .schieb-reihe > .card > .card__link { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
}
@media (max-width: 820px) {
  .schieb-reihe { --mw: 19%; --eng: 14px; grid-template-columns: 1fr calc(var(--mw) / 2) calc(var(--mw) / 2) 1fr; grid-template-rows: repeat(10, auto); }
  .schieb-reihe > :nth-child(1) { grid-column: 1; grid-row: 1 / span 5; }
  .schieb-reihe > :nth-child(2) { grid-column: 4; grid-row: 1 / span 5; }
  .schieb-reihe__maskottchen { grid-column: 2 / 4; grid-row: 1; }
  .schieb-reihe > :nth-child(5) { grid-column: 1 / 3; grid-row: 6 / span 5; }
  .schieb-reihe > :nth-child(6) { grid-column: 3 / 5; grid-row: 6 / span 5; }
}
@media (max-width: 600px) { .schieb-reihe { --eng: 6px; } }
.schieb-reihe:has(> .card[hidden]) { display: contents; }
.schieb-reihe:has(> .card[hidden]) > .card { grid-column: auto; grid-row: span 5; }
.schieb-reihe:has(> .card[hidden]) > :is(.schieb-reihe__maskottchen, .schieb-reihe__umbruch) { display: none; }

/* Celina 03.11.2026: Maskottchen lehnt sich an das letzte Produkt, wenn die letzte Reihe nicht voll ist. Es ist der
   nächste Platz im Raster (so hoch wie ein Kartenbild, 4:5), steht darin unten (Füße auf der Bildkante) und reicht über
   den Spaltenabstand, bis der Ellbogen (ganz links, 39 % der Bildhöhe) 6 px auf dem Bild davor liegt. Sichtbar nur bei der
   Spaltenzahl, bei der die Reihe nicht voll ist; blendet der Filter Karten aus, ist es weg. Bild 910 × 1234. */
.lehn-maskottchen { --lehn-gap: clamp(18px, 2.6vw, 32px); display: none; grid-row: span 5; align-self: start; position: relative; z-index: 2; aspect-ratio: 4 / 5; pointer-events: none; }
.lehn-maskottchen picture { position: absolute; bottom: 0; left: calc(-1 * var(--lehn-gap) - 6px); height: 42%; }   /* Celina 03.11.: kleiner (vorher 70 %, dann 55 %) */
.lehn-maskottchen img { display: block; width: auto; height: 100%; max-width: none; }
@media (min-width: 1101px) { .lehn-maskottchen.lehnt--4 { display: block; } }
@media (min-width: 821px) and (max-width: 1100px) { .lehn-maskottchen.lehnt--3 { display: block; } }
@media (max-width: 820px) { .lehn-maskottchen { --lehn-gap: 14px; } .lehn-maskottchen.lehnt--2 { display: block; } }
@media (max-width: 600px) { .lehn-maskottchen { --lehn-gap: 6px; } .lehn-maskottchen picture { left: calc(-1 * var(--lehn-gap) - 4px); } }
.product-grid:has(.card[hidden]) > .lehn-maskottchen { display: none; }

/* Schieb-Reihe nicht in der ersten Reihe (Celina 03.11.2026): bei drei Spalten stünden davor vier Karten, also eine Lücke;
   dort löst sie sich in normale Karten auf und das Maskottchen ist weg. */
@media (min-width: 821px) and (max-width: 1100px) {
  .schieb-reihe--mitte { display: contents; }
  .schieb-reihe--mitte > .card { grid-column: auto; grid-row: span 5; }
  .schieb-reihe--mitte > :is(.schieb-reihe__maskottchen, .schieb-reihe__umbruch) { display: none; }
}

/* Celina 03.11.2026: Kletter-Maskottchen zwischen zwei Produkten, wie in einem Kamin. Gleiche Reihe wie der Schieber, aber
   das Maskottchen nimmt die ganze Bildhöhe ein und steht oben, mittig oder unten. Das Bild ist so breit, dass der hintere
   Schuh (0.0369 der Bildbreite) an der linken und die Hände (0.9990) an der rechten Bildkante liegen (je 3 px darauf);
   der Faden ragt links ein Stück über das Bild. Bild 1030 × 1258. */
.schieb-reihe--kletter .schieb-reihe__maskottchen { align-self: stretch; }
.schieb-reihe--kletter .schieb-reihe__maskottchen img { position: absolute; width: 103.935%; left: -3.835%; height: auto; max-width: none; }
.kletter--oben .schieb-reihe__maskottchen img { top: 5%; }
.kletter--mitte .schieb-reihe__maskottchen img { top: 50%; transform: translateY(-50%); }
.kletter--unten .schieb-reihe__maskottchen img { bottom: 5%; }
/* Kletterer kleiner (Celina 03.11.2026): Er ist so breit wie der Spalt zwischen den beiden Bildern, also wird der Spalt in
   seiner Reihe schmaler (Desktop höchstens 118 statt 166 px, Handy 13 statt 19 % der Breite). */
.schieb-reihe.schieb-reihe--kletter { --mw: clamp(76px, 8.5%, 118px); }
@media (max-width: 820px) { .schieb-reihe.schieb-reihe--kletter { --mw: 13%; } }

/* Unbestickt (Celina 05.11.2026): Einleitung, Zertifikate, Hinweis auf der Startseite */
.area-head__intro { max-width: 62ch; margin: 0 0 8px; line-height: 1.6; }
.area-head__intro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Handy: kürzere Einleitung (Celina 07.11.2026) */
.area-head__intro-kurz { display: none; }
@media (max-width: 700px) { .area-head__intro-lang { display: none; } .area-head__intro-kurz { display: inline; } }
.zertifikate { padding-block: clamp(28px, 4.5vw, 56px); scroll-margin-top: 220px; }
/* Textilzertifikate zugeklappt, Karten je Standard (Celina 07.11.2026) */
.zert { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.zert__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.6vw, 28px); cursor: pointer; list-style: none; border-radius: 20px; }
.zert__kopf::-webkit-details-marker { display: none; }
.zert__kopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.zert__kopf-text { min-width: 0; }
.zert__titel { margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); letter-spacing: -.01em; line-height: 1.2; }
.zert__unter { display: block; margin-top: 4px; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.zert__pfeil { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform .25s ease; }
.zert__pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zert[open] .zert__pfeil { transform: rotate(180deg); }
.zert__inhalt { padding: 0 clamp(18px, 2.6vw, 28px) clamp(18px, 2.6vw, 28px); }
.zert[open] .zert__inhalt { animation: zert-auf .3s ease both; }
@keyframes zert-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.zert__hinweis { margin: 0 0 16px; color: var(--muted); line-height: 1.55; }
.zert__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.zert__karte { --akzent: var(--blue); min-width: 0; padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.zert__karte--oekotex { --akzent: var(--green); }
.zert__karte--gots { --akzent: #3f7d3a; }
.zert__karte--grs { --akzent: var(--sky); }
.zert__marke { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--akzent); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.zert__was { margin: 12px 0 2px; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.zert__voll { margin: 0 0 10px; color: var(--muted); font-size: .85rem; }
.zert__teile { margin: 0; padding: 0; list-style: none; }
.zert__teile li { padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.4; }
.zert__teile a { color: var(--ink); font-weight: 600; text-decoration: none; }
.zert__teile a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zert__angabe, .zert__nummer { display: block; font-size: .85rem; }
.zert__angabe { margin-top: 2px; }
.zert__nummer { margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
.zert__pruefen { margin: 16px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.zert__pruefen a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .zert__pfeil { transition: none; } .zert[open] .zert__inhalt { animation: none; } }
.zertifikate-liste { margin: 0; padding: 0; list-style: none; }
.zertifikate-liste li + li { margin-top: 10px; }
.zertifikate-liste a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.grundstoffe { padding-block: clamp(30px, 4.5vw, 56px); }
.grundstoffe__kasten { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.grundstoffe__text { flex: 1 1 340px; min-width: 0; }
.grundstoffe__titel { margin: 0 0 6px; font-family: var(--disp); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); letter-spacing: -.01em; }
.grundstoffe__text p { margin: 0; line-height: 1.55; color: var(--ink); }
.grundstoffe__kurz { display: none; }
@media (max-width: 700px) {
  .grundstoffe__lang { display: none; }
  .grundstoffe__kurz { display: inline; }
  .grundstoffe__kasten { flex-direction: column; text-align: center; }
  .grundstoffe__text { flex: 0 0 auto; width: 100%; }
}

/* Haustiere: Animation statt Bild (Celina 05.11.2026), alle Tiere komplett, ohne Beschnitt. Computer: so breit wie das bisherige Bild (Regel --breit oben);
   Handy: etwas breiter als das Bild, damit man die Tiere gut erkennt. */
.area-head__video { width: 100%; height: auto; aspect-ratio: 820 / 276; object-fit: contain; }
@media (max-width: 700px) { .area-head__kopf--haustiere .area-head__maskottchen { flex-basis: 200px; } }