/* =================================================================
   KINDLING & HIDE — design tokens
   Palette (exactly 7 colours, no tints/shades):
   Soft Linen #F4EEE2 · Camel #BFA37C · Coffee Bean #694B33
   Ash Grey #ADBDA3 · Pine Teal #324E3F · Pale Sky #AAC6D2 · Jet Black #223644
   ================================================================= */

:root{
  /* colour */
  --linen:  #F4EEE2;
  --camel:  #BFA37C;
  --coffee: #694B33;
  --ash:    #ADBDA3;
  --pine:   #324E3F;
  --sky:    #AAC6D2;
  --black:  #223644;
  --white: #FFFFFF;

  --bg:            var(--white);
  --bg-panel:      var(--sky);
  --surface:       var(--ash);
  --ink:           var(--pine);
  --ink-soft:      var(--coffee);
  --burn:          var(--black);
  --wood-walnut-l: var(--camel);   --wood-walnut-d: var(--coffee);
  --wood-maple-l:  var(--ash);     --wood-maple-d:  var(--camel);
  --wood-pine-l:   var(--sky);     --wood-pine-d:   var(--pine);
  --leather-l:     var(--camel);   --leather-d:     var(--coffee);
  --metal-l:       var(--sky);     --metal-d:       var(--black);
  --cork-l:        var(--linen);   --cork-d:        var(--camel);
  --steel:         var(--pine);
  --steel-soft:    var(--sky);
  --laser:         var(--pine);
  --brass:         var(--camel);
  --line:          rgba(34,54,68,0.16);   /* Jet Black, alpha only — not a new colour */
  --shadow:        0 12px 30px rgba(34,54,68,0.14); /* Jet Black, alpha only */

  --font-light-light:    "cardenio modern", ui-monospace, monospace;
  --font-heavy: "cardenio modern", bold;
  --font-light: "cardenio modern", ui-monospace, monospace;

  --radius: 4px;
  --wrap: 1180px;
}

/* =================================================================
   RESET & BASE
   ================================================================= */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; font-size:140%; } /* 16px → 18px, alles skaliert proportional mit */
body{
  margin:0;
  background:var(--white);
  background-color: var(--white);
  color:var(--ink);
  font-family:var(--font-light);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  caret-color:transparent;
}
input, textarea, [contenteditable="true"]{
  user-select:text;
  caret-color:auto;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--font-heavy); font-weight:600; line-height:1.1; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bg);
  padding:10px 16px; z-index:200;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--laser); outline-offset:2px; }

.eyebrow{
  font-family:var(--font-light-light);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coffee);
  margin:0 0 .6em;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-heavy); font-weight:600; font-size:.95rem;
  padding:.85em 1.6em;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  text-decoration:none;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ash); color:var(--pine); }
.btn-primary:hover{ background:var(--pine); color:var(--ash); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ border-color:var(--laser); color:var(--laser); }
.btn-block{ width:100%; }
.link-btn{
  background:none; border:none; padding:0; color:var(--steel);
  font-size:.85rem; text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{ color:var(--laser); }

/* =================================================================
   HEADER
   ================================================================= */
.site-header{
  position:sticky; top:0; z-index:80;
  background:var(--white); /* Soft Linen, alpha only */
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{ padding-left: 0px; padding-right: 0px; width: 100vw; display:flex; align-items:center; gap:24px; padding-top:14px !important; padding-bottom:19px !important;  background-color: var(--white);}
.logo{ display:flex; align-items:center; text-decoration:none; margin-right:auto; }
.logo-mark{ color:var(--laser); display:inline-flex; }
.logo-image{ width:120px; max-width:100%; height:auto; object-fit:contain; display:block; border-radius:10px; }
.logo-text{ font-family:var(--font-heavy); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.logo-text em{ font-style:normal; color:var(--laser); }

.main-nav{ display:flex; gap:28px;}
.main-nav a{ text-decoration:none; font-size:.92rem; font-weight:500; position:relative; padding:4px 0; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--laser);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.cart-btn{
  position:relative; background:none; border:none; color:var(--ink);
  display:flex; align-items:center; padding:6px;
}
.cart-count{
  position:absolute; top:-2px; right:-4px; background:var(--laser); color:var(--bg);
  font-family:var(--font-light-light); font-size:.65rem; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:20px; height:2px; background:var(--ink); display:block; }

/* =================================================================
   HERO
   ================================================================= */
.hero{ padding:64px 0 84px; }
.hero-inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.hero-title{ font-size:clamp(2.2rem, 4.95vw, 3.4rem); letter-spacing:-.01em; }
.ink-underline{
  background-image:linear-gradient(var(--laser), var(--laser));
  background-repeat:no-repeat; background-size:100% 3px; background-position:0 92%;
}
.hero-sub{ max-width:46ch; color:var(--coffee); font-size:1.05rem; margin-bottom: 0px;}
.hero-sub-two{ max-width:46ch; color:var(--coffee); font-size:1.05rem;}
.hero-actions{ display:flex; gap:14px; margin:1.6em 0 2em; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; margin:0; padding-top:22px; border-top:1px solid var(--coffee); }
.hero-stats dt{ font-family:var(--font-light-light); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--coffee); margin-bottom:.3em; }
.hero-stats dd{ margin:0; font-size:.88rem; max-width:20ch; color:var(--coffee); }

.laser-panel{
  position:relative; aspect-ratio:3/2; border-radius:var(--radius);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  top: -35px;
}
.panel-swatch{ height:100%; }
.laser-panel > .hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.panel-wood{ background:var(--wood-walnut-l);
  background-image:
    repeating-linear-gradient(100deg, rgba(34,54,68,.10) 0 1px, transparent 1px 7px);
  background-color:var(--wood-walnut-d);
}
.panel-leather{ background-color:var(--leather-d);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(244,238,226,.10) 0 1px, transparent 1.4px) 0 0/9px 9px;
}
.laser-trace{
  position:absolute; inset:0; margin:auto; width:62%; height:62%;
  overflow:visible;
}
.product-media,
.cart-item-thumb,
.modal-preview-shape{
  position:relative;
}
.product-media .laser-trace,
.cart-item-thumb .laser-trace,
.modal-preview-shape .laser-trace{
  position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto;
  margin:0; width:62%; height:62%;
}
.laser-trace path{
  fill:none; stroke:var(--burn); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:trace 2.6s ease forwards;
  filter:drop-shadow(0 0 0 rgba(50,78,63,0));
}
.laser-trace path:nth-child(1){ animation-delay:.1s; }
.laser-trace path:nth-child(2){ animation-delay:.9s; }
.laser-trace path:nth-child(3){ animation-delay:1.5s; }
.laser-trace path:nth-child(4){ animation-delay:1.6s; }
.laser-trace path:nth-child(5){ animation-delay:1.7s; }
.laser-trace path:nth-child(6){ animation-delay:1.8s; }
@keyframes trace{
  0%{ stroke-dashoffset:1; filter:drop-shadow(0 0 3px var(--laser)); }
  85%{ filter:drop-shadow(0 0 3px var(--laser)); }
  100%{ stroke-dashoffset:0; filter:drop-shadow(0 0 0 rgba(50,78,63,0)); }
}
.laser-dot{ fill:var(--laser); opacity:0; }

/* =================================================================
   SECTION HEAD (shared)
   ================================================================= */
.section-head{ max-width:70vw; margin-bottom:40px; }
.section-head h2{ font-size:clamp(1.6rem, 3.4vw, 2.2rem); }

/* =================================================================
   SHOP GRID
   ================================================================= */
.shop{ padding:70px 0; }
.product-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.product-group{ margin-top:58px; }
.product-group:first-child{ margin-top:0; }
.page-under-title{ font-family:var(--font-light-light); font-size:.85rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin:0 0 20px; padding-bottom:10px; border-bottom:2px solid var(--pine); }
.product-card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.product-media{
  position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
}
.product-media svg{ width:52%; height:52%; }
.product-media .laser-trace{ width:52%; height:52%; }
.product-media > .product-image{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:10%; object-fit:contain;
}
.product-media--image{ background:transparent; overflow:hidden; }
.product-media--image > .product-image{ padding:0; }
.product-media.has-product-image > svg{ display:none; }
.product-media .laser-trace path{ animation-play-state:paused; stroke-dashoffset:0; }
.product-card:hover .product-media .laser-trace path{
  animation:trace 1.3s ease forwards; animation-play-state:running;
}
.shape-circle{ border-radius:50%; width:70%; height:70%; }
.shape-tag{ border-radius:8px; width:64%; height:78%; position:relative; }
.shape-rect{ border-radius:3px; width:82%; height:66%; }

.product-info{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:.35em; flex:1; }
.product-mat{ font-family:var(--font-light-light); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.product-info h3{ font-size:1.05rem; margin-bottom:.15em; }
.product-size{ font-family:var(--font-light-light); font-size:.78rem; color:var(--ink-soft); margin-bottom:.6em; }
.product-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-price{ font-family:var(--font-light-light); font-weight:500; font-size:1rem; }
.product-row .btn{ padding:.6em 1.1em; font-size:.85rem; }

/* =================================================================
   PROCESS
   ================================================================= */
.process{ padding:70px 0; background:var(--bg); }
.process-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; counter-reset:step; list-style:none; padding-left: 0; }
.process-steps li{ border-top:2px solid var(--brass); padding-top:18px; }
.process-steps li > span{ font-family:var(--font-light-light); color:var(--laser); font-size:.85rem; display:block; margin-bottom:.6em; }
.process-steps h3{ font-size:1.15rem; }
.process-steps p{ color:var(--ink-soft); font-size:.94rem; }
.process-steps h2{font-size: 1.30rem; color:var(--coffee); }

/* =================================================================
   CUSTOM SECTION
   ================================================================= */
.custom{ padding:80px 0; }
.custom-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.mini-canvas-mock{
  position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  aspect-ratio:1/1; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
}
.laser-trace--custom{ width:70%; height:70%; }
.laser-trace--custom path{ animation-duration:3.4s; }
.laser-trace--custom path:nth-child(2){ animation-delay:1.3s; }
.mini-canvas-toolbar{ position:absolute; bottom:16px; left:16px; display:flex; gap:8px; }
.mini-canvas-toolbar .dot{ width:14px; height:14px; border-radius:50%; display:block; }
.dot--ink{ background:var(--burn); }
.dot--outline{ border:1.5px solid var(--line); }
.custom-copy h2{ margin-bottom:.5em; }
.custom-list{ margin:1em 0 1.6em; display:flex; flex-direction:column; gap:.5em; }
.custom-list li{ padding-left:1.3em; position:relative; font-size:.94rem; color:var(--ink-soft); }
.custom-list li::before{ content:"—"; position:absolute; left:0; color:var(--laser); }

/* =================================================================
   ABOUT / MATERIALS
   ================================================================= */
.about{ padding:70px 0 90px; background:var(--bg-panel); }
.material-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.material-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.material-card h3{ font-size:1.05rem; }
.material-card p{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.about-note{ margin-top:28px; font-size:.85rem; color:var(--ink); max-width:70ch; font-family:var(--font-light-light); }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{ background:var(--ink); color:var(--bg); padding:50px 0 0; }
.footer-inner{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid rgba(244,238,226,.15); }
.footer-logo{ color:var(--bg); margin-bottom:.3em; }
.footer-logo em{ color:var(--sky); font-style:normal; }
.footer-tagline{ color:rgba(244,238,226,.7); margin:0; }
.footer-contact a{ text-decoration:none; font-weight:500; }
.footer-note{ font-size:.82rem; color:rgba(244,238,226,.6); max-width:34ch; }
.site-footer p, .site-footer a{ line-height:1.65 !important; }
.site-footer p{ margin-bottom:.4em !important; }
.site-footer .footer-bottom p{ margin:0 !important; }
.footer-contact a{ display:inline-block; margin-bottom:0; }
.footer-logo{ margin-bottom:.4em !important; }
.site-footer .footer-bottom{ padding:32px 24px !important; font-size:.8rem; color:rgba(244,238,226,.55); }

/* =================================================================
   MODAL (customize + checkout)
   ================================================================= */
.modal-backdrop, .drawer-backdrop{
  position:fixed; inset:0; background:rgba(34,54,68,.55); z-index:100;
}
.modal{
  position:fixed; z-index:101; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-inner{
  background:var(--bg); width:min(880px, 100%); max-height:70vh; overflow-y:auto; overflow-x:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow); position:relative;
  display:grid; grid-template-columns:.8fr 1.2fr;
}
.modal-inner--checkout{ display:block; max-width:520px; padding:36px 34px; }
.modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  font-size:0; line-height:1; color:var(--ink); z-index:5;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.modal-close::before, .modal-close::after{
  content:""; position:absolute; width:14px; height:1.5px; border-radius:2px; background:currentColor;
}
.modal-close::before{ transform:rotate(45deg); }
.modal-close::after{ transform:rotate(-45deg); }
.modal-close:hover{ background:var(--laser); border-color:var(--laser); color:var(--bg); }
.modal-close:focus-visible{ outline:2px solid var(--laser); outline-offset:3px; }

.modal-preview{ background:var(--white); border-right: 1px solid var(--coffee); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; gap:14px;
  margin: 10px;
  max-height: 70vh;
  overflow:hidden;
}
@media (min-width:981px){
  .modal-inner{ max-height:calc(100vh - 40px); }
  .modal-preview{ position:sticky; top:10px; align-self:start; height:calc(100% - 20px); max-height:calc(100vh - 60px); }
}
.modal-preview-shape{ position:relative; width:90%; aspect-ratio:1/1; overflow:hidden; background:transparent; display:flex; align-items:center; justify-content:center; }
.modal-preview-shape > .product-image{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; }
.bone-text-preview{ position:absolute; z-index:2; top:50%; left:50%; width:68%; transform:translate(-50%,-50%); color:var(--black); font-size:.85rem; line-height:1.15; text-align:center; overflow-wrap:anywhere; pointer-events:none; }
.puzzle-text-preview{ width:38%; }
.puzzle-text-preview[data-side="front"]{ left:28%; top:54%; }
.puzzle-text-preview[data-side="back"]{ left:72%; top:28%; }
.modal-preview-shape.has-product-image > svg{ display:none; }
.modal-preview-shape .laser-trace{ width:60%; height:60%; }
.modal-preview-shape svg{ width:60%; height:60%; }
.modal-preview-caption{ font-family:var(--font-light-light); font-size:.78rem; color:var(--ink-soft); margin:0; }
.product-gallery{width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.product-gallery-item{
  min-width:0; padding:5px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); color:var(--ink); cursor:pointer; text-align:center;
}
.product-gallery-item img{ display:block; width:100%; aspect-ratio:1; object-fit:contain; }
.product-gallery-item span{ display:block; overflow:hidden; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.product-gallery-item.is-active{ border-color:var(--laser); box-shadow:0 0 0 1px var(--laser); }
.product-gallery-item:focus-visible{ outline:2px solid var(--laser); outline-offset:2px; }
.product-lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 3vw, 40px); background:rgba(34,54,68,.88);
}
.product-lightbox[hidden]{ display:none; }
.product-lightbox-image{ width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.product-lightbox-close{ top:20px; right:24px; color:var(--bg); border-color:rgba(244,238,226,.65); }
.product-lightbox-close:hover{ background:var(--laser); border-color:var(--laser); }
.product-lightbox-prev, .product-lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:56px;
  border:1px solid rgba(244,238,226,.55); border-radius:var(--radius); background:rgba(34,54,68,.28);
  color:var(--bg); font-size:2.2rem; line-height:1; cursor:pointer;
}
.product-lightbox-prev{ left:20px; }
.product-lightbox-next{ right:20px; }
.product-lightbox-prev:hover, .product-lightbox-next:hover{ background:var(--laser); border-color:var(--laser); }
.product-lightbox-prev:focus-visible, .product-lightbox-next:focus-visible{ outline:2px solid var(--bg); outline-offset:3px; }

.modal-preview, .modal-body{ min-width:0; }
.modal-body{ padding:32px 34px 34px; min-width:0; }
.modal-body--predefined .design-fieldset{ display:none; }
.modal-body--predefined .qty-row{ margin-top:clamp(2rem, 6vh, 3rem); }
@media (min-width:781px){
  .modal-body--predefined{ display:flex; flex-direction:column; }
  .modal-body--predefined .qty-row{ margin-top:auto; }
}
.modal-price{ font-family:var(--font-light-light); font-size:1.1rem; margin-bottom:1.1em; }
.modal-sub{ color:var(--ink-soft); font-size:.9rem; }

.design-fieldset{ border:none; padding:0; margin:0 0 1.4em; }
.design-options{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; min-width:0; }
.design-option{ position:relative; min-width:0; }
.design-option input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.design-option-card{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:10px 6px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.design-option-card span{ font-size:.72rem; color:var(--ink-soft); }
.design-option input:checked + .design-option-card{ border-color:var(--laser); background:var(--bg-panel); }
.design-option input:focus-visible + .design-option-card{ outline:2px solid var(--laser); outline-offset:2px; }
.design-option-card.is-custom svg{ color:var(--steel); }
.name-text-field{ grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--ink-soft); }
.name-text-field input{ width:100%; padding:.7em .8em; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; }
.name-text-field input:focus{ border-color:var(--laser); outline:2px solid rgba(50,78,63,.18); outline-offset:1px; }
.name-font-options{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.name-font-option .design-option-card{ height:100%; padding:8px; }

.custom-panel{ border:1px dashed var(--line); border-radius:var(--radius); padding:18px; margin-bottom:1.4em; min-width:0; }
.product-side-selector{ margin-bottom:14px; }
.bone-font-fieldset{ border:0; padding:0; margin:16px 0 0; min-width:0; }
.bone-font-fieldset legend{ padding:0; margin-bottom:8px; font-size:.85rem; color:var(--ink-soft); }
.bone-font-options{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.bone-font-options label{ min-width:0; display:flex; align-items:flex-start; gap:6px; padding:8px; border:1px solid var(--line); border-radius:var(--radius); font-size:.72rem; line-height:1.25; }
.bone-font-options input{ flex:0 0 auto; margin:2px 0 0; }
.bone-font-options span{ overflow-wrap:anywhere; }
.bone-font-options input:checked + span{ color:var(--ink); font-weight:600; }
.bone-font-options .bone-custom-font-field{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:0; border:0; font-size:.85rem; color:var(--ink-soft); }
.bone-custom-font-field input{ width:100%; padding:.7em .8em; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; }
.custom-font-entry #custom-font-status, .bone-custom-font-field #bone-custom-font-status{ min-height:1.2em; font-size:.76rem; color:var(--ink-soft); }
.custom-tabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.custom-tab{
  background:none; border:1px solid var(--line); border-radius:20px; padding:.4em 1em;
  font-size:.82rem; color:var(--ink-soft);
}
.custom-tab.is-active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.custom-tab:disabled{ opacity:.42; cursor:not-allowed; text-decoration:line-through; text-decoration-thickness:1.5px; }

.upload-drop{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1.5px dashed var(--steel); border-radius:var(--radius); padding:26px 14px;
  font-size:.88rem; color:var(--ink-soft); cursor:pointer; min-height:100px;
}
.upload-drop:hover{ border-color:var(--laser); color:var(--laser); }
.upload-drop.is-disabled{ opacity:.48; cursor:not-allowed; pointer-events:none; }
.upload-drop.is-dragover{ border-color:var(--laser); background:var(--bg-panel); }
.upload-preview{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.upload-preview img{ width:76px; height:76px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); }

.draw-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; min-width:0; }
.draw-tools{ display:flex; gap:6px; flex-wrap:wrap; }
.tool-btn{
  border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:.35em .8em;
  font-size:.76rem; color:var(--ink-soft); cursor:pointer;
}
.tool-btn.is-active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.tool-btn:disabled{ opacity:.45; cursor:not-allowed; }
.brush-label{ font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; flex-shrink:0; }
#eraser-size{ width:86px; }
#selection-scale{ width:120px; max-width:30vw; }
.selection-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
#draw-canvas{
  width:100%; aspect-ratio:1/1; background:var(--bg-panel); border-radius:var(--radius);
  border:1px solid var(--line); touch-action:none; cursor:crosshair;
}
#draw-canvas.is-disabled{ opacity:.48; cursor:not-allowed; }
#draw-canvas.is-tag-format{ aspect-ratio:3 / 4; }
.draw-hint{ font-size:.78rem; color:var(--ink); margin:.6em 0 0; }

.qty-row{ display:flex; align-items:center; justify-content:space-between; margin:1.2em 0; }
.qty-row label{ font-size:.85rem; color:var(--ink-soft); }
.qty-control{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.qty-control button{ background:var(--bg-panel); border:none; width:32px; height:32px; font-size:1rem; }
.qty-control input{ width:44px; text-align:center; border:none; font-family:var(--font-light-light); background:var(--bg); }

.form-error{ color:var(--laser); font-size:.84rem; margin-bottom:1em; }

/* checkout form */
#checkout-form{ display:flex; flex-direction:column; gap:14px; margin-top:1.2em; }
#checkout-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--ink-soft); }
#checkout-form input, #checkout-form textarea{
  font-family:var(--font-light); font-size:.94rem; padding:.7em .8em; border:1px solid var(--camel);
  border-radius:var(--radius); background:var(--bg); color:var(--ink); resize:vertical;
}
#discount-apply{
  background:var(--camel); color:var(--coffee); border:1.5px solid var(--camel);
  padding:.7em 1.1em; font-size:.85rem; white-space:nowrap;
}
#discount-apply:hover{ background:var(--coffee); border-color:var(--coffee); color:var(--camel); }
  #checkout-form input:focus, #checkout-form textarea:focus{ border-color:var(--laser); }
.optional{ font-size:.75rem; color:var(--ink); font-weight:400; }

#checkout-form select{
  font-family:var(--font-light); font-size:.94rem; padding:.7em .8em; border:1px solid var(--camel);
  border-radius:var(--radius); background:var(--bg); color:var(--ink);
}
#checkout-form select:focus{ border-color:var(--laser); }
.address-fieldset{ border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.address-fieldset legend{ padding:0; margin-bottom:6px; font-size:.85rem; color:var(--ink-soft); }
.address-row{ display:grid; gap:14px; }
.address-row--street{ grid-template-columns:2fr 1fr; }
.address-row--city{ grid-template-columns:1fr 2fr; }
.address-error{ min-height:1.1em; font-size:.76rem; color:var(--coffee); font-weight:600; }

.order-summary{
  white-space:pre-wrap; background:var(--bg-panel); border-radius:var(--radius); padding:16px;
  font-family:var(--font-light-light); font-size:.8rem; max-height:220px; overflow-y:auto; margin:1em 0;
}
.order-downloads{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.4em; }
.order-downloads a{
  font-family:var(--font-light-light); font-size:.78rem; text-decoration:underline; text-underline-offset:3px;
}
#order-number{ color:var(--laser); }

/* =================================================================
   CART DRAWER
   ================================================================= */
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 100%); background:var(--bg);
  z-index:101; box-shadow:-14px 0 30px rgba(34,54,68,.18); display:flex; flex-direction:column;
}
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-drawer-head h2{ margin:0; font-size:1.15rem; }
.cart-drawer-head .modal-close{ position:static; flex:0 0 32px; }
.cart-body{ flex:1; overflow-y:auto; padding:14px 22px; }
.cart-empty{ text-align:center; padding:60px 10px; color:var(--ink-soft); }
.cart-item{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item-thumb{ width:76px; height:76px; border-radius:var(--radius); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item-side-thumbs{ display:flex; gap:2px; width:100%; height:100%; }
.cart-item-side-thumbs img{ width:calc(50% - 1px); height:100%; object-fit:contain; }
.cart-item-thumb img.cart-item-product-image{ object-fit:contain; padding:4px; }
.cart-item-thumb .laser-trace{ width:70%; height:70%; }
.cart-item-thumb svg{ width:70%; height:70%; }
.cart-item-info{ flex:1; }
.cart-item-info h4{ margin:0 0 2px; font-size:.92rem; font-family:var(--font-heavy); }
.cart-item-meta{ font-size:.76rem; color:var(--ink-soft); font-family:var(--font-light-light); margin-bottom:6px; }
.cart-item-controls{ display:flex; align-items:center; gap:10px; }
.cart-item-controls .qty-control{ transform:scale(.9); transform-origin:left center; }
.cart-item-price{ font-family:var(--font-light-light); font-size:.85rem; margin-left:auto; }
.cart-item-remove{ background:none; border:none; color:var(--ink); font-size:.76rem; text-decoration:underline; padding:0; }
.cart-item-remove:hover{ color:var(--laser); }
.cart-item-download{ display:inline-block; margin-right:8px; font-size:.72rem; }

.cart-foot{ padding:18px 22px 22px; border-top:1px solid var(--line); }
.cart-subtotal{ display:flex; justify-content:space-between; font-family:var(--font-light-light); margin-bottom:14px; font-size:1rem; }

/* =================================================================
   TOAST
   ================================================================= */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%, 20px);
  background:var(--ink); color:var(--bg); padding:.8em 1.4em; border-radius:var(--radius);
  font-size:.88rem; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:200;
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* =================================================================
   REVEAL ON SCROLL
   ================================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =================================================================
   HINWEIS-POP-UP (ersetzt alert)
   ================================================================= */
.kh-notice-backdrop{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(34,54,68,.65);
  animation:kh-fade .25s ease;
}
.kh-notice{
  width:min(480px, 100%);
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(34,54,68,.4);
  padding:34px 34px 30px;
  text-align:center;
  animation:kh-pop .3s ease;
}
.kh-notice-eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coffee); margin:0 0 .5em; padding-bottom: 15px;
}
#kh-notice-text{
  font-size:1.15rem; color:var(--ink); margin:0 0 .6em;
}
#kh-notice-text strong{ color:var(--pine); }
.kh-notice-thanks{
  font-size:.95rem; color:var(--pine); margin:0 0 1.6em;
}
.kh-notice .btn:focus-visible{ outline:none; }

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* ---------- Tablet quer: schmalere Seitenränder ---------- */
@media (min-width: 981px) and (max-width: 1400px){
  .wrap{ max-width:100%; padding:0 14px; }
}

/* ---------- Tablet & kleiner ---------- */
@media (max-width: 980px){
  html{ font-size:125%; }
  .header-inner{ width:100%; padding-left:14px; padding-right:14px; }

  .hero{ padding:40px 0 56px; }
  .hero-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-visual{ order:-1; width:100%; max-width:100%; margin:0 auto; }
  .laser-panel{ top:0; }

  .section-head{ max-width:100%; margin-bottom:28px; }
  .shop, .process{ padding:48px 0; }
  .custom{ padding:56px 0; }
  .about{ padding:48px 0 60px; }

  .product-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .product-group{ margin-top:44px; }
  .process-steps{ grid-template-columns:1fr; gap:22px; }
  .custom-inner{ grid-template-columns:1fr; }
  .custom-visual{ max-width:340px; margin:0 auto; }
  .material-grid{ grid-template-columns:1fr; }

  .modal{ padding:12px; }
  .modal-inner{ grid-template-columns:1fr; max-height:calc(100vh - 24px); }
  .modal-preview{
    padding:16px; margin:10px 10px 0; max-height:none;
    border-right:0; border-bottom:1px solid var(--coffee);
  }
  .modal-preview-shape{ width:70%; }
}

/* ---------- Handy ---------- */
@media (max-width: 680px){
  html{ font-size:112.5%; }
  .wrap{ padding:0 18px; }
  .header-inner{ padding-left:18px; padding-right:18px; gap:14px; padding-bottom: 15px !important; }
  .logo-image{ width:96px; }

  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--white);
    flex-direction:column; padding:16px 24px; border-bottom:1px solid var(--line);
    display:none; gap:14px;
  }
  .main-nav.is-open{ display:flex; }
  .nav-toggle{ display:flex; }

  .hero{ padding:28px 0 44px; }
  .hero-title{ font-size:clamp(1.9rem, 8vw, 2.4rem); }
  .hero-visual{ max-width:100%; }
  .hero-stats{ gap:24px; flex-wrap:wrap; }

  .product-grid{ grid-template-columns:1fr; }
  .design-options{ grid-template-columns:repeat(2,1fr); }
  .name-font-options{ grid-template-columns:repeat(2,1fr); }
  .bone-font-options{ grid-template-columns:1fr; }

  .modal-body{ padding:22px 20px 24px; }
  .modal-inner--checkout{ padding:28px 20px; }
  .custom-panel{ padding:14px; }
  .modal-preview-shape{ width:80%; }

  .cart-drawer{ width:100%; }
  .cart-drawer-head, .cart-foot{ padding-left:18px; padding-right:18px; }
  .cart-body{ padding:10px 18px; }
  .cart-item-thumb{ width:64px; height:64px; }

  .product-lightbox-prev, .product-lightbox-next{ width:36px; height:48px; }
  .product-lightbox-prev{ left:8px; }
  .product-lightbox-next{ right:8px; }

  .kh-notice{ padding:26px 22px 24px; }
  #kh-notice-text{ font-size:1.05rem; }

  .toast{ max-width:calc(100% - 32px); text-align:center; }
  .footer-inner{ flex-direction:column; }
  .site-footer .footer-bottom{ padding:32px 18px !important; }
}